[React] 1강 | 리액트 뽕주입과 설치법

왜 리액트?

---

1. Single Page Application 구현 가능
2. component로 html 재사용 편리
3. 데이터가 html에 자동 반영
4. 사용량 1위(2022 기준)
5. React Native를 쓰면 비슷한 문법으로 모바일 앱개발도 가능
6. 프론트엔드와 백엔드 파트를 완전히 분리해서 각각 개발 가능능
7. etc..

리액트 설치

---

• 개발환경 셋팅
  1. Node.js 설치
  2. vscode 에디터 설치
• 프로젝트 생성
  1. 작업용 폴더 생성 ⟶ 폴더에 shift + 우클릭 ⟶ ‘터미널에서 열기’(혹은 PowerShell)
  2. 프로젝트 생성
     1. (구버전) 터미널에 npx create-react-app 프로젝트명 입력
        • ERESOLVE unable to resolve dependency tree 오류 발생 시 pacage.json 파일에서 react 및 react-dom 버전 변경 필요
          1. 미리보기를 위해서 터미널에 npm start 입력
          • web-vitals 모듈을 찾을 수 없다는 오류 발생 시
            • 터미널에 npm install web-vitals 입력
              • 보안 취약점 문제 발생 시 터미널에 npm audit fix 혹은 npm audit fix --force 입력
          • error:0308010C:digital envelope routines::unsupported 오류 발생 시
            • Node.js 버전 다운그레이드:
              1. nvm 설치 nvm.setup.zip 다운
              2. 터미널에 Node.js 버전 설치 ex) nvm install 16 입력 (기존 node.js 파일 삭제)
              3. node -v로 현재 Node.js 버전 확인
              4. 터미널에 사용할 버전 입력 ex) nvm use 18
                 • Node.js 버전이 바뀌지 않을 경우
                 1. PowerShell 프로필 파일(profile.ps1)에 nvm과 nodejs의 PATH 추가

                     $env:NVM_HOME = "C:\Users\(username)\AppData\Local\nvm"
                     $env:NVM_SYMLINK = "C:\nvm4w\nodejs"
                     $env:PATH = "$env:NVM_HOME;$env:NVM_SYMLINK;$env:PATH"
                    

                 2. 터미널에서 확인

                     echo $env:NVM_HOME
                     echo $env:NVM_SYMLINK
                    

                 3. 터미널 새로고침
          • 기타 오류 발생 시
            • nvm의 경로를 PATH 환경 변수에 추가 (vscode 재부팅 필요)
            • 터미널 새로고침
     2. (신버전) 1번이 안 되는 경우 터미널에 입력 npm create vite@latest
        ⟶ 프로젝트 이름 설정 ⟶ framework 선택: React ⟶ variant 선택: JavaScript
        ⟶ cd blog npm install 입력
        1. 미리보기를 위해서 터미널에 npm run dev 입력
  3. vscode에서 생성한 폴더 열기
     • 이후 주로 src 폴더 내에서 작업