안녕하세요~ totally 개발자입니다. Hot Module Replacement (저장 시 바로 반영) 개발하다보면 Ctrl + S했을 때 바로 수정사항을 반영해서 자주 봐야하는데 새로고침을 하게 되면 모든 요소의 상태가 리셋되기 때문에 좋지 않습니다. 그래서 Ctrl + S로 저장했을 떄 수정된 부분만 체크해서 반영될 수 있도록 설정을 해주어야 합니다. Step 1: 터미널에 yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh를 입력해줍니다. 만약에 permission denied 이슈가 있는 경우에는 node_modules 폴더와 package-lock.json 모두 root으로 되어 있기 때문에 사용자 이름으로 변경해주시면 됩니다. 커맨..

안녕하세요~ totally 개발자입니다. Development, Production Mode Configuration Webpack에서 Development(개발 용도) 모드와 Production(실제 서비스되는 배포용) 모드를 설정해줄 수 있는데 그 부분에 대해서 살펴보도록 하겠습니다. Step 1: 기존에 만들었던 webpack.config.js의 파일명을 webpack.common.js로 바꿔주고 새로 3개의 파일을 생성하여 각각 이름을 webpack.config.js, webpack.dev.js, webpack.prod.js로 명명해줍니다. Step 2: webpack.config.js에는 다음 내용이 들어가 있어야 합니다. const { merge } = require('webpack-merge..

안녕하세요~ totally 개발자입니다. 리액트(React), 타입스크립트(Typescript), Webpack, Babel 초기 설정에 대해서 살펴보도록 하겠습니다. 오늘 살펴볼 리액트, 타입스크립트, 웹팩, 바벨의 용도는 아래와 같습니다. 리액트(React) 자바스크립트 라이브러리 타입스크립트(Typescript) 자바스크립트의 확장 언어로 자바스크립트에 타입 등을 부여할 수 있고 엄격한 문법을 사용하도록 지원 웹팩(Webpack) 애플리케이션을 위한 필요한 모든 파일(모듈)을 병합하여 하나의 번들(결과물)로 생성해주는 도구 바벨(Babel) ES6 이상의 자바스크립트 문법을 ES5 형태 즉 모든 브라우저에서 지원할 수 있도록 컴파일해주는 도구 초기 세팅을 위해 기본적으로 VScode, yarn, n..