12/14 TIL

taetae·2022년 12월 15일

내배캠 TIL

목록 보기

20/48

TIL을 익일 아침에 쓰는 건에 대하여...

어제부터 전 조원분들 중 의견이 맞는 분들과 아침 6시에 일어나서 공부를 한다.
그래서 전날 좀 일찍 자고 일찍 일어나는 중. 아침 시간이 좀 더 마음 잡고 공부하기도 좋아서 앞으로 꾸준히 하고 싶다. 일단 지금 아침에 일찍 일어나서 공부하는 것은 팀 프로젝트 직전까지의 계획. 그래서 아침에 일어나 전날의 TIL을 쓰는 것을 시작으로 하루를 연다. 복습 겸 나쁘지 않은 거 같다.
오늘도 파이팅!

Node.js 입문주차

HTTP

데이터를 주고 받는 양식을 정의한 '통신 규약' 중 하나
매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약
*통신규약: 컴퓨터끼리 데이터를 주고 받을 때 정해둔 약속
네트워크: 의사 표현의 수단(= 말) 통신규약(ex.HTTP): 의사 표현의 방법(= 언어)

HTTP로 데이터를 주고 받는 방식

HTTP는 언제나 Request, Response라는 개념이 존재
브라우저 -> 서버 : 자신이 원하는 페이지(url 등의 정보) 요구(Request)
서버 -> 브라우저 : 원하는 페이지가 있는지 확인 후 있다면 해당 페이지에 대한 데이터를 반환(Response) 없을 경우엔 없는 페이지에 대한 데이터를 반환
브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그림

HTTP 구성 요소

Method
- GET: 어떤 리소스를 '얻을 때' 사용. 드물게 예외도 있지만 기본적으로 사용자게 웹 서핑을 한다고 가정하므로 모든 요청은 'GET' 메서드를 사용해서 서버에 요청
- POST: 일반적으로 웹 서버에 데이터를 '게시' 할 때 사용. (ex. 회원가입, 게시글 작성, 댓글 작성)
Header (추가 데이터, 메타 데이터)
- 브라우저가 어떤 페이지를 원하는지
- 요청 받은 페이지를 찾았는지
- 성공적으로 찾았는지
  
  등의 다양한 의사표현을 위한 데이터를 모두 Header 필드에 넣고 주고 받는다.
  (GET, POST 역시 포함)
Payload (데이터, 실직적인 데이터)
- 서버가 응답을 보낼 때 항상 Payload를 보낼 수 있다.
- 클라이언트(브라우저)가 요청을 할 때도 Payload를 보낼 수 있다.
  그리고 GET method를 제외하곤 모두 Payload를 보낼 수 있다는 게 HTTP에서의 약속.
- DELETE method에서 Payload를 보낼 수 있지만, 대부분의 경우에 보내지 않음.

Web Server

인터넷을 통해 HTTP를 이용하여 웹상에서 클라이언트의 요청에 응답해주는 통신을 하는 컴퓨터 또는 프로그램

웹 서버의 기본 동작 원리
- 브라우저를 통해 HTTP request로 웹사이트를 웹서버에 요청
  -> 웹서버에서 요청 승인 후 HTTP response를 통해 웹사이트 데이터를 브라우저에 전송
  -> 브라우저는 서버에서 받아 온 데이터를 이용해 웹사이트를 브라우저에 그림
- 기본적으로 브라우저가 웹서버에 요청을 할 때에는 GET method로 요청

Package Manager

Package
- npm이나 yarn에 업로드 된 Node.js 모듈
- 모듈이 다른 모듈을 참조하여 사용하는 것과 같이, 패키지도 다른 패키지를 사용 가능
  이런 관계를 의존 관계라고 표현
Package Manager
- 패키지를 손쉽게 다루는 작업을 안전하고 편리하게 사용하기 위한 툴
- 다른 사람들이 만들어준 코드를 다운로드 받거나, 자신의 코드를 배포 가능
- Node.js에서 대표적으로 사용하는 패키지 매니저: npm / yarn
npm (Node Package Manager)
- 자바스크립트에서 사용할 수 있는 패키지(모듈) 관리자
- Node.js를 사용하는데 필요한 패키지를 설치해주는 프로그램
yarn
- npm의 대체제로 FaceBook이 출시한 패키지 매니저
- npm에서 부족한 부분을 보완해 편리한 기능이 추가, 더 빠른 속도로 패키지 관리 가능
하나의 프로젝트에서 npm과 yarn 2가지를 같이 사용해도 되는지?
- 동시에 사용할 경우 모듈을 설치하거나 버전을 수정할 때 오류 발생 가능
  ex) npm으로 설치한 버전과 yarn에서 설치한 버전이 다를 때 각 버전들이 다르게 관리 될 수 있어 문제가 발생하거나 출동이 발생함
