[React] 1. React 설치 및 세팅

1. node.js  설치

    - 설치 사이트 : https://nodejs.org/en

    - HTML 파일에다가 직접 Readct 라이브러리 설치해서 작업하려면 오래 걸림

    - create-react-app이라는 라이브러리를 사용하기 위해 node.js 사용

    - 기존에 설치되어 있어도 최신 버전으로 재설치 권장(오류 방지)

 

2. Visual Studio Code(VSCode) 설치

    -  기존에 설치되어 있는 Visual Studio Code에 Terminal 메뉴가 없으면 재설치 추천

 

 

3. 작업 폴더 생성 후 VSCode에서 열기

 

4. React 프로젝트 생성

    - VSCode 하단에 마우스 클릭 후 드래그 또는 Terminal > New Terminal 해서 Terminal 창 띄우기

    - npx create-react-app blog 입력

        · npx : 라이브러리 설치 도와주는 명령 (node js 설치 잘 되어 있어야 사용 가능)

        ·create-react-app : 라이브러리 이름. 리액트 세팅 다 된 boilerplate 만들기 쉽게 도와주는 라이브러리 

        ·blog : 프로젝트명

 

    ※ node.js가 잘 설치되지 않았을 경우(실패)

        - 아래와 같은 메시지가 뜬다면 VSCode 껐다 켜기

        - 아래와 같은 메세지가 뜬다면 npm -g install create-react-app

            · 패키지 설치 과정을 넘어가서 생길 오류일 확률이 높음

 

    ※ node.js가 잘 설치되었을 경우(성공)

 

5. 프로젝트 폴더 하위 폴더들 확인

    - react에 필요한 모든 파일이 모두 설치된 것을 확인

 

6. VSCode에서 blog 폴더 새로 열기(blog 말고 다른 이름으로 했다면 해당 폴더 열기)

 

7. blog(포르젝트명) > src > App.js 열기

    - index.html과 같은 메인 파일

 

8. 미리보기 띄우기

    - terminal 창 열고, npm start 입력

    - 성공했을 경우, 아래와 같은 메시지 표출 및 크롬에서 해당 페이지 오픈

 

    - 만약 브라우저가 자동으로 안 열리면 해당 주소(localhost:3000) 직접 입력

 

❕참고

    - App.js는 메인페이지에 들어갈 HTML을 짜는 곳

    - 실제 메인페이지는 public > index.html 

    - src > index.js에서 root라는 ID를 가진 태그에 App.js 안에 내용을 넣겠다는 명령어 실행

    - node_modules 폴더 : create react app 실행을 위해 설치한 라이브러리 모음 폴더

    - public 폴더 : static 파일(파비콘처럼 동적으로 잘 바뀌지 않는 파일) 보관 

        · build, compile을 하면 src 폴더는 압축이 되지만 public은 압축되지 않은 채 유지

    - src 폴더 : 실질적 소스코드 보관함

    - package.json : 설치한 라이브러리 목록(라이브러리명과 버전 확인 가능)

 

 

---

참고

• 코딩애플 - React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일)
  https://www.youtube.com/watch?v=nahwuaXmgt8
• 코딩묻은 디자이너 - npm ERR! code ENOENT 해결 방법
  https://w-world.tistory.com/341