처음 Vue 를 사용하고, HTML 과 비슷하게 생긴 이 친구가 굉장히 직관적으로 느껴져서 바로 사용하기에 거리낌 없이 사용 할 수 있었다
꽤 많은 모듈들이 Vue 를 지원하고, 사용해서 만들어보았지만 React가 시장을 점유하는데에는 이유가 있을 것 이라고 생각이 들어서 나도한번 시작 해보자, 다시한번 기억 해 내보자! 하면서 시작하게 되었다
React Cli로 시작하자
Yarn과 Npx, Npm 등등으로 설치하여 사용 할 수 있는 React는 create-react-app 이라는 명령어로 실행하게 된다. 그 설치 과정과 React 시작을 한번 해보려고한다
nvm 과 npm
# nvm & npm $ nvm install 16 $ nvm use 16 $ npm install -g create-react-app
nvm은 npm을 설치하고 관리하고 선택하는 데에 있어서 편리하다고 생각이 든다
간단한 명령어로 node버전을 설치 할 수 있고, 버전을 쉽게 바꿀 수 있다
위의 명령어로 react를 사용 할 수 있도록 패키지 설치를 완료했으니, react app을 만들어보도록 하자
Start React App
# npm $ npm init react-app [앱 이름] $ npm init react-app start-react # yarn $ yarn create react-app [앱 이름] $ yarn create react-app start-react
Yarn 이나 npm으로 리액트를 시작 해 준다
React 실행
간단한 명령어로, 우리는 리액트 패키지를 모두 만들었다. 실행이 바로 가능하며, 실행하기 위해서 명령어를 알아보도록 하자
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
자동으로 생성 된 파일 중 package.json은 설치 된 파일들과 모듈들 그리고 시작 스크립트 명령어를 설정 할 수 있도록 도와준다
그 중 ‘scripts’ 에서는 명령어를 보여준다. 우리가 새로 만들어도 되지만 우선은 그냥 사용 해 보려고한다.
# react 를 실행 하게 해 주는 명령어 $ npm start $ npm build $ npm test $ npm eject
$ npm start 로 리액트 앱을 실행 하자. 아래와 같은 화면이 나오면 리액트 실행이 성공 했기 때문에 다음 스텝으로 넘어가기 위해 이것저것 찾아보면 될 것 같다
Reference
https://github.com/facebook/create-react-app
https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app
Related Posts
