본문 바로가기

프론트엔드/개발 기초 지식14

성능 향상을 위해 시도할 수 있는 방법 최종 수정: 2025.06.12성능 향상을 위해 시도할 수 있는 방법■ 렌더링 최적화 (Redering Performance)1. 컴포넌트 재렌더링 최소화React.memo(): props가 바뀌지 않으면 리렌더링 방지useMemo, useCallback: 계산 결과 or 함수 캐싱상태(state)를 가능한 상위에서 분리context API 대신 props 전달 or 전역 상태관리 라이브러리 사용 2. 서버 컴포넌트 활용서버 컴포넌트는 클라이언트로 JS번들을 전송하지 않아 더 빠른 초기 렌더링 가능하다.■ 정적 렌더링과 캐싱 활용1. SSG2. ISR 3. CDN 캐싱정적 자산을 CDN에 캐싱(Clodflare, Vercel 등에서는 자동 지원 된다.)■ 이미지 최적화1. Image 컴포넌트 사용자동 사.. 2025. 6. 12.
브라우저의 동작 원리 최종 수정: 2025.06.04브라우저의 동작 원리■ 브라우저웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어이다. Chrome, Safari, Firefox, Edge 등이 대표적인 브라우저이다. 브라우저는 여러 개의 독립적인 프로세스와 컴포넌트로 구성되어 있다. 1. URL 입력부터 페이지 로드까지사용자가 주소창에 URL을 입력하면, DNS 조회를 통해 요청한 페이지의 자원이 어디에 있는지 검색한다. DNS 조회를 통해 HTML 페이지가 있는 IP 주소를 알아낸다. 이를 기반으로 브라우저는 서버와 TCP 핸드셰이크를 통해 연결을 설정한다. 연결이 성립되고 나면, 브라우저는 HTTP GET request를 보내고, 서버로부터 데이터를 받으면, 수신된 정보를 분석하게 화면에 .. 2025. 6. 4.
클라이언트 측 캐싱과 서버 측 캐싱 최종 수정: 2025.05.28 클라이언트 측 캐싱과 서버 측 캐싱 캐시 무효화는 항상 중요한 문제이다. 데이터가 변경되었을 때 관련된 캐시를 적절히 갱신하거나 삭제해야 한다. TTL(Time To Live) 설정, 태그 기반 무효화, 이벤트 기반 무효화 등의 방법을 활용할 수 있다. 일관성과 성능 사이의 균형도 중요하다. 실시간성이 중요한 데이터는 캐시 시간을 짧게 하거나 캐시하지 않는 것이 좋고, 변경이 드문 데이터는 긴 캐시 시간을 설정할 수 있다. 두 캐싱 모두 웹 성능 최적화를 위해 사용되지만, 각각의 위치와 목적, 적용 방식에 차이가 존재한다.■ 클라이언트 측 캐싱 (Client-side Caching)브라우저나 사용자 디바이스가 서버에서 받아온 데이터를 로컬에 저장해 두고, 다음 요청 시 재.. 2025. 5. 28.
세션 기반 인증과 토큰 기반 인증의 차이 최종 수정 : 2025-05-27세션 기반 인증과 토큰 기반 인증 비교■ 서버(세션) 기반 인증세션이란 서버 측에서 저장하는 사용자의 정보에 대한 기록이다. 메모리, 디스크, 데이터베이스 등을 통해 관리한다. 예를 들어, 로그인을 하면 세션에 사용자 정보를 저장하고 이 정보가 필요한 서버를 제공할 때 사용하는 방식이며, 이를 Statfull 서버라 한다. 서버(세션) 기반 인증은 세션(session)과 쿠키(Cookie)가 사용되며 아래와 같은 인증 절차가 진행된다.세션 기반 인증은 세션을 활용한다. 서버에서 세션 정보를 기록한 뒤에 세션을 식별하는 id를 Set-Cookie로 클라이언트에 응답한다. 이후 클라이언트가 서버에 요청할 때 서버에서 응답한 쿠키를 자동으로 포함하게 된다. 그러면 서버는 클라이.. 2025. 5. 27.
Core Web Vitals와 페이지 경험 지표 상세 가이드 최종 수정 : 2025.05.09Core Web VitalsGoogel이 웹페이지의 사용자 경험을 측정하기 위해 정의한 세 가지 핵심 성능 지표이 지표들은 로딩 성능, 상호작용성, 시각적 안정성을 측정한다.1. LCP (Largest Contentful Paing)뷰포트 내에서 가장 큰 콘텐츠 요소(이미지, 텍스트 블록 등)가 화면에 렌더링되는 시점을 측정한다.사용자가 유용하게 로드됨을 인식하는 시점을 나타낸다.좋은 점수: 2.5초 이하주요 영향 요소서버 응답 시간JavaScript와 CSS 차단 리소스리소스 로드 시간(특히 이미지, 비디오)클라이언트 사이드 렌더링최적화 방법 실제 구현 사례이미지 최적화: WebP와 같은 차세대 형식 사용, 적절한 크기로 제공중요 CSS 인라인화: 페이지 렌더링에 필요한.. 2025. 5. 9.

티스토리툴바