본문으로 건너뛰기

버그 제보

이상한 점을 알려 주시면 고칠게요. 지금 보고 있는 페이지와 브라우저 정보가 함께 담겨요.

페이지:

Frontend

JavaScript

작성 2026. 10. 20.추가
목차8개 항목

JavaScript는 브라우저 화면을 동적으로 만들기 위한 언어이며, 브라우저(BOM)와 그 안의 문서(DOM)를 조작할 수 있는 유일한 언어다. 언어의 핵심 문법은 ECMAScript 표준으로 정의된다. ECMA International이 ECMA-262 규격으로 정의한 언어가 ECMAScript이고, 2015년에 발표된 6번째 판(ES6, ES2015)부터 let/const, 화살표 함수, Promise, 클래스 같은 현대적 문법이 대거 들어왔고, 이후 해마다 새 판(ES2016, ES2017 …)이 나온다.

노트

언어 기초

  • 변수와 데이터 타입: 식별자 규칙, let·const·var, 호이스팅, 원시·참조 타입과 복사(structuredClone), typeof, null과 undefined
  • 연산자와 제어문: 연산자 우선순위, 형변환과 truthy·falsy, == vs ===, 단축 평가와 ?.·??, 삼항 연산자, if·switch, for·for...in·for...of
  • 문(Statement)과 식(Expression): 값을 만드는 식과 명령하는 문, 식 자리, {}·function의 문/식 해석 차이, JSX 중괄호가 식만 받는 이유
  • 함수와 this: 선언식·표현식, 화살표 함수, rest·spread, this와 bind·call·apply, 매개변수 기본값
  • 데코레이터와 콜 포워딩: 함수를 감싸 기능을 더하는 래퍼, func.apply(this, args)로 this·인자 넘기기, call과 apply, 메서드 빌리기, 래퍼가 잃는 함수 속성
  • 에러 처리: try...catch와 커스텀 에러: try·catch·finally가 못 잡는 것, finally와 return, 에러 객체와 내장 에러 종류, 다시 던지기, Error 상속과 cause로 예외 감싸기, 전역 에러 이벤트
  • 스코프와 클로저: 전역·모듈·함수·블록 스코프, 렉시컬 스코프, 호이스팅과 TDZ, 클로저로 만드는 팩토리·비공개 상태
  • 실행 컨텍스트: 실행 컨텍스트 스택, LexicalEnvironment·VariableEnvironment와 this, 생성·실행 단계로 보는 호이스팅·TDZ·스코프 체인
  • 배열·객체 다루기: 주요 메서드, map·filter·reduce, 원본을 바꾸지 않는 toSorted·with, ES6 객체 문법, 구조 분해, JSON
  • Map과 Set: 객체 대신 Map을 쓸 때, 키의 종류와 순서, Set으로 중복 제거, WeakMap
  • 숫자와 Math: 반올림 메서드, 난수 정수, Number vs parseInt, NaN, 0.1 + 0.2, 돈은 정수로, Intl.NumberFormat
  • JavaScript 주석: 쓰는 법과 네 가지 문법: //·/* */의 동작, 해시뱅 #!, HTML 유사 주석 <!--의 유래
  • 문자열 다루기: UTF-16과 불변성, 템플릿 리터럴과 태그드 템플릿, 검색·slice, localeCompare·Intl.Collator, 서로게이트 쌍·normalize·Intl.Segmenter
  • 구조 분해 할당: 배열·객체 패턴, undefined일 때만 쓰는 기본값, 이름 바꾸기·중첩, 똑똑한 함수 매개변수와 = {}
  • JSON: stringify와 parse: 빠지거나 바뀌는 값, replacer·space·toJSON, reviver, 큰 정수와 JSON.rawJSON
  • 객체의 원시형 변환: hint 세 가지, Symbol.toPrimitive·valueOf·toString 순서, [] + {}의 이유
  • 가비지 컬렉션과 메모리 누수: 도달 가능성, mark-and-sweep, 누수 패턴, WeakMap·WeakRef·FinalizationRegistry
  • 정규 표현식: 문법·플래그·메서드: 문법·플래그·메서드 표, 명명된 그룹, lastIndex 함정, v·d·y 플래그, 플래그 수정자, RegExp.escape
  • 정규식 엔진: 탐욕·게으름·전후방탐색·백트래킹: 백트래킹 원리, 게으른 수량자보다 제외 세트, 전방·후방탐색, 재앙적 백트래킹과 ReDoS 방어
  • class 문법: 생성자 함수와 new, 선언·표현식, constructor, 필드·#private, static·정적 초기화 블록, extends·super, getter·setter
  • 프로토타입과 상속: 클래스와 다른 철학(분류 대 원형), 프로토타입 체인, new가 하는 일, 인스턴스 데이터와 프로토타입 메서드, Object.create, class와의 대응
  • ECMAScript 표준과 TC39 프로세스: ECMA-262와 TC39, Stage 0~4, ES6=ES2015 이름 규칙, ES2022 기능과 이후 판
  • 모듈: export와 import: named export와 default export, export default 논쟁
  • JavaScript 디자인 패턴: 생성 패턴: 생성자·모듈·싱글톤·프로토타입 패턴과 프로토타입 기반 언어의 차이
  • 자바스크립트에서 타임존 다루기: 타임존 ≠ 오프셋, 서머타임, IANA tz database, Date와 서버 간 시간 주고받기, 오프셋 계산의 한계
  • TypeScript: 개념과 문법 한눈에 보기: 슈퍼셋이라는 본질과 타입을 얻기까지의 역사, 실행 환경(TypeScript 7·Node.js 타입 제거), any·unknown·never, 단언·가드·satisfies, type vs interface, 제네릭, 구분된 유니언, 데코레이터, 유틸리티 타입, 익히는 순서
  • TypeScript 코딩 컨벤션: 이름 짓기, 타입, 클래스, 배열 메서드, 에러 처리, 모듈 규칙을 필수·권장 등급과 이유로 정리하고 Airbnb·Google 스타일 가이드와 갈리는 지점을 비교
  • TypeScript로 동적인 코드에 정적 타입 입히기: 리터럴 유니온, never, 제네릭, 템플릿 리터럴 타입, infer 재귀로 라우트 매개변수 추출
  • TypeScript 타입 호환성: 값의 집합으로 보는 타입, 구조적 타이핑과 잉여 속성 검사, 유니언·인터섹션, 함수의 공변·반공변, 구분자
  • TypeScript 타입 연산: 타입으로 타입 만들기: keyof·typeof·인덱스 접근, 매핑 타입, 조건부 타입과 infer, 분배 규칙, 템플릿 리터럴 타입, 유틸리티 타입 구현
  • TypeScript 프로젝트 설정: tsconfig·모듈 해석·선언 파일: 컴파일 컨텍스트, TypeScript 6·7 기본값과 폐기 옵션, strict 계열, bundler·nodenext 해석, verbatimModuleSyntax, 타입·값 선언 공간, declare·declare global·lib·@types
  • TypeScript 컴파일러 내부 구조: 스캐너·파서·바인더·체커·이미터, AST와 트리비아, 심볼과 심볼 테이블, 지연 검사와 진단, 소스맵, Go로 옮긴 TypeScript 7
  • TypeScript 오류 메시지 읽기와 흔한 오류: 상세 사슬을 아래부터 읽기, 자주 보는 TS 오류 코드의 원인과 해결, 리터럴 넓히기 함정, @ts-expect-error, 진단 플래그
  • TypeScript 실용 패턴: 브랜드 타입, enum 대신 as const, Result 반환, 믹스인, 타입 안전 이벤트 이미터, 인스턴스화 표현식
  • ESLint와 Prettier 설정: 품질은 ESLint, 모양은 Prettier로 역할 나누기, 저장 시 자동 수정 에디터 설정, flat config 읽는 법과 ESLint 10에서 제거된 .eslintrc
  • strict mode(엄격 모드): "use strict" 켜는 법, 모듈·class 자동 적용, 암묵적 전역·조용한 실패·this가 바뀌는 동작
  • 속성 설명자: writable·enumerable·configurable, getter·setter 접근자, defineProperty 기본값, freeze·seal
  • Proxy와 Reflect: 트랩으로 객체 기본 동작 가로채기, Reflect로 전달하기와 receiver, 내부 슬롯·private 필드 한계, 반응형·불변 라이브러리의 원리
  • Symbol: 고유한 원시값, 충돌 없는 속성 키, Symbol.for 레지스트리, well-known symbol
  • 이터레이터와 제너레이터: Symbol.iterator와 next(), function*·yield·yield*, 게으른 수열, 이터레이터 헬퍼, for await

