[REACT] 리액트 프로젝트 초기 설정 가이드

리액트 개발 환경을 처음  구축하는 과정에서

저와 같은  초보자는  다소 복잡하게 느껴질 수 있다고 생각했습니다.

본 가이드는 리액트 프로젝트를 처음 시작할 때 필요한 초기 설정을 단계별로 설명하겠습니다.

---

 

1. Node.js와 npm 설치

Node.js는 자바스크립트를 브라우저 밖에서 실행할 수 있게 해주는 환경입니다. 리액트 애플리케이션은 웹 브라우저에서 실행되지만, 개발 도구들이 Node.js를 필요로 하기 때문에 설치가 필요합니다.

• Node.js 설치 방법:
  • Node.js 홈페이지에서 LTS(Long Term Support) 버전을 다운로드합니다. LTS 버전은 안정성이 검증되어 오류 가능성이 낮습니다.
  • 설치 후 터미널에서 node -v를 입력하여 버전 확인을 통해 설치가 정상적으로 완료되었는지 검증합니다.

node -v

• npm(node package manager):
  • Node.js 설치 시 자동으로 설치됩니다. npm은 리액트를 비롯한 다양한 자바스크립트 라이브러리를 관리할 수 있는 도구입니다.
  • 터미널에서 npm -v를 통해 버전을 확인할 수 있습니다.

npm -v

 

---

2. Create React App(CRA) 설치

CRA는 리액트 프로젝트를 쉽게 시작할 수 있게 해주는 도구입니다. 바벨, 웹팩과 같은 복잡한 설정을 자동으로 해줍니다.

• CRA 설치 및 실행:
  • 터미널에서 npx create-react-app 프로젝트명 명령어를 실행합니다.
  • CRA는 필요한 모든 설정을 자동으로 완료하며, npm start를 통해 개발 서버를 실행할 수 있습니다.

npx create-react-app
npm start

---

3. 기본 폴더 및 파일 이해

• node_modules: 프로젝트에 필요한 모든 라이브러리 코드가 들어 있는 폴더입니다.
• package.json: 프로젝트에 필요한 라이브러리와 스크립트 정보가 저장된 파일입니다.
  • "dependencies" 섹션에서 프로젝트에 설치된 라이브러리와 버전을 확인할 수 있습니다.
• .gitignore: git 버전 관리에서 제외할 파일 및 폴더를 지정합니다.
• index.html: 애플리케이션의 기본 HTML 파일입니다.
• index.js: 리액트 애플리케이션의 진입점(entry point) 파일입니다. 이 파일에서 애플리케이션을 DOM에 렌더링합니다.
• App.js: 애플리케이션의 루트 컴포넌트 파일입니다.

 

---

추가 라이브러리 설치

• React Router: npm install react-router-dom --save
• Sass: npm install sass --save