프론트엔드/React

[React] 시작하기

병걸 2023. 3. 3. 18:00

React를 시작하기 앞서 먼저 설치해야 하는 프로그램들이 있습니다.

 

1. 먼저 React 공식 홈페이지에 들어가  Get Started버튼을 클릭한다.

https://reactjs.org/

 

 

2. Create a New React App에 있는 Learn how를 클릭해줍니다.

Online Playgrounds - 온라인 상에서 React 애플리케이션을 구현해볼 수 있는 사이트 들이다.

Add React to a Website - 이미 웹 사이트를 가지고 있는 상황에서 처음부터 끝까지 React 앱을 만드는게 아니라 부분적으로 React 기능을 추가하고 싶을 때 사용한다. 처음에는 시작하기 쉬울수 있지만 뒤로 갈수록 개발 환경을 직접 구축해야하는 어려움들이 많기 때문에 초급자들에게 사용이 어렵다.

Create a New React App - React로 앱을 개발할 때 목표가 뭐냐에 따라서 그 목표를 달성하기 위해서 필요한 여러가지 개발환경 도구들을 모아서 한방에 제공해주는 편리한 툴체인들을 보여준다.

 

3. Create React App를 클릭하여 아래 방법을 확인한다.

 

4. 나와있는 방법인 npx는 한번만 사용이 가능한 명령어입니다. 한번 사용할게 아닌 현 컴퓨터에 설치를 원하기 때문에 npm을 설치합니다.

※ npm이란? Node.js로  이루어진 기술을 이용하여 만들어진 여러 앱들이 있는데 그런 앱들을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 도구입니다.

 

5.  본인에게 맞는 node.js 버전 설치 (LTS 안정화된 버전, Current 최신화된 버전)

https://nodejs.org/en/

 

6. 원도우 키 + R키를 눌러 실행창 활성화 하여 cmd 입력 후 npm -v 를 타이핑 하여 설치되어 있는지 확인

 

7. npm install -g create-react-app를 타이핑 한다. (create-react-app를 컴퓨터 어디서든 사용할 수 있게 설치해달라고 한다.) 

※ 권한이 없다고 뜨면 sudo를 앞에 타이핑 하여 실행합니다.

 

8. create-react-app -V를 타이핑하여 버전을 확인한다.

 

9. 바탕화면에 react-app 폴더 설치 (특수한 문자기때문에 파일명 똑같이 설치 필요)

10. cmd 창에 cd -> 생성된 react-app폴더 드래그 한 후 create-react-app . 타이핑 하면 폴더 안 react 개발환경이 구축된다.