바벨 (1) 썸네일형 리스트형 [react] cra, vite 없이 직접 리엑트 프로젝트 세팅하기1(webpack) - 바벨, 타입스크립트, css 전처리, 환경변수, 정적 파일 목차프로젝트 기본 구조웹팩바벨타입스크립트CSS전처리환경변수정적 파일1(image, svg)정적 파일2(font)라우팅완성파일 일반적으로 리엑트 프로젝트는 cra나 vite 등의 cli로 자동 세팅이 가능하다.이 방식은 학습 단계에서 간편하지만, 실무에서 scss나 타입스크립트, 바벨 등 다양한 환경 세팅을 해야할 때 배경 지식이 전무하여 문제가 생길 수 있다. 따라서 프로젝트 세팅을 직접 해보기로 했다. 도구로 webpack을 사용한 이유는 웹팩의 설정방식이 복잡하지만, 빌드 방식의 커스터마이징이 상세하여 실무에서 사용 비중이 높기 때문이다. 프로젝트 기본 구조1. 새 프로젝트를 만들고 npm과 git 세팅을 초기화한다. npm 초기화npm init -y git 초기화git init 만약 .gitign.. 이전 1 다음