올해 안으로 만들고 싶은 웹페이지가 있는데, 어떻게 만들어볼까 하다가 기왕이면 공부도 할겸 요즘에 핫한 React JS로 만들어보자는 결론에 이르렀다.
설치하는법은 생각보다 복잡하지 않았다. 역시 뭐든지 처음은 쉽고 간단하다.
1. 먼저, Nodejs를 설치를 해야 한다. 나중에 도움이 될만한 패키지들을 사용하기 위해 설치합니다.
Nodejs 다운받는 곳 : https://nodejs.org/ko/
자신이 사용하는 OS 버전의 설치파일을 다운 받아서 설치합니다. 나중에 별 문제가 없게하기 위해서는 LTS를 받는게 좋다.
나는 일단 나중에 새로 설치하더라도... 현재버전을 설치해보았다.
2. 그리고 'yarn' 을 설치해준다.
yarn 이란?
페이스북(Facebook)에서 만든 새로운 자바스크립트 패키지 매니저이다.
- 페이스북은 코드베이스가 커지면서 npm을 사용할 때 일관성, 보안, 성능에 문제를 겪게 되었고 Google, Exponent, Tilde의 개발자들과 함께 npm client를 대체할 새로운 패키지 매니저 Yarn을 만들었다. 이미 널리 쓰이고 있는 npm과 비교했을 때, 더 빠르고 안정적이라는 장점이 있다.
-참조 : Fetobe 블로그 "새로운 NPM Client yarn"
윈도우 환경이므로, [윈도우키]+[ r ] -> "cmd 입력 후 엔터" 를 하여 커맨드라인 윈도우를 띄워주고 설치명령어를 날려준다.
$ npm install --global yarn위의 명령어를 써주게 되면 yarn 패키지가 추가되었다는 문구가 뜨면서 설치는 끝나게 된다.
3. 그리고 "create-react-app" 이라는 도구를 이용하여 리액트 앱을 만들어주게 되면, 기본적인 리액트앱이 생성이 된다.
$ npx create-react-app [리액트앱명]위의 명령어를 치게 되면 현재 명령어를 실행한 위치에 [리액트앱명]으로 된 하위폴더가 생기며 안에 리액트 파일들이 설치가 되게 된다.
4. yarn start 명령을 통해 리액트앱 실행!
$ yarn start
yarn run v1.9.4
$ react-scripts start
Starting the development server...
Compiled successfully!
You can now view blind-square in the browser.
Local: http://localhost:3000/
On Your Network: http://10.0.75.1:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.설치 후에 yarn start 명령어를 써주게 되면 위와 같은 문구가 나오며, 자동으로 해당 주소의 실행된 리액트앱 결과화면이 보이게 된다.
5. 끝.
- 이제부터 개발을 시작해보자.