React 설치 환경 구성

React 설치 환경

1. node.js 설치

- 구글에서 nodejs 검색 후 설치 파일 실행. (그냥 다음다음다음~)

 

 * Create React App 을 사용하기 위해서 nodejs가 필요

 

2. Visual Studio Code 설치

 - 구글에서 Visual Studio Code 검색 후 설치 파일 실행. (OS 맞게 설치 , 다음다음다음~)

 

3. 작업폴더 설정

- 강의를 보고 하는터라 아무 경로에 임의 폴더(blog) 생성

 

4. 터미널에 "npx creat-react-app blog" 입력

 - 터미널 실행 명령어

   [ Ctrl + Shift + ` ]

 - blog라는 프로젝트 생성

 - crate-react-app : 리액트 셋팅 다된 boilerplate 만들기 쉽게 도와주는 라이브러리

     여기서 boilerplate 란? 재사용 가능한 프로그램을 가리키는데 사용

5. 다시 한번 작업 폴더 오픈하여 blog 폴더> src 폴더 > App.js 생성 확인

- App.js메인 페이지에 들어갈 html 내용이 있는 곳 

* public

   : stactic 파일 보관함

   : 그래픽 파일 아이콘 등 압축되지않은 파일 저장

*  public > index.html

   : 실제 메인 페이지

   : index.js를 통해서 App.js에서 index.html에 넣어 실행 하는구조

* node_module

  라이브러리 모은 폴더

* scr

 : 소스코드 보관함

* package.json

 : 설치한 라이브러리 목록

 

 

6. 정상 구동 확인을 위하여 터미널에 "npm start" 를 실행해주면 크롬브라우저나 Edge브라우저에서 아래와 같이 실시간으로 실행되는 부분을 확인 할 수 있다.

 - npm start 코드 짠걸 미리 보기 위한 페이지