#javascript
노트 125개
Frontend
브라우저와 모바일 화면에서 사용자가 직접 만나는 UI를 만드는 분야의 지식 모음.
Frontend › Accessibility
복합 위젯의 ARIA 패턴: 콤보박스·날짜 선택기·메뉴·상태 알림네이티브 요소가 없는 복합 위젯을 스크린 리더가 이해하고 조작할 수 있게 만드는 패턴. 자동완성 콤보박스, 날짜 선택기(grid)와 날짜 직접 입력, 사이트 메뉴와 menubar의 구분, 수량 조절 버튼, 정렬 표, 페이지 번호, 툴팁, 좌석 배치 같은 2차원 선택, 그리고 로딩·토스트·글자 수·실시간 검증 같은 상태 알림을 정리한다.
Frontend › Accessibility
접근 가능한 위젯: 펼침·탭·캐러셀펼침(디스클로저)·아코디언은 <details>/<summary>와 name 속성으로 먼저 만들고, 직접 만들면 button + aria-expanded + hidden을 쓴다. 탭은 APG 패턴대로 tablist·tab·tabpanel과 로빙 tabindex, 방향키를 갖추고, 캐러셀은 정지 버튼·포커스 시 정지·숨은 슬라이드 차단·라이브 영역을 갖춘다.
Frontend › Accessibility
키보드 접근성과 포커스 관리모든 기능은 키보드만으로 쓸 수 있어야 한다. 표준 키 조작, :focus-visible로 지키는 포커스 표시와 WCAG 2.2의 Focus Not Obscured, 소스 순서와 tabindex, inert와 <dialog>로 만드는 안전한 모달, 장치 독립 이벤트와 동적 콘텐츠의 포커스 처리를 정리한다.
Frontend › Accessibility
ARIA와 접근 가능한 이름ARIA는 HTML로 표현할 수 없는 role·state·property를 접근성 트리에 더하지만 동작은 더하지 않는다. 다섯 가지 사용 규칙, 접근 가능한 이름과 설명이 계산되는 순서(aria-labelledby > aria-label > 네이티브 label·alt > 내용 > title > placeholder), Label in Name, 라이브 영역을 정리한다.
Frontend › Architecture
가독성을 높이는 전략읽기 좋은 코드는 한 번에 고려할 맥락이 적고, 위에서 아래로 읽히고, 시각적 배치와 의미적 묶음이 일치한다. 같이 실행되지 않는 코드 분리, 구현 상세 추상화, 로직 종류별 함수 쪼개기로 맥락을 줄이고, 복잡한 조건·매직 넘버에 이름을 붙이고, 시점 이동과 중첩 삼항을 줄이고, 게슈탈트 법칙(근접성·공통 영역·유사성·연속성·폐쇄성)으로 빈 줄·주석·배치·이름을 점검한다.
Frontend › Architecture
프론트엔드와 SOLID 원칙객체 지향 설계 원칙 SOLID(SRP·OCP·LSP·ISP·DIP)를 React 컴포넌트와 함수 위주 JS·TS 코드에 옮겨 본다. 책임은 요구 사항 단위로 나누고, 분기 대신 확장으로 기능을 늘리고, props는 필요한 만큼만 받고, 데이터 소스는 추상화 뒤에 숨긴다.
Frontend › CSS
무한 캐러셀과 자동 슬라이드 구현끝에서 처음으로 자연스럽게 이어지는 캐러셀을 만드는 기법. 양끝에 복제 슬라이드를 붙이고 transitionend에서 전환 없이 제자리로 점프하는 버튼형 캐러셀, 애니메이션 중 연속 클릭 잠금, 페이지 단위 이동, 목록을 두 번 이어 붙여 translateX(-50%)로 흘리는 CSS 마키, @keyframes 퍼센트로 멈춤 구간을 만드는 자동 슬라이드, 가장자리 페이드와 움직임 줄이기까지.
Frontend › Graphics
Canvas 2D API<canvas>에 JavaScript로 픽셀을 그리는 즉시 모드 그래픽 API. SVG와의 차이(비트맵 vs DOM), getContext의 종류, 상태 스택과 Path2D, 고해상도 화면에서 흐려지지 않게 devicePixelRatio로 키우는 법, 레이어 분리·오프스크린 미리 그리기·정수 좌표·alpha: false 같은 성능 요령, OffscreenCanvas로 워커에서 그리기, 접근성 한계를 정리한다.
Frontend › Graphics
Three.js로 웹에서 3D 그리기WebGL을 쉽게 쓰도록 감싼 JavaScript 3D 라이브러리 Three.js의 구성 요소(Scene·Camera·Mesh·Renderer)와 활용 사례, 장단점.
Frontend
JavaScript브라우저를 조작할 수 있는 유일한 언어이자, ECMAScript 표준을 따르는 동적 타입 언어.
Frontend › JavaScript
가비지 컬렉션과 메모리 누수JavaScript 엔진은 루트에서 참조를 따라 닿을 수 있는(reachable) 값만 남기고 나머지를 자동으로 회수한다. 루트와 도달 가능성, 서로 참조해도 닿을 수 없으면 지워지는 '섬', 기본 알고리즘 mark-and-sweep과 순환 참조에 약했던 참조 카운팅, 세대별·점진적·병렬·유휴 시간 수집 같은 최적화(V8의 스캐빈지·mark-compact·쓰기 장벽), 그리고 GC가 막지 못하는 누수 패턴(전역, 잊힌 타이머·리스너, 클로저, 떨어져 나간 DOM, 끝없는 캐시)과 WeakMap·WeakRef·FinalizationRegistry를 정리한다.
Frontend › JavaScript
객체 지향 프로그래밍과 JavaScriptgoto → 절차적 프로그래밍 → 구조체 → 클래스로 이어지는 흐름에서 객체 지향이 왜 나왔는지, 캡슐화·상속·추상화·다형성이 무엇을 풀었는지 정리하고, 클래스 없이 프로토타입과 일급 함수로 OOP를 흉내 낸 JavaScript에서는 객체 지향과 함수형의 균형을 잡는 것이 핵심이라는 결론을 다룬다.
Frontend › JavaScript
객체의 원시형 변환객체가 연산자나 문자열 자리에 오면 엔진은 먼저 원시값으로 바꾼 뒤 계산한다. 불리언 변환은 늘 true이고, 숫자·문자열 변환은 hint(string·number·default)에 따라 Symbol.toPrimitive → toString/valueOf 순서로 메서드를 찾는다. 연산자별 hint, 기본 객체·배열·Date의 동작, [] + {}와 [] == false 같은 결과의 이유, 직접 구현할 때의 규칙을 정리한다.
Frontend › JavaScript
구조 분해 할당배열·이터러블은 순서로, 객체는 이름으로 값을 꺼내 변수에 담는 문법. 건너뛰기와 나머지(rest), undefined일 때만 쓰이고 필요할 때만 평가되는 기본값, 이름 바꾸기, 중첩 패턴, 이미 선언한 변수에 할당할 때의 괄호, 두 변수 교환, entries와 함께 도는 반복, 그리고 매개변수 객체를 분해하는 '똑똑한 함수 매개변수'와 = {} 기본값을 정리한다.
Frontend › JavaScript
날짜 라이브러리: date-fns와 Day.js기본 Date 다루기(타임스탬프, 생성자 네 형태, 날짜만 쓴 ISO 문자열은 UTC라는 함정, get·set과 범위를 넘으면 넘겨 주는 자동 고침, 빼기로 재는 시간 차, Date.now와 performance.now), 0부터 시작하는 월과 그 유래, 유지보수 모드에 들어간 Moment.js 대신 많이 쓰는 date-fns(함수형·트리 셰이킹)와 Day.js(초경량·Moment 호환 API)의 사용법 비교, 그리고 Date를 대체할 표준 API Temporal의 지원 현황.
Frontend › JavaScript
데코레이터와 콜 포워딩함수를 고치지 않고 감싸서 동작을 더하는 데코레이터 함수. 캐싱 래퍼로 보는 기본 모양, 감싼 메서드가 this를 잃는 문제와 func.call(this, ...args)로 넘기는 콜 포워딩, call과 apply의 차이, 여러 인자를 키 하나로 바꾸는 해시, 유사 배열에 배열 메서드를 빌려 쓰는 메서드 빌리기, 래퍼가 원래 함수의 속성을 잃는 한계를 정리한다. 부분 적용은 함수형 프로그래밍 노트에 있다.
Frontend › JavaScript
마우스·포인터·키보드 이벤트사용자 입력 장치가 만드는 DOM 이벤트. 클릭 한 번이 만드는 mousedown·mouseup·click 순서, button과 보조키(Ctrl·Cmd), mouseover·mouseout과 mouseenter·mouseleave의 차이와 relatedTarget, 마우스·터치·펜을 한 코드로 받는 포인터 이벤트(pointerId·pointercancel·touch-action·포인터 캡처·포인터 락), HTML 드래그 앤 드롭 API와 직접 만드는 드래그, key와 code·자동 반복·IME 조합을 다루는 키보드 이벤트를 정리한다.
Frontend › JavaScript
모듈: export와 import, export defaultES 모듈의 named·default export와 여러 import·다시 내보내기 형태, 모듈 스코프·한 번만 평가·라이브 바인딩·import.meta 같은 성질, 브라우저에서 모듈 스크립트로 쓰는 법(defer, async, CORS)과 동적 import(), import attributes로 JSON 가져오기, CommonJS와의 관계(exports와 module.exports, AMD·UMD 비교), default와 named 중 무엇을 쓸지에 대한 논쟁. 로드 3단계(구성·연결·평가), CommonJS 래퍼 함수와 Node.js의 형식 판별·상호 운용 규칙까지.
Frontend › JavaScript
문(Statement)과 식(Expression)식은 값을 만들어 내는 코드이고, 문은 무언가를 하라는 명령이다. 문에는 식을 끼우는 자리가 있고, 식은 늘 어떤 문 안에 있다. 블록 문과 그룹 연산자, 세미콜론과 자동 세미콜론 삽입(ASI) 규칙과 함정. 함수 인자, 화살표 함수의 간결한 본문, JSX의 중괄호는 식만 받는 자리라서 if·for 대신 삼항 연산자·map을 쓴다.
Frontend › JavaScript
문자열 다루기JavaScript 문자열은 UTF-16 코드 단위의 나열이고 바꿀 수 없는 원시값이다. 따옴표와 이스케이프, 백틱 템플릿 리터럴(여러 줄·표현식 삽입·중첩)과 styled-components의 바탕인 태그드 템플릿, 글자 접근(at·charAt), 검색(includes·indexOf와 0의 함정), 부분 문자열(slice·substring·substr의 차이), 대소문자·공백·패딩, 유니코드 순 비교와 localeCompare·Intl.Collator, 서로게이트 쌍과 코드 포인트, normalize로 맞추는 유니코드 정규화, 짝 잃은 서로게이트를 찾는 isWellFormed까지 정리한다.
Frontend › JavaScript
바이너리 데이터와 파일: ArrayBuffer, Blob, FileJavaScript가 바이트를 다루는 층위를 정리한다. 메모리 덩어리 ArrayBuffer와 그것을 읽는 뷰(TypedArray·DataView), 문자열과 바이트를 잇는 TextEncoder·TextDecoder, 타입이 붙은 불변 바이너리 Blob과 그 하위 File, 그리고 Blob을 화면·다운로드·업로드에 쓰는 object URL·data URL·FileReader·Promise 메서드까지.
Frontend › JavaScript
반응형 프로그래밍과 RxJS반응형 프로그래밍은 데이터 흐름과 변경 전파에 초점을 둔 선언적 패러다임이다. 스프레드시트와 웹 프레임워크로 개념을 잡고, Pull에서 Push로, 제어의 역전으로 비동기를 단순하게 보는 법, 이벤트를 배열처럼 다루는 RxJS의 Observable과 연산자, 실무에서 막히는 소스 만들기와 Hot·Cold, Vue·MobX·시그널이 쓰는 의존성 추적(읽을 때 구독, 쓸 때 통지)의 원리를 정리한다.
Frontend › JavaScript
배열·객체 다루기배열의 주요 메서드, length가 가장 큰 인덱스 + 1인 이유와 shift가 느린 이유, 배열 리터럴과 new Array(n)의 빈 슬롯(희소 배열), Array.from 같은 정적 메서드, 원본을 바꾸는 메서드와 바꾸지 않는 메서드(slice·toSorted·with), sort 비교 함수, 콜백을 받는 헬퍼 메서드와 콜백을 만드는 함수, reduce로 세기·묶기, 객체 리터럴과 키가 문자열로 바뀌는 규칙, 속성 접근과 Object.keys·entries, in·Object.hasOwn으로 속성 확인, spread의 얕은 복사가 빠뜨리는 것, rest, 형식화 배열. 문자열·구조 분해·JSON은 각자의 노트로 나눴다.
Frontend › JavaScript
번들러의 역사와 Vite모듈 없이 태어난 JavaScript가 CommonJS·AMD·ES 모듈을 거쳐 번들러를 필요로 하게 된 이유, 번들러의 느린 빌드를 네이티브 언어 도구와 '개발은 쪼개서, 배포는 합쳐서' 방식이 풀고, Vite가 그 개념을 모아 Rust 번들러 Rolldown 기반의 표준 빌드 도구가 되기까지를 정리했다.
Frontend › JavaScript
변수와 데이터 타입식별자 규칙과 이름 짓기, let·const·var의 차이와 호이스팅, 원시 타입과 참조 타입, 원시값의 래퍼 객체(new String을 쓰지 않는 이유), typeof, null과 undefined의 구분, 값 복사와 참조 공유(비교·얕은 복사·structuredClone·함수 인자·const와 Object.freeze), 스택·힙과 가비지 컬렉션, 동적 타입과 여덟 가지 타입, 대문자 상수를 쓰는 때와 변수를 재사용하지 않는 이유.
Frontend › JavaScript
브라우저에서 JavaScript가 동작하는 원리: 이벤트 루프싱글 스레드인 JavaScript가 렌더링과 나눠 쓰는 메인 스레드, 실행 컨텍스트가 쌓이는 콜 스택, Web API, 태스크·마이크로태스크 큐, 이벤트 루프의 협업으로 화면을 멈추지 않고 비동기 작업을 처리하는 방식. 태스크 하나 → 마이크로태스크 전부 → 렌더링 순서의 한 바퀴, queueMicrotask, 긴 작업 쪼개기·진행률 표시·이벤트 처리 뒤로 미루기, 무거운 일을 메인 스레드 밖으로 빼는 Web Worker.
Frontend › JavaScript
비동기 처리: 콜백과 Promise언제 끝날지 모르는 비동기 작업의 결과를 다루는 콜백 함수(오류 우선 콜백)와 Promise. 상태와 핸들러 규칙, 체이닝과 에러 전파(암시적 try...catch, 다시 던지기, thenable), 처리되지 않은 거부, 콜백 API를 Promise로 감싸는 프로미스화(wait, promisify), all·allSettled·race·any·resolve·try로 여러 Promise를 조합하는 법.
Frontend › JavaScript
속성 설명자(Property Descriptor)객체의 모든 속성에는 값 말고도 writable·enumerable·configurable 같은 숨은 설정이 붙어 있다. 데이터 속성과 접근자(getter·setter) 속성의 차이, Object.defineProperty의 기본값이 리터럴과 정반대라는 점, enumerable이 for...in·Object.keys·spread·JSON에 미치는 영향, Object.create의 두 번째 인자, preventExtensions·seal·freeze의 차이를 정리한다.
Frontend › JavaScript
숫자와 MathJavaScript의 숫자 타입 하나(double)로 생기는 일: 지수·진법 리터럴과 toString(base), 산술·나머지·거듭제곱 연산자, Math의 반올림·무작위 수, 문자열을 숫자로 바꾸는 방법의 차이, NaN이 생기는 경우와 Infinity 판별, 0과 -0을 가르는 Object.is, 0.1 + 0.2 오차와 돈은 정수 최소 단위로 다루는 원칙, 안전한 정수 범위를 넘는 BigInt, Intl.NumberFormat으로 표시하기.
Frontend › JavaScript
스코프와 클로저변수를 어디서 쓸 수 있는지 정하는 스코프(전역·모듈·함수·블록)와 globalThis, 안쪽에서 바깥으로 찾아가는 스코프 체인과 섀도잉, 정의된 위치로 정해지는 렉시컬 스코프, 선언이 끌어올려지는 호이스팅과 TDZ, var가 블록을 무시하는 동작, 렉시컬 환경과 함수가 기억하는 태어난 환경으로 설명하는 클로저의 원리, 클로저의 쓰임새(함수 공장, private 상태)와 메모리·디버깅 주의점을 정리했다.
Frontend › JavaScript
실행 컨텍스트엔진이 코드를 실행할 때 만드는 실행 단위인 실행 컨텍스트를 정리한다. 전역·함수·eval·모듈 컨텍스트와 실행 컨텍스트 스택(콜 스택), LexicalEnvironment·VariableEnvironment·PrivateEnvironment와 this가 담기는 자리, 선언을 먼저 등록하는 생성 단계와 값을 채우는 실행 단계, 그 결과로 생기는 호이스팅·TDZ·스코프 체인·var의 블록 무시를 한 흐름으로 묶는다. 선언적·객체 환경 레코드와 with·eval이 최적화를 깨는 이유, 매개변수 기본값이 만드는 별도 스코프, 클로저가 푸는 funarg 문제, ES3의 변수 객체(VO)·활성 객체(AO) 용어와의 대응까지 다룬다.
Frontend › JavaScript
에러 처리: try...catch와 커스텀 에러JavaScript 언어 차원의 에러 처리. try...catch...finally가 잡는 것과 못 잡는 것(문법 에러, 예약된 콜백), 에러 객체의 name·message·stack·cause, 내장 에러 종류, throw와 다시 던지기, finally와 return의 우선순위, Error를 상속한 커스텀 에러와 계층, cause로 예외 감싸기, 전역 에러 이벤트, 에러를 삼키지 않고 클라이언트에서 수집해 보내는 법까지.
Frontend › JavaScript
연산자와 제어문연산자 우선순위와 그룹 연산자, 단항 +·전위/후위 증감·할당의 반환값·쉼표 연산자, 형변환(coercion)과 truthy·falsy, == vs ===(그리고 == true가 불리언 비교가 아닌 이유), 단축 평가와 ?.·??, 논리 할당 &&=·||=·??=, 삼항 연산자, if의 평가 순서와 early return, switch의 fall through와 case 스코프, for·for...in·for...of·while·do...while·forEach 반복문.
Frontend › JavaScript
요소 크기·스크롤·좌표JavaScript로 요소와 창의 크기·스크롤·위치를 읽고 바꾸는 법. offset·client·scroll 계열 기하 속성이 각각 무엇을 재는지, CSS width 대신 기하 속성을 읽는 이유, 창 크기와 문서 높이, scrollTo·scrollIntoView와 스크롤 막기, 창 기준(clientX·getBoundingClientRect)과 문서 기준(pageX) 좌표, elementFromPoint를 정리한다.
Frontend › JavaScript
이터레이터와 제너레이터for...of·spread·구조 분해가 공통으로 쓰는 약속인 이터러블·이터레이터 프로토콜(Symbol.iterator와 next()의 { value, done }), 직접 iterable 만들기, 실행을 멈췄다 이어 가는 제너레이터 함수(function*, yield, next(값)으로 값 돌려보내기, return, yield*), 게으른 무한 수열, ES2025 이터레이터 헬퍼와 비동기 이터레이션을 정리한다.
Frontend › JavaScript
자바스크립트 패키지 매니저: npm, yarn, pnpm패키지 설치·업데이트·의존성 관리를 맡는 패키지 매니저의 기본(dependencies와 devDependencies, npm 스크립트, 패키지 고르는 법), npm·yarn·pnpm(그리고 Bun)의 차이와 고르는 기준, packageManager 필드와 Corepack, 설치 스크립트 차단 같은 공급망 보안 기본값, npm EINTEGRITY 오류의 원인과 해결.
Frontend › JavaScript
자바스크립트에서 타임존 다루기타임존은 오프셋이 아니라 한 지역의 표준시·서머타임 변경 이력 전체이고, 표준은 IANA tz database다. JS의 Date는 OS의 로컬 타임존에 묶여 있어 오프셋을 더하고 빼는 방식으로는 다른 타임존의 날짜 연산을 정확히 할 수 없다.
Frontend › JavaScript
작은 모듈 철학과 npm 의존성의 비용한 가지 일만 하는 작은 모듈을 조합한다는 Node.js·npm의 유닉스 철학과, 한 줄짜리 패키지까지 의존성으로 들이는 하이퍼 모듈화를 둘러싼 찬반을 정리한다. left-pad 삭제(2016)가 바꾼 npm 정책, 의존성 트리가 깊어질수록 커지는 공급망 위험, 표준 API가 작은 패키지를 대체해 온 흐름, 지금 의존성을 들일 때의 판단 기준까지.
Frontend › JavaScript
정규 표현식: 문법·플래그·메서드JavaScript 정규 표현식을 사전처럼 찾아보는 표 모음. 문자 클래스·세트·앵커·수량자·그룹·역참조·대안·전후방탐색 문법, g·i·m·s·u·v·y·d 플래그, match·matchAll·replace·split·exec·test의 반환값과 lastIndex 함정, 명명된 그룹과 중복 이름, v 플래그의 집합 연산, d 플래그의 indices, 인라인 플래그 수정자, 사용자 입력을 안전하게 넣는 RegExp.escape까지.
Frontend › JavaScript
정규식 엔진: 탐욕·게으름·전후방탐색·백트래킹JavaScript 정규식 엔진은 백트래킹 방식이다. 탐욕 수량자는 최대한 먹고 한 글자씩 돌려주며, 게으른 수량자는 최소한으로 먹고 하나씩 늘린다. 둘보다 제외 세트가 정확할 때가 많다. 전후방탐색은 결과에 넣지 않고 조건만 건다. 겹치는 중첩 수량자는 실패할 때 경우의 수가 지수적으로 늘어 페이지를 멈추게 하며(재앙적 백트래킹·ReDoS), 경우의 수를 줄이거나 전방탐색으로 원자 그룹을 흉내 내 막는다.
Frontend › JavaScript
책임감 있는 자바스크립트JS는 압축해도 파싱·실행 비용이 그대로 남아 저사양 기기에서 가장 비싼 자원이다. 웹 플랫폼(HTML·CSS)을 먼저 쓰고, 트리 셰이킹·코드 분할·최신 문법 빌드·작은 대체재로 줄이고, 서드파티 스크립트는 담당자를 두고 관리한다. 성능은 저사양 Android와 느린 4G, 표준 지원은 Baseline으로 기준을 잡는다.
Frontend › JavaScript
타이머: setTimeout과 setIntervalsetTimeout은 한 번, setInterval은 반복해서 콜백을 예약한다. 예약은 비동기라 다음 줄이 먼저 돈다. 반환된 ID를 저장해야 clearTimeout·clearInterval로 취소할 수 있고, 지연 시간은 최소 대기일 뿐이다. 즉시 시작하는 interval, 재귀 setTimeout, Promise로 감싼 sleep, 애니메이션용 requestAnimationFrame, React에서의 정리까지.
Frontend › JavaScript
페이지 생명주기와 리소스 로딩 이벤트문서가 열리고 닫히는 동안 일어나는 이벤트. DOMContentLoaded가 기다리는 것과 기다리지 않는 것, load와 readyState, 떠날 때의 beforeunload·pagehide·visibilitychange와 숨은 탭의 rAF 정지·타이머 제한, 피해야 할 unload, sendBeacon·keepalive로 마지막 데이터 보내기, 스크립트·이미지의 load·error 이벤트와 crossorigin 속성으로 다른 출처 스크립트의 오류 정보 얻기를 정리한다.
Frontend › JavaScript
폼 컨트롤과 포커스 이벤트JavaScript로 폼을 다루는 DOM API. document.forms와 form.elements로 컨트롤 찾기(라디오 묶음, fieldset, form.name 단축 표기의 함정), value·checked·select의 옵션 다루기, focus·blur와 버블링하는 focusin·focusout, change·input·beforeinput·클립보드 이벤트의 차이, 폼 submit 이벤트를 듣는 이유를 정리한다. 제출 동작 자체는 폼 제출 노트에 있다.
Frontend › JavaScript
프로토타입과 상속JavaScript 객체는 프로토타입 객체에 연결되어, 자기에게 없는 속성을 그 체인을 따라 찾는다. 클래스와 다른 철학적 뿌리(분류 대 가족 유사성·원형), 생성자 함수와 new가 하는 일, F.prototype과 constructor, 인스턴스 속성과 프로토타입 메서드의 구분, 프로토타입 체인과 섀도잉, 읽기만 체인을 타는 규칙, 내장 객체의 프로토타입, Object.create와 getPrototypeOf, __proto__의 역사와 프로토타입 오염, instanceof와 타입 확인, class 문법이 프로토타입 코드로 어떻게 풀리는지, 내장 프로토타입을 고치면 안 되는 이유와 폴리필을 정리했다.
Frontend › JavaScript
함수와 this함수 선언식·표현식(이름 있는 함수 표현식)·화살표 함수·IIFE(식 자리에 문장 쓰기)·메서드·new Function, 블록 안 함수 선언의 스코프, 함수도 객체라는 점(name·length·커스텀 속성), 매개변수와 인자(호출마다 평가되는 기본값·arguments·rest·spread), return과 early return, 이름 짓기, 생성자 함수(new.target·return 규칙)와 팩토리 함수, 호출 방식에 따라 달라지는 this(전역·암묵적·명시적·new·이벤트 핸들러), 화살표 함수에 없는 것들, bind·call·apply와 이벤트 리스너에 메서드를 넘길 때의 함정, 재귀와 콜 스택 깊이.
Frontend › JavaScript
함수형 프로그래밍함수형 프로그래밍을 순수 함수·불변성·선언적 패턴이라는 학술 용어 대신 액션·계산·데이터 구분, 카피 온 라이트와 방어적 복사, 계층형 설계와 추상화 벽으로 다시 읽고, 인자를 미리 채워 함수를 특수화하는 커링과 부분 적용을 다룬다. 액션에서 계산을 빼내 테스트하기 쉬운 코드를 늘리고, 상태·변경·효과를 줄이고 모으고 미루는 리팩터링, 효과를 데이터로 반환하는 기법, 로직을 데이터로 적는 데이터 주도 프로그래밍, 프론트엔드의 요구사항을 입력에서 화면까지의 파이프라인으로 보는 법을 정리한다. 구조적 공유(영속 자료구조), data-last·자동 커링 라이브러리 규칙, 어플리커티브와 지연 Future, 대수적 데이터 타입까지.
Frontend › JavaScript
AJAX와 HTTP 요청페이지를 새로고침하지 않고 서버와 비동기로 데이터를 주고받는 AJAX. fetch의 Response·본문 형식·FormData, URL·URLSearchParams, 스트림으로 읽는 다운로드 진행률과 업로드 진행률, AbortController 취소·타임아웃, 나머지 fetch 옵션(credentials·cache·keepalive 등), 업로드 재개, axios, 자주 만나는 오류, 클라이언트에서 보이는 CORS와 프록시, 브라우저 코드가 공개된다는 전제의 API 키 관리.
Frontend › JavaScript
async/await와 비동기 에러 처리Promise를 동기 코드처럼 읽히게 해 주는 async/await 문법, 순차·동시 실행과 반복문 안의 await, try/catch·호출 시점 catch·고차 함수로 나누는 에러 처리, 실무에서 주의할 점.
Frontend › JavaScript
Babel과 AST 변환Babel은 JavaScript를 파싱(parse)해 AST로 바꾸고, 플러그인이 AST를 고친 뒤(transform), 다시 코드로 찍어 내는(generate) 소스 대 소스 컴파일러다. 설정의 플러그인·프리셋 순서, preset-env와 browserslist·core-js 폴리필, 방문자(visitor) 패턴으로 플러그인 쓰는 법, 같은 AST 원리로 대규모 코드를 고치는 codemod(jscodeshift)까지, Babel 8 기준으로 정리한다.
Frontend › JavaScript
class 문법ES6 class로 객체의 틀을 정의하는 방법: 선언과 표현식(익명 클래스, TDZ), constructor, 계산된 메서드 이름, 인스턴스·정적 멤버, 클래스 필드와 #private 필드·메서드, _ 관례로 흉내 내는 protected, 정적 초기화 블록, new this를 쓰는 정적 팩토리 메서드, extends와 super(파생 constructor가 super()를 먼저 불러야 하는 이유, 필드 오버라이딩의 함정, HomeObject), 내장 클래스 확장과 Symbol.species, getter·setter, 프론트엔드에서 클래스를 꺼낼 때(관련 함수·데이터 묶기, 값 객체). class가 단순한 문법적 설탕이 아닌 지점(strict mode, new 강제, 열거 불가 메서드)까지.
Frontend › JavaScript
Debounce와 Throttle연속으로 일어나는 이벤트의 실행 횟수를 줄이는 두 기법. 디바운스는 마지막 호출만, 쓰로틀은 일정 간격마다 한 번만 실행한다.
Frontend › JavaScript
DOM 이벤트: 전파, 위임, 커스텀 이벤트DOM 이벤트는 캡처 → 타깃 → 버블 순서로 트리를 오간다. 핸들러를 붙이는 세 방법(HTML 속성·on 속성·addEventListener)과 handleEvent 객체, target과 currentTarget의 차이, 전파·기본 동작 제어와 stopPropagation 대신 defaultPrevented로 알리기, 부모 하나로 자식 이벤트를 받는 이벤트 위임과 data 속성 행동 패턴, once·passive·signal 옵션, Event·CustomEvent 생성과 dispatchEvent의 동기 실행, 바깥 클릭 감지 패턴을 정리한다.
Frontend › JavaScript
DOM 조작JavaScript로 DOM 요소를 선택·탐색하고(live·static 컬렉션, 표 탐색 속성), 노드의 내용(innerHTML+=의 함정, outerHTML 대입, textContent)을 다루고, 속성(property)과 어트리뷰트(attribute)의 동기화 규칙, 클래스와 인라인 스타일·계산된 스타일을 읽고 쓰고, 요소를 만들어 원하는 위치에 넣고 지우는 방법. 문자열 HTML을 넣는 법과 위험, 리플로우를 줄이는 일괄 삽입까지 다룬다.
Frontend › JavaScript
ECMAScript 표준과 TC39 프로세스JavaScript의 표준 ECMA-262를 누가 어떻게 정하는지 정리한다. ECMA International과 TC39, 제안이 Stage 0부터 4까지 올라가 매년 새 판(ES2015, ES2016 …)에 실리는 과정, ES6와 ES2015 같은 이름 규칙, ES2015~ES2021 판별 주요 기능, ES2022의 클래스 필드·top-level await·at()·Object.hasOwn부터 ES2026까지의 주요 추가 기능, Java와 무관한 이름과 실행 환경별 제약, 표준 내장 객체와 호스트 객체, 명세·MDN 같은 참고 자료, 새 기능을 옛 환경에서 쓰는 트랜스파일러와 폴리필을 다룬다.
Frontend › JavaScript
ESLint와 Prettier 설정코드 품질은 ESLint가, 모양은 Prettier가 맡도록 역할을 나누고 둘이 충돌하지 않게 연결하는 방법. VS Code 저장 시 자동 수정, flat config(eslint.config.js) 읽는 법과 ESLint 10에서 제거된 .eslintrc와의 대응, husky + lint-staged로 커밋 직전에 스테이징된 파일만 검사하는 법까지. React·Vue·React Native 어디서나 절차는 같다.
Frontend › JavaScript
JavaScript 디자인 패턴: 생성 패턴객체를 만드는 방식을 다루는 생성 패턴 중 생성자·모듈·싱글톤·프로토타입 패턴을 JavaScript 코드로 정리하고, 프로토타입 기반 언어라서 달라지는 점을 짚는다. 단일 상속을 보완해 여러 클래스에 동작을 섞어 넣는 믹스인(Object.assign 방식, 클래스 팩토리 방식, 이벤트 믹스인)과 관찰자 패턴을 독립 클래스로 만든 이벤트 이미터 구현도 함께 다룬다.
Frontend › JavaScript
JavaScript 애니메이션: requestAnimationFrame과 Web Animations APICSS로 부족한 애니메이션을 JavaScript로 만드는 두 방법. requestAnimationFrame 위에 duration·timing·draw로 나눈 범용 animate 함수를 짜고, 타이밍 함수(power·back·bounce·elastic)와 easeOut·easeInOut 변환을 직접 만든다. 브라우저 엔진을 그대로 쓰는 element.animate()는 재생 제어, finished 프로미스, commitStyles, 스크롤 타임라인을 준다.
Frontend › JavaScript
JavaScript 주석: 쓰는 법과 네 가지 문법무엇을 주석으로 쓰고 무엇을 코드로 말할지(무엇·어떻게 대신 왜, 함수 추출, JSDoc), 그리고 ECMAScript 명세에 정의된 주석 네 가지(//, /* */, #! 해시뱅, <!-- --> HTML 유사 주석)의 문법과 동작, 유래를 정리한다. 주석은 공백처럼 취급되지만 줄바꿈을 품은 여러 줄 주석은 줄바꿈으로 취급되고, 나머지 두 형식은 인터프리터 지정과 옛 브라우저 호환을 위해 생겼다.
Frontend › JavaScript
JavaScript는 인터프리터 언어일까, 컴파일 언어일까현대 JS 엔진(V8)은 파싱 → 바이트코드 실행 → 자주 쓰는 코드만 단계적으로 JIT 컴파일하는 혼합 방식이라 둘 중 하나로 딱 자르기 어렵다. V8의 Ignition·Sparkplug·Maglev·TurboFan 파이프라인과 TypeScript 컴파일러·Babel의 단계를 비교하고, 최적화가 기대는 히든 클래스·인라인 캐시·배열 요소 종류를 정리한다. JavaScriptCore·SpiderMonkey의 대응 단계와 OSR, 측정·명시적 코드·벤치마크의 한계 같은 최적화를 대하는 법, Full-codegen·Crankshaft에서 Ignition·TurboFan으로 바뀐 역사도 담았다.
Frontend › JavaScript
JSON: stringify와 parseJSON은 언어와 무관한 데이터 교환용 텍스트 형식이다. 문법 규칙(큰따옴표, 주석 없음), JSON.stringify가 빠뜨리거나 바꾸는 값(undefined·함수·Symbol·NaN·Date·Map)과 순환 참조·BigInt 오류, replacer·space·toJSON으로 직렬화를 조절하는 법, JSON.parse의 reviver로 Date를 되살리는 법, 큰 정수를 지키는 source 접근과 JSON.rawJSON, 깊은 복사용으로는 structuredClone을 쓰는 이유까지 정리한다.
Frontend › JavaScript
Map과 SetMap은 어떤 값이든 키로 쓰고 넣은 순서를 지키는 키-값 컬렉션, Set은 중복 없는 값의 모음이다. 일반 객체와 비교해 언제 무엇을 쓸지, 주요 메서드와 순회, 객체와 서로 바꾸기, JSON으로 보낼 때의 제약, WeakMap·WeakSet, ES2025의 Set 집합 연산까지.
Frontend › JavaScript
MutationObserverDOM 트리의 변화(자식 추가·삭제, 속성, 텍스트)를 지켜보다 모아서 알려 주는 MutationObserver. observe 옵션(childList·subtree·attributes·characterData·attributeFilter·oldValue), MutationRecord의 내용, 서드파티 스크립트가 넣는 DOM에 반응하기와 동적으로 들어온 콘텐츠를 한곳에서 처리하는 쓰임, takeRecords·disconnect, 마이크로태스크로 전달되는 특성과 무한 루프 주의, 폐기된 뮤테이션 이벤트를 정리한다.
Frontend › JavaScript
npm 스크립트로 작업 자동화하기package.json의 scripts는 node_modules/.bin이 PATH에 들어간 셸에서 명령을 실행하는 가장 얇은 작업 실행기(task runner)다. pre/post 훅, -- 뒤 인자 전달, npm_ 환경 변수, 수명 주기 스크립트, 직렬·병렬 조합과 크로스 플랫폼 처리, 매니저별 차이(node --run 포함), 그리고 Grunt·Gulp 같은 태스크 러너가 밀려난 이유를 정리한다.
Frontend › JavaScript
npm install이 하는 일: 내 컴퓨터와 앱에 생기는 변화npm으로 패키지를 설치하면 레지스트리에서 코드를 받아 캐시·node_modules·lock 파일에 쓰고, 설치 스크립트를 내 권한으로 실행하고, 명령을 PATH에 연결한다. 로컬·전역 설치가 컴퓨터의 어디를 바꾸는지, 앱의 코드·번들·배포에 무엇이 들어가는지, 되돌리는 법을 정리한다.
Frontend › JavaScript
Proxy와 Reflect객체에 가해지는 읽기·쓰기·in·delete·호출·new 같은 기본 동작을 트랩으로 가로채는 Proxy와, 그 동작을 원래 객체에 그대로 넘기는 Reflect. 기본값·검증·가상 속성·함수 래퍼 같은 쓰임, getter 상속에서 receiver가 필요한 이유, 내부 슬롯·private 필드·동일성 비교에서 생기는 한계, Vue·Immer 같은 라이브러리가 Proxy를 쓰는 방식을 정리한다.
Frontend › JavaScript
Selection과 Range문서의 일부를 가리키는 Range(시작·끝 경계점)와 사용자의 현재 선택을 나타내는 Selection(anchor·focus). Range를 만들고 내용 지우기·복제·감싸기, 선택 읽기와 바꾸기, selectionchange 이벤트, input·textarea 전용 선택 API(selectionStart·setSelectionRange·setRangeText)로 커서 위치 다루기, 선택 막기, DOM을 바꾸지 않고 칠하는 CSS Custom Highlight API를 정리한다.
Frontend › JavaScript
SharedArrayBuffer와 Atomics: JavaScript의 공유 메모리 병렬 처리워커끼리 메시지 복사 없이 같은 메모리를 읽고 쓰게 하는 SharedArrayBuffer와, 그 메모리를 경쟁 상태 없이 다루는 Atomics(load·store·add·compareExchange·wait·notify)를 정리한다. 메시지 전달·소유권 이전·공유 메모리의 차이, Spectre 이후 교차 출처 격리(COOP·COEP)가 필수가 된 이유, 메인 스레드에서 wait 대신 waitAsync를 쓰는 규칙, 언제 병렬화가 값을 하는지까지.
Frontend › JavaScript
strict mode(엄격 모드)ES5가 하위 호환을 깨지 않고 언어의 오래된 함정을 막으려고 만든 선택적 규칙 집합. 파일·함수 맨 앞의 "use strict"로 켜고, ES 모듈과 class 본문은 자동으로 켜진다. 암묵적 전역, 조용한 실패, this의 전역 객체 대체, 블록 밖으로 새는 함수 선언 같은 동작이 에러나 더 엄격한 규칙으로 바뀐다.
Frontend › JavaScript
SymbolSymbol은 만들 때마다 세상에 하나뿐인 값이 되는 원시 타입이다. 다른 코드와 겹치지 않는 속성 키로 쓰고, 일반 순회와 JSON에서는 숨겨진다. 설명(description)과 고유성, 전역 레지스트리의 Symbol.for·keyFor, 언어의 내장 동작을 여는 well-known symbol(Symbol.iterator·toPrimitive·toStringTag 등)을 정리한다.
Frontend › JavaScript
TypeScript 실용 패턴구조적 타입 위에서 자주 쓰는 TypeScript 패턴을 모았다. 브랜드 타입으로 명목 타이핑 흉내 내기, enum 대신 as const 객체, 예외 대신 Result 유니언 반환, 클래스를 합성하는 믹스인, 이벤트 맵으로 만드는 타입 안전 이벤트 이미터, 인스턴스화 표현식으로 제네릭 특수화, 배열 만들기·커링·정적 초기화 블록 같은 작은 관용구까지 코드와 함께 정리한다.
Frontend › JavaScript
TypeScript 코딩 컨벤션TypeScript 팀 컨벤션 문서의 규칙을 주제별로 묶었다. 이름 짓기, 타입, 선언, 클래스, 표현식, 제어문, 함수, 에러 처리, 내장 객체, 모듈 규칙을 필수·권장과 이유까지 함께 정리하고, 중괄호·줄 길이·빈 줄·중첩 줄이기·헬퍼 함수 위치 같은 코드 모양과 유지보수를 괴롭히는 패턴(닌자 코드) 목록을 더했다. Airbnb JavaScript 스타일 가이드의 객체·함수·형 변환 규칙과, 공개 스타일 가이드끼리 갈리는 지점(export default, for...of, ++, getter, 약어 표기)도 비교했다.
Frontend › JavaScript
TypeScript 타입 연산: 타입으로 타입 만들기기존 타입에서 새 타입을 계산하는 TypeScript의 연산을 정리한다. keyof·typeof·인덱스 접근으로 타입을 꺼내고, 매핑 타입으로 속성을 순회하며 수식어를 붙이거나 떼고 키를 바꾸고, 조건부 타입과 infer로 분기·추출하며, 유니언을 만나면 분배된다는 규칙과 [T]로 막는 법, 템플릿 리터럴 타입의 조합, 유틸리티 타입을 직접 구현하는 법까지.
Frontend › JavaScript
TypeScript 타입 호환성: 어떤 값을 어디에 대입할 수 있나TypeScript의 타입은 값의 집합이고, 대입은 좁은 집합을 넓은 집합에 넣는 일이다. 구조적 타이핑과 잉여 속성 검사, 유니언·인터섹션의 넓이, 객체 인터섹션과 원시 인터섹션의 차이, 튜플·readonly 배열, 함수 대입의 공변·반공변·이변성, interface extends와 &의 충돌 처리, 유니언 객체가 섞이는 문제와 구분자를 정리한다.
Frontend › JavaScript
TypeScript 프로젝트 설정: tsconfig·모듈 해석·선언 파일tsconfig.json이 정하는 컴파일 컨텍스트와 TypeScript 6·7의 새 기본값(strict, esnext, types: []), strict 계열 옵션, 파일 모듈과 전역 스크립트, moduleResolution bundler·nodenext, verbatimModuleSyntax와 타입 전용 import, 타입·값 선언 공간, declare·.d.ts·declare global·lib·@types로 바깥 코드를 설명하는 법, JS에서 옮겨 오는 순서를 정리한다.
Frontend › JavaScript
TypeScript: 개념과 문법 한눈에 보기TypeScript는 JavaScript에 타입 검사와 자동완성을 더한 슈퍼셋이다. JavaScript가 정적 타입을 얻기까지의 역사와 흔한 오해, 실행 환경(tsc·Go로 다시 쓴 TypeScript 7·Vite·Node.js 타입 제거), 기본 타입과 any·unknown·never, 추론·단언·가드·satisfies, type과 interface, 제네릭, 함수 오버로드와 클래스 수식어, 모듈과 @types, 구분된 유니언, 표준 데코레이터(예전 방식과의 차이, 적용 순서), 유틸리티 타입을 표 중심으로 정리하고, 추론 → API 스키마 → 좁히기 → strict 순으로 익히는 순서를 덧붙인다.
Frontend › JavaScript
TypeScript로 동적인 코드에 정적 타입 입히기Express식 라우터를 예로, 리터럴 유니온·never 완전성 검사·제네릭·제네릭 기본값·템플릿 리터럴 타입·infer를 쓴 재귀 조건부 타입으로 '경로 문자열에서 매개변수 이름을 뽑아 req.params 타입을 만드는' 과정을 정리한다. 동적인 JS의 동작을 실행 전에 검사하는 것이 TypeScript의 목적이다.
Frontend › JavaScript
webpack 동작 원리webpack은 진입점에서 import를 정적으로 따라가 의존성 그래프를 만들고, 로더로 파일을 모듈로 바꾸고, 플러그인으로 빌드에 개입해 번들을 만든다. 로더 적용 순서, 빌드 시 코드 주입 플러그인(Define·Environment·Provide·Ignore), 모듈이 아닌 옛 코드를 다루는 shimming, 스코프 호이스팅, HMR의 동작, Rollup과의 차이를 정리한다.
Frontend
React상태가 바뀌면 필요한 부분만 다시 그리는, 컴포넌트 기반 UI 라이브러리.
Frontend › React
JSX와 엘리먼트 렌더링JavaScript 안에서 HTML처럼 UI를 선언하는 JSX 문법과, 그 결과물인 불변 React 엘리먼트의 렌더링.
Frontend › React
React 버전 변천사: 16부터 19.3까지React가 메이저 버전마다 무엇을 바꿨는지 한 장으로 본다. 16의 Fiber와 Hooks, 17의 새 JSX 변환과 루트 이벤트 위임, 18의 createRoot·자동 배칭·동시성 기능·스트리밍 SSR, 19의 Actions·use·ref as prop·서버 컴포넌트와 제거된 레거시 API, 19.2의 Activity·useEffectEvent, 19.3의 ViewTransition·Fragment ref, 그리고 React Compiler까지 버전별 변경점과 개념 노트를 잇는다.
Frontend › React
React에서 음성 녹음하고 파일로 보내기getUserMedia로 마이크 권한을 얻고 MediaRecorder로 녹음해 Blob을 만든 뒤, 다운로드 링크로 저장하거나 FormData(multipart/form-data)로 서버에 보내는 흐름. react-media-recorder로 간단히 쓰는 방법까지.
Frontend › Testing
정적 분석: 실행하지 않고 검사하기코드를 실행하지도, 테스트를 쓰지도 않고 자동으로 검사하는 정적 분석을 테스트의 맨 아래 층으로 본다. ESLint 규칙(no-unsafe-finally 같은 올바르지만 틀린 코드, eslint-plugin-compat 같은 브라우저 지원 검사)과 TypeScript 타입 검사(noImplicitAny, 검사 대상 포함 확인)가 무엇을 잡고, 무엇은 여전히 테스트로 확인해야 하는지 정리한다.
Frontend › Testing
테스트 실행 환경: Node, DOM 에뮬레이션, 실제 브라우저테스트가 도는 런타임(Node·Deno·Bun 또는 브라우저)과 그 안에서 쓸 수 있는 API가 테스트 환경이다. 순수 로직은 어디서든, 작은 컴포넌트는 jsdom·happy-dom 같은 DOM 에뮬레이션에서, 레이아웃·제스처·사용자 흐름은 실제 브라우저(CI에서는 헤드리스, 필요하면 Xvfb)에서 테스트한다. 환경에 기대지 않는 로직을 떼어 낼수록 테스트가 쉬워진다.
Frontend › Testing
테스트를 돌리는 시점: 로컬, PR, CI테스트는 개발 중 watch 모드로, 병합 전 PR 상태 검사로, 병합 뒤 main 브랜치의 CI로 세 번 돈다. 기본 test 스크립트는 몇 초 안에 끝나게 두고, PR에서 통과했는데 CI에서 깨지는 이유(변경 간 경합, 플레이키 테스트, 매번 돌리지 않는 비싼 테스트)와 빨간 빌드에 되돌리기·앞으로 고치기로 대응하는 법, 경보 피로를 줄이는 법, 한 파일 커버리지·테스트 파일 제외·타임존 고정 같은 실행 옵션을 정리한다.
Frontend › Testing
테스트의 기본 요소: 테스트 케이스, 단언, 스위트, 수명 주기 훅거의 모든 테스트 프레임워크가 주는 공통 부품을 정리한다. 실패하면 던지는 단언(참·동등·깊은 동등), assert 스타일과 expect(BDD) 스타일, 스냅숏 단언, 테스트 케이스와 스위트(test·suite / it·describe), beforeEach·afterEach·beforeAll·afterAll, 비동기 코드를 기다리는 법(async·resolves/rejects·expect.assertions)과 가짜 타이머, 테스트 파일을 두는 위치. 이름은 도구마다 달라도 개념은 같다.
Frontend › Testing
프론트엔드 테스트의 종류와 도구정적·단위·통합·E2E 테스트가 각각 무엇을 확인하는지, 무엇부터 테스트할지, 피라미드·트로피 같은 전략의 모양과 스모크·회귀·시각 같은 목적별 테스트, 폴더 역할(apis·components·hooks·context·pages)별로 무엇을 검증할지, 테스트 대역(더미·스텁·스파이·페이크·목)의 차이, 구현이 아니라 사용자 행위를 검증하는 원칙과 테스트 작성 원칙(AAA, 블랙박스, 현실적인 데이터), 그리고 층마다 쓰는 도구(TypeScript·ESLint, Vitest·Jest, Testing Library, MSW, Playwright).
Frontend › Testing
JavaScript 테스트 모범 사례'테스트는 보자마자 이해되게 단순하게'라는 황금률에서 나오는 원칙들을 한곳에 모았다. 테스트 이름·AAA·블랙박스·테스트 대역 고르기, 현실적인 데이터와 필요한 것만 드러내기, 프런트엔드와 E2E, 백엔드 컴포넌트 테스트와 HTTP 가로채기·장애 시나리오·검증할 결과 다섯 가지·DB 정리 전략, 커버리지와 뮤테이션 테스트, CI에서 지킬 것까지.
Frontend › Web
미디어 캡처와 Web Audio API브라우저에서 카메라·마이크·화면을 받아 다루는 Media Capture and Streams(MediaStream·MediaStreamTrack의 소스와 소비자, getUserMedia·getDisplayMedia, enumerateDevices)와, 소리를 노드 그래프로 만들고 가공하는 Web Audio API(AudioContext, 소스·효과·분석·출력 노드, 정밀한 예약 재생, 자동 재생 정책과 resume, AudioWorklet)를 정리한다.
Frontend › Web
브라우저 실시간 통신: 롱 폴링, SSE, WebSocket 클라이언트서버가 먼저 보내는 데이터를 브라우저에서 받는 세 가지 방법의 클라이언트 쪽 구현을 정리한다. 재요청 루프로 만드는 롱 폴링, HTTP 위의 텍스트 스트림인 SSE(EventSource의 메시지 형식·자동 재연결·Last-Event-ID와 fetch로 직접 읽는 방법), 그리고 WebSocket API의 바이너리·버퍼·종료 코드·재연결까지.
Frontend › Web
브라우저 안 빌드·프리뷰 환경: AI가 만든 화면을 바로 띄우기AI가 생성한 React 코드를 사용자 브라우저에서 바로 빌드해 보여 주는 프리뷰 런타임. 데이터 정책은 API 프록시 플랫폼이 맡고 화면만 AI가 만드는 분리, 서버 dev 서버·Sandpack·WebContainers·직접 구성의 비교, 가상 파일 시스템 + esbuild-wasm + 패키지 조합 해시로 미리 번들한 의존성 + import map 구조를 다룬다.
Frontend › Web
브라우저 지문 채취와 User-Agent 축소지문 채취는 UA·글꼴·화면·캔버스 렌더링처럼 오래 변하지 않는 특성을 모아 쿠키 없이 사용자를 식별한다. 수동·능동 방식과 엔트로피로 이해하고, 브라우저는 API 미구현·권한 요청·값 뭉개기·UA 동결로 대응한다. 사이트는 UA 스니핑을 기능 감지와 Client Hints로 바꾸고 넓은 환경에서 시험한다.
Frontend › Web
스크립트·스타일 로딩 순서와 점진적 렌더링<script>, async, defer, type=module이 HTML 파싱과 실행 순서에 주는 차이, 프리로드 스캐너가 못 보는 늦게 발견되는 자원, CSS는 <head>에 두고 스크립트는 defer로 미루는 이유와 예외, @import를 피하고 중요 CSS만 인라인하는 CSS 경량화, 콘텐츠를 받는 대로 먼저 보여 주는 점진적 렌더링 기법을 정리했다.
Frontend › Web
웹 개발에 대한 이상한 믿음들브라우저 엔지니어·표준 제정자·웹 개발자가 웹 개발을 잘 안다는 믿음, 브라우저는 SPA에 맞지 않는다, MPA가 SPA를 대체한다, 모든 사이트는 JS 없이 동작해야 한다, 빌드 단계는 필요 없다는 주장을 하나씩 따져 본다. 공통된 오류는 내가 겪는 웹이 웹 개발 전체를 대표한다고 여기는 것이다.
Frontend › Web
웹 워커로 메인 스레드 비우기웹 워커는 JS를 메인 스레드가 아닌 별도 스레드에서 돌린다. DOM과 window에는 접근할 수 없고 postMessage로만 메인 스레드와 대화한다. 가져오기·파싱·대용량 계산처럼 DOM이 필요 없는 무거운 일을 옮기면 긴 작업이 줄어 INP가 좋아지고, 그 일에 쓰는 라이브러리의 다운로드·컴파일 비용도 함께 빠진다.
Frontend › Web
웹 컴포넌트: template·slot·Shadow DOM라이브러리 없이 재사용 가능한 요소를 만드는 웹 표준. <template>은 렌더링되지 않는 HTML 조각, 커스텀 요소는 HTMLElement를 상속한 클래스와 라이프사이클 콜백, Shadow DOM은 마크업과 스타일을 캡슐화하는 별도 트리, <slot>은 바깥 내용을 끼울 자리다. :host·::slotted()·::part()·커스텀 속성으로 경계를 넘어 꾸미고, 이벤트는 리타게팅되며 composed 이벤트만 밖으로 나간다. 선언적 Shadow DOM으로 서버에서 그린다.
Frontend › Web
이전 페이지 URL 알아내기사용자가 어느 페이지에서 왔는지 알아내는 세 가지 방법(document.referrer, 직접 기록, 쿠키·sessionStorage)과 각각의 한계.
Frontend › Web
자바스크립트 코드 분할시작할 때 받는 JS가 크면 파싱·컴파일·실행 동안 메인 스레드가 막혀 TBT와 INP가 나빠진다. 커버리지로 시작 때 안 쓰는 코드를 찾고, 동적 import()로 나중에 필요한 코드를 별도 청크로 떼어 상호작용할 때 불러온다. 청크 크기는 캐시·압축·평가 시간의 균형으로 정한다. 로딩 전략 전체는 PRPL(Preload·Render·Pre-cache·Lazy load)로 묶는다.
Frontend › Web
제약 검증: required·pattern·ValidityState브라우저 내장 검증은 HTML 속성(required·type·minlength·pattern·min·max·step)으로 켜고, CSS 의사 클래스(:invalid·:user-invalid)로 보여 주고, Constraint Validation API(ValidityState·setCustomValidity·checkValidity·reportValidity)로 넓힌다. pattern이 v 플래그로 컴파일되는 점, 빈 값은 pattern 검사를 하지 않는 점, 언제 오류를 띄울지, 서버 검증이 왜 따로 필요한지를 정리한다.
Frontend › Web
창과 프레임: 팝업, iframe, postMessage다른 창(팝업)과 프레임(iframe)을 열고 서로 참조하는 법, 동일 출처 정책이 창 사이에서 허용하는 것과 막는 것, sandbox 속성, 출처가 달라도 안전하게 대화하는 postMessage와 같은 출처 탭끼리의 BroadcastChannel, 그리고 내 페이지가 남의 iframe에 갇혀 클릭을 빼앗기는 클릭재킹과 그 방어 헤더까지 정리한다.
Frontend › Web
폼 제출과 데이터 전송<form>은 Enter 제출·검증·자동 완성·보조 기술 지원을 공짜로 주므로 데이터를 보내는 곳에는 항상 쓴다. GET과 POST 고르기, 제출 버튼의 종류와 type="button" 함정, 제출 버튼을 언제 막는가, FormData와 fetch로 새로 고침 없이 보내는 점진적 향상, 같은 엔드포인트에서 HTML·JSON 응답 나누기, HTTPS·데이터 최소화·허니팟 같은 보안·개인정보 원칙을 정리한다.
Frontend › Web
프라이버시를 위한 암호화: 전송·저장·종단 간사용자 데이터를 남이 읽지 못하게 하는 세 겹의 암호화. 전송 중은 HTTPS·리다이렉트·HSTS로, 저장 중은 클라우드 기본 암호화와 직접 관리 키로, 운영자조차 못 읽게 하려면 Web Crypto로 클라이언트에서 암호화하는 종단 간 암호화로 지킨다. 각 층이 막는 위협과 한계를 정리한다.
Frontend › Web
프론트엔드 웹 개발 용어집API부터 Yarn까지 프론트엔드 개발에서 자주 듣는 용어 70여 개를 주제별로 묶어 한두 줄로 설명하고, 자세한 노트가 있는 용어는 그 노트로 연결했다.
Frontend › Web
프론트엔드의 등장 배경초기 웹에는 프론트엔드라는 개념이 없었다. 이미지·CSS·JavaScript·AJAX가 차례로 등장하고 Flash가 물러나고, 구글·페이스북이 웹을 앱 플랫폼으로 밀어붙이면서 화면을 만드는 일이 전문 영역이 되었고, 트래픽이 커지자 프론트엔드와 백엔드가 나뉘었다. React 이후에는 프레임워크·상태 관리·타입·스타일링·빌드 도구·렌더링 방식이 해마다 바뀌었지만, 갈래별로 보면 방향은 일정했다.
Frontend › Web
DOM과 BOM브라우저가 HTML 문서를 파싱해 메모리에 올린 객체 트리와, 이를 다루는 API. window의 두 역할과 DOM·CSSOM·HTML 명세의 구분, 공백·주석까지 노드가 되는 규칙과 파서의 자동 교정, 노드 클래스 계층과 확인 방법, 문자열 HTML 대신 DOM이 필요해진 이유와 프레임워크 시대에 DOM API를 익히는 법도 다룬다.
Frontend › Web
IndexedDB브라우저에 내장된 출처별 트랜잭션 키-값 데이터베이스의 API. 버전으로 스키마를 바꾸는 upgradeneeded, 객체 저장소·키·인덱스·키 범위·커서로 저장하고 찾는 법, 자동 커밋되는 트랜잭션의 함정과 오류 처리, 다른 탭과의 버전 충돌, 그리고 네이티브 개념이 idb 래퍼에서 어떻게 보이는지 정리한다.
Frontend › Web
INP 최적화: 긴 작업 쪼개기와 양보INP는 입력 지연, 처리 시간, 표시 지연의 합이다. 필드 데이터로 느린 상호작용을 찾고, 시작할 때의 스크립트 평가를 줄여 입력 지연을, 핸들러를 가볍게 하고 메인 스레드에 양보해 처리 시간을, DOM 크기·content-visibility·클라이언트 HTML 렌더링을 손봐 표시 지연을 줄인다.
Frontend › Web
Intersection Observer와 관찰자 API스크롤 이벤트로 위치를 계산하는 대신, 요소가 화면(또는 스크롤 영역)에 얼마나 보이는지 브라우저가 알려 주는 IntersectionObserver. root·rootMargin·threshold 옵션, 무한 스크롤·지연 로딩·끝까지 읽음 감지 패턴, 크기 변화를 보는 ResizeObserver와 DOM 변화를 보는 MutationObserver를 정리한다.
Frontend › Web
Web Storage: localStorage와 sessionStorage브라우저에 키-값 문자열을 저장하는 localStorage·sessionStorage의 API, 객체를 JSON으로 직렬화해 저장하고 복원하는 법, 다른 탭과 동기화하는 storage 이벤트, 예외 처리와 보안상 넣지 말아야 할 것을 정리한다.
Frontend › Web
WebAssembly: 브라우저의 두 번째 언어C·C++·Rust 같은 언어를 컴파일해 브라우저에서 거의 네이티브 속도로 돌리는 바이트코드 형식 WebAssembly(Wasm)를 정리한다. JavaScript와 비교해 어디서 시간이 줄어드는지(받기·파싱·컴파일·재최적화·실행·GC), Module·Memory·Table·Instance라는 네 개념과 JS API, 툴체인, MVP 이후 Wasm 2.0·3.0에 들어간 기능, 브라우저 밖 실행(WASI)과 쓸 곳·안 쓸 곳까지.
Frontend
Electron: 웹 기술로 데스크톱 앱 만들기Electron은 Chromium과 Node.js를 한 앱에 묶어 HTML·CSS·JavaScript로 macOS·Windows·Linux 데스크톱 앱을 만든다. 앱 수명과 OS 기능을 맡는 메인 프로세스, 창마다 뜨는 렌더러 프로세스, 둘을 잇는 preload·contextBridge·IPC 구조와, 기본으로 켜진 컨텍스트 격리·샌드박스 같은 보안 기본값, 패키징과 릴리스 주기, OS 웹뷰를 쓰는 Tauri와의 차이를 정리한다.
Frontend
React와 Vue 말고: Svelte, Angular, Preact, Alpine.js, HTMXReact·Vue 다음으로 많이 쓰이는 프레임워크들의 특징을 비교한다. 컴파일러, 풀스택 프레임워크, 경량 대체재, HTML 속성 기반 도구로 성격이 갈린다. Knockout부터 Svelte까지 프레임워크의 계보와 컴파일러 방식이 빠른 이유도 다룬다.
Frontend
React와 Vue 비교같은 범주(컴포넌트 기반 선언형 UI, 가상 DOM)에 속하는 React와 Vue의 차이를 정리한다. JSX와 템플릿, 불변 상태와 반응형 상태, 단방향 흐름과 v-model, 라이브러리와 공식 생태계의 범위를 비교하고, 흔한 오해와 고르는 기준을 다룬다.
Frontend
Vue 상태 관리: Pinia(옛 Vuex)여러 컴포넌트가 함께 쓰는 데이터를 스토어 한 곳에 모으는 Vue의 상태 관리. 지금 공식 라이브러리는 Pinia이고, defineStore로 state·getters·actions를 정의한다. Vuex의 mutations/actions 구분은 사라졌다.
Backend › Architecture
빠르고 유지보수하기 좋은 DB 조회 패턴서버 코드에서 DB 조회를 빠르게 하면서도 코드는 단순하게 두는 방법. 직렬 조회 → 수동 배치 → 병렬 처리 → 자동 배치 → 값별 독립 함수 → 요청 단위 캐시로 발전시키며, 핵심은 '지역적 추론(local reasoning)'이라는 점을 정리한다. DataLoader의 원리이기도 하다.
Backend › Express
Node.js 런타임: 구조·이벤트 루프·운영과 OS 차이브라우저 밖에서 JavaScript를 실행하는 런타임 Node.js를 정리한다. V8·libuv·스레드 풀로 이뤄진 구조, timers·poll·check 단계로 도는 Node 이벤트 루프와 nextTick·setImmediate의 차이, EventEmitter와 Buffer, cluster·worker_threads·child_process로 멀티코어 쓰기, 비동기 에러 처리와 --inspect 디버깅, 힙 크기 설정과 운영 관례, Node의 설계를 반성하며 나온 Deno·Bun, Windows·macOS 차이로 깨지는 환경 변수와 경로를 cross-env와 path 모듈로 푸는 법까지.
Backend › Express
Node.js 스트림: 데이터를 조각으로 흘려 처리하기큰 데이터나 끝이 없는 데이터를 통째로 메모리에 올리지 않고 조각(chunk) 단위로 처리하는 Node.js 스트림을 정리한다. Readable·Writable·Duplex·Transform 네 종류, 흐름 모드와 일시정지 모드, 백프레셔와 highWaterMark, objectMode, pipe의 함정과 pipeline, for await 비동기 반복, 웹 스트림과의 관계, streams1~3의 변천까지.
Computer Science › Network
WebRTC브라우저와 앱이 서버를 거치지 않고 오디오·비디오·데이터를 실시간으로 주고받게 하는 WebRTC의 API, 시그널링, ICE/STUN/TURN, 연결 흐름.
Algorithm
코딩 테스트 접근법주석으로 설계하고 테스트 케이스를 먼저 적는 문제 풀이 순서, 출제 빈도별 알고리즘 우선순위, 막혔을 때 풀이를 볼 시점을 정하는 연습법과 그 방식이 자기기만이 되는 함정, 랜덤 비교 테스트로 반례 찾기, 막혔을 때 접근을 찾는 관점과 이론상 최선 복잡도(BTTC)를 기준으로 시간·공간을 줄이는 최적화 기법, 파이썬·자바스크립트 실전 팁.
AI & Data
클라이언트 사이드 웹 AI: 내장 AI API, 라이브러리, 런타임브라우저에서 AI를 돌리는 방법은 브라우저가 들고 있는 모델을 부르는 내장 AI(Chrome의 Summarizer·Translator·Prompt API 등)와, Transformers.js·WebLLM 같은 라이브러리로 직접 고른 모델을 돌리는 방식 두 가지다. Chrome 내장 AI API의 현재 상태와 쓰는 법, 라이브러리별 쓰임, Wasm·WebGPU·WebNN 런타임을 정리한다.
Tools › Chrome DevTools
DevTools Console 활용Chrome DevTools 콘솔로 메시지를 읽고 걸러 내는 법, console.table·group·time·assert·count·trace 같은 Console API와 %c 서식, 실시간 표현식, $0·$_·$()·$$()·copy()·monitorEvents·getEventListeners·queryObjects 같은 콘솔 전용 유틸리티, 페이지 위에서 JavaScript를 실행하는 법을 정리했다.
Tools › Chrome DevTools
DevTools로 JavaScript 디버깅하기Chrome DevTools Sources 패널로 JavaScript를 디버깅하는 법. 상황별 중단점(줄·조건부·로그포인트·DOM·XHR/fetch·이벤트 리스너·예외·debugger 문), 단계 실행과 Scope·Watch·Call Stack, 스니펫, 소스 맵과 무시 목록, 로컬 파일에 저장하는 Workspaces와 응답을 바꿔 끼우는 로컬 재정의, Recorder까지 정리했다.
Tools › Code Review
코드 리뷰에서 자주 나온 지적코드 리뷰에서 자주 반복되는 JavaScript·React 코드 지적(const, else, 기본값, 불리언 이름, 빈 문자열 비교, 비동기 에러, 불변 업데이트, props 설계 등)을 고친 코드와 함께 정리.
Tools
유의적 버전(SemVer)MAJOR.MINOR.PATCH 세 숫자로 변경의 성격(호환 깨짐, 기능 추가, 버그 수정)을 알리는 버전 규칙. 각 자리를 올리는 기준과 예시 흐름, 0.x 단계의 의미, 프리릴리스와 빌드 메타데이터, 버전 비교 순서, npm의 ^·~ 범위가 SemVer에 기대는 방식을 정리했다.