[260128] TIL

Today I Learned (2026-01-28)

명령어 없이 리액트 개발 환경 만들기

• webpack.kr
• 리액트 라이브러리를 설치하고, ts-loader로 tsx를 읽은 뒤 웹팩으로 번들링해서 빌드 파일을 만들었다.

loader 로더

• JS가 아닌 파일을 JS가 이해할 수 있게 바꿔주는 변환기다.
• css-loader, ts-loader처럼 언어/도메인별 로더를 조합해 빌드 파이프라인을 만든다.

파일 (css / ts / scss)
   ↓
loader
   ↓
JS module
   ↓
Webpack bundle

대표적인 로더들

• ts-loader: .ts / .tsx -> JS
• css-loader: CSS -> JS 문자열
• style-loader: CSS를 DOM에 주입
• sass-loader: SCSS -> CSS
• babel-loader: 최신 JS -> 구형 JS