React_ 개발환경 구성(yarn create react-app)

🚨 React 개발환경을 구축하기전에 node.js가 먼저 설치되어있어야 합니다

1️⃣ node.js 와 npm 설치 여부 확인하기

• 터미널 에 아래의 명령어를 입력하세요

node --version    또는  node --v

npm --version  또는  npm --v

• version 값이 나오면 React 개발환경구성을 시작하면 됩니다
• 만약 결과값이 출력되지 않을 경우 설치 후 React 개발환경구성을 시작합니다

---

2️⃣ 개발환경 구성 시작(yarn)

yarn 이란?

• 터미널 에 아래의 명령어를 입력하세요

npm install -g yarn

• 만약 에러가 났다면?? 아래의 명령어를 다시 입력하세요 (MAC 기준)
• brew가 설치된 환경에서만 가능한 명령어 입니다

 brew install yarn

• 설치 후 설치가 됐는지 확인하세요

yarn --version

---

3️⃣ 프로젝트 생성하기

• 프로젝트 생성 및 초기화

• 🚨 프로젝트 이름은 영어 소문만자만 가능하기 때문에 주의하기!!!

• 새로운 폴더 생성 or 프로젝트가생성될 폴더안에서 터미널을열고 명령어입력

• ex) ⬇️ 의 새로운폴더를 하나 만들어서 터미널 열고 명령어 입력

  

yarn create react-app 프로젝트이름

• ex) 프로젝트 이름을 01-hello-react 로 한다면

yarn create react-app 01-hello-react

• 아래의 이미지처럼 폴더안에 프로젝트폴더가 생성됩니다

  

---

4️⃣ yarn berry version 으로 변경

01-hello-react 안에서 터미널 실행후 아래의 두 명령어를 순차적으로 실행

• Yarn을 최신 버전(2 이상, 'Berry'라고 불림)으로 업데이트합니다

yarn set version berry

• package.json에 정의된 의존성을 설치하고, 프로젝트 환경에 필요한 node_modules 또는 .yarn 디렉토리를 구성합니다

yarn install

5️⃣ 설정파일 수정

• 01-hello-react 프로젝트폴더에서 node-modules 값을 pnp로 변경해줍니다
• Mac의 경우 . 이 붙어있는 숨김파일들은 안보이기 때문에 숨김파일도 보이게 만들어줍니다
• 숨김파일 보이게 하는 단축키 ▼

command + shift + . 

• .yarnrc.yml 파일을 열어서 1라인의 node-modules 값을 pnp로 변경해줍니다

  💡 Plug'n'Play(PnP) 사용 활성화
  Yarn Berry는 기본적으로 PnP 방식을 지원합니다. PnP는 node_modules 디렉토리를 생성하지 않고, 의존성을 바로 Yarn 캐시에서 참조하여 실행 속도를 개선하고 디스크 사용량을 줄입니다. 이를 활성화하려면 nodeLinker 값을 pnp로 설정해야 합니다
  💡node_modules 제거로 효율성 향상
  전통적인 방식에서는 의존성을 node_modules에 모두 설치했지만, PnP를 사용하면 파일 시스템의 복잡도를 줄이고 프로젝트 속도를 최적화할 수 있습니다
  💡 환경 통합
  PnP는 의존성을 정리하고 일관성을 유지합니다. 의존성 충돌 문제를 줄이고, 모든 작업 환경에서 동일한 동작을 보장합니다

• package.json 파일도 열어서 eslintConfig 설정부분 삭제 or 키값을 변경해줍니다
• ▼ 의 파일을 열어서

• eslintConfig 설정부분 변경해주기

  💡 ESLint 설정 중복 방지
  ESLint 설정 파일(.eslintrc, .eslintrc.js 등)이 이미 존재할 경우, package.json의 eslintConfig와 충돌할 수 있습니다. 이를 방지하려고 삭제하거나 이름을 바꿉니다
  💡 설정 관리 편리성
  eslintConfig를 별도의 파일로 분리하면 설정을 더 명확히 관리할 수 있습니다. 팀 작업에서 다른 설정과 혼동을 줄이는 데 유리합니다.
  💡 Yarn Berry와의 호환성 문제
  Yarn Berry는 PnP(Plug'n'Play)를 사용하므로 eslintConfig 설정 방식이 기존 방식과 충돌할 수 있습니다. 설정 충돌을 방지하기 위해 삭제하거나 옮기는 경우도 있습니다.

