🌌 React 입문 02 - 사전 준비 · 프로젝트 생성 · 실행

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

React프로그래밍을 위한 사전 준비 사항

• Node.js
• Visual Studio Code

Node.js를 설치하는 이유

✅ Javascript 실행 환경

• React는 Javascript 기반의 라이브러리이다.
• Javascript 엔진은 브라우저에 기본적으로 내장되어 있기 때문에 우리들은 브라우저 위에서 Javascript 코드를 실행 할 수 있다.
• 개발을 위해서는 브라우저 없이 컴퓨터에서도 실행 할 수 있어야 한다.
• Node.js는 이를 지원하는 Javascript 실행 환경이다.

✅ NPM 지원

• NPM은 Node Package Manager의 약어이며, React에 필요한 모듈을 패키징하고 설치 및 관리를 위한 CLI(Command Line Interface) 환경을 제공한다.
• NPM가 제공하는 명령어를 통해 React 관련 모듈을 설치, 관리, 실행할 수 있다.

✅ JSX 지원

• JSX는 Javascript를 확장한 문법으로, 브라우저는 이 문법을 해석할 수 없다.
• 브라우저가 JSX 문법을 해석하기 위해서는 Babel이라는 컴파일러가 추가로 필요한데, Node.js를 설치하면 Babel도 함께 설치된다.

Visual Studio Code는 왜 설치해야 하는 걸까?

• Visual Studio Code 는 React 사용자들 사이에서 가장 인기 있는 에디터 도구다.
• React 코드에서 오타나 타입 오류, 사용하지 않는 import, 누락된 props 등을 실시간으로 하이라이팅하며, React snippets 등 생산성 확장 플러그인을 지원한다.

프로젝트 생성 및 실행

# 리액트 프로젝트 생성
npx create-react-app project-nm

# 기존 리액트 프로젝트 모듈 설치
npm install

# 생성된 프로젝트 실행
npm start

• 프로젝트 생성 및 실행 시 상기 명령어들을 입력하면 된다.

회고

• React를 처음 도입할 때는 아무런 생각 없이 Node.js와 Visual Studio Code를 설치했었다.
• 설치 근거를 조사하며 React 환경에 대한 사고를 더욱 확장 할 수 있었다.