본문 바로가기

WEB

(17)

[ WEB ] 웹 프론트엔드 성능 최적화 방법 웹 프론트엔드 개발에서는 사용자 경험을 극대화하기 위해 성능 최적화가 꼭 필요하다고 생각한다. 서비스를 사용할 때, 느린 로딩 속도와 성능이 저하되는 불필요한 자원 낭비는 사용자로 하여금 좋지 않은 경험을 남기고, 이런 경험은 사용자로 하여금 서비스를 이탈하게끔 만드는 주요 원인이라고 생각한다. 이번 포스팅에서는 웹 프론트엔드 성능 최적화에 대해 간단히 알아보려고 한다. 1. 초기 로딩 최적화코드 분할 (Code Splitting): 애플리케이션의 코드베이스를 여러 청크로 나누어 필요한 부분만 로드한다. Webpack, Rollup 등의 번들러에서 dynamic import를 활용하여 필요한 부분에서만 파일을 사용하여 효율성을 높일 수 있다. Lazy Loading: 이미지나 비디오 같은 리소..

[ WEB ] 웹프론트엔드에서 앱 성능 최적화 하는 다양한 방법 웹 프론트엔드에서 어플리케이션의 성능을 최적화할 수 있는 방법은 무엇이 있을까?크게 로딩 성능 최적화와 렌더링 성능 최적화 이렇게 2가지로 나눌 수 있는 것 같다. 로딩 성능 최적화웹프론트에서 로딩 성능을 최적화하는 방법은 다양하다.우선 리소스 최소화 및 압축을 통한 사이즈 감소(JavaScript, CSS, HTML 파일 압축, 이미지 최적화-크기 조정, 압축, webP사용 등)를 통해 앱의 번들 사이즈를 줄일 수도 있고, 캐싱 전략을 구한하여 불필요한 데이터 추가 요청등을 방지할 수도 있다. 캐싱 전략으로는 브라우저 캐싱 설정을 최적화하거나, 서비스 워커를 이용한 오프라인 캐싱, CDN을 통한 리소스 캐싱등이 여기에 속한다. SSR, SSG 등을 사용하여 클라이언트 측 JavaScript 실..

[ WEB ] iOS에서 SVG 이미지가 깨져 보일 때 해결 방법 회사에서 iOS개발 파트에 이슈 티켓이 발행되었는데, AOS에서는 이미지가 정상적인 해상도로 노출되는 반면, iOS 에서는 이미지가 깨져 보이는 이슈가 있었다. 해당 이미지는 SVG 벡터 이미지라 이론상으로 당연히 깨지는 이슈가 없어야 하는 게 맞는데 참 이상했다. iOS개발자 분이 해당 화면은 웹뷰라고 웹프론트 파트에 이슈 티켓을 넘겨주어 함께 찾아보았는데, 구글링을 통해 사파리 웹뷰에서 SVG깨짐 현상이 발생하고 있다는 사실을 알았고, 방법을 찾아보았다. 태그를 이런 식으로 object 태그를 사용하면 간단하게 해결할 수 있다. (, 도 가능) 구글링을 해본 결과 위의 방법이 가장 쉬워 보였다. 하지만 모든 SVG 이미지를 로 사용하기는 실질적으로 어려웠다. (서버에서 이미지..

[ WEB API ] Geolocation API를 통해 위치 정보 가져오기. 브라우저에서 사용자의 위치 정보를 받아오려면 어떻게 해야할까? Geolocation API를 통해서 사용자의 동의를 받아 위치 정보에 접근할 수 있다. 이를통해 웹 애플리케이션에서 사용자의 위치 정보를 받아서 지도에 표시하거나, 사용자의 위치 기반 서비스를 제공할 수 있다. Geolocation API는 navigator.geolocation 을 통해 접근할 수 있다. if ("geolocation" in navigator) { /* 위치정보 사용 가능 */ } else { /* 위치정보 사용 불가능 */ } 브라우저는 사용자에게 위치 정보 권한을 요청하고, 사용자가 동의하면 현재 장치에서 사용 가능한 최선의 방법(GPS등)을 통해 위치 정보를 가져온다. - Geolocation.getCurrentPos..

[ LocalStorage ] localStorage에서 배열(Array)다루기. 최근 작업 할 부분이 client측에서 `localStorage`를 통해 배열을 저장, 수정, 삭제하는 기능을 구현해야 해서 정리해 보았다. (localStorage는 웹 브라우저의 클라이언트 측에 데이터를 저장하는 데 사용되는 웹 스토리지) 1. 배열을 `localStorage`에 저장하기: // 예시 배열 const myArray = [1, 2, 3, 4, 5]; // 배열을 JSON 문자열로 변환하여 localStorage에 저장 localStorage.setItem('myArray', JSON.stringify(myArray)); * localStorage는 value에 문자열만 가능하기 때문에, JSON.stringufy()를 이용하여 배열을 문자로 바꾸어 저장해야한다. 2. `localStor..

[ CSS ] white-space 속성 /* Single keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* white-space-collapse and text-wrap shorthand values */ white-space: collapse balance; white-space: preserve nowrap; /* Global values */ white-space: inherit; white-space: initial; white-space: revert; white-space: revert-layer; white-..

[ CSS ] list-style-type알아보기. list-style은 css속성 중 하나로, HTML의 목록 요소(``, ``, ``)등의 리스트에서 리스트 항목들의 마커(marker) 모양을 지정하는 CSS 속성으로, 텍스트 앞에 사용되는 숫자, 문자, 이미지 등의 마커 모양을 지정할 수 있다. `list-style-type` 속성은 다양한 값을 가질 수 있으며, 일반적으로 다음과 같은 값들이 사용된다. 1. `none` 목록 항목에 마커를 표시하지 않는다. 즉, 번호나 불릿 기호가 나타나지 않는다. 2. `disc` 원형 불릿 기호를 사용한다. (default) 3. `circle` 빈 원 기호를 사용한다. 4. `square` 네모 상자 기호를 사용한다. 5. `decimal` 1부터 시작하여 숫자로 번호를 매긴다. 6. `decimal-lead..

[ WEB ] CSR과 SSR 비교하기 CSR(client-side-rendering)과 SSR(server-side-rendering)은 웹 페이지와 콘텐츠를 사용자에게 렌더링하는 기술이다. SSR과 CSR은 렌더링 과정이 일어나는 위치에서 차이가 있다. CSR (Client-Side-Rendering) CSR은 클라이언트 측에서 렌더링을 하는 기술로 사용자의 웹 브라우저의 JavaScript를 통해 웹 페이지를 렌더링한다. 서버에서 최소한의 HTML 파일을 보내고, 클라이언트 측 JavaScript 코드가 콘텐츠를 가져와 렌더링한다. 이 경우 사용자에게 보다 더 인터렉티브하고 동적인 사용자 경험을 제공할 수 있고 전체 페이지를 다시 로드하지 않고도 콘텐츠를 업데이트할 수 있는 기능이 있다. 하지만 초기 페이지 로딩 시간이 오래 걸리는 경우..

이전 1 2 3 다음

티스토리툴바