[React] create-react-app 프로젝트 생성하기 - 로또 번호 랜덤 생성 사이트 만들어 보기 1편

로또 번호를 랜덤으로 생성해주는 프로젝트를 만들기 위해 React 프로젝트를 생성해보도록 하겠습니다.

 

우선 프로젝트를 생성하기전에 node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전을 설치해야 됩니다.

기본적으로 node를 설치할 때는 node 공식 홈페이지에서 다운로드 후 설치 하곤 합니다.

 

저는 어플리케이션 마다 node 버전 관리를 하기 위해 nvm을 주로 사용합니다.

이번 프로젝트 생성 포스팅에서는 nvm을 먼저 설치 한 후 React 프로젝트를 생성해 보겠습니다.

 

1. nvm 및 node 설치하기. (맥 OS)

1-1 설치

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

1-2 설정

설치 후 nvm 명령어가 실행이 되지 않는 다면 환경설정을 해주어야 합니다.

nano ~/.bashrc

 

아래 내용을 복사 후 저장합니다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

 

설정을 로딩 하기 위해 아래 명령어를 실행 합니다.

source ~/.bash_profile

1-3 설치 확인

명령어를 쳤을때 아래와 같이 나온다면 성공적으로 설치가 완료 된 것 입니다.

nvm ls

N/A
node -> stable (-> N/A) (default)
iojs -> N/A (default)

1-4 node 설치

이제 최신 안정화된 node 버전을 설치 하면 됩니다.

공식 홈페이지에서 안정화된 버전을 확인하거나 팀내 또는 원하시는 버전이 있다면 그 버전을 설치 하시고 진행 하시면 됩니다.

저는 최신 안정화된 버전을 설치 하겠습니다.

nvm install 12.14.1

설치 후에 node와 npm 버전을 확인 해 보세요.

node -v 
v12.14.1

npm - v
6.13.4

 

2. React 프로젝트 생성하기.

 

프로젝트를 만들기 위한 폴더를 생성 한 후 이동합니다.

아래 커맨드를 실행하여 프로젝트를 생성합니다.

npx create-react-app lotto-random
cd lotto-random
npm start

첫 번째 줄의 ‘npx’는 실수가 아니며 npm 5.2+ 버전의 패키지 실행 도구입니다.

 

 

위와 같이 웹페이지가 생성되면 정상적으로 프로젝트가 생성된 것 입니다.

 

쉽게 프로젝트 생성이 가능하죠?

정말 정말 아무것도 없는 빈 프로젝트는 상당히 간단합니다.

 

React는 프레임워크가 아니라 라이브러리인것 아시죠

그래서 프레임워크처럼 사용할 수 있는 Next.js와 Gatsby가 있습니다.

해당 프레임워크들은 다른 프로젝트를 진행할때 사용해보겠습니다.

목표 했던 로또 번호 랜덤 사이트 프로젝트는 빈 프로젝트로만 가능하기도 하며 기본적인 React를 살펴볼때는 좋은 예제가 될 수 있습니다. 

 

마지막으로 저는 npm을 사용하지 않고 yarn을 사용할 예정입니다.

그래서 아래와 같이 yarn을 글로벌로 설치해 줍니다.

 

npm install -g yarn

yarn start

 

설치 후 start 명령어를 실행하여 똑같은 웹페이지가 뜬다면 정상적으로 설치 완료된 것 입니다.

yarn을 쓰는 이유는 npm보다 모듈 설치가 빠릅니다.

 

자세한 내용은 다른 포스팅으로 정리해보겠습니다.

 

다음 편은 생성된 프로젝트에 로또 번호를 생성하여 랜더링 해보겠습니다.

 

React로 로또 번호 랜덤 사이트 만들어 보기 강의 목록

1편 - [React] React 프로젝트 생성하기

2편 - [React] UI 디자인 툴 - 카카오 오븐 사용하여 사이트 디자인해보기

3편 - [React] React Component 분리 및 생성 하기

4편 - [React] state와 componentDidMount 활용 페이지 만들어보기

5편 - [React] props 하위 Component 값 전달하기 

6편 - [React] Javascript 로또 번호 생성 알고리즘

7편 - [React] 로또 당첨 번호 API 사용하여 Get API 만들기, 화면 호출하기