React Setup

<React 설치>

Visual Studio Code 사용할 경우 터미널에 들어가 하단 명령들을 기입합니다

1. npm install -g create-react-app
2. create-react-app <파일이름 지정>

다른 방법은 하단과 같습니다

1. npx create-react-app <폴더 이름>
   
   * Npx는 노드 패키지 실행을 도와주는 도구 입니다. 그래서 create-react-app 이란 npm 레지스트리에 있는 패키지를 생성한 폴더에서 실행해서 리액트를 설치 해줍니다. 
   
   

<실행>

1. npm run start 로 React를 실행 -> localhost:3000에 페이지 확인할 수 있습니다
2. npm run test 로 코드에 문제가 있는지 확인할 수 있습니다
3. npm run dev를 사용하려면 package.json의 "scripts" 섹션에 "dev" 설정을 추가해야 합니다

원래는 webpack 이나 babel 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있습니다. 

 

<웹팩이란 무엇인가요?>

오픈 소스 자바스크립트 모듈 번들러로써 여러 개의 파일을 하나의 자바스크립트 파일로 번들링하고 최적화해주는 모듈 번들러입니다.

 

<장점>

• 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.
• 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽습니다

<Babel>

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌수 있게 변환 시켜주는 라이브러리 입니다.

 

<React 설치했을때 생기는 기본 구조>

 

**이름이 수정되면 안되는 파일들**
Public/index.html -> 페이지 템플렛
Src/index.js -> 자바스크립트 시작점

 

Index.html -> 페이지는 방문자가 사이트를 요청할 때 다른 페이지가 지정되지 않은 경우 웹 사이트에 표시된 기본 페이지에 사용되는 가장 일반적인 이름입니다.

 

Public 폴더 -> Public 내부의 파일만 public/index.html에서 사용할 수 있습니다.

Src 폴더 -> 이곳에 JS 파일과 CSS 파일들을 넣으면 됩니다. Webpack은 여기에 있는 파일만 보게 됩니다.

 

Package.json 파일 -> 해당 프로젝트에 대한 정보들이 있습니다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어있습니다. 앱을 시작할 때 사용할 스크립트, 앱을 빌드할 때, 테스트할 때 사용할 스크립트등이 명시되어있습니다.