티스토리 뷰

리액트 개발 준비!

 

React JS는 페이스북에서 만든 자바스크립트

React 로 Web을 만들기 위해 설치해야하는 프로그램은?

 

Node JS, npm, npx

 

 

1. Node JS 

아래 URL에서 다운로드 가능

nodejs.org/ko/

 

Node.js

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

nodejs.org

2. npm

npm은 node js를 설치하면 자동으로 설치가 된다.

 

3.npx 

콘솔에 아래와 같이 npm install npx -g 를 입력

4. Visual studio code (에디터)

아래 URL에서 다운로드 가능

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

5. git -v

아래 URL에서 다운로드 가능

git-scm.com/downloads

 

프로젝트 생성하기!

 

리액트는 매우 현대적인 코드로 되어 있기 때문에 브라우저에서 리액트 코드를 이해 할 수가 없다.

리액트가 작동하기 위해서는 리액트 코드를 브라우저가 읽을 수 있는 코드로 변경해줘야 한다.

 

이 걸 한방에 해결하는 명령어가 create-react-app 이다. 

이 명령어로 React Web App을 을 Set up 할 수 있게 해준다.

이 명령어는 npx와 npm의 설치를 전제로 한다.

콘솔에 npx create-react-app (어플리케이션 이름)을 입력한다.

 

아래는 npm 이 할 수 있는 명령어들이다.

cd movie_app_2020

yarn start 

한댄다.

 

Visual studio code에서 해당 폴더를 선택하여 열수도 있고,

콘솔에서 code movie_app_2020 를 실행해도 해당 폴더를 VSC에서 열수있다.

 

README.md 는 내용 삭제하고 아래와 같이 입력해도 괜춘

Package.json

에서는 Script 의 두 개 configuration만 기억해라.

 

웹 서버 구동해서 웹에 띄우기!

 

프로그램 실행 명령어는 npm start 하면 위의 start가 실행되나봄..

서버가 구동되었다!!

 

 

Git Hub Repository 에 저장하기

git init을 입력한다.

git에 repository를 생성한다.

콘솔에 git remote add origin (git repository 주소)

git add .

git commit -m ""

git push origin master

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함