webpack

CRA없이 Webpack, React, TypeScript로 개발 환경 설정하기

토이 프로젝트를 만드는 과정에서 CRA에 TypeScript를 적용하는 것이 아닌, npm init을 통한 초기 설정부터 Webpack, Babel, React, TypeScript를 하나하나 적용하는 과정을 이번 글로 작성해보려 합니다. npm init 원하는 이름의 폴더를 생성한 후, npm init부터 시작해보도록 하겠습니다. mkdir ts-react-noncra cd ts-react-noncra npm init 여기서 npm init을 실행하면 package name, version, description 등 프로젝트에 대한 정보를 입력하는데, 따로 작성하고 싶은 정보가 있다면 작성해도 되지만, 작성하고 싶은 내용이 없는 경우, npm init -y로 스킵할 수 있습니다. 과정을 진행하면 pac..

TIL - 20220623 ( 부제: webpack에 dotenv-webpack으로 환경 분리하기)

20220617 TIL(https://jaeyooniverse.tistory.com/103)에 잘못 적은 내용이 있었다. 먼저, dotenv를 사용하지 않고 dotenv-webpack만으로도 .env 파일의 경로를 지정할 수 있다. 아니, 당연한 이치다. dotenv에서 좀 더 사용하기 편하게 만들어진 것이 dotenv-webpack인데, dotenv-webpack이 dotenv의 기능을 사용하지 못하는 것은 애초에 말이 되지 않는다. 게시글에서도 확인할 수 있듯이 코드를 다음과 같이 작성했는데, 다음과 같이 수정할 수 있다. Dotenv에서 path를 통해 .env 파일 경로를 설정할 수 있다. NODE_ENV가 'development'이면 webpack.config.js 파일이 위치한 디렉토리에서 ...