[내일배움캠프] Node.js 4기 TIL | Day 22 | 24.01.19.(금)

1-1. 웹 브라우저의 통신 방식

- 웹 브라우저는 인터넷 브라우저라고도 불리며, 웹 서버로부터 정보를 받아 사용자에게 보여주는 소프트웨어..
- 사이트에 접속했을 때 HTML, CSS, JavaScript 파일을 전달 받아..
- 정적인(Static)파일과 동적인(Dynamic) 정보를 처리하게 된다 ..

- 브라우저의 통신 방식
- 사용자가 웹 브라우저의 주소창에 URL을 입력한다.
- 웹 브라우저는 입력받은 URL을 DNS 서버로 전달하여 해당 IP 주소를 찾게 된다.
- DNS 서버는 도메인 이름을 IP 주소로 변환한다.
- 웹 브라우저는 해당 IP 주소로 HTTP 요청을 전달한다.
- IP 주소에 연결된 웹 서버는 요청(Request)을 받아 처리한다.
- 웹 서버는 처리 결과를 HTTP Response로 브라우저에게 전달한다.
- 웹 브라우저는 받은 HTTP Response을 바탕으로 사용자에게 표시하게 된다.

- http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhreInTheDocument

- Scheme : http
- Authority : http://www.example.com:80
- Domain Name : http://www.example.com
- Port : 80
- Path to the file : /path/to/myfile.html
- Parameters : ?key1=value&Jkey2=value2
- Anchor : #SomewhreIntheDocument

- URL : '<프로토콜>://<도메인 명>:<포트>/<경로>'의 구조를 갖는다.

예를 들어, 'http:cafe.naver.com/joonggonara'라는 URL을 보면, 'http'는 프로토콜을,
'cafe.naver.com'은 'naver.com'이라는 메인 도메인 명과 'cafe'라는 서브 도메인 명으로 이루어져 있습니다.
그리고 'joonggonara'는 서버에서 리소스 경로를 가리키게 된다. 즉, 중고나라라는 카페를 가리키게 된다.

- DNS로 조회하기

DNS(Domain Name Service)는 도메인 이름을 중개하여, IP로 변경해주는 서비스를 제공한다.
인터넷상의 연락처와 같다!

브라우저에서 DNS Server에 도메인을 보내고 .. DNS Server는 브라우저에게 IP를 보낸다..
브라우저에서 Web Server에 IP를 보내고 .. Werb Server는 브라우저에게 파일을 보낸다 .. 

- IP를 이용하여 웹 서버와 통신하기

IPv4 : 123.45.67.89
IPv6 : 2001:db8:ff00:42:8329

- IP(Internet Protocol)는 각각의 네트워크에 연결된 장치들이 고유한 IP 주소를 가져 인터넷 상에
존재하는 해당하는 장치의 위치를 식별할 수 있게 해준다.

IPv4 : 32비트 .. IPv6 : 128비트 ..

처음에 IPv4 .. 점점 주소가 부족해졌다 .. 그래서 IPv6 .. 

주소의 확장 뿐만 아니라 더 나은 확장성과 보안성을 제공하는 여러 장점을 갖고 있다 ..

보안 기능
- IPv4 : iPsec 프로토콜 별도 설치
- IPv6 : 확장기능에서 기본으로 제공

1-2. HTTP의 이해

- HTTP란?

- 데이터를 주고 받는 양식을 정의한 "통신 규약" 중 하나가 HTTP
- 통신 규약 : Protocol
- 통신 규약 : 컴퓨터끼리 데이터를 주고받을 때 정해둔 약속
- 대부분 웹 서버가 HTTP 기반으로 데이터를 주고받고, 모든 브라우저는 HTTP 프로토콜을 기본으로 지원

- HTTPS는 뭐예요?

- HTTP 기반으로 데이터 동신의 안정성을 높이기 위해 암호화 기능이 포함된 통신 프로토콜
- 최근 우리가 사용하는 대다수 사이트는 HTTPS를 지원한다.
- HTTP와 달리, HTTPS는 정보를 '비밀 코드'처럼 만들어 전송하게 되고, 이걸 "암호화"라고 한다.
  클라이언트와 서버 사이의 데이터가 외부에서 보이지 않게 된다 ..
