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

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..

1. Object shorthand assignment let name="shape"; let age = 20; let person={ name:name, age:age } console.log(person) key 이름과 value에 변수 이름과 같으면 단축 가능 let person={ name, age } 2.Destructuring (객체를 분해해서 가져오다) let person ={ name:"shape", age:20 } /* let name = person.name let age = person['age'] */ let {name, age} = person 많이 사용되는 방식의 문법이며, 특히 React Hook인 useState와 함께 사용이 많이 된다. 객체뿐만 아니라 배열에서도 사용가능 ..

React란? • React 는 UI 를 구현하는 JavaScript 라이브러리 • 웹 앱(Web App) 또는 네이티브 앱(Native App) • 유지보수를 쉽게 , DOM 관리 • 성능최적화 쉽게 • 컴포넌트에 집중 ​컴포넌트 컴포넌트는 UI 를 구성하는 조각(piece). 독립적으로 분리되어 재사용 됨을 목적. React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리. (예: Header, HeaderTitle, Wrapper, List, ListItem 컴포넌트) ​ 함수형 컴포넌트 컴포넌트 외부로 속성(props)을 전달 받아 어떻게 UI 를 구성해야 할지 설정하여 React 요소(JSX 를 Babel 이 변환 처리)로 반환하는 문법 구문을 사용하는 컴포넌트. ​ JSX ..