- 특별한 이유가 없다면 2가지를 같이 사용하지 않는 것이 좋다.
package.json
- 설치한 패키지들의 버전을 관리할 떄 사용하는 파일
- 동일한 패키지여도 버전별로 기능을 다르게 사용할 수 있어, 특정한 버전을 설치할 때 필요
- 패키지 관리 외에도 프로젝트명, 작성자, 라이센스 정보등 다양한 메타 데이터들을 기록
- npm, yarn 모두 동일한 package.json파일 참조
Pacakge-lock.json
- Pacakge.json 파일에서 정의한 패키지 외에도 node_modules에 들어있는 패키지들의 버전과 의존관게 상세하게 기록
- npm으로 패키지를 설치, 수정, 삭제 할 때마다 패키지들의 의존관계를 Pacakge-lock.json 파일에 저장
- 저장된 패키지들은 정확히 일치하는 버전만 기록 되어 프로젝트에서 의존하는 패키지 버전을 정확하게 관리할 떄 사용 가능
npm 시작하기
VS Code 하단의 터미널에서 진행
- npm init
  -명령어를 통해 package.json파일을 만들 때 사용
  -package.json은 npm으로 설치 된 모듈에 대한 정보가 들어있다.
  -새로운 프로젝트나 패키지를 만들 때 사용
  -패키지명, 프로젝트 버전, Github url등 프로젝트와 관련된 정보 설정 가능
- npm install express
  -npm으로 모듈을 설치할 때 쓰는 명령어
  -install 대신 i라는 약칭을 대신 사용 가능
  -install 뒤에 따라오는 express는 설치하고자 하는 모듈의 이름을 명시
  -npm install express로 express 한개의 모듈 설치가 가능하며,
  띄어쓰기로 구분해 여러개의 모듈 설치도 가능 ex) npm install express mongoose jest
node_modules
- package.json 파일 내용 기반으로 npm install 명령어를 통해 설치 된 모듈 파일들이 모여있는 곳
- package.json에 설정 된 모듈과 해당 모듈들이 참고하고 있는 다른 모듈도 함께 설치
- 사용자의 환경에 맞는 파일들이 설치되기 때문에 이 폴더는 다른 곳에 공유하거나 배포할 때 포함 금지

npm install
- package.json 파일을 기반으로 node_modules에 명시 된 모듈을 설치하는 명령어
- 내 프로젝트를 다른 사람에게 공유하거나 다른 사람의 프로젝트를 사용할 때
  모듈을 설치하기 위해 실행하는 명령어

Express.js

Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크
Express.js와 웹서버는 동일하지 않음, Express.js는 웹 서버가 아닌 웹 서버를 구현하기 위해 사용 되는 것.

API Client

개발단계에서 작성한 API의 요청을 확인하거나 테스팅 할 때 사용하는 툴
API Client를 사용함으로 개발 속도를 높이거나 치명적인 에러를 예방할 수 있다.

Routing

클라이언트의 요청 조건(메서드, 주소 등)에 대응해 응답하는 방식

Router
클라이언트의 요청을 쉽게 처리할 수 있게 도와주는 Express.js의 기본 기능 중 하나
```
router.METHOD(PATH, HANLDER) // 일반적인 라우터 구조
```
- router: express의 라우터를 정의하기 위해 사용
- METHOD: HTTP Method를 나타냄 (ex. get, post, put, delete...)
- PATH: 실제 서버에서 API를 사용하기 위한 경로
- HANDLER: 라우트가 일치할 때 실행하는 함수

MODULE

자바스크립트 파일 단위로 분리된 코드
-> 자바스크립트 파일: 특정한 기능을 가진 여러 개의 함수와 변수들의 집합

모듈은 하나의 모듈에서 다른 모듈을 호출하여 사용 가능
모듈은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용 가능
보통 1개의 파일이 1개의 모듈

모듈의 필요성
1. 코드 베이스를 분리해 코드를 구조적으로 관리 가능
2. 코드를 재사용 가능하게 만든다 (모듈화)
3. 모듈의 인터페이스만 노출 가능
  (= 인터페이스 이외의 모든 정보를 은닉하는 정보은닉 구현)