- HTTPS .. 암호화 기법, 인증서 제공 기관 .. 

- 의사 표현의 수단 : (현실 세상) 말 <-> (디지털 세상) 네트워크
- 의사 표현의 방법 : (현실 세상) 언어 <-> (디지털 세상) 통신 규약

- HTTP에는 언제나 요청(Request)과 응답(Response)라는 개념이 존재한다.
- 브라우저가 서버에게 정보를 요구, 서버가 데이터를 반환 (Response), 브라우저가 데이터를 브라우저에 그려줌
- "데이터"는 어떠한 데이터든 주고 받는 게 가능하다.

- method / path / status / content-type

- png/webp/ping/xhr/script/xhr/text-html/script/ping


- Header
- Request URL
- Request Method
- Status Code
- Remote Address
- Referrer Policy


- Headers : 추가 데이터 .. Response .. 그냥 데이터 ..

- Method

- GET : 어떤 리소스를 "얻을 때" 사용된다.
- 모든 요청은 "GET" 메서드를 사용해서 서버에 요청을 보낸다.
- POST : 웹 서버에 데이터를 "게시"할 때 사용하는 게 일반적이다.

- Header 설명 (추가 데이터. 메타 데이터)

- 브라우저가 어떤 페이지를 원하는지
- 요청 받은 페이지를 찾았는지
- 성공적으로 찾았는지

- Payload 설명 (데이터. 실질적인 데이터)

- 서버가 응답을 보낼 때에는 항상 Payload를 보낼 수 있다.
- 클라이언트(브라우저)가 요청을 할 때에도 Payload를 보낼 수 있다.
- "GET method를 제외하곤 모두 Payload를 보낼 수 있다"는 게 HTTP에서의 약속이다.
- DELETE method에서 Payload를 보낼 수 있지만, 보통 많은 경우에 Payload를 보내지 않고 있다.

1-3. 웹 서버의 이해

- 웹 서버는 HTTP를 이용하여 인터넷 상에서 클라이언트의 요청을 처리하고 응답하는 컴퓨터 또는 프로그램
- 클라이언트의 HTTP 요청을 받아 정적인 콘텐츠(ex: HTML, CSS, 이미지 파일 등)를 제공한다.
- 필요한 경우, 클라이언트의 요청을 웹 어플리케이션 서버(WAS, Web Application Server)로 전달한다.
- 대표적인 웹 서버로 Apache, Nginx 등이 존재

1-4. JavaScript란?

- JavaScript 존재하기 전에는 .. HTML과 CSS로 간단한 스타일만 적용 .. 
- JavaScript .. Static한 문서를 조금 더 Dynamic하게 표현할 수 있도록 만들어졌다..

- 정적 웹 페이지 (Static Web Page)
- 확정된 페이지
- 연산 필요 X
- 동적 웹 페이지 (Dynamic Web Page)
- 맥락, 상황을 반영할 수 있는 페이지
- 현재 로그인한 유저의 프로필 사진이 화면에 표시되는 페이지는 동적이다.

- 현재 자바스크립트 .. ECMA International .. ECMAScript로 구현된 것 .. 

1-5. Node.js란?

- Node.js는 "JavaScript를 브라우저가 아닌 컴퓨터에서 브라우저 없이 실행하게 도와주는 환경"
- V8 엔진(크롬에서 사용), libuv(비동기 I/O 작업)라는 라이브러리를 통해 가능해진다.

- Node.js
- Node.js Core Library
- Node.js Bindings
- V8 Engine
- libuv

- Node.js는 대표적으로 논-블로킹(Non-blocking) I/O, 싱글 스레드 (Single Thread), 이벤트 루프(Event Loop)의 특성이 있다.

- 블로킹(Blocking) I/O와 논 블로킹(Non-blocking) I/O는 프로그램의 실행 흐름을 제어하는 방식이다. 블로킹 방식은 프로그램이 특정 작업을 수행하는 동안 다른 작업을 중단시키는 방식이다. 반면에 논 블로킹 방식은 프로그램이 여러 작업을 동시에 처리할 수 있는 장점이 있다.

