리액트 설치 및 개발 환경 설정

1. 개발 환경 준비

리액트를 시작하려면 Node.js가 필요합니다.
Node.js는 JavaScript 런타임으로, 설치하면 npm도 자동으로 함께 설치됩니다.

🙋‍♀️ 자바스크립트 런타임이란?
자바스크립트 런타임은 JavaScript 코드가 실행되는 환경을 의미합니다. 주로 브라우저에서 실행되지만, Node.js는 서버에서도 JavaScript를 실행할 수 있게 해주는 도구입니다. 이를 통해 클라이언트와 서버에서 일관되게 JavaScript를 사용할 수 있습니다.

1) Node.js 설치
Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치합니다.
설치 후, 터미널에서 다음 명령어로 설치 확인

node -v
npm -v

2) 코드 편집기
Visual Studio Code를 권장합니다. 다양한 기능과 확장성을 제공하여 편리한 개발 환경을 제공합니다.

2. 리액트 프로젝트 생성

리액트 프로젝트를 생성하기 위해 터미널에서 아래 명령어를 입력합니다.

1) 터미널 열기
Visual Studio Code의 통합 터미널이나, 명령 프롬프트, PowerShell 등을 엽니다.

2) 리액트 프로젝트 생성
다음 명령어를 입력합니다.

npx create-react-app 프로젝트명

3) Visual Studio Code로 프로젝트 열기
생성된 프로젝트 폴더를 VS Code에서 엽니다. 터미널에서 아래 명령어를 입력합니다.

cd 프로젝트명
code .

3. 개발 서버 실행

터미널에서 아래 명령어를 입력하면 개발 서버가 실행됩니다.

npm start

자동으로 열리지 않으면 브라우저에서 http://localhost:3000 을 직접 입력하세요.

4. 기본 파일 구조

src/: 소스 코드
public/: 정적 파일
package.json: 프로젝트 정보 및 의존성