[React] 리액트 개발 환경 설정 (Node.js, VS Code, Chrome)

목차

⭐요약

리액트 개발 환경 설정부터 명령어를 간단히 정리한다. VS Code를 기준으로 설명한다.

리액트(React)란?
▷ 페이스북에서 나온 사용자 인터페이스 빌드를 위한 자바스크립트 라이브러리 -위키백과-
▷ 컴포넌트(Component) 단위로 UI를 구성하며, 재사용성과 유지보수성이 높다.
▷ 변경된 부분만 화면에 다시 그리는 Virtual DOM 방식을 사용하여 렌더링 성능이 우수하다.

⭐리액트

1) 개발 환경 설정

리액트 개발을 시작하려면 아래 세 가지를 먼저 설치해야 한다.

• Node.js 설치 - 리액트 프로젝트 생성 및 npm 명령어 실행에 필요한 런타임 환경이다.
• VS Code 설치 - 리액트 개발에 널리 사용되는 코드 편집기이다. 터미널이 내장되어 있어 별도의 프로그램 없이 명령어를 실행할 수 있다.
• Chrome 설치 - 리액트 개발자 도구(React Developer Tools) 확장 프로그램을 지원하여 컴포넌트 구조 및 상태를 디버깅할 수 있다.

Node.js 설치 방법은 [Node.js] 노드 설치 및 환경설정을 참고한다.

2) 실행 과정

아래 순서대로 진행하면 리액트 프로젝트를 생성하고 실행할 수 있다.

1. 프로젝트 폴더 생성 - 작업할 빈 폴더를 원하는 경로에 만든다.
2. VS Code로 폴더 열기 - VS Code 상단 메뉴에서 File → Open Folder를 클릭하여 생성한 폴더를 연다.
3. 터미널 열기 및 명령어 입력 - 상단 메뉴에서 View → Terminal을 클릭하여 터미널을 열고, npm init react-app .을 입력한다.
4. create-react-app 자동 설치 - 위 명령어를 실행하면 리액트 프로젝트 생성 도구인 create-react-app이 자동으로 설치되고, 프로젝트 기본 파일 구조가 만들어진다. 완료까지 수 분이 소요될 수 있다.
5. 프로젝트 실행 - 설치가 완료되면 npm run start를 입력한다. 브라우저에서 http://localhost:3000이 자동으로 열리고 리액트 기본 화면이 나타나면 성공이다.
6. 작업 - src 폴더 안의 App.js 파일을 수정하여 원하는 화면을 구성한다. 저장 시 브라우저에 변경 사항이 자동으로 반영된다.
7. 작업 종료 — 터미널 창에서 Ctrl + C를 누르면 개발 서버가 종료된다.

3) 명령어 정리

자주 사용하는 리액트 명령어를 아래에 정리한다.

• 리액트 프로젝트 생성: npm init react-app .
• 개발 모드 실행: npm run start
• 개발 모드 종료: Ctrl + C
• 배포용 빌드 생성: npm run build

⭐참고 자료

1) React 공식 문서, https://ko.reactjs.org/

2) 군만두의 IT 개발 일지, "[Node.js] 노드 설치 및 환경설정", 2022.07.18, https://mandusitstudy.tistory.com/2