$$config title: [React] 기본 개발 환경 구축 keywords: - create_react_app $$ # Create_React_App - React 어플리케이션을 개발하기 위해 많이 사용되는 프레임워크 - 사용 방법 : [https://create-react-app.dev/docs/getting-started](https://create-react-app.dev/docs/getting-started) # 장점 - React개발에 필요한 다양한 라이브러리 내장 - 기본 환경 설정 및 개발 서버(localhost:3000) 구축 - 자동 새로고침 기능(브라우저에 적용) - 즉각적인 CSS 적용 - 여러개의 컴포넌트(함수)들을 각 ~.js 파일로 분리한 후 export / import 하여 사용하므로써 답답하지 않고, 유연하게 사용할 수 있음 # 준비 ### 1. node js 설치 및 확인 - 설치 : [https://nodejs.org/ko/download/](https://nodejs.org/ko/download/) - 확인(터미널) ![cra1](https://raw.githubusercontent.com/miruy/Blog_Img/1228cd96597f28bf002750579858b94584a27348/cra1.png) ### 2. npx 커맨드 작동 가능 확인 ![cra2](https://raw.githubusercontent.com/miruy/Blog_Img/1228cd96597f28bf002750579858b94584a27348/cra2.png) ### 3. (터미널)React 프로젝트 생성을 원하는 위치로 이동 - 프로젝트 생성 ~~~ npx create-react-app 프로젝트명 ~~~ ![cra3](https://raw.githubusercontent.com/miruy/Blog_Img/1228cd96597f28bf002750579858b94584a27348/cra3.png) ... ![cra4](https://raw.githubusercontent.com/miruy/Blog_Img/1228cd96597f28bf002750579858b94584a27348/cra4.png) ### 4. (터미널)VSC로 해당 프로젝트 열기 - 자동으로 여러개의 파일을 가진 React 프로젝트가 생성되어 있음 확인 해볼 것! - pakage.json 파일에 cra에 의해 다운받아진 여러개의 script가 있으며, 사용할 예정 - App.js 파일에 부모 컴포넌트인 App()이 정의되어 있음 - index.js 파일에 react / react_dom 라이브러리 import 및 ReactDOM.render(...) 코드가 정의되어 있음 ### 5. (해당 프로젝트를 연 VSC)내의 터미널 - npm start 입력 - 자동으로 브라우저가 열리면서 개발 서버 구축 ![cra5](https://raw.githubusercontent.com/miruy/Blog_Img/1228cd96597f28bf002750579858b94584a27348/cra5.png) ![cra6](https://raw.githubusercontent.com/miruy/Blog_Img/1228cd96597f28bf002750579858b94584a27348/cra6.png) #### - 노마드 코더 강의 캡쳐본 ### 6-1. 해당 프로젝트의 App.js / index.js 파일 내용을 아래와 같이 변경하기 - App.js ~~~js function App() { return (

Welcome~ React!

); } export default App; ~~~ --- - index.js ~~~js import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( , ); ~~~ ### !! 코드 저장 시 자동 새로고침 실행(자동 브라우저 적용) ### 6-2. 파일 내용 변경 후 브라우저 모습 ![cra7](https://raw.githubusercontent.com/miruy/Blog_Img/1228cd96597f28bf002750579858b94584a27348/cra7.png) - 참고 및 출처 : 노마드 코더 - ReactJS로 영화 웹 서비스 만들기