안녕하세요~ 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 개발자입니다. 이미지 삽입 설정 이미지 삽입할 수 있게 설정하는 방법에 대해 바로 알아보도록 하겠습니다. Step 1: 이미지를 하나 준비해줍니다. 저는 pixabay에서 하나 가지고 왔습니다. 그리고 images 폴더를 만드시고 그 안에 넣어주도록 하겠습니다. Step 2: delcaration.d.ts 파일을 src 폴더 내에 하나 생성해주시고 다음처럼 입력해줍니다. Step 3: webpack.config.js 파일을 열어서 빨간색 박스에 내용을 추가해줍니다. Step 4: 2번째 줄처럼 이미지를 import 해주시고 8번째에 src={image}로 작성하시면 바로 이미지를 불러오실 수 있습니다. Step 5: yarn start로 테스트해봅니다.

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