항해99 👩‍💻19일차 TIL

🎉오늘의 한 일🎉 

- Node.js 숙련과정 OT를 하고 새로운 팀원분들과 만나 인사하고 팀회의 시간등을 정하였다.

 

- 이번 주차 개인과제 요구사항을 파악하고 카카오오븐으로 프레임워크를 만들었는데 총 3시간 가량 소요되었다. 만들어야 될 페이지들과 이런저런 기능들과 자잘한 요구사항들이 생각보다 많았기 때문이다. 그래도 미리 꼼꼼히 정리해놓고 머리속으로 어느정도 구조화를 시켜놔야지 실제 코드를 짜게 될때 햇갈리지 않고 만들어 준 가이드대로 편하게 만들 수 있기 때문에 꼭 필요하고 중요한 작업인 것  같다.   

 

- 저번 주차는 제출을 위해 빠르게 진도를 나갔으니까 새로운 프로젝트를 시작하기 전에 한번 정리하는 시간을 가지는 게 중요한 것 같아서 오늘 하룻동안  Node.js 기초과정 1주차부터 5주차까지 강의 문서를 찬찬히 읽으면서 웹서버의 다양한 개념들에 대해 더 깊이있게 공부하였다. 또 내가 제출했던 코드를 천천히 하나씩 뜯어보면서 각각의 코드가 어떤 방식으로 왜 쓰인건지 다시 머릿속으로 정리해보았다. 그리고 git과 EC2배포 부분 관련해서도 이해가 안가는 부분은 다른 자료를 찾아보면서 공부하였다. 

 

- 특히 가장 이해가 안갔던 Promise. async, await 부분을 중점적으로 공부하였다. 

 

 

⭐ 이번 주 개인과제 프레임워크 ⭐ 

 

 

 

 

🐣 공부한 내용 🐣

Promise/async/await

Promise 를 사용하여 동기를 비동기로 바꾼다. 
비동기는 동기와 달리 하나씩 기다리지 않고 동시에 작업을 실행한다.
그리고 그 값들을 불규칙적으로(먼저 끝난 작업부터) 출력한다.
속도는 빠르지만 규칙성이 없어 불편하기 때문에 .then과 .catch 문을 사용하여 
resolve(성공했을때) 됐을때와 reject(실패했을때) 되었을 때의 응답을 처리해준다.
그런데 Pomise 대신 그저 함수이름 앞에 async를 붙여주면 Promise와 같은 비동기 처리를 해줄 수 있게 된다.
결과도 Promise 객체로 감싸져서 나온다. 그리고 무엇보다 .then과 .catch를 사용해주지 않아도 되기 때문에 코드가 간결해진다. async 의 짝꿍인 await은  Promise가 완료될 때까지 기다려준다. 그래서 동기적으로 처리할 수 있게된다. return값으로 resolve한 값을 내어준다. async와 await을 쓰면 하나의 흐름 속에서 코딩 할 수 있게되는 것이다. 

 

 

Query String이란?

- URL의 맨 뒤에 ?부터 시작되어 parameter=value 로 key 값과 value 값이 나뉜다.

   리소스에 대한 표현이 아닌 부가 정보는 주로 이 Query String으로 데이터를 전달받는게 일반적이다.

 

NPM

npm

자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다.

 

npm init

명령어를 통해 package.json 파일을 만들 때 사용된다. package.json 은 npm 으로 설치된 모듈에 대한 정보가 들어있습니다. 새로운 프로젝트나 패키지를 만들 때 사용된다.

 

npm install

명령어가 입력되면 package.json 기반으로 node_modules에 명시된 모듈들을 설치해주는 명령어 입니다.

내 프로젝트를 다른사람에게 공유하거나 다른 사람의 프로젝트를 사용할 때 모듈을 설치하기위해 실행하는 명령어입니다.

 

npm install express

npm 으로 모듈을 설치할 때 쓰는 명령어이다.

install 대신 i 라는 별명을 대신 사용할 수 있다.

install 뒤에 따라오는 express 는 설치하고자 하는 모듈의 이름을 명시한다.

npm install express 로 express 한개의 모듈을 설치할 수 있는데 띄어쓰기로 구분을 하여 여러개의 모듈을 설치하는것도 가능하다. ex) npm install express mongoose jest

 

node_modules

package.json 파일 내용 기반으로 npm install 명령어를 통해 설치된 모듈 파일들이 모여있는 곳이다.

사용자가 사용중인 환경에 맞는 파일들이 설치되기 때문에 이 폴더는 다른곳에 공유하거나 배포할 때 포함하면 안된다.

 

NPM 종속성 관리 

dependencies

코드 실행 시 반드시 필요한 패키지의 이름과 버전을 표시한다.

 

devDependencies

코드 실행 시가 아닌 개발 또는 빌드 환경에서 필요한 패키지의 이름과 버전을 표시한다.

npm install -D (모듈이름) 으로 추가할 수 있다.

 

peerDependencies

코드가 호환 가능한 패키지의 이름과 버전을 표시한다. 

 

Tip) 

node_modules 공유하거나 배포할때 포함하면 안된다!

package.json만 있으면 언제든 환경에 맞는 모듈들 설치 가능하다.

이미 추가된 모듈 설치는 npm install을 사용하면 된다.

 

 

Git 

브랜치(Branch)

브랜치란 독립적을 어떤 작업을 진행하기 위한 개념이다. 필요에 의해 만들어지는 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에 여러개발자들이 동시에 다양한 작업을 할 수있게 되었다. 개발자들은 각자 독립적인 작업 영역(저장소)안에서 자유롭게 소스코드를 변경할 수 있다. 이렇게 만들어진 브랜치는 다른 브랜치와 병합(Merge)함으로써, 작업한 내용을 다시 새로운 하나의 브랜치로 모을 수 있다. 

 

