React - CRA, Node, npm

1. CRA

리액트 앱 생성은 리액트를 학습하기에 편안한 환경이며 리액트에서 새로운 단일 페이지 어플리케이션 구축을 시작하는 가장 좋은 방법이다.

최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정하고, 앱 생산에 있어 최적화해준다.

리액트 앱은 백엔드 로직이나 데이터베이스를 처리하지 않고 프론트엔드 빌드 파이프라인을 생성하므로 원하는 백엔드와 함께 사용할 수 있다.

 

---

2. 환경 설정

CRA 프로젝트를 설치하기 위해선 Node와 npm이 설치되어 있어야 한다.

Node

• 크롬의 자바스크립트 실행 환경에 기반을 둔 빠르고 확장성 있는 네트워크 애플리케이션을 만들기 위한 플랫폼
• 브라우저 밖의 환경에서도 자바스크립트를 사용 가능하게 해줌
• 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드라 Node와의 직접적인 연관은 없지만, CRA 프로젝트를 개발하는 데 필요한 주요 도구들(바벨, 웹팩 등)이 Node 기반이기 때문에 설치해야한다.

npm

• Node Packaged Manager의 약자 (노드패키지매니저)
• 자바스크립트 런타임 환경인 Node.js의 기본 패키지 관리자 역할을 한다.
• 다양한 패키지를 설치하고 관리할 수 있다.
• Node 설치시 자동으로 같이 설치된다.

---

3. CRA 프로젝트 생성

// my-app 프로젝트 설치

npx create-react-app my-app

 

// my-app 프로젝트 진입

cd my-app

 

// 로컬 서버 띄우기

npm start

npm start 입력 시 Local: http://localhost:3000 주소 확인.

제대로 실행이 됐으면 자동으로 해당 주소로 접속이 되며, 화면에 react이미지 뜨며 이미지가 움직인다.