프론트엔드/개발 기초 지식12 클라이언트 측 캐싱과 서버 측 캐싱 최종 수정: 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. SEO (Search Engin Optimization) 최종 수정 : 2025.05.09검색 엔진 최적화SEO(Search Engin Optimization)웹사이트가 Goole, Naver, Bing 등의 검색 엔진에서 더 높은 순위에 노출되도록 최적화하는 과정 ■ 중요성가시성 증가: 검색 결과 1페이지에 나타나는 웹사이트는 전체 클릭의 약 95%를 차지합니다.유기적 트래픽: 유료 광고 없이도 지속적인 방문자를 확보할 수 있습니다.신뢰도 향상: 상위 노출은 사용자에게 신뢰감을 줍니다.비용 효율성: 장기적으로 유료 광고보다 비용 효율적입니다.타겟 사용자 접근: 정확한 의도를 가진 사용자에게 도달할 수 있습니다.■ 검색 엔진의 작동 방식크롤링 (Crawling)검색 엔진 봇(ex. 구글봇)이 웹을 돌아다니며 새로운 페이지와 콘텐츠를 발견인덱싱 (Indexin.. 2025. 5. 9. Github Action과 설정방법 (Vercel 버전) 최종 수정 : 2025.05.08■ GitHub ActionsGitHub 저장소에서 직접 CI/CD 워크플로우를 자동화할 수 있는 도구이다. 코드 변경 사항을 커밋하면 자동으로 테스트, 빌드, 배포 등의 작업을 수행할 수 있다.1. Github Action 설정방법1) 워크플로우 파일 생성프로젝트 루트에 .github/workflows 디렉토리 생성cf) github 앞에 ' . '(점)을 꼭 붙여야 한다.2) ci-cd.yml 파일 생성생성한 디렉토리에 파일을 생성한다.(cf. 본인은 pnpm으로 프로젝트를 빌드)(cf. 본인은 Supabase를 사용)# 워크플로우 이름 설정name: CI/CD Pipeline# 워크플로우가 실행될 트리거 설정on: push: branches: [main] #.. 2025. 5. 9. 이전 1 2 3 다음
