React 설치 및 기본 사용법

반응형

처음 리액트를 접하거나 처음 설치하시는 분들을 기준으로 글을 작성해 보았습니다.

어딘가에 빠진 부분이라던가 틀린 부분이 있으시다면 댓글 남겨주시면 감사합니다!!


설치해야 될 것 4가지

  1. Node.js
  2. npx
  3. npx
  4. git
  5. yarn (선택에 따라 나중에)

 

Node.js 설치 → (node.js 설치시 npm 도 같이 설치됨.)

1. Node.js  페이지 접속

 

 

Node.js

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

nodejs.org

2. 왼쪽의 “16.17.0 LTS” 를 다운 받는다. (오른쪽의 "현재버전" 다운로드 X)

node.js 설치

3. 다운로드가 다 되었으면 “명령 프롬프트” 실행

4. " node -v “ 명령어로 설치 버전 확인

node -v

 

반응형

 

npm 설치 확인(node.js 설치시 같이 설치됨)

1. 명령 프롬프트 실행

2. “ npm -v “ 명령으로 설치 확인

npm -v

npx 설치 확인

1. “ npx -v “ 명령어로 먼저 확인

2. 버전 정보가 안뜬다면 “ npm install npx -g “ 명령어를 사용해 설치

3. “ npx -v “ 명령어로 재 확인

npx -v


npm, npx 오류메시지 및 해결 방법

  • 버전 확인 중 아래와 같은 오류메시지가 뜨는 경우

“npm WARN config global -global, -local are deprecated. Use -location=global instead.”

 

해결방법

  1. PowerShell [관리자 권한] 실행
  2. Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force 입력 후 [Enter]
  3. npm install --global --production 입력 후 [Enter]
  4. npm-windows-upgrade 입력 후 [Enter]
  5. npm -v로 확인

깃(Git) 설치

 

 

Git - Downloads

Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp

git-scm.com

1. git 홈페이지 접속하여  git 설치 후 [명령 프롬프트] 실행

2. git -v 또는 git --version 명령 입력 후 [Enter]

git -v

 

 


모든 설치가 다 끝났다면 기본적인 준비는 다 끝난 것이다.

 

리액트 사용해보기 (VScode 에서 설명)

create-react-app 을 사용하지 않는 경우

1. VScode 실행

2. HTML 파일 </body> 위에 아래와 같은 순서로 코드 입력

3. 컴포넌트를 작성할 js 파일을 리액트 script 보다 아래에 위치

<body>
...

<!-- DOM 컨테이너 -->
<div id="root"></div>

<!-- 리액트 가져오기 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- 리액트 컴포넌트 가져오기  -->
<script src="파일경로명/js파일명.js"></script>
</body>

 

create-react-app 사용해 react 폴더 만들기

  • create-react-app : react 폴더를 간단히 만들어주는 명령어 이다.

1. 작업할 “영어로 된 폴더명”을 생성한다. (예: react-study, reactApp)

(※ 주의) 생성된 폴더 까지 가는 폴더 경로에 한글이 있으면 안된다. >>오류남

 

잘못된 폴더 경로 예시

  • C:\공부\React-Study →(x)
  • C:\Study\리액트 공부→(x)

잘된 폴더 경로 예시

  • C:\Desk-top\React-Study →(O)
  • C:\React-Study →(O)

 

2. VScode 새 창 연 후 생성한 폴더 열기

 

3. 터미널 열고 아래 코드 입력 (cmd 창에서 입력해도 상관은 없다.)

(이 과정에서의 터미널 종류는 앞에 "$" 가 붙는 git bash 터미널을 사용하길 추천합니다.)

$ npx create-app-react 프로젝트명

4. 설치 완료 후 아래와 같이 화면이 나오면 성공 (testing = 프로젝트명)

설치 성공
생성된 파일들

5. 리액트를 실행 시켜 보자. (※참고) testing =  프로젝트명

C:\react-study> cd testing
C:\react-study\testing> npm start

 

6. 결과화면

리액트가 실행된 모습

프로젝트가 제대로 설치가 되었다면 위와 같은 리액트 로고가 빙글빙글 돌아가며 정상 작동할 것입니다.


새로이 create-react-app을 사용해 다른 프로젝트를 만들 경우

1. [ctrl]+C 를 입력해 일괄 작업을 끝낸 후 (끝내는 질문이 나온다면 Y 입력)

2. 아래 코드와 같이 입력 ("cd .. “ 명령으로 나오는게 Point)

<!-- "cd .." 명령을 사용해 testing 프로젝트 탈출-->
C:\react-study\testing> cd ..

<!-- 프로젝트 생성 명령어-->
C:\react-study> npx create-react-app 새 프로젝트명

cd .. 명령을 통해 react-study\프로젝트 -> react-study 로 빠져 나오는 것이 핵심이다.


리액트 파일 백업시 tip

리액트 프로젝트 설치시 아래 이미지와 같이 "node_modules" 폴더가 있을텐데 이 폴더의 용량이 약 2GB 이다.

node_module

백업 순서를 이렇게 해보시면 좋을 겁니다.

1. node_modules 폴더 삭제 (나중에 재 설치 가능합니다.)

  • 삭제는  rm -rf node_modules 명령어 로도 가능합니다.

2. 백업

 

나중에 사용시 터미널을 사용해 아래 명령어로 재 설치 해주시면 됩니다.

npm install

 

 

도움 되셨다면 공감 한번 부탁드립니다 :)

반응형

댓글

Designed by JB FACTORY