#tooling

Frontend › JavaScript

Babel은 JavaScript를 파싱(parse)해 AST로 바꾸고, 플러그인이 AST를 고친 뒤(transform), 다시 코드로 찍어 내는(generate) 소스 대 소스 컴파일러다. 설정의 플러그인·프리셋 순서, preset-env와 browserslist·core-js 폴리필, 방문자(visitor) 패턴으로 플러그인 쓰는 법, 같은 AST 원리로 대규모 코드를 고치는 codemod(jscodeshift)까지, Babel 8 기준으로 정리한다.

• #javascript
• #babel
• #compiler
• #build

Frontend › JavaScript

코드 품질은 ESLint가, 모양은 Prettier가 맡도록 역할을 나누고 둘이 충돌하지 않게 연결하는 방법. VS Code 저장 시 자동 수정, flat config(eslint.config.js) 읽는 법과 ESLint 10에서 제거된 .eslintrc와의 대응, husky + lint-staged로 커밋 직전에 스테이징된 파일만 검사하는 법까지. React·Vue·React Native 어디서나 절차는 같다.

• #javascript
• #eslint
• #prettier
• #frontend

Frontend › JavaScript

package.json의 scripts는 node_modules/.bin이 PATH에 들어간 셸에서 명령을 실행하는 가장 얇은 작업 실행기(task runner)다. pre/post 훅, -- 뒤 인자 전달, npm_ 환경 변수, 수명 주기 스크립트, 직렬·병렬 조합과 크로스 플랫폼 처리, 매니저별 차이(node --run 포함), 그리고 Grunt·Gulp 같은 태스크 러너가 밀려난 이유를 정리한다.

• #javascript
• #npm
• #build
• #automation

Frontend › React

React 코드가 브라우저에서 돌기까지 Babel(문법 변환)과 webpack(번들링)이 무엇을 하는지, CDN 한 줄 실습부터 webpack+Babel+TypeScript 직접 구성, 라우팅·코드 스플리팅, 도구별 클라이언트 환경 변수 규칙까지 정리한다. CRA는 지원이 끝났다.

• #react
• #typescript
• #webpack
• #frontend