성2

웹에서 캐시라는 말은 자주 등장하지만, 정작 캐시를 어떻게 제어하는지는 명확히 정리되지 않은 채 쓰이는 경우가 많다. HTTP 캐시는 Cache-Control 헤더의 디렉티브 조합으로 동작한다. 1. Cache-ControlCache-Control은 HTTP 응답이 어디에서, 얼마나, 어떤 방식으로 캐시될지를 정의하는 헤더다.Cache-Control: max-age=3600 이 헤더는 브라우저뿐 아니라 프록시, CDN 같은 중간 캐시에도 영향을 준다. 2. 캐시 위치에 따른 디렉티브publicCache-Control: public브라우저, 프록시, CDN 모두 캐시 가능정적 리소스에 주로 사용 privateCache-Control: private브라우저만 캐시 가능사용자별 데이터에 적합 3. 캐시 ..

JavaScript에서 모듈은 보통 이렇게 사용한다.import { foo } from './foo.js'; 이 한 줄이 실행되기까지 브라우저 내부에서는 꽤 많은 단계가 거쳐진다. 1. ES ModuleES Module은 JavaScript의 공식 표준 모듈 시스템이다. 파일 단위로 스코프 분리정적 분석 가능import / export 문법 사용 브라우저와 Node.js 모두에서 공통으로 지원되는 구조다. 2. ES Module 로딩 전체 흐름브라우저에서 ES Module은 대략 다음 순서로 처리된다. 모듈 그래프 생성모듈 파싱의존성 해결실행 순서 결정코드 실행 이 과정은 일반 스크립트와 다르게 정적 구조를 기반으로 한다. 2-1. 모듈 그래프 생성 브라우저는 엔트리 모듈을 기준으로 import ..

웹 브라우저에는 다양한 저장 공간이 존재한다. 로컬 스토리지, 세션 스토리지는 익숙하지만, 실제로는 목적과 특성이 전혀 다른 여러 저장소가 함께 존재한다. 1. Web Storage API 1-1. LocalStorage문자열 기반 key-value 저장소브라우저를 닫아도 데이터 유지도메인 단위로 접근 제한 localStorage.setItem('theme', 'dark');localStorage.getItem('theme'); 주로 사용자 설정, 토글 상태같은 단순한 상태 저장에 사용된다. 1-2. SessionStorageLocalStorage와 동일한 API탭이 닫히면 데이터 삭제탭 단위로 독립적인 저장 공간 sessionStorage.setItem('step', '2'); 다단계 폼이나 ..

JavaScript 코드를 실행할 때, 엔진은 코드를 바로 실행하지 않는다. 먼저 해당 코드를 실행하기 위한 환경을 만들고, 그 안에서 코드를 처리한다. 이 실행 환경을 Execution Context(실행 컨텍스트)라고 부른다. 1. 실행 컨텍스트실행 컨텍스트는 JavaScript 코드가 실행되기 위해 필요한 정보들을 모아 둔 객체다. 엔진은 코드를 실행할 때마다 새로운 실행 컨텍스트를 생성하고, 이 컨텍스트를 기준으로 변수를 찾고 함수를 실행한다. 2. 종류JavaScript에는 세 가지 실행 컨텍스트가 있다. Global Execution ContextFunction Execution ContextEval Execution Context(실무에서 거의 사용되지 않음) 이 중 핵심은 Global과..

