리액트 인텔리제이 프로젝트 생성

먼저 리액트를 사용하기전에 nods를 설치해야한다

node.js를 설치하는 이유는 노드의 create-react-app 라이브러리를 사용하기 위해 설치를 한다.

node.js를 설치하면 npm이라는 툴을 사용할 수 있는데. npm은 라이브러리들을 쉽게 설치할 수 있게 도와주는 툴이다.

IDE로는 대부분 vsc를 사용하지만  나는 인텔리제이 유료버전을 사용하는게 아까워서 인텔리제이로 사용한다

유료버전 사용시 React를 고르면 자동으로 리액트 세팅을 해준다

자바스크립트를 사용하는 이유는 HTML과 상호작용하기 위해서 즉 HTML의 Elemenet들을 JavaScript를 통해 변경하고 읽을 수 있다. 

 

App.js는 메인페이지를 짜는 곳, public/index.html은 실질적인 html파일 

<div id="root"></div>태그를 통해 App.js에 있는 모든걸 가져다 준다. 

모든걸 가져다 주는 역할은 index.js에서 document.getElementById('root') 부분을 통해 한다.

위의 node_modules는 설치한 모든 라이브러리들을 관리해주는 폴더.

public은 웹사이트의 static파일 보관함으로 사용한다.

src폴더는 실질적으로 코딩을 하는 부분. 

package.json은 설치한 모든 라이브러리들을 관리하는 곳, 스프링의 build.gradle과 비슷한 역할 같다

 

이제 npm start를 통해 실행을 시키면

기본페이지가 나오고 공부할 준비는 다 끝났다.