[React - 기초강좌] 개발환경 설치 및 프로젝트 셋팅 가이드

React는 모던 웹 개발에서 가장 많이 사용되는 라이브러리 중 하나입니다. 이 포스팅에서는 React 개발 환경을 설정하고 초기 프로젝트를 셋업하는 과정을 단계별로 안내합니다. Node.js 설치부터 초기 프로젝트 설정까지 따라 하면서 개발을 시작해보세요!

1. Node.js 설치 (필수 준비 단계)

React 프로젝트는 Node.js 기반으로 실행되며, npm(Node Package Manager)을 통해 필요한 패키지를 설치합니다.

Node.js 설치 방법

Node.js 다운로드 페이지로 이동:
https://nodejs.org/
LTS 버전을 다운로드하여 설치합니다. (LTS 버전은 안정적이며 권장됨)
설치가 완료되면 터미널에서 다음 명령어로 설치 여부를 확인합니다

2. 개발 툴 설치 (필수 도구)

2.1 Visual Studio Code (VSCode)

가장 많이 사용하는 코드 편집기로, React 개발에 최적화된 다양한 확장 기능을 제공합니다.

다운로드: https://code.visualstudio.com/
추천 확장 프로그램:
- ESLint: 코드 품질 유지
- Prettier: 코드 자동 정렬
- Auto Close Tag: 자동 태그 닫기 기능

2.2 Git 설치 및 GitHub 연동

버전 관리를 위해 Git을 설치하고 GitHub와 연동합니다.

Git 다운로드: https://git-scm.com/
설치 후 터미널에서 다음 명령어로 버전을 확인하세요.

git --version

3. React 프로젝트 생성하기

React 프로젝트는 Create React App을 사용해 쉽게 생성할 수 있습니다. Create React App은 초기 설정이 모두 포함된 템플릿을 제공합니다.

3.1 Create React App으로 프로젝트 생성

터미널에서 다음 명령어를 실행하세요:

npx create-react-app 01-start-project

npx: npm 5.2 이상에서 제공되는 도구로, 패키지를 전역 설치 없이 실행합니다.
my-app: 원하는 프로젝트 이름으로 변경 가능합니다.

설치가 완료되면 다음 명령어로 프로젝트 폴더로 이동합니다:

cd 01-start-project

3.2 프로젝트 실행

아래 명령어를 입력하여 개발 서버를 실행합니다:

npm start

출력 예시:

Starting the development server...

Compiled successfully!

You can now view 01-start-project in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.100.110:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

브라우저에서 http://localhost:3000에 접속하면 React 앱이 실행됩니다.

4. TypeScript 지원 프로젝트 생성 (선택 사항)

TypeScript를 사용한 React 프로젝트를 생성하려면 다음 명령어를 사용합니다:

TypeScript 버전의 프로젝트가 설정되며, .tsx 파일이 기본으로 생성됩니다.
src/App.tsx 파일을 열어 TypeScript로 작성된 컴포넌트를 확인할 수 있습니다.

npx create-react-app 01-start-project --template typescript

5. ESLint와 Prettier 설정 (코드 품질 유지)

5.1 ESLint 설치 및 설정

다음 명령어로 ESLint를 설치합니다:
- npm install eslint –save-dev
ESLint 초기 설정을 시작합니다:
- npx eslint –init
프롬프트에 따라 ESLint 설정을 완료합니다.

5.2 Prettier 설치 및 설정

Prettier를 설치합니다:
- npm install –save-dev prettier
프로젝트 루트에 .prettierrc 파일을 생성하고 다음과 같이 설정합니다:
- 참조: https://prettier.io/docs/en/configuration.html

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

6. 프로젝트 폴더 구조 이해하기

plaintextCopy codemy-app/
├── node_modules/     # 설치된 패키지들
├── public/           # 정적 파일들 (index.html 포함)
├── src/              # 소스 코드
│   ├── App.css       # 메인 스타일 파일
│   ├── App.tsx       # 메인 컴포넌트 파일 (TypeScript 사용 시)
│   ├── index.tsx     # React 앱의 진입점
├── .gitignore        # Git에 포함되지 않을 파일 목록
├── package.json      # 프로젝트 설정 및 의존성 정보

주요 파일 설명

public/index.html: React 컴포넌트들이 렌더링되는 HTML 파일입니다.
src/index.tsx: React 앱의 진입 파일로, ReactDOM이 컴포넌트를 렌더링합니다.
src/App.tsx: 메인 컴포넌트를 정의하는 파일입니다.

7. `.gitignore` 설정

.gitignore 파일에 다음과 같은 항목을 추가하여 불필요한 파일이 Git에 포함되지 않도록 합니다:

# dependencies
/node_modules
/.pnp
.pnp.js
.env
.DS_Store
.idea/
.vscode/

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

8. 기본 프로젝트 커밋 및 GitHub에 업로드

8.1 Git 초기화 및 커밋

git init
git add .
git commit -m "Initial commit"

8.2 GitHub 리포지토리 생성 및 푸시

GitHub에서 새로운 리포지토리를 생성합니다.
터미널에서 다음 명령어를 실행해 리모트 저장소를 추가합니다:bashCopy codegit remote add origin https://github.com/your-username/my-app.git git branch -M main git push -u origin main

참고링크

devitworld github repository

https://github.com/jh4843/devitworld-react-basic

React 공식 문서

react.dev/learn

[React – 기초강좌] 개발환경 설치 및 프로젝트 셋팅 가이드