- 블로킹 I/O : 한 번에 하나의 작업만을 처리할 수 있으며, 호출된 함수가 자신의 작업을 모두 마칠 때까지 호출한 함수에게 제어권을 넘겨주지 않는다.
- 논 블로킹 I/O : 시스템 호출이 완료되기를 기다리지 않고 바로 다음 작업으로 즉시 넘어갈 수 있는 방식으로 호출된 함수는 작업의 완료 여부와 상관 없이 즉시 제어권을 호출한 함수에게 반환한다.

- 싱글 스레드(Single Thread)는 스레드 하나를 사용하는 것이며, 동시에 하나의 작업만을 처리할 수 있음을 의미함.

- 스레드(Thread)란 프로그램이 동작할 때, CPU 또는 프로세스를 사용하는 단위로, 여러 스레드를 사용하면 여러 작업을 동시에 처리할 수 있다. 그러나 이는 복잡성을 증가시키고, 리소스를 더욱 많이 소모하게 되는 문제점이 발생한다.

- Node.js는 싱글 스레드로 동작하지만, I/O 작업이 발생한 경우 이를 비동기적으로 처리하여 여러 작업을 동시에 처리할 수 있게 한다.
- 일반적으로 1개의 프로그램은 1개의 스레드, but 1개의 프로그램에서 여러 개의 스레드를 사용할 수 있다면 연산할 수 있는 시간을 단축시킬 수 있겠죠?

- 그럼에도 Node.js가 싱글 스레드를 고집하는 이유

- 여러 스레드가 공유하는 자원에 대한 동시 접근 문제, 즉 Race condition 문제를 방지한다.
- 서버 확장이 매우 자유롭다.
- Node.js는 특히 웹 서버에 특화된 철학이 녹아있는 언어이다.
- 싱글 스레드 방식은 CPU 집중적인 (CPU Intensive) 작업에는 적합하지 않다. 이런 경우에는 멀티스레드 방식이 더욱 효율적일 수 있다.

- 호출 스택(Call Stack)은 함수의 실행 순서를 추적하는 자료구조이다.
- JavaScript는 코드를 실행하면서 호출 스택에 함수를 추가하고 함수가 완료되면 호출 스택에서 제거한다.
- 이는 비동기 작업에서 문제가 되는데, 특히 네트워크 요청과 같이 시간이 많이 걸리는 작업을 기다리는 동안 JavaSCript는 다른 어떠한 작업도 처리할 수 없게 된다. 이 문제를 해결하기 위해 JavaScript는 이벤트 루트(Event Loop)와 이벤트 큐(Event Queue)를 사용하게 된다.

- 이벤트 루프(Event Loop)는 여러 이벤트들과 같은 비동기 작업을 모아서 관리하고, 어떤 순서대로 실행해야 하는지 도와주는 도구이다.
- 이벤트 루프는 호출 스택과 이벤트 큐를 관찰하면서, 호출 스택이 비어있고, 이벤트 큐에 작업이 있다면, 이벤트 큐의 작업을 호출 스택으로 이동하는 역할을 담당한다.
- 이벤트 루프를 활용한다면, 자바스크립트는 시간이 오래 걸리는 작업을 이벤트 큐에 넣어 비동기적으로 처리하고, 그동안 호출 스택에서 다른 작업들을 계속 처리할 수 있다.


function firstFunction() {
console.log('firstFunction 입니다.');
secondFunction();
}

function secondFunction() {
// 2초간 기다린다.
setTimeout(function() {
console.log('secondFunction 입니다.');
}, 2000);
}

firstFunction();
console.log('전역 코드 실행 중!');

// print : firstFunction입니다.
// print : 전역 코드 실행 중!
/** 2초간 기다린다. **/
print : secondFunction입니다.

위 예제에서 firstFunction은 호출 스택에 추가(push)되고, 실행되며 'firstFunction입니다.'를 콘솔에 출력하고 secondFunction을 호출합니다. 그 다음 secondFunction은 호출 스택에 추가되고, setTimeout 함수를 실행합니다.
setTimeout 함수는 비동기 함수이므로, JavaScript는 이 작업을 이벤트 큐에 넣고 secondFunction을 호출 스택에서 제거(pop)한다. 그 다음 firstFunction도 호출 스택에서 제거하고, '전역 코드 실행 중!'을 콘솔에 출력한다.
2초가 지난 후, 'secondFunction입니다.'를 출력하는 작업이 이벤트 큐에어 호출 스택으로 이동하고 실행된다. 이때 호출 스택은 비어 있기 때문에 이이벤트 루프가 이 작업을 호출 스택으로 이동시킬 수 있었다. 이처럼, 이벤트 루프와 이벤트 큐를 사용함으로써 JavaScript는 비동기 작업을 처리할 수 있게 된 것이다.




