태그: JavaScript
42편
-
Qwik 프레임워크: Resumability와 Hydration의 차이, Qwik City 라우팅·서버 액션
Qwik이 Hydration 대신 Resumability로 서버에서 직렬화한 상태를 이어받는 원리를 설명하고, useSignal·useStore 반응성, Qwik City 라우팅과 로더, server$·routeAction$ 서버 액션, React에서 옮길 때의 주의점을 예제로 다룹니다.
-
SolidJS: Signal 기반 세밀한 반응성과 React와의 근본적 차이
SolidJS의 createSignal·createEffect·createMemo가 Virtual DOM 없이 바뀐 DOM만 갱신하는 원리와, 컴포넌트가 한 번만 실행되는 데서 오는 React와의 차이를 설명합니다. Show·For, Store·Context, Solid Router도 다룹니다.
-
Bun 런타임 실전: bun install·Bun.serve·bun:test와 Node.js 호환성 점검
bun init과 bun install로 프로젝트를 시작하고 Bun.serve HTTP 서버, bun:sqlite, bun:test, bun build 번들링과 단일 실행 파일, Bun Shell, Workspaces를 예제로 써 본 뒤, 타입 검사·lockfile·테스트 격리처럼 Node.js에서 옮길 때 달라지는 점을 점검합니다.
-
Cloudflare Workers 시작하기: KV·D1·R2로 Edge 서버리스 API 만들기
Cloudflare Workers로 엣지 서버리스 API를 만드는 방법. V8 Isolate가 콜드 스타트를 줄이는 원리와 CPU 시간 제약, KV·D1·R2·Durable Objects의 일관성 차이, Wrangler CLI 배포와 URL 단축기 예제를 정리합니다.
-
Svelte 입문: 컴파일러 기반 반응성, 컴포넌트, 스토어, 트랜지션, SvelteKit
Svelte는 빌드 타임에 컴파일되어 가상 DOM 없이 동작하는 프레임워크입니다. React·Vue와의 비교, 기본 문법, 컴포넌트, 스토어, 라이프사이클, 애니메이션과 트랜지션, SvelteKit, TypeScript 지원을 다룹니다.
-
React 실무 정리: Hooks 심화, Fiber 아키텍처, Suspense·에러 처리, Context, 성능 최적화
Vite로 React 18 프로젝트를 시작해 useState·useEffect 실무 패턴과 useMemo·useCallback 사용 기준을 정리하고, Fiber의 렌더·커밋 단계와 동시성 렌더링을 설명합니다. Error Boundary, Suspense, Context 최적화, 가상화도 다룹니다.
-
Playwright E2E 테스트 심화: Selenium·Cypress 비교, 설정 최적화, 병렬 실행, 비주얼 회귀
Playwright로 E2E 테스트를 구축하는 방법. Selenium·Cypress와의 비교, 설치와 초기 설정, 기본·고급 테스트 패턴, 설정 최적화, CI/CD 통합, 디버깅 도구, 비주얼 리그레션 테스트를 예제로 다룹니다.
-
JavaScript 동작 원리: 실행 컨텍스트, 프로토타입 체인, 클로저, 이벤트 루프
실행 컨텍스트와 스코프 체인이 식별자를 찾는 과정, [[Prototype]] 체인과 new의 연결, 클로저가 렉시컬 환경을 붙잡는 방식, Promise·setTimeout의 실행 순서를 결정하는 이벤트 루프를 예제로 설명합니다.
-
Oxlint로 린트 속도 올리기: ESLint에서 옮기는 법, 설정과 CI 통합, Biome와 비교
Rust로 만든 Oxlint를 설치해 ESLint flat config를 자동 변환하고 oxlint와 eslint를 함께 돌리며 점진 도입하는 방법, 규칙 카테고리와 -A·-W·-D 플래그, 자동 수정의 안전성, GitHub Actions 통합을 설명합니다.
-
SWC 컴파일러 심화 가이드 — 고급 설정·플러그인·Next.js·Vite·모노레포
Rust 기반 SWC의 아키텍처, .swcrc 고급 옵션, 플러그인·Next.js·Vite 통합, 성능 튜닝, Babel 비교, 모노레포 설정을 실무 관점에서 정리합니다. SWC(Speedy Web Compiler)는 Rust로 구현된 JavaScript·TypeScript 컴파일러입니다. 단순히 “Babel보다 빠르다”는 인상을 넘어, 파이프라인 구조·설정 계층·도구별 통합 방식을 이해해야 실무에서 오판 없이 튜닝할 수 있습니다.
-
Lit로 웹 컴포넌트 만들기: 반응형 속성, 템플릿 바인딩, 라이프사이클, 프레임워크 통합
Lit로 웹 컴포넌트를 만들 때 @property와 @state를 나누는 기준, html 템플릿의 속성·프로퍼티·이벤트 바인딩, 업데이트 라이프사이클 훅, ::part로 스타일을 여는 방법, React·Vue·Angular에서 쓰기 위한 설정을 예제로 설명합니다.
-
Deno 2.0에서 달라진 것: npm 호환 범위, JSR, 워크스페이스, Node에서 옮겨 갈 때
Deno 2.0에서 npm: 명세자, package.json과 node_modules 지원, 프라이빗 레지스트리가 어디까지 Node처럼 동작하는지 정리합니다. JSR과 npm의 관계, 워크스페이스 구성, 공식 벤치마크를 읽는 법, Node 프로젝트를 단계적으로 옮기는 순서도 다룹니다.
-
Bun 1.1에서 바뀐 것: Windows 지원, 내장 번들러·테스트 러너, 성능 수치 읽는 법
Bun 1.1에서 달라진 Windows 지원, bun build의 --target=node와 --compile 단일 실행 파일, bun test의 모듈 목과 --watch를 살펴보고, 공식 블로그의 성능 수치를 어떻게 읽어야 하는지 설명합니다.
-
Webpack 5 내부 동작과 설정: 의존성 그래프, 로더·플러그인 구조, 코드 스플리팅, Tree Shaking
Webpack 5 정리. 의존성 그래프와 번들링 알고리즘, 로더·플러그인 아키텍처, 코드 스플리팅 전략, Tree Shaking 메커니즘, 프로덕션 패턴, 설치와 기본 설정, Loaders와 Plugins를 다룹니다.
-
Prettier 설정과 도입: 옵션, ESLint와 역할 나누기, VS Code·pre-commit 연동
Prettier로 코드 포맷팅을 자동화하는 방법. 설치와 기본 사용, 설정 옵션, ESLint 통합, ignore 파일, VS Code 연동, pre-commit 훅, 파일별 설정과 CLI 사용을 예제로 정리합니다.
-
React & Next.js 입문 가이드
JSX와 컴포넌트, props와 state 구분, useState·useEffect·useContext·useReducer로 React 기초를 다진 뒤 Next.js App Router의 폴더 기반 라우팅과 Server Components로 넘어갑니다. ES6 문법 같은 사전 지식도 먼저 짚습니다.
-
Jest 실전 테스트 가이드 | 플레이키 테스트·Mock·Snapshot·Coverage 트러블슈팅
jest.mock 호이스팅 때문에 mock이 적용되지 않는 문제, Fake Timers와 MSW로 테스트를 결정적으로 만드는 방법, 스냅샷 남용과 커버리지 숫자의 함정, 종료되지 않는 Jest 프로세스를 --detectOpenHandles로 찾는 법을 다룹니다.
-
D3.js로 차트 만들기: 데이터 바인딩, Scale, 막대·선 차트, 툴팁, React와 함께 쓰기
D3.js로 데이터 시각화를 구현하는 방법. Selection과 데이터 바인딩(data·enter), Scale과 Axis, 막대·선 차트, 툴팁과 인터랙션, React와 함께 쓰는 방법을 예제로 정리합니다.
-
Deno로 안전하게 JavaScript 실행하기: 권한 모델, HTTP 서버, Deno KV, Fresh, Deno Deploy
Deno 정리. 권한 기반 보안 모델, TypeScript 네이티브 실행, HTTP 서버, 표준 라이브러리, URL Import, Deno KV, Fresh 웹 프레임워크, Deno Deploy 배포를 예제로 다룹니다.
-
ESLint 설정과 내부 동작: TypeScript·React·Prettier 조합, pre-commit, 규칙 엔진과 Autofix
ESLint로 코드 품질을 관리하는 방법. 처음 설정하기, TypeScript·React와 함께 쓰기, Prettier와의 역할 분담, ignore·에디터·pre-commit 훅 연동, Espree AST와 규칙 엔진·Autofix 내부 동작을 다룹니다.
-
Axios 실전: 인스턴스·인터셉터 설계와 401 토큰 갱신 무한 루프 막기
Axios 인스턴스와 요청·응답 인터셉터로 토큰 주입과 공통 에러 처리를 구성하고, 401 응답 뒤 토큰 갱신이 무한 루프에 빠지지 않게 하는 패턴, AbortController 요청 취소, TypeScript 타이핑을 예제로 다룹니다.
-
Babel 내부 동작: 파서·AST 순회·코드 생성과 Presets·Plugins 설정
@babel/parser가 소스를 AST로 만들고, traverse의 방문자가 노드를 바꾸고, generator가 코드와 소스 맵을 내보내는 과정을 따라간 뒤 preset-env와 core-js 폴리필, Webpack·Vite 통합 설정을 다룹니다.
-
언어별 자료구조 비교: C++, Python, Java, JavaScript 표준 컬렉션
C++ vector, Python list, Java ArrayList, JavaScript Array처럼 이름이 비슷한 컬렉션이 내부 구현과 성능에서 어떻게 다른지 배열, 연결 리스트, 맵, 셋 순으로 비교하고 언어별로 알맞은 자료구조 선택 기준을 제시합니다.
-
JavaScript 비동기 디버깅 실전 사례 | Promise 체인 에러 추적하기
간헐적으로 발생하던 Unhandled Rejection이 에러 핸들러 누락 때문이었음을 추적한 사례입니다. 사라지는 스택 트레이스를 복원하고, async/await 전환, 전역 핸들러, Express 에러 미들웨어, Sentry 연동으로 해결합니다.
-
JavaScript var vs let vs const: 스코프·호이스팅 차이와 선택 기준
var의 함수 스코프와 let·const의 블록 스코프, 호이스팅과 TDZ, 재할당·재선언 규칙을 비교표와 예제로 정리하고, const 객체가 수정되는 이유와 루프 클로저 버그, ESLint로 선언 규칙을 강제하는 방법을 설명합니다.
-
Node.js 모듈 시스템: CommonJS vs ES Modules, 모듈 캐싱, 순환 참조, 모듈 해석 규칙
Node.js 모듈 시스템 정리. CommonJS와 ES Modules의 차이, 내장 모듈, 모듈 캐싱, 순환 참조, 모듈 해석 규칙, package.json의 type·exports 필드를 예제로 다룹니다.
-
Node.js 비동기 프로그래밍 | Callback, Promise, Async/Await
에러 우선 콜백과 콜백 지옥, Promise 체이닝과 정적 메서드, async/await 병렬 처리와 에러 처리를 다루고, libuv 이벤트 루프 페이즈에서 process.nextTick과 Promise 마이크로태스크가 실행되는 순서를 예제로 설명합니다.
-
Node.js fs 모듈: 파일 읽기·쓰기, 디렉터리 관리, 스트림, 파일 감시, 에러 처리
Node.js fs 모듈의 동기·콜백·Promise API 차이와 인코딩, JSON 파일 읽기·쓰기, stat과 디렉터리 재귀 탐색, 스트림과 pipe를 이용한 대용량 파일 처리와 압축, fs.watch·chokidar 파일 감시를 예제로 설명합니다.
-
Node.js 시작하기 | 설치, 설정, Hello World
Node.js가 V8과 libuv로 JavaScript를 서버에서 실행하는 구조, 브라우저 환경과의 차이를 짚고 Windows·macOS·Linux 설치와 nvm 버전 관리, 첫 HTTP 서버와 라우팅, npm과 package.json scripts까지 다룹니다.
-
JavaScript 시작하기: 개발 환경, 기본 문법, 브라우저에서 실행하기
JavaScript와 ECMAScript의 관계, 브라우저와 Node.js 실행 환경의 차이, V8 엔진과 이벤트 루프·가비지 컬렉션의 기본 구조를 살펴본 뒤 변수·타입·연산자와 var·let·const 선택 기준으로 첫 코드를 작성합니다.
-
JavaScript 변수와 데이터 타입: let, const, var와 원시 타입
let·const·var 선언 차이와 블록·함수·전역 스코프, 원시 타입과 참조 타입, typeof와 암묵적 타입 변환, var·let·함수 호이스팅과 TDZ를 변수 스왑·안전한 숫자 변환 같은 예제로 설명합니다.
-
JavaScript 함수: 선언식, 화살표 함수, 콜백, 클로저
함수 선언문·함수 표현식·화살표 함수의 차이, 기본값·나머지·구조 분해 매개변수, 고차 함수와 클로저로 만드는 프라이빗 변수, this 바인딩과 bind·call·apply, 콜백과 IIFE까지 예제로 정리합니다.
-
JavaScript 배열과 객체: 자주 쓰는 Array·Object 메서드
push·splice·find·map·filter·sort 같은 배열 메서드와 Object.keys·entries·assign 정적 메서드, 배열·객체 구조 분해, spread와 rest 연산자, reduce 심화와 메서드 체이닝을 데이터 변환 예제로 익힙니다.
-
JavaScript 비동기 프로그래밍: 콜백, Promise, async/await
콜백 지옥이 생기는 이유에서 시작해 Promise 생성과 체이닝, Promise.all 등 정적 메서드, async/await 병렬 실행과 에러 처리를 다루고, 재시도·타임아웃·순차 처리 예제와 마이크로태스크 순서를 설명합니다.
-
JavaScript DOM 조작 | 웹 페이지 동적으로 제어하기
getElementById와 querySelector로 요소를 선택하고, innerHTML과 textContent의 보안 차이, 속성·스타일 조작, 요소 생성·삭제, 캡처링·버블링과 이벤트 위임을 To-Do 리스트·탭·모달 예제로 구현합니다.
-
JavaScript 클래스: ES6 class 문법, 상속, private 필드
ES6 class 정의와 getter·setter, static 메서드를 이용한 팩토리, extends와 super 상속, # 접두사 private 필드를 게임 캐릭터·쇼핑몰 예제로 익히고, super() 누락이나 new 없이 호출하는 실수를 짚습니다.
-
JavaScript 모듈: ES Modules와 CommonJS의 차이
ES Modules의 named·default export와 import, CommonJS의 module.exports·require 차이, 브라우저 type="module"과 동적 import, Node.js package.json 설정, Webpack·Vite 번들러 선택을 예제로 설명합니다.
-
JavaScript 에러 처리 | try-catch, Error 객체, 커스텀 에러
try-catch-finally 흐름과 TypeError·RangeError 같은 내장 Error 타입, Error를 상속한 커스텀 에러 클래스, Promise와 async/await의 비동기 에러 처리, 에러 래퍼·재시도·로깅 패턴을 API 클라이언트 예제로 설명합니다.
-
JavaScript 디자인 패턴 | 싱글톤, 팩토리, 옵저버 패턴
JavaScript에서 싱글톤·팩토리·모듈·옵저버·프록시·전략 패턴을 구현하고, ES6 모듈과 클래스, Proxy 객체로 현대적으로 바꾸는 방법을 이벤트 시스템·캐싱 프록시·상태 관리 예제로 설명합니다.
-
npm install 에러 해결 10가지: EACCES, ENOSPC, Timeout, peer dependency
npm install이 EACCES, ENOSPC, ERR_SOCKET_TIMEOUT, peer dependency 충돌, ERESOLVE, 404, node-gyp 빌드 실패, 캐시 손상, lock 파일 충돌, Windows 경로 길이 제한으로 실패할 때 원인별 해결책을 정리합니다.
-
JavaScript 시리즈 목차: 기초 문법부터 비동기, DOM, 클래스, 모듈, 디자인 패턴까지 10편
JavaScript 시리즈 10편을 기초 문법, 비동기와 DOM, 클래스·모듈·에러 처리·디자인 패턴으로 나눠 소개하고, 입문 2주 과정부터 프론트엔드 기초, 모던 JavaScript, 실전 프로젝트까지 목표별 학습 순서를 제안합니다.
-
C++에 V8 임베딩하기: Isolate·Context, HandleScope, C++ 함수·객체를 JavaScript에 노출
C++ 앱에 V8을 임베딩해 웹과 같은 JavaScript 로직을 돌리는 방법입니다. Isolate·Context·HandleScope의 역할, TryCatch 예외 처리, FunctionTemplate과 Internal Field로 C++ 함수·객체를 JS에 노출하는 코드를 설명합니다.