DH의 개발 공부로그 DH의 개발 공부로그

CRA(Create-React-App) 이란? 리액트 프로젝트를 시작하는데 필요한 개발 환경 세팅을 쉽고, 간단하게 구축해주는 것입니다. https://create-react-app.dev/docs/getting-started/ ​ CRA 명령어 Create React App을 사용해 스캐폴딩 된 프로젝트는 다음의 4가지 명령어를 제공 · start → React 프로젝트 개발 서버를 시작 · build → 배포를 위해 앱을 정적(Static) 파일로 번들(Bundle) · test → 테스트 러너(Test Runner)를 시작 · eject → 사용자 정의 구성(예: Webpack)을 직접 수행할 수 있도록 프로젝트를 준비 ​ ​ CRA 사용법 1. npx create-react-app 프로젝트명(카멜..

0. 웹팩 데브 서버 생성 & 핫 리로딩 설정 react를 직접 개발환경을 설정해주고 보면 작업을 할때마다 확인을 위해 계속 빌드를 반복해야하는 문제를 해결하기 위해 웹팩 데브 서버를 생성하고 핫 리로딩 설정을 하는 것 입니다. 1. react-refresh 및 plugin 설치 npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin 2. 개발용 서버(webpack-dev-server) npm i -D webpack-dev-server 3. packgage.json script에 명령어 수정 "script": { "dev": "webpack server --env devrlopment", }, 4. webpack.config.js 수정 const pat..

※ 노드가 깔려있어야 합니다. 웹팩을 쓰는 이유 여러개로 나누어져 있는 컴포넌트, 즉 파일들을 하나의 파일로 합쳐서 파일의 수를 줄여 효율적으로 관리할 수 있게 해주기 때문이다. 1. package.json 생성 npm init 2. react 설치 npm i react react-dom 3. webpack 설치 npm i -D webpack webpack-cli -D: 실제서비스에서는 필요가 없고 개발환경에서만 사용할 때 적용하는 코드 "dependencies": { // 실제 서비스에서 사용하기 위한 것들 "react": "^18.2.0"7, "react-dom": "^18.2.0" }, "devDependencies": { // 개발환경에서만 사용할 것들 "webpack": "^5.75.0", "w..