React를 쓰다 보면 한 번쯤은 이런 코드를 마주친다.useEffect(async () => { const data = await fetchData(); setData(data);}, []); 그리고 곧바로 ESLint 경고나 타입 에러를 만난다. 이 문제는 React 문법 문제가 아니라, useEffect의 실행 모델과 관련돼 있다. useEffect는 무엇을 반환하길 기대하고 있을까useEffect는 콜백 함수의 반환값을 중요하게 본다.useEffect(() => { // cleanup 함수 or undefined}); React는 이 함수가 아무것도 반환하지 않거나 cleanup 함수를 반환하길 기대한다. 하지만 async 함수는 다르다. async 함수는 항상 Promise를 반환한다a..

서비스를 운영하다 보면 '기능을 한 번에 배포해도 괜찮을까?'라는 고민을 피하기 어렵다. 이때 유용한 개념이 Feature Flag다. 1. Feature Flag란?Feature Flag는 기능의 활성·비활성을 설정으로 제어하는 방식이다. 배포는 이미 끝났지만 어떤 사용자에게, 어떤 시점에, 어떤 기능을 보여줄지 나중에 결정할 수 있다. 2. Feature Flag가 중요한 이유프론트엔드 배포는 되돌리기 쉽지 않다. Feature Flag를 사용하면,장애 발생 시 즉시 비활성화 가능일부 사용자만 대상으로 테스트 가능A/B 테스트 기반 의사결정 가능 즉, 배포의 리스크를 잘게 쪼갤 수 있다. 3. 실무에서 자주 쓰는 패턴1. 신규 기능 보호막//기능은 배포됐지만, 아직 숨겨진 상태if (featur..

브라우저에는 생각보다 많은 Idle Time이 존재한다.문제는 이 시간이 그냥 흘러가 버린다는 점이다. 1. Idle Time이란Idle Time은 말 그대로 브라우저가 당장 할 일이 없는 순간이다. 예를 들면초기 렌더링이 끝난 뒤사용자가 스크롤도, 클릭도 하지 않는 짧은 공백네트워크 요청을 기다리는 동안의 시간 이 시간 동안 메인 스레드는 비교적 여유롭다. 2. Idle Time 활용하면성능 최적화의 핵심은 중요한 일을 빠르게 끝내고, 덜 중요한 일은 방해하지 않게 처리하는 것이다. Idle Time을 활용하면 초기 로딩 속도를 해치지 않으면서, 이후에 필요한 작업을 미리 준비할 수 있다. 즉, 사용자가 체감하지 못하는 시점에 비용을 지불하는 방식이다. 3. 활용 예시Idle Time에는 이런 작..

TypeScript를 쓰다 보면 진짜 이 타입이 맞는지 확인해야 하는 순간이 발생한다.API 응답이 올 수도 있고, null이 들어올 수도 있고, 예측 못 한 값이 들어올 수도 있다. 이럴 때 버그를 막아주는 안전장치가 바로 타입 가드(Type Guard)다. 1. 타입가드란?간단히 말하면, 이 값이 어떤 타입인지 TypeScript에게 확신을 주는 함수이다. JavaScript 런타임에서 실제로 값을 검사하고,TypeScript는 그 결과에 따라 타입을 좁혀서(narrowing) 곧장 안전한 코드로 이어진다. 2. 예시TS는 기본적으로 자주 등장하는 검사들은 자동으로 타입을 좁혀준다.function printLength(value: string | string[]) { if (typeof valu..

TypeScript를 쓰다 보면 있는 타입을 조금 변형해서 재사용하는 경우가 많다.이때 매번 새 타입을 만들기보다, 유틸리티 타입(Utility Types)을 쓰면 훨씬 깔끔하고 유지보수도 쉬워진다. 대표적으로 많이 쓰이는 4가지는 다음과 같다.PartialPickOmitRecord 1. Partial: 모든 속성을 옵션(optional)으로 바꾼다. 기존 타입의 일부만 업데이트하려는 상황에서 가장 많이 쓰인다. 예를 들어 프로필 업데이트 API를 만든다고 하면,type User = { name: string; age: number; email: string;}; 회원가입은 모든 값이 필요하지만, 프로필 수정은 부분만 보낼 수 있어야 한다.function updateUser(id: string, ..

타입스크립트를 쓰다 보면 '이 함수 타입은 들어갈 수 없습니다.' 라는 에러를 보게 된다. 이는 공변성과 반공변성 때문에 생기는 현상이다. 1. 공변성(covariance) : '넓은 타입 → 좁은 타입'으로 흘러간다.TypeScript에서 대부분의 타입은 공변적이다.//예시type Animal = { name: string };type Dog = { name: string; bark: () => void };let dogs: Dog[] = [];let animals: Animal[] = dogs; // OK (공변성) Dog는 Animal의 서브타입이니까, Dog[ ]도 Animal[ ]로 취급될 수 있다.배열 같은 자료구조는 대부분 공변적이다. 2. 반공변성(covariance) : '좁은 타입..