1. React 사전준비 - Node.js 및 리액트 설치하기

우선 react 를 사용하기 위해서는 Node.js 의 설치가 필요하다.

 

1. Node.js 공식 홈페이지  접속

LTS 버전 클릭

Node.js 공식 홈페이지  LTS 버전 다운로드 및 설치

 

2. Node.js 가 정상적으로 설치되었는지 확인해줍시다.

cmd 창을 연 뒤 node -v 를 입력해주세요

 

 

3. react 프로젝트를 설치하는 방법에도 2가지 방법이 있다.

 

3-1-1.  react 프로젝트 파일을 저장할 임의의 폴더를 생성.

 

3-1-2. Shift+마우스 오른쪽 클릭 후 여기에 powerShell 창 열기 클릭.

 

3-1-3. npx create-react-app 만들고자하는 프로젝트명을 입력해줍니다.

create-react-app 이라는 명령어는 node.js 에서 제공하는 리액트 프로젝트를 생성하는 키워드입니다.

Create React App

React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아닙니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수인데요…

React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느 프로젝트에서나 추가해서 쓸 수 있는 가벼운 라이브러리(library)에 가깝기 때문에 React를 기반으로 프로젝트를 시작하려고 하면 막막해지는 경우가 많은 것 같습니다.

과연 이러한 관련 기술을 신경쓰지 않고 React 애플케이션을 바로 개발할 수 있는 방법은 없을까요? 디행이도 React를 만든 페이스북(Facebook)에서는 Create React App이라는 CLI(커맨드 라인 인터페이스) 도구를 제공하고 있는데요. 이 도구를 사용하면 이러한 골치 아픈 문제없이 아주 간단하게 React 프로젝트를 구성할 수 있습니다!

프로젝트 생성

Create React App은 Node.js가 설치된 컴퓨터에서 npx 커맨드를 이용해서 부담없게 사용해볼 수 있습니다.

 

출처 : https://www.daleseo.com/create-react-app/

 

 

3-2-1. cmd 창을 이용해서 생성

cmd 창을 연 뒤, cd를 입력 하고 내가 프로젝트를 만들고자 하는 폴더를 드래그해서 cmd 창에 붙여넣기 한 후 엔터 클릭

 

3-2-2. npx create-react-app 만들고자하는 프로젝트명을 입력

그러면 아래와 같이 cmd 창에서 주소값이 바뀐 것을 확인. 그 후에 마찬가지로 npx create-react-app 만들고자하는 프로젝트명을 입력해줍니다.

 

3-2-3. 설치 완료

이런 식으로 설치가 진행되는 것을 확인할 수 있음