Webpack
-
[React] typescript + webpack 에서 tsconfig.json - paths 속성 사용하기 (별칭 경로)프레임워크/React(NextJs) 2022. 9. 10. 18:44
React를 webpack으로 직접 빌드하는 프로젝트와 typescript로 만든 경우 tsconfig.json에서 paths를 사용하기 위해서는 webpack에서 제공하는 플러그인 설정이 필요합니다. 경로를 잘못 설정하면 아래와 같은 에러가 발생하고, Cannot find module '@pages/Main' or its corresponding type declarations. 플러그인을 설치하지 않으면, devServer모드나 build시 아래와 같은 에러가 발생합니다. Module not found: Error: Can't resolve '@pages/Main' in 'C:/git/...' 설정 방법 프로젝트 구조 /src // ... /pages // ... App.tsx index.tsx ts..
-
[React] webpack 설정 (실시간 개발 모드 관련)프레임워크/React(NextJs) 2022. 9. 3. 23:47
react를 webpack 설정해서 코드를 작성하고 build를 해서 확인하는 것까지는 좋았으나, 수정이 있을 때마다 빌드하고, 확인하는 것이 번거롭던 와중에.. next.js에서 develop 모드 실행시 실시간으로 반영되던 것이 생각나 방법을 찾아보았고, webpack에서 설정할 수 있다는 사실을 알게되어, 시행착오 끝에 설정 완료한 내용을 기록 및 공유! 프로젝트 구조와 그에 따른 webpack 설정 3개의 npm 모듈을 설치 $ npm i --save-dev clean-webpack-plugin html-webpack-plugin $ npm i webpack-dev-server .env 설정과 관련된 글은 아래 포스팅을 확인해주세요. [React] .env (환경변수파일) - 'create-rea..
-
[React] .env (환경변수파일) - 'create-react-app'과 'webpack 빌드' 프로젝트에서의 각 설정 및 사용 방법프레임워크/React(NextJs) 2022. 9. 3. 19:33
목표 서버API URL을 환경변수 파일(.env)에 등록하고, React 프로젝트내 어디에서든 process.env.(변수이름)으로 사용할 수 있도록 한다. 1. create-react-app을 설치한 프로젝트 .env 을 만들고 아래와 같이 작성해준다. REACT_APP_SERVER_API_URL="http://localhost:4001" create-react-app으로 만든 프로젝트에서는 환경변수를 사용할 때 앞에 REACT_APP_ 이라고 꼭 붙여주어야 사용할 수 있다. 사용해줄 때에도 똑같이 REACT_APP_을 붙여서 쓰면 된다. console.log(process.env.REACT_APP_SERVER_API_URL); // output => http://localhost:4001 2. web..
-
[React] React + typeScript + webpack 설정으로 프로젝트 만들기프레임워크/React(NextJs) 2022. 6. 9. 21:22
먼저 새로운 프로젝트를 생성할 폴더를 만들고 필요한 모듈들을 설치해줍니다 // 프로젝트 초기화 $ npm init -y // 웹팩 설치 $ npm install --save-dev webpack webpack-cli $ npm install --save react react-dom $ npm install --save-dev @types/react @types/react-dom $ npm install --save-dev typescript ts-loader source-map-loader 프로젝트 루트 경로에 세가지 파일을 만들어야 합니다. 1. 타입스크립트 설정 파일 : tsconfig.json { "compilerOptions": { "outDir": "./dist/", "sourceMap": tr..