프로그래밍 패러다임

  • 객체 지향 프로그래밍과 JavaScript: 구조체에서 클래스로, 캡슐화·상속·추상화·다형성, 프로토타입·덕 타이핑·일급 함수로 푼 JavaScript의 OOP
  • 함수형 프로그래밍: 액션·계산·데이터, 카피 온 라이트와 방어적 복사, 계층형 설계와 추상화 벽, 입력→화면 파이프라인, 커링과 부분 적용(partial)
  • 반응형 프로그래밍과 RxJS: 변경 전파와 선언적 데이터 흐름, Pull→Push와 제어의 역전, Observable과 연산자, Hot·Cold

브라우저와 함께

엔진과 실행

비동기

  • 이벤트 루프: 싱글 스레드, 콜 스택, Web APIs, 태스크·마이크로태스크 큐
  • 콜백과 Promise: 비동기의 문제, 콜백 지옥, Promise 상태와 체이닝, 콜백 API를 Promise로 감싸기, all·allSettled·race·any
  • async/await: 동기 코드처럼 쓰는 비동기, 반복문 안의 await, 에러를 처리하는 네 자리, 실무에서 지킬 것
  • AJAX와 HTTP 요청: XMLHttpRequest, fetch 옵션, AbortController로 취소·타임아웃, CORS, 브라우저 코드에 비밀 키를 두지 않는 이유

