Home
Frontend
React 시작하기
울이
울이
December 24, 2021
1 min

처음 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 로 리액트 앱을 실행 하자. 아래와 같은 화면이 나오면 리액트 실행이 성공 했기 때문에 다음 스텝으로 넘어가기 위해 이것저것 찾아보면 될 것 같다

image
image

Reference

https://reactjs.org/

https://github.com/facebook/create-react-app

https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app


Tags

#React#Javascript
Previous Article
React의 Component
울이

울이

개발자 울이

경험하고 사용하고 개선하는 것, 그리고 소통하면서 성장하는 것을 좋아합니다.

Expertise

Backend
Frontend
Data Engineering

Social Media

githublinkedinwebsiteinstagram

Related Posts

React의 Component
React의 Component
December 24, 2021
1 min
© 2022, All Rights Reserved.

Quick Links

Home

Social Media