1-6. VSCode



1-7. Node.js

- Node.js의 REPL 환경

- REPL 환경이란?

- 입력 받은 코드를 읽어(Read)들여 메모리에 저장하고, 평가(Evalutate)된 값을 출력(Print)한다.
- 특정 신호를 입력받기 전까지 위의 과정을 반복(Loop)한다.

- 웹 브라우저의 콘솔(Console)과의 차이

- 웹 브라우저의 개발자 도구 콘솔도 REPL 환경이다.
- 웹 브라우저의 콘솔은 Node.js가 제공하는 여러 API와 라이브러리를 사용할 수 없지만,
  대신 웹 브라우저의 API를 이용하여 DOM(Document Object Model)을 제어할 수 있다.
- Node.js REPL 환경은 백엔드 서버(Server)의 코드를 테스트하거나 실험해보는 데에 더 적합하고,
  웹 브라우저 콘솔은 클라이언트(Client)의 코드를 작성하거나 테스트 하는 데 더 적합하다.

- REPL 환경을 어떻게 이용할까요?

- 커맨드 창 또는 Git Bash를 켜고, node를 입력 후 엔터를 치면 Node.js의 REPL 환경으로 진입할 수 있다.

1-8. Git



1-9. Package Manager

- Node.js에서 코드의 재사용성을 높이기 위해 작성된 독립적인 코드 조각을 "모듈"이라고 부른다.
  이러한 모듈을 npm이나 yarn과 같은 패키지 매니저를 통해 업로드하여 다른 개발자들과 공유할 때,
  이를 패키지(Package)라고 한다.
- 모듈(Module)은 일반적으로 프로젝트 내에서 사용되는 코드 조각을 의미하며,
  패키지는 이러한 모듈을 포함하고 있거나 다른 패키지에 의존하고 있는 코드의 집합을 의미한다.
- 패키지는 다른 패키지를 사용할 수 있다. 이런 관계를 의존 관계라고 부른다.
- ex) A 패키지가 B 패키지의 기능을 필요로 한다면, A 패키지는 B 패키지에 "의존"한다고 한다.

- 패키지 매니저는 패키지를 손쉽게 다루는 작업을 안전하고 편리하게 사용하기 위한 툴입니다.
- ~~ 패키지간의 의존성을 관리해준다.

- npm : 자바스크립트에서 사용할 수 있는 패키지(모듈) 관리자
- yarn
- npm의 대체제로 Facebook이 2016년에 출시한 패키지 매니저
- npm에서 부족한 부분을 보완하여 편리한 기능과 보안 성능이 향상된 패키지 매니저
- yarn은 패키지를 다운로드 하는 과정에서 해당하는 패키지의 보안 검사를 수행한다.
- 패키지 내부에 위험한 스크립트가 다운로드 되거나, 종속성 문제가 발생하는 것을 방지할 수 있다.
- yarn은 병렬 처리를 도입하여, 패키지 설치 속도가 npm보다 빠르다는 장점이 존재한다.
  즉, 패키지를 하나씩 설치하는 것이 아닌, 여러 개를 동시에 설치할 수 있다.

- package.json

- Node.js 프로젝트의 가장 핵심적인 파일
- 프로젝트에 대한 정보와 설치한 패키지들의 버전을 관리할 때 사용하는 파일

- package-lock.json과 yarn.ock이란?

- package.json에서 정의한 패키지 외에도 node_modules에 들어있는 패키지들의 버전과
  의존 관계가 상세하게 정의되어 있다.

1-10. 배포를 위한 yarn 학습

- yarn을 글로벌 환경에 설치한다? 특정 폴더가 아니라 컴퓨터 전체에서 yarn을 사용할 수 있도록 ~

npm install -g yarn

