React 앱 준비하기

React 준비 전 단계

커맨드 라인 인터페이스(command-line interface; CLI) 툴인 Create-React-App(CRA) 사용하여, React를 추가 할 것 입니다.

Create-React-App을 사용하기 위해서는 Node.js를 설치해야 합니다.

 

Node.js는 npm (the node package manager)와 npx (the node package runner)를 포함합니다.

 

---

 

React 초기 설정하기

Create-React-App(CRA) 툴:

• 프로젝트에 필요한 패키지를 설치하고 파일들을 생성하여 React 애플리케이션 개발하는 과정을 신속히 처리합니다.

create-react-app 툴 방식

 

create-react-app 고질적인 문제

패키지를 설치하는 과정에서 create-react-app(CRA)이 의존하는 패키지들에서 발견된 취약점 경고 뜹니다.

Create-React-App(CRA)가 현재 사실상 유지보수 중단 상태라서 내부 의존성 버전들이 오래된 채로 방치되고 있습니다. 이 취약점들은 대부분 개발 서버(devDependencies)에 해당하여 실제 배포되는 프로덕션 결과물에는 영향을 미치지 않습니다.

현재 트렌드는 CRA 대신 Vite 툴을 사용하는 추세입니다. 하지만 공부용 프로젝트이므로, 그냥 진행하겠습니다.

 

create-react-app 초기 설정 완료

초기 설정 과정은 아래와 같은 작업을 진행합니다.

• 앱의 기능에 필수적인 npm 패키지들을 설치합니다.
• 애플리케이션을 시작하고 서비스하기 위한 스크립트를 작성합니다.
• 기본적인 앱 아키텍처를 정의하는 파일과 디렉토리의 구조를 만듭니다.
• 컴퓨터에 깃이 설치되어있다면, 디렉토리를 깃 레포지토리로 초기화합니다.

 

---

 

React 실행하기

npm 범용 커맨드

npm start는 npm의 범용 실행 커맨드입니다. package.json의 scripts 항목에 정의된 start 명령어를 실행합니다.

현재 프로젝트 위치의 react-scripts start가 연결되어 있어서 React 개발 서버가 실행된 것입니다.

 

개발 서버 컴파일 성공

개발 서버를 웹 브라우저에서 확인해 볼 수 있도록 컴파일 성공한 상태입니다.

 

다음과 같이 웹 브라우저에서 확인할 수 있습니다.

 

---

 

참고 자료

https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started

React 시작하기 - Web 개발 학습하기 | MDN

facebook/create-react-app: Set up a modern web app by running one command.

GitHub - facebook/create-react-app: Set up a modern web app by running one command.