Coding Apple, React 강좌 내용 정리. 1 - 개발환경 구성, 설치 프로젝트 구성

React? (React 링크)

여러 자바스크립트 라이브러리 중에서 페이스북에서 개발되어 공개되었다.

 

 개발 환경 구성 

개발 툴 / 에디터로서 Visual Studio Code를 받고 설치한다.

Visual Studio Code 설치 (VS Code download) 

 

React를 학습하기위해서, Node.js를 받아서 설치해야 한다.

Node.js 설치 (Node.js download)

 

React 작업할 폴더를 선택

VS Code에서 File -> Open Folder로 선택

 

 React 프로젝트 생성 

VS Code에서 Terminal을 열고, nxp 명령어 그리고 생성할 프로젝트 이름

ex) npx create-react-app blog - blog란 프로젝트를 만들겠다. 그러면 아래처럼 진행이 된다.

npx?

node.js가 설치되어있어야 이용 가능하며, 라이브러리 설치를 도와주는 명령어

create-react-app?

리액트 세팅 다된 boilerplate 만들기 쉽게 도와주는 라이브러리

React project 설치 완료

설치 완료 후,

생성된 프로젝트 (여기선 blog)로 이동하고 npm start를 실행시키면 코드 짠걸 미리 보기 띄우기 가능

 

npm? (Node Packaged Manager)

node.js로 만들어진 package (module)를 관리해주는 툴.

실행시키고 자동으로 웹 브라우저로 표시가 안되면

터미널에 표시되는 주소로 브라우저를 띄우면 된다.

여기에 나오는 주소를 브라우저 주소창에 입력후  실행

처음 설치된걸 실행하면 아래와 같은 화면이 나오게 된다.

내 React 프로젝트 실행화면이 나온다

 

  생성된 프로젝트의 구조 & 내용물  

이제 기본적인 설치는 완료

 

public / index.html이 기본 페이지지만

실제 보이는 내용은 src / App.js이다.

이를 연결해주는 게 src / index.js

 

package.json : 설치한 라이브러리 목록