yarn init

- 새로운 프로젝트나 패키지를 만들 때 사용됨
- package.json 파일을 만들 때 사용됨. package.json은 yarn으로 설치된 패키지에 대한 정보가 들어있음.
- 패키지명, 프로젝트 버전, Github URL 등 프로젝트 관련 정보 설정 가능

entry point

- 서버를 실행할 때 어떤 파일로 실행할 것이냐?

node_moudles

- yarn add 명령어를 통해 설치된 패키지들이 저장되는 폴더
- package.json 파일에 작성된 각 패키지와 그 패키지가 의존하는 다른 패키지 또한
  모두 node_modules 폴더에 저장됩니다.
- 사용 중인 환경에 맞는 파일들이 설치되기 때문에 이 폴더는 다른 곳에 공유하거나 배포할 때
   포함하면 안 됩니다.

- dependencies와 devDependencies는 어떻게 다른가요?

- yarn add (패키지 명) 명령어를 통해 설치한 패키지들이 나열되는 곳입니다.
- 프로젝트 실행과 배포(Deploy)시 

- node_moduels : 이 폴더는 공유하거나 배포할 때 포함되어서는 안 됩니다. → package.json 파일과 yarn.lock 파일을 이용하여 동일한 패키지 버전을 설치할 수 있다.
- package.json : 해당 파일만 있다면 언제든지 해당 프로젝트에 필요한 패키지를 설치할 수 있다. yarn 명령어를 이용하여 해당 파일에 정의된 모든 패키지를 node_modules 폴더에 설치할 수 있습니다.
- yarn add : 해당 명령어는 yarn 패키지 매니저를 이용하여 패키지를 설치할 수 있습니다. 설치된 패키지 정보는 package.json 파일에 자동 추가됩니다.


1-11. Express.js의 이해

1) 웹 프레임워크(Web Framework)

- 웹 프레임워크(Web FrameWork)는 웹 서비스를 빠르게 구현할 수 있게 도와주는 도구입니다.

- 웹 프레임워크란, 프로그래밍의 특정 부분을 추상화하여, 개발자가 더 높은 수준에서 프로그램을 작성할 수 있게 도와주는 도구입니다. 프레임워크는 '틀'이라는 의미로, 개발하는 동안 준수해야 하는 규칙과 구조를 제공하게 됩니다.

- 만약, 웹 프레임워크 없이 서버를 구성하려면, 모든 요청(Request) 및 응답(Response) 처리 로직을 직접 작성해야 할 것이고, 이것은 엄청나게 많은 시간이 소모되는 작업이 될 것입니다. 그러나, Express.js와 같은 웹 프레임워크를 사용한다면 이러한 복잡성을 줄이고 개발 과정을 단순화 할 수 있게 될 것입니다.

- 프레임워크 또한 비슷한 개념으로, 이미 만들어진 기능들을 재사용하고, 이를 조립하여 웹 서비스를 만드는 것입니다.

2) 일반적인 웹 서버와 Node.js로 만들게 될 웹 서버 비교

- 웹 서버는 어떤 기술이나 프레임워크를 사용해서 만들어지든 핵심적인 기능인 클라이언트 요청에 대한 응답을 제공하는 것은 변하지 않습니다.

- 현재 상황에 가장 적합한 도구를 선택

3) Express.js란?

- Express.js는 Node.js로 서버를 간편하게 만들 수 있게 도와주는 가장 대표적인 웹 프레임워크입니다.

- Expres.js의 가장 큰 특징 중 하나는 미들웨어(Middleware)를 지원하는 것입니다. 미들웨어는 사용자의 요청과 응답 사이에 위치하며, 특정 기능을 수행하는 함수로 생각할 수 있습니다. 예를 들어 인증(Authentication), 로깅(Logging), 에러 처리 핸들러(Exception Handler) 등을 담당하는 다양한 미들웨어를 사용할 수 있게 됩니다.


- Express.js와 웹 서버(Web Server)는 동일하지 않습니다!
- Express.js는 웹서버 자체가 아니라, 웹 서버를 구현하는데 도움을 주는 도구입니다.
  즉, Node.js를 위한 웹 프레임워크입니다.

listen EADDRINUSE: address already in use :::3000


