002. [코딩애플] [part1] 리액트 React 설치와 개발환경 세팅

개발환경 세팅

1. Node.js 설치

구글 검색 후 LTS 버전 설치.

2. VSCode 에디터 설치

따로 사용하는 에디터가 있으면 그거 써도 됨.

프로젝트 생성

CRA로 프로젝트 세팅하기

React 프로젝트를 만들기 위한 파일들을 직접 설치해서 작업 환경을 만들 수 있겠으나 파일이 너무 많고 복잡하므로 Create React App이라는 라이브러리의 도움을 받을 것이고,

이 라이브러리는 Node.js를 설치하면 자동으로 딸려 오기 때문에 Node.js도 설치한 것.

그리고 아래 npx 명령어를 사용하면 리액트 프로젝트가 한 번에 구축이 됨.

1. 작업용 로컬 디렉토리 생성
2. 폴더를 shift 우클릭
3. 여기에 PowerShell 창 열기 클릭, 맥은 터미널 열기
4. 터미널에 아래 코드 입력

npx create-react-app <프로젝트명>

• 허가 되지 않은 권한... 에러 시
  • windows
    • 작업표시줄 - 실행 - 터미널 열고
    • 아래 명령어 복붙

Set-ExecutionPolicy Unrestricted

• Mac
  • 아까 코드에서 앞에 sudo를 추가

    sudo npx create-react-app <프로젝트명>

  • 입력 후 PC 비밀번호 입력

5. Happy hacking! 이라고 뜨면 리액트 프로젝트 생성 완료
6. 작업 폴더 안에 서브 폴더로 내 프로젝트명으로 여러 패키지가 설치되어 있음.
7. 이 서브폴더를 VSCode에서 열고 작업하면 됨.

Vite로 프로젝트 세팅하기

1. Node.js 설치
2. 프로젝트 디렉토리 생성
3. 해당 프로젝트 디렉토리에서 터미널 열기
4. 아래 명령어 입력 (React 환경)

npm init vite@latest -- --template react

5. 의존성 설치

npm install

6. 개발 서버 실행

npm run dev

메인 작업 파일

메인 페이지는 src 폴더 내의 App.js 파일임. 이 곳에서 코드를 작성하면 됨.

실시간 미리보기

터미널 열고 npm start를 입력하면 웹 브라우저가 열리면서 내가 작업 중인 웹 페이지가 미리보기 됨.

실시간 미리보기이므로, HTML의 Live Server 역할임.

프로젝트 파일 설명

• node_modules
  • React 라이브러리에 필요한 모든 코드를 보관하는 곳. 이 곳을 수정할 일은 크게 없다.
• public
  • 파비콘, 이미지, html 등의 static 파일을 모아놓는 곳. 처음 수준에서는 크게 수정할 일이 없으나 추후 생김
• src
  • 우리가 직접 수정해야 하는 파일들의 모음.
  • App.js가 메인 스크립트. 이곳에서 코드를 작성함.
  • App.js는 자바스크립트 파일인데 이곳에 HTML 마크업 언어로 작성을 해도 작동을 하는 이유는 이곳에서 작성된 스크립트를 하나의 div로 만들어서 index.html로 보내주는 역할을 index.js가 대신 해주고 있기 때문임.
• package.json
  • 프로젝트 정보를 기입한 곳.
  • 프로젝트명, 버전 같은 내용을 수정할 수 있음.