라이브러리

  • 날짜 라이브러리: 0부터 시작하는 월 같은 기본 Date의 함정, Moment.js 이후의 대안, date-fns와 Day.js 비교, 표준 API Temporal의 지원 현황
  • 패키지 매니저: npm, yarn, pnpm: lock 파일의 역할, 매니저 비교와 고르는 기준, packageManager와 Corepack, 설치 스크립트 차단, npm EINTEGRITY 오류 해결
  • npm install이 하는 일: 설치 단계(해석·캐시·node_modules·lock 파일·설치 스크립트), 로컬·전역 설치가 바꾸는 위치, 앱 번들·배포에 들어가는 것, 되돌리는 법
  • 번들러의 역사와 Vite: CommonJS·AMD·ES 모듈에서 번들러로, esbuild와 Snowpack이 푼 느린 빌드, Vite의 개발·배포 이원 구조
  • webpack 동작 원리: 의존성 그래프, 로더 적용 순서, Define·Provide 같은 플러그인, shimming, 스코프 호이스팅, HMR, Rollup과 차이
  • Babel과 AST 변환: parse → transform → generate, 플러그인·프리셋 순서, preset-env와 core-js, visitor 패턴, codemod
  • npm 스크립트로 작업 자동화하기: node_modules/.bin과 PATH, pre/post 훅, 인자 전달, 직렬·병렬 조합, node --run, 태스크 러너가 밀려난 이유
  • 작은 모듈 철학과 npm 의존성의 비용: 유닉스 철학과 하이퍼 모듈화 논쟁, left-pad 사건, 공급망 위험, 의존성을 들일 때의 판단 기준

코딩 스타일

이 주제의 항목 · 70

댓글

GitHub 계정으로 댓글을 남길 수 있어요.