1-12. Express.js로 백엔드 서버 구현



1-13. Module

1) Module이란?

- 모듈(Module)은 Javascript를 파일 단위로 분리된 코드 덩어리를 일컫습니다.
  여기서 Javascript 파일은 특정한 기능을 가진 여러 개의 함수와 변수들의 집합체입니다.

- 모듈은 왜 필요할까요?

1. 코드 베이스를 분리할 수 있다 → 코드를 구조적으로 관리할 수 있다.
2. 코드를 재사용 가능하게 만들어준다. 즉, 모듈화(modularize)됩니다.
3. 코드의 함수와 변수 중 일부만 외부에서 사용하도록 노출시킬 수 있습니다.
   → 즉, 모듈 내부의 코드 세부사항을 외부로부터 은닉하는 정보은닉(information hiding)을
       구현할 수 있게 됩니다.
4. 해당 모듈이 참조하고 있는 다른 모듈에 대한 종속성(Dependency)을 관리하는 역할을 담당

- CJS(Common JS)

- 기본 .. 
- require 함수를 사용하여 다른 모듈로 .. 
- require 함수는 경로 또는 문자열을 가지고 모듈을 ..

- ECMA(ECMA Script Module)

- 최신 JavaScript에서 지원하는 모듈 시스템
- CommonJS와는 다르게 정적(Static)으로 모듈을 가져오며 비동기적 모듈 로딩과 순환 종속을 처리한다.

2) Module은 어떻게 사용할까요?

import { count } from "./counter.js"

- export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.
→ 이렇게 하면 하나의 큰 프로그램들을 작게 나누어, 다른 파일에서도 재사용할 수 있다.

- import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있다.

- import : ES6(ES2015)로 모듈 시스템을 관리할 때 사용한다.
- 정적 로딩(Static Loading)을 지원한다.
- import 문은 코드의 최상위에 위치해야 한다.
- require는 CommonJS로 모듈 시스템을 관리할 때 사용한다.
- 이 방식은 동적 로딩(Dynamic Loading)을 지원한다.
- require 문은 코드의 어디에서든 사용할 수 있다.

3) ES6 Module 사용해보기

4) 상대 경로

***
gitignore로 env 파일이라든지 api key라든지 기타 배포하거나 공개하면 안 되는 것들 무시할 수 있게 설정 가능한 듯?
***

./으로 시작하는 경로는 '상대 경로'라는 것을 나타내게 된다.
./math.js는 현재 파일이 위치한 디렉토리에서 math.js라는 이름의 파일을 찾는 것을 의미하게 된다.

이와 달리 ../는 상위 디렉토리를 나타내므로, ../math.js는 현재 파일이 위치한 디렉토리의 상위 디렉토리에서 math.js를 찾는 것을 의미한다.

SyntaxError: Cannot use import statement outside a module

commonjs를 통해서 node 시스템을 실행했지만, 실제 코드가 es6 모듈 시스템으로 설정되어 있을 때 발생하는 문제이다. 이 문제를 해결하기 위해서는 package.json에 "type" : "module"이라는 것을 입력해야 한다.

type:module : package.json 파일 안에서 모듈 시스템에서 commonjs가 아니라 es6라는 모듈 시스템을 사용하겠다 라는 의미.

이걸 작성하지 않으면 코드가 정상적으로 실행되지 않는다. 

5) ES6 Module 사용해보기 심화

- 화살표 함수 export
- 화살표 함수 import
- 익명 함수 export
- 익명 함수 import
- export default Object
- default Object import
- export default Function
- default Function import
- export default 익명 함수
- default 익명 함수 import

모듈 ~ JS를 논리적인 단위로 나누는 법

- 코드 재사용성 높이고
- 코드 분리 관리 →  유지 보수 수월
- 네임스페이스 분리 → 같은 이름의 함수나 변수가 충돌하는 것을 방지하게 된다.
- 코드를 모듈로 나누는 것은 큰 프로젝트의 코드의 복잡성을 관리하는 데 아주 중요한 요소 중 하나이다.



1-14. API와 REST API 의 개념

1) API(Application Programming Interface)란?

- API(Application Programming Interface)는 서로 다른 소프트웨어나 어플리케이션 간을 연결해주는 매개체이자 약속이라고 볼 수 있다.

