JavaScript

[React] 빠르게 React 개발환경 셋팅하기 (2021 버전)

LAZY SIA 2021. 10. 26. 20:11
728x90
반응형

리액트 개발환경을 빠르게 셋팅 해봅시다

 

 

셋팅을 위해 필요한 건, 3가지

1. Node.js 최신버전

2. VSCode

3. create-react-app 라이브러리로 프로젝트 생성하기

 

순서대로 해봅시다

 

 

1. Node.js

 

이미지 클릭해서 Node.js 다운로드 페이지로 이동 ㄱㄱ

먼저 Node.js는 홈페이지가서 가장 최신 버전(오른쪽꺼)으로 설치합니다

맥북 M1은 가끔가다 라이브러리 이용에 어려움이 있을 수 있으니 LTS버전을 추천합니다

 

 

 

2. VSCode

 

이미지 클릭해서VSCode 다운로드 페이지로 이동 ㄱㄱ

운영체제에 맞는걸루 깔아주세요

 

 

 

3. create-react-app 라이브러리로 프로젝트 생성하기

 

작업할 폴더 하나 생성해서 VSCode 에서 열어주고

VSCode 터미널 열기

(상단 탭 메뉴에 Terminal - New Terminal

또는 단축키 ctrl+shift+`)

 

npx create-react-app 원하는폴더명

터미널에 입력 후 엔터

(프로젝트 진행하실거면 프로젝트명을 폴더명으로 하면 될 것 같습니다)

 

 

설치가 잘 되었다면 맨처음 생성한 폴더에

방금 이름 지어준 하위폴더가 하나 생겼을텐데

VSCode에서 새로 생성된 폴더를 다시 오픈합니다 (중요)

(꿀팁)

터미널에서 `cd 폴더명` 으로 생성한 폴더로 이동한 후 `code .`를 작성하면

해당 폴더를 VSCode로 열 수 있음

(안될 경우 cmd + shift + p > Shell Command : install 'code' command 어쩌구 install 하면 됨)

 

내가 짠 코드 브라우저에서 보고 싶으면 

npm start

새로 생성된 폴더 터미널에서 입력 후 엔터

(처음 폴더에서 입력하면 안나와유)

 

안뜨면 그냥 크롬 주소창에 localhost:3000 ㄱㄱ

 

 

 

 

자 이제

src 폴더안에 있는 App.js와 App.css를 수정하면

브라우저에서 바뀌는 걸 확인할 수 있습니다

 

App.js 파일에서 App이라는 클래스를 가진 div안에서 HTML처럼 코드 짜시고

App.css 파일에서 CSS 작업하시면 됩니다~

 

// (App.js)

function App(){
  return (
    <div className="App">
      <h3 className="hello">hello</h3>
    </div>
  )
}

 

/* (App.css) */

.hello {
  color : orange;
}

 

 

 

 

<설치된 폴더/파일 설명>

package.json : 설치한 라이브러리 목록

node_modules : 라이브러리 모음

public : static 파일 보관함

src : 소스코드 보관함

 

 

 

에러 발생 해결 방법

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).
We no longer support global installation of Create React App.

 

sudo npm uninstall -g create-react-app
sudo npm add create-react-app

 

 

터미널에 작성한 후 지정 폴더에서 npx create-react-app (app이름) 다시 시도

 

반응형