• 설정 파일 변경을 완료하였으면 변경사항을 반영하기 위한 명령어를 수행합니다

yarn install

6️⃣ git 관련 파일 삭제

• 프로젝트를 생성하면 프로젝트 파일안에 .git 과 .gitignore 도 자동생성되는데
  자동으로 생성된 .git 디렉토리와 .gitignore 파일은 이전 환경에 맞춰져 있을 수 있기때문에 새로운 Git 저장소를 설정하기 위해 기존 .git 디렉토리를 삭제해야 합니다.
• 01-hello-react 에서 터미널을 생성후 삭제 명령어를 입력해줍니다

rm -rf .git .gitignore

또는 각각 입력

rm -rf .git

rm -rf .gitignore

---

7️⃣ .gitignore 생성

• 01-hello-react 에서 .git관련 파일을 삭제 후 프로젝트 폴더를 가지고있는 폴더에서 .gitignore 생성해줍니다
  ex) 11-ReactJS 폴더

• .gitignore 생성 방법 => 11-ReactJS 폴더에서 터미널 생성후 명령어 입력

touch .gitignore

• commad + shift + . 키로 생성됐는지 확인
• 생성됐다면 생성된 .gitignore 복제하기
  (기존꺼는 읽기전용으로 수정이 불가함,,왜?인지는 더 찾아봐야함,,,)

• 복제한 .gitignore 을 열고 아래의 내용을 등록해줍니다

  👩🏻‍💻 개인 저장소(git)에 올릴때 올라가지 않았으면 하는 파일들을 적어놓은것

node_modules/
.vscode/
.DS_Store

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

---

8️⃣ 패키지 설치하기

• 프로젝트 생성 및 설정과정을 수행한 후 yarn start 명령을 내리기 전에 아래 명령으로 패키지를 설치한다

yarn add react-router-dom prop-types react-helmet-async

• react css 관련 패키지

yarn add styled-components styled-reset

• 미디어 반응형웹 구현 패키지

 yarn add styled-components-breakpoints

9️⃣index.js 와 App.js 에 import 구문 적용하기

• index.js

import { BrowserRouter } from 'react-router-dom';

• 후 index.js 파일에서

<React.StrictMode><App /></React.StrictMode> 을 BrowserRouter><App /></BrowserRouter> 로 변경

• App.js

import { Link, Routes, Route } from "react-router-dom";

🔟 프로젝트 실행하기

• 01-hello-react 터미널 또는 프로젝트를 VSCode로 열고 터미널을 실행하여
  명령어 입력

yarn start

• 명령어를 입력하면 Reacet가 실행됩니다
  

---

📌 프로젝트 초기화

• 리액트가 실행되는것을 확인했다면 01-hello-react 파일을 vscode 를 통해 실행시킨 후, 자동으로 생성된 src폴더와 App.js 폴더, index.js 폴더안의 내용들을 정리해줍니다

• 정리 후 다시 yarn start 명령어 입력!! 만약 에러가 난다면 ??

yarn install 

명령어 입력후 아래의 명령어 입력

yarn start

---

💡 왜 yarn install 를 다시 해야할까??

• 자동으로 설치된 모듈 누락 가능성
  프로젝트를 초기화하거나 src, App.js, index.js 등 일부 파일을 삭제하고 정리하는 과정에서 필요한 의존성(모듈) 정보가 손실되거나 깨질 수 있습니다
• node_modules 폴더 재구성
  리액트 프로젝트는 package.json에 정의된 의존성을 기반으로 실행됩니다.
  만약 node_modules 폴더가 손상되거나 누락된 경우, 해당 폴더를 다시 생성해야만 프로젝트가 정상적으로 동작합니다
• 에러해결
  파일 정리후 yarn start를 실행했을때 의존성이 제대로 설치되지 않아서 에러가 발생할 가능성이 높기때문에 yarn install 을 실행하여 누락된 패키지를 다시 설치한뒤에 yarn start를 실행하면 문제를 해결할수있습니다

👩🏻‍💻 즉!! yarn install 는 프로젝트에 필요한 의존성을 설치하거나 복구하는 과정이기 때문에, 파일 정리 후 실행중 문제가 생기면 의존성을 재설치 한뒤 다시 실행해야 합니다

---