study/react

react 로 만든 웹페이지 실행해보기!

mimizzang 2019. 4. 22. 14:04

실행에 앞서 필요한 것들이 몇가지 있다.

 

1. vs code

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

2. node js 설치

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

이제 모든 준비가 끝났다! (강의에서는 macOS에서 실행시키지만 저는 window에서 실행시켰습니다.)

우선 가장 먼저 할 일은 node js command prompt를 실행시키는 것이다.

그리고 아래와 같이 명령어를 입력해준다.

 

npm install -g create-react-app

create-react-app movie_app

(여기서 movie_app이 내가 만들고자 하는 app의 이름이 된다.)

 

 

그리고 다음의 명령어를 입력해준다. movie_app 폴더로 들어간 후 react app을 실행시켜 주면 다음과 같은 창이 뜬다!

 

cd movie_app

npm start

 

 

간단한 수정에 들어가 보자.

vs code를 실행시키고, movie_app 폴더를 열어준다.

 

 

여기서 12번째 문장을 수정하고 save해주게 되면 자동으로 컴파일이 시작된다.

 

 

생각보다 간단하다. 빨리 더 많은 기능을 배워서 구현해보고 싶다!