[스터디 - 리액트를 다루는 기술] 1주차 - 개발환경 셋팅하기

개발환경 세팅을 하기 이전에  리액트 사용시 같이 사용하는 node.js / npm / yarn / git에 대해 간단하게 개념을 정리하고자 합니다.

 

Node js란?

 

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 입니다.

이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다.

node.js를 설치하면 node.js 패키지 매니저 도구인 npm이 설치가 됩니다.

 

npm이란?

NPM는 Node Package Manager의 약자이다.

자바스크립트 패키지 매니저이고

NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치/관리를 수행할 수 있는 CLI를 제공한다.

 (CLI : 명령 줄 인터페이스, 터미널을 통해 사용자와 컴퓨터가 상호작용하는 방식을 말한다.)

 

  #패키지 설치

 

  npm i <패키지명> : 설치에는 local install과 global install이 있다.

                                기본값은 local install이고, local package는 해당 프로젝트 내에서만 사용할수 있다.

 

  npm i -g <패키지명> : global install 설치이며, glbal package가 설치된다.

                                    global package는 모든 프로젝트에서 공용으로 사용할수 있다.

 

YARN이란?

 

yarn 또한 npm과 같이 js 패키지 매니저 입니다.

yarn이 npm보다 속도와 안정성 면에서 조금더 우수하다고 합니다.

 

GIt 이란?, GItHub란?

코드 버전 관리 프로그램중 가장 유명하며 가장 많이 사용하는 협업 툴 입니다.

 

# Git 기본 용어

 

Repository: 저장소를 의미하며, 저장소는 히스토리, 태그, 소스의 가지치기 혹은 branch에 따라 버전을 저장한다. 저장소를 통해 작업자가 변경한 모든 히스토리를 확인 할 수 있다.

Working Tree : 저장소를 어느 한 시점을 바라보는 작업자의 현재 시점이다.

Staging Area : 저장소에 커밋하기 전에 커밋을 준비하는 위치이다.

Commit : 현재 변경된 작업 상태를 점검을 마치면 확정하고 저장소에 저장하는 작업이다.

Head : 현재 작업중인 Branch를 가리키는 것이다.

Branch : 가지 또는 분기점을 의미하며, 작업을 할때에 현재 상태를 복사하여 Branch에서 작업을 한 후에 완전하다 싶을때 Merge를 하여 작업을 한다.

Merge : 다른 Branch의 내용을 현재 Branch로 가져와 합치는 작업을 의미한다.

 

# Git 명령어 모음

 

git init : 깃 저장소를 초기화한다.

 

git status : 저장소 상태를 체크한다. 어떤 파일이 저장소 안에 있는지, 커밋이 필요한 변경사항이 있는지, 현재 저장소의 어떤 브랜치에서 작업하고 있는지 등을 볼 수 있다.

 

git clone : 원격 저장소의 저장소를 내 local에서 이용할 수 있게 그대로 복사해 가져온다.

 

git add : 이 명령이 저장소에 새 파일들을 추가하진 않는다. 대신, 깃이 파일들을 지켜보게 한다.

 

git commit : 보통 “git commit -m “Message hear.” 형식으로 사용한다. -m은 명령어의 다음 부분을 메세지로 남긴다는 뜻이다.

 

git push : 로컬 컴퓨터에서 작업하고 당신의 커밋을 깃허브에서 온라인으로도 볼 수 있기를 원한다면, 이 명령어로 깃허브에 변경사항을 추가한다. 

 

git pull : 로컬 컴퓨터에서 작업할 때, 작업하고 있는 저장소의 최신 버전을 원하면, "git pull"을 통해 깃허브로부터 변경사항을 다운로드할 수 있다.

 

git log : 커밋 내역을 확인해보고 싶을 때 사용하는 명령어이다.

 

git branch [브랜치명] : 이 명령어로 새로운 브랜치를 만들고, 자신만의 변경사항과 파일 추가 등의 커밋 타임라인을 만든다.

 

git checkout [브랜치명]:  이것은 체크하길 원하는 저장소로 옮겨가게 해주는 탐색 명령이다. 

 

git merge : 브랜치에서 작업을 끝내고, 모든 협업자가 볼 수 있는 master 브랜치로 병합할 수 있다. 

 

 

개발환경 세팅

 

Node 설치

내 컴퓨터 운영체제에 맞는 버전을 다운받아 설치합니다. (14.16.0 LTS)

버전은 무관하며, LTS 가 붙은 버전을 다운받아야 합니다.

nodejs.org/en/

 

 

yarn 설치

$ npm install -g yarn

 

VSCode 설치

내 컴퓨터 운영체제에 맞는 버전을 다운받아 설치합니다.

code.visualstudio.com/

 

 

Git 프로젝트 생성 순서 및 PR 올리기

 

프로젝트 폴더 생성
$ mkdir [프로젝트 폴더]

프로젝트 폴더 안으로 이동
$ cd [프로젝트 폴더]

깃 적용
$ git init

 

Github

아래 링크에 들어가서 직접 생성할 수 있다.

github.com/new

 

깃허브 프로젝트 가져오기

 

깃허브 프로젝트의 저장소 주소를 이용하여, 프로젝트를 가져옵니다.

 

$ git clone [저장소 주소]

 

브랜치 생성하기

 

새로운 기능을 개발할 때에는 앞에 feat/ 을 붙여 브랜치를 생성합니다.

 

$ git branch -c feat/[기능명]

 

수정한 파일을 반영하기

 

수정한 파일을 추가합니다.

 

$ git add [파일경로] 

$ git add . (전부 추가 할때 사용)

 

커밋 메시지와 함께 반영합니다.

 

$ git commit -m "쓰고자 하는 메세지 내용"

 

PR 올리기

 

반영 전, master 브랜치의 최신버전에 rebase 합니다.

 

$ git rebase master

 

feat/[기능명] 브랜치를 깃허브에 올립니다.

 

$ git push origin feat/[기능명]

 

깃허브 사이트에 접속하여 Pull Request 신청서를 작성합니다.