4. 종속성 관리 가능
모듈 사용법
- export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근 가능
- import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있다
- require은 현재 학습하고 있는 CommonJS로 모듈 시스템을 관리할 때 사용
- import는 ES6(ES2015)로 모듈 시스템을 관리할 때 사용

Request 와 Response

리퀘스트: 클라이언트가 서버에게 전달하려는 정보나 메세지를 담는 객체
리스폰스: 서버에서 클라이언트로 응답 메세지를 전송시켜주는 객체

서버 모듈
- Node.js의 서버 모듈에는 대표적으로 http 모듈과 express 모듈이 존재
- Express 모듈은 http 모듈을 확장하여 제공
- Express 모듈은 기존 http 모듈의 메서드도 사용 할 수 있지만,
  Express가 추가 제공하는 메서드나 속성들도 사용 가능
- 최근에는 Express의 메서드가 더 편리해 기존 http 모듈의 메서드는 잘 사용되지 않는다

Express 모듈의 req, res 객체
▶ req 객체

* req.body: Request를 호출할 때 body로 전달된 정보가 담긴 객체
 ; express.json() Middleware를 이용해야 해당 객체 사용 가능
 → 1. 클라이언트가 요청을 보냈을 때, Body에 데이터를 삽입했을 때 사용
   2. Key-Value의 데이터 형식, 대표적으로 JSON 형태를 띔
   3. Body는 Query String, Path Variable(params)과 다르게, 
      URL만을 가지고 어떤 데이터를 전달하였는지 확인할 수 없음
   4. 데이터를 생성하거나 수정이 필요한 데이터의 전달을 위해 사용
   	  ex) 사용자의 ID, 사용자의 PWD, 게시글 제목 등
   5. POST, PUT과 같은 Http Method에서 사용

 * req.params: 라우터 매개 변수에 대한 정보가 담긴 객체
 → 1. 클라이언트가 요청을 보냈을 때, URL에 원하는 Key-Value를 삽입해 데이터 전달
   2. URL의 마지막에 ? 기호를 이용해 Query String을 사용
      ex) http://sparta.com?name=김아무개&age=29
   3. 특정 콘텐츠의 위치를 표시하거나 웹 페이지에 특정한 옵션을 설정할 때 사용
      ex) 게시글의 정렬, 특정 날짜의 게시글만 출력하는 옵션 등
   4. GET과 같은 Http Method에서 사용
 
 * req.query: Request를 호출 할 때 Cookie 정보가 담긴 객체
 ; cookie-parser Middleware를 이용해야 해당 객체 사용 가능
 → 1. 클라이언트가 요청을 보냈을 때, URL에 원하는 데이터를 삽입해 전달
   2. URL 특정 경로를 매개 변수로 사용
   3. 특정 게시글을 선택하거나 명확한 리소스를 지정할 때 사용
   	  ex) 게시글의 상세 정보 조회, 사용자의 상세 정보 조회

▶ res 객체

* res.status(코드): Response에 http 상태 코드를 지정

 * res.send(데이터): 데이터를 포함하여 Response를 전달
 
 * res.json(JSON): JSON 형식으로 Response를 전달

API와 REST API의 개념

API(Application Programming Interface)는 애플리케이션끼리 연결해주는 매개체이자 약속
REST(Representational State Transfer)는 URL, Headers, Method 등 네트워크 표현 수단을 사람이 봐도 이해하기 쉽게 정의 하는 것 (소프트웨어 아키텍처의 한 형식)
REST API는 REST 아키텍처 라는 규칙을 따르는 API
REST API의 구성
- 자원(Resource) - URL
  
  우리가 만들 소프트웨어가 관리하는 모든 것을 자원으로 표현가능 함.
  ex) 쇼핑몰이라면 상품(Goods)와 장바구니(Carts)에 담긴 상품들에 대한 정보를 관리
- 행위 - Http method
  
  Http method(GET, POST ...)로 해당 자원에 대한 행위를 표현 가능
  ex) GET: 해당 자원의 조회 POST: 해당 자원의 생성
  일반적으로 CRUD를 method로 사용함
  ※CRUD※
  Create: 생성(POST)
  Read: 조회(GET)
  Update: 수정(PUT), (PATCH)
  Delete: 삭제(DELETE)
- 표현
  
  해당 자원을 어떻게 표현할지에 대한 설명
  보통 JSON. XML 같은 형식을 이용해서 자원을 표현