- 어떤 정보를 어떻게 요청할 것인가?
- 응답은 어떤 형식으로 받을 것인가?

2) 우리가 API를 작성한다는 의미는?

- 웹 어플리케이션(FE)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공한다는 의미
- API
- 원하는 데이터를 받아
- DB에 데이터 저장하고
- 저장되어 있는 데이터 읽어서
- 웹 어플리케이션(FE)에 데이터를 제공

3) 그럼 REST API는 어떤 의미를 갖는 API인가?

- REST(Representational State Transfer)는 ~ 월드 와이드 웹 ~ 분산 하이퍼미디어 시스템 ~   네트워크 상에서 자원을 쉽고 명확하게 식별하고 저작할 수 있게 도와주는 소프트웨어 아키텍쳐의 한 방식
- URL, Headers, Method 등 네트워크 표현 수단을 사람이 봐도 이해하기 쉬운 표현으로 정의한다고 이해하시면 된다.
- 또한 이 "REST 아키텍쳐"는 사람이 봐도 쉽게 이해할 수 있도록 "자원(Resource)"을 정의하고 이 "자원"을 중심으로 표현을 구성하는 원칙을 제시한다.
- REST API는 HTTP를 통해 웹 서비스의 자원에 접근하는 방식을 "REST 아키텍쳐"의 규칙을 따라 구현된 API라고 생각하시면 된다.

4) REST API의 구성 요소

1. 자원(Resource) - URL

- /goods
- /carts

2. 행위 - HTTP method

- GET
- POST
- CRUD

- Create : 생성(POST)
- Read : 조회(GET)
- Update : 수정(PUT), (PATCH)
- Delete : 삭제(DELETE)

3. 표현

- JSON, XML
- HTTP ~ Content-Type이라는 헤더를 통해 표현 방법을 서술함.

5) REST API 예시

router.get('/books', (req, res) => {
res.json( { success: true, data: getAllBooks() });
});

- Http 메서드인 GET은 리소스를 조회하는 역할을 담당하므로, 이 코드는 전체 책 목록을 조회(Read)하고, 그 결과를 JSON 형식으로 반환한다. 이렇게 API가 "REST 원칙"에 따라 구현되었으므로, 이 API는 RESTful하다 볼 수 있다.

- 

1-15. Roution 이해 및 Router 학습

1) Routing이란?

Routing은 클라이언트의 요청 조건(Http 메서드, 주소 등)에 대응해 응답(Response)하는 방식을 말한다.

2) Router란?

여기서 말하는 Router는 클라이언트의 요청을 쉽게 처리할 수 있게 도와주는 Express.j의 기본 기능 중 하나이다.

- 일반적으로 Router는 아래와 같은 구조를 가진다.

router.METHOD(PATH, HANDLER);

- router : Express.js의 라우터를 정의하기 위해 사용
- METHOD : Http Method를 나타냄. ( ex: get, post, put, patch, delete ... )
- PATH : 실제 서버에서 API를 사용하기 위한 경로를 나타낸다. (ex: users, posts ...)
- HANDLER : 라우트가 일치할 때 실행되는 함수

3)Router 사용해보기

..


localhost:3000
localhost:3000/api
localhost:3000/api/about


미들웨어(Middleware)란 뭘까요?

- 서버에서 요청을 받을 때 가끔 모든 요청에 대해 공통적인 처리를 하고 싶은 경우가 생길 수 있습니다. 그럴 때 미들웨어를 이용하여 서버의 요청/응답에 대해 공통적으로 관리가 가능합니다.

1-16. API Client 학습

1) API Client란 뭘까?

API Client란 개발단계에서 우리가 작성한 API의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴 입니다. API Client를 사용함으로써 개발 속도를 높이거나 잘못된 API 요청으로 인한 치명적인 에러를 예방하는데 도움을 받을 수 있습니다.

2) 어떤 상황에 필요할까?

- GET / POST / PATCH / PUT / DELETE

3) Insomnia API Client 설치

- Collections

- 특별한 프로젝트마다 API 목록을 정리해서 사용할 수 있다.
- Collections는 여러 가지의 API 요청(Request)을 그룹화시킬 수 있다.

