본문 바로가기

전체 글154

캐시 vs 쿠키 캐시 vs 쿠키 캐시(Cache)와 쿠키(Cookie)는 모두 웹 브라우저와 서버 간의 데이터 저장 및 관리를 통해 성능과 사용자 경험을 향상시키기 위한 기술이지만, 사용 목적과 작동 방식에 차이가 있습니다.1. 캐시(Cache)정의웹 브라우저 또는 프록시 서버에 저장된 데이터로, 자주 사용하는 리소스(HTML, CSS, JavaScript, 이미지 등)를 저장하여 재사용합니다.주로 성능 최적화와 네트워크 사용량 감소를 목표로 합니다.특징용도: 리소스 로드 속도를 개선하고, 네트워크 트래픽을 줄임.저장 위치: 브라우저 캐시, 서버 캐시, CDN 캐시 등 다양한 계층에서 관리.수명: HTTP 헤더(Cache-Control, Expires)를 통해 제어.데이터 크기: 비교적 큰 데이터(이미지, 동영상 등) .. 2024. 12. 31.
웹페이지 성능 최적화 웹 페이지의 성능 최적화를 위해 사용되는 HTML과 JavaScript의 로딩 전략 웹 페이지의 성능 최적화를 위해 사용되는 HTML과 JavaScript의 로딩 전략을 설명하겠습니다. async, defer, preload, prefetch, 그리고 **이미지 지연 로딩(lazy loading)**은 각기 다른 목적과 동작 방식을 가지고 있습니다.1. async 속성개요비동기적으로 스크립트를 로드.HTML 파싱과 스크립트 다운로드가 동시에 진행됩니다.스크립트 다운로드가 완료되면 즉시 실행되므로 실행 순서는 보장되지 않습니다.동작 방식스크립트 다운로드와 HTML 파싱이 병렬로 진행.스크립트가 로드되면 HTML 파싱이 중단되고, 스크립트 실행.스크립트 실행이 완료되면 HTML 파싱 재개.사용 예장점HTML.. 2024. 12. 31.
PerformanceAPI PerformanceAPI Performance API는 웹 브라우저에서 애플리케이션의 성능을 측정하고 분석할 수 있도록 도와주는 API입니다. 이 API를 사용하면 페이지 로드 시간, 자원 로딩 시간, 사용자 인터랙션 지연 시간 등을 측정하여 성능 병목 현상을 파악할 수 있습니다.주요 구성 요소와 사용법Performance 인터페이스performance 객체를 통해 접근할 수 있습니다.performance.now(): 고해상도 타이머로 현재 시간을 밀리초 단위로 반환합니다.예: const start = performance.now();performance.timeOrigin: 페이지 로드가 시작된 기준 시간(Unix epoch)을 반환합니다.타이밍 데이터Navigation Timing:페이지 로드 성능.. 2024. 12. 31.
ChatGPT 사용법과 활용예시 ChatGPT 사용법과 활용예시 ChatGPT는 다양한 용도로 활용할 수 있는 대화형 인공지능 모델입니다. ChatGPT 사용법질문하기: 궁금한 내용을 질문하면 간단하거나 상세한 답변을 받을 수 있습니다.예) "양자역학이란 무엇인가요?" 또는 "이탈리아 여행지 추천해주세요."문서 작성: 이메일, 보고서, 소설, 블로그 글 등 다양한 텍스트를 작성하는 데 도움을 받을 수 있습니다.예) "취업 면접 후 보내는 감사 이메일 예시 작성해주세요."코딩 도움: 코드 작성, 디버깅, 알고리즘 설명 등을 요청할 수 있습니다.예) "파이썬으로 퀵 정렬 코드를 작성해주세요."번역 및 언어 학습: 여러 언어 간 번역, 문장 교정, 언어 학습에 활용할 수 있습니다.예) "이 문장을 영어로 번역해주세요: '오늘 날씨가 참 좋네.. 2024. 12. 29.
Querystring QueryString QueryString(쿼리 문자열) 개념**QueryString(쿼리 문자열)**은 URL에서 데이터를 전달하기 위해 사용되는 문자열입니다. 이는 일반적으로 URL의 끝에 붙으며, ?로 시작하고, 여러 개의 키-값 쌍이 &로 연결되어 있습니다. 웹 애플리케이션은 QueryString을 사용하여 서버와 클라이언트 간 데이터를 주고받거나 특정 페이지를 동적으로 구성합니다.QueryString의 구조URL에서 QueryString은 다음과 같은 구조를 가집니다:https://example.com/page?key1=value1&key2=value2?: QueryString의 시작을 나타냄.key1=value1: 첫 번째 키-값 쌍.&: 여러 키-값 쌍을 구분.key2=value2: 두 번째.. 2024. 12. 29.
[HTTP 보안]CORS [HTTP 보안]CORS CORS(Cross-Origin Resource Sharing)**CORS(Cross-Origin Resource Sharing)**는 웹 브라우저에서 한 출처(origin)의 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 제어하는 메커니즘입니다. 기본적으로 브라우저는 **Same-Origin Policy(SOP)**라는 보안 정책을 따르는데, SOP는 다른 출처 간의 리소스 요청을 제한합니다. CORS는 이 제한을 완화할 수 있도록 설계된 표준입니다.CORS가 필요한 이유웹 애플리케이션은 종종 다른 출처의 API나 리소스(이미지, 글꼴, 데이터 등)에 접근해야 합니다. 예를 들어:클라이언트가 http://example.com에서 실행 중인데, 서버가 https://api.. 2024. 12. 29.

티스토리툴바