React 개발환경 설정 및 프로젝트 생성, 코딩 룰

 

VS CODE

- React 코드 편집기로 사용.

Download Visual Studio Code - Mac, Linux, Windows

 

Github Desktop

- bash 창에서 command 를 입력할 필요 없이 GUI 로 구현되어 있는 깃허브 프로그램

- 굉장히 편리해서 자주 사용하는 프로그램이다.

GitHub Desktop

 

Git Bash

- VS Code의 Terminal로 사용예정

Git - Downloads

 

 

NVM

- nvm은 Node.js의 버전 관리자입니다.

- 컴퓨터에 node를 설치하는 툴. 수많은 버전을 선택해 설치할 수 있게 해주는 것.

- 시스템에 Node.js를 직접 설치하다보면 다른 버전을 설치하게 되는 경우가 많은데, 여러 버전의 Node.js를 관리하는 힘

- 협업을 할 때나 다양한 프로젝트를 동시에 진행해야 할 때 다양한 라이브러리, 프레임워크, 개발툴의 버전 호환 문제를 겪을 때 사용한다.

Releases · coreybutler/nvm-windows

- nvm-setup.zip 을 통해 설치.

- vs code에서 잘 설치되었는지 확인해보자.

nvm --version

- 혹시 확인이 되지 않는다면 vs code를 종료하고 실행시켜보자

 

NVM으로 Node.js 설치하기 및 버전관리

Node.js

Node.js 란?

• 자바스크립트를 활용한 서버사이드 개발에 사용되는 소프트웨어 플랫폼
• 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하다.
• npm은 Node Package Manager의 약자로 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포하고 있다
• Node.js를 다운받으면 npm이 자동으로 설치된다.
• Node.js 홈페이지에서 안정적인 버전을 확인할 수 있다

 

nvm을 통한 Node.js 인스톨 및 버전관리

nvm install 14.17.5

nvm install 16.8.0

 

#설치된 node.js의 리스트를 보는 커맨드
nvm ls
# 사용할 node.js를 선택하는 커맨드
nvm use 14.17.5
# 사용되고 있는 node.js의 버전확인
node -v

 

 

npm으로 yarn 설치

- NPM(Node Package Manager)은 무수히 많은 third-party 패키지를 활용할 수 있게 해준다.

- yarn 또한 마찬가지로, 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"입니다.

- npm은 노드를 설치하면 함께 설치되서 따로 설치하지 않아도 된다.

# npm으로 패키지를 설치할 때는 아래 명령어를 사용
# 옵션은 필요한 경우에만 적어준다
# npm install [옵션] [설치할 패키지 이름]

npm install -g yarn 

# 이 명령어는 "npm으로 yarn을 컴퓨터 전체에 설치한다"는 뜻.
# -g 옵션은 컴퓨터 전체에서 쓸 수 있게 한다는 뜻.

 

반응형

 

Yarn 으로 React : CRA 설치

yarn add global create-react-app

- CRA(Create React App)는 웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지이다.

- React 사용을 위해 필요한 패키지를 하나씩 설치할 수 있지만 yarn으로 CRA를 설치해서 이를 간편하게 할 수 있다.

 

Yarn 으로 React App 설치

- 리액트에서 프로젝트를 App 이라 지칭한다.

yarn create react-app week01

 

- 다 설치가 된 후 package.json을 찾아가보자.

-  사용할 수 있는 명령어 정보를 얻을 수 있다.

 

- 새로운 앱 (패키지) 로 이동 후, 리액트 앱을 실행시켜 보자.

cd week01
yarn start

 

 

리액트 코딩 룰

- 폴더는 소문자로 시작하는 카멜케이스를 사용

- JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용