- Environment

- 여러 번 사용되는 값들을 환경변수(Environment)로 설정할 때 사용한다.

1-17. Request와 Response

1) Request, Response란 뭘까?

- Request : 클라이언트가 서버에게 전달하려는 정보나 메시지를 담는 객체
- URL, Http method, 헤더(header), 쿼리 파라미터(query parameter), 바디 데이터(body data)
- Response : 서버에서 클라이언트로 응답 메시지를 전송시켜주는 객체
- 상태 코드(status code), 응답 데이터(response data), 응답 헤더(response header) 등이 포함됩니다.

2) 서버 모듈

- Node.js의 서버 모듈 ~ http 모듈 / Express.js

3) Express.js의 흐름 파악하기

- Express.js 통신 흐름

1. 클라이언트는 특정 URL과 데이터를 담은 요청(Request)을 서버에 전송한다.
2. 서버는 받은 데이터에 따라 필요한 비즈니스 로직을 수행한다.
3. 서버는 처리된 결과를 클라이언트에게 응답(Response)으로 보내준다.

4) API 구현하기

5) Express.js 흐름 분석하기

1. 서버 시작 : Express.js는 지정된 포트 번호(Port)를 사용하여 서버를 시작한다.
2. 라우터 등록 : 연결하려는 모든 라우터들을 /api 주소에 연결한다.
3. API 정의 : 등록된 각 라우터를 순서대로 검토하여, HTTP Method와 URL이 일치하는 API를 찾아 해당 API를 수행하게 된다.
4. 결과 반환 : API에서 모든 비즈니스 로직 처리가 완료된 후, 클라이언트(ex:웹 브라우저)에게 결과를 전달하게 된다.

6) API 분석하기 - 목록 조회

- 뉴스 목록 조회 API는 클라이언트가 GET /api/news/에 요청을 보낼 경우 실행된다.

7) API 분석하기 - 세부 조회

- 뉴스 세부 조회 API는 클라이언트가 GET /api/news/:newsId에 요청을 보낼 경우 실행된다.


1-18. Express.js의 req, res 객체

1) Express.js의 req, res 객체 살펴보기

- req 객체

- req.body : Request를 호출할 때 body로 전달된 정보가 담긴 객체
- req.params : 라우터 매개 변수(Path Params)에 대한 정보가 담긴 객체
- req.query : Request를 호출할 때 쿼리 스트링으로 전달된 정보가 담긴 객체

- res 객체

- res.status(코드) : Response에 HTTP 상태 코드를 지정한다.
- res.send(데이터) : 데이터를 포함하여 Response를 전달한다.
- res.send(JSON) : JSON형식으로 Response를 전달한다.

2) Express.js의 Response 파헤쳐보기

- 서버에서 클라이언트에게 보내는 메시지를 응답(Response)라고 부른다.
status는 서버가 클라이언트에게 응답(response)를 보낼 때 http 상태 코드를 전송하는 것을 나타내며,
send, json은 서버가 클라이언트에게 응답(response) 데이터를 전송하는 방법을 나열한 것이다.

- res.status(상태 코드)

- 서버가 클라이언트에게 응답(Response)을 보냈을 때, 상태 코드를 전달할 때 사용됨

- res.json(JSON), res.send(데이터)

- 서버가 클라이언트에게 응답(Response)을 보냈을 때, 데이터를 전달할 때 사용됨

3) Express.js의 Request 파헤쳐보기

- 클라이언트에서 서버로 보내는 메시지를 요청(Request)이라고 부른다. body, params, query는 클라이언트가 서버에 요청(Request)을 보낼 때 데이터를 어떤 방식으로 전송하는지에 대한 여러가지 방법들을 나열한 것이다.

- req.body: (Body)

- 클라이언트가 요청(Request)을 보냈을 때, Body에 데이터를 삽입하였을 때 사용됨.

- req.query: (Query String)

- 클라이언트가 요청(Request)을 보냈을 때, URL에 원하는 Key-Value를 삽입하여 데이터를 전달한다.

- req.params: (Path Variable)

- 클라이언트가 요청(Request)을 보냈을 때, URL에 원하는 데이터를 삽입하여 전달한다.

1-19. REST API 개발