Ep.1 작업환경 준비하기

작업환경을 구축하기 위해서는 세 가지의 프로그램을 다운받아야 한다.

• node.js
• yarn
• VS Code

node.js

브라우저 환경이 아닌곳에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임이다.

공식 홈페이지 다운로드 링크 : https://nodejs.org/ko/download/

node.js 설치 확인하기

node --version     //터미널 혹은 git bash에 입력하면 됨

yarn

자바스크립트 패키지를 매니징하는 도구이다.
node.js를 설치하면 npm 이 함께 설치 되는데 npm 보다 yarn이 더 빠르다. npm에 익숙하다면 npm을 사용해도 무관하다.

공식 홈페이지 다운로드 링크 : https://classic.yarnpkg.com/en/docs/install/#mac-stable

yarn 설치 확인하기

yarn --version 

VS Code

VS Code 홈페이지 다운로드 링크 : https://code.visualstudio.com/

VS Code까지 다운 받았다면 모든 준비는 끝이 났다.
한글 패치, prettier 적용 등 확장 프로그램들은 되어 있다고 가정함!

프로젝트 폴더 생성하기

위의 세 프로그램을 다운 받았다면 리액트를 시작할 준비가 되었다.
터미널에서 리액트 프로젝트를 시작할 폴더를 하나 생성한다. 폴더 이름은 무엇이든 좋다.

pwd 명령어를 통해 현재 경로를 알 수 있다.

pwd     // 현재 내 경로: /Users/sseungii

경로를 확인했다면 mkdir 명령어를 이용하여 원하는 위치에 폴더를 생성한다.
나는 현재 수강중인 강좌와 같이 react-tutorial 이라고 폴더로 이동하였다.

mkdir react-tutorial     //react-tutorial 폴더 생성
cd react-tutorial     //react-tutorial 폴더로 이동

리액트 프로젝트 생성하기

프로젝트를 생성할 폴더로 이동했다면 프로젝트를 생성하기 위해 아래 명령어를 사용한다.

npx create-react-app 프로젝트 명

위 명령어를 입력하고 기다린다....
Happy hacking! 이라는 메시지가 뜨면 성공이다.

ls 명령어를 입력해보면 생성된 리액트 프로젝트가 보일것이다.
cd 명령어를 통해 그 프로젝트로 이동하고, 아래의 명령어를 입력한다.

yarn start

기다리면 리액트 로고가 있는 페이지가 뜰 것이다.

출처 : velopert