브랜치의 원리

 

 

master 브랜치 

저장소를 처음 만들면, Gtit은 바로 default로  'master'라는 이름의 브랜치를 만들어 둔다. 이 새로운 저장소에 새로운 파일을 추가 한다던가 추가한 파일의 내용을 변경하여 그 내용을(commit)하는 것은 모두 'master'라는 이름의 브랜치를 통해 처리할 수 있는 일이 된다.  'master'가 아닌 또 다른 새로운 브랜치를 만들어서 변경(체크아웃,checkout)하지 않는 이상, 이 때의 모든 작업은 'master'브랜치에서 이루진다. 

 

 

브랜치 전환하기

HEAD 

현재 사용중인 브랜치의 선두 부분을 나타내는 이름이다. 기본적으로는 'master'의 선두 부분을 나타낸다. 'HEAD'를 이동하면, 사용하는 브랜치가 변경된다.

 

stash

커밋하지 않은 변경 내용이나 새롭게 추가한 파일이 스테이징영역과 작업트리에 남아 있는 채로 다른 브랜치로 전환(checkout)하면, 그 변경 내용은 기존 브랜치가 아닌 전환된 브랜치에서 커밋 할 수 있다.  stash란, 파일의 변경 내용을 일시적으로 기록해두는 영역이다. stash를 사용하여 작업 트리와 스테이징(인텍스)내에서 아직 커밋하지 않은 변경을 일시적으로 저장해 둘 수 있다. 이 stash에 저장된 변경 내용은 나중에 다시 불러워 원래의 브랜치나 다른 브랜치에 커밋할 수 있다. 

 

브랜치 통합하기

merge

변경 내용의 이력이 모두 그대로 남아 있기 때문에 이력이 복잡해진다.

통합 브랜치에 토픽 브랜치를 불러올 경우에는 우선 rebase를 한 후 merge한다.

rebase

이력은 단순해지지만, 원래의 커밋 이력이 변경된다. 정확한 이력을 남겨야 할 필요가 있을 경우에는 사용하면 안된다.

토픽 브랜치에 통합 브랜치의 최신 코드를 적용할 경우에 사용.

 

Repostory까지 올라가는 순서

• Working Directory : 내가 작업하고 있는 프로젝트의 디렉토리(폴더)
• Staging Area : 커밋을 하기 위해 $ git add 명령어로 추가한 파일들이 모여있는 공간. index라고도 불린다.
• Repository : 커밋들이 모여있는 저장소

Staging Area에 추가한 파일들을 Commit을 한다면 최종적으로 저장소(Repository)로  저장된다.

 

 

Git 명령어 

git init

Git 저장소를 초기화 하여 해당 프로젝트 폴더를 Git repository 로 만들어준다.

.git 생성됌 

 

git add .

스테이징 영역에 모든 변경 사항을 올린다.

git add app.js

app.js 변경사항만 올린다.

 

git commit

스테이징 영역에 올라가 있는 변경사항을 하나의 기록(History)으로 남깁니다. 

git commit -m "add설명을  추가"

메세지를 추가하여 commit할 수 있다  

 

git status

git add명령어를 사용할 때, 항상 함께 사용되는 명령어로써 working directory와 staging area의상태를 확인하기 위해 사용된다. 

git status의 결과

1) Change to be committed : 스테이징 영역에 넘어가 있는 변경 내용을 보여준다.

2) Chandge not staged for commite : 아직 working directory에 있는 변경 내용을 보여준다. 

3) Untracked files : 아직 working directory에 있는 아직 한 번도 해당 Git 저장소가 관리한 적이 없는 새로운 파일을 보여준다. 

 

git remote add <name> <url>

Local Repository 에 <name>이라는 이름의 Remote Repository 를 추가할 수 있습다. <url> 에는 Remote repository의 주소가 들어간다.

git remote 

현재 프로젝트에 등록된 리모트 저장소를 확인할 수 있다. 이 명력은 리모트 저장소의 단축 이름을 보여준다. 저장소를 clone하면 'origin'이라는리모트 저장소가 자동으로 등록되기 때문에 'origin'이라는 이름을 볼 수있다. 

git remote -v

단축이름과 URL을 함께 볼 수 있다. 

git remote rm origin

기존 remote의 origin을 삭제할 수 있다.

 

git push -u origin master

브랜치에 처음으로 push할 때 사용한다. 처음엔 Remote Repository에 master이라는 이름의 브랜치가 없었기 때문에 새로운 브랜치를 생성하기 위해 -u 를 붙여주었고, Remote Repository 이름으로 등록해둔 origin을 적어 어떤 Remote Repository에 Commit을 push할건지 적어주었다.

  

git push

Local Repository에 존재하는 Push 되지 않은 변경사항을 Remote Repository에 업로드 한다.

 

git clone <url>

Remote Repository로 부터 프로젝트를 복제한다.

 

git pull

Remote Repository에 새로 올라온 변경사항을 Local Repository로 가져온다.

 

git branch <branchname>

<branchname> 이라는 이름의 새로운 브랜치를 생성한다. 

git checkout <branch>

내가 사용할 브랜치를 지정해준다.

git branch

옵션을 지정하지 않고 branch 명령어를 실행하면 브랜치 목록 전체를 확인할 수있다. 

git checkout -b <branch>

checkout 명령에 -b 옵션을 넣으면 브랜치 작성과 체크아웃을 한꺼번에 실행할 수 있다.

git branch -d <branchname>

해당 브랜치 삭제 하기.