[node js] 2주차 - 1

HTTP란? 1. 통신규약 2. 웹서버라면 기본적으로 사용하는 형식

• 데이터를 주고 받는 양식을 정의한 "통신 규약"중 하나가 HTTP입니다! (통신 규약: Protocol-언어)
• 매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약입니다. (거의 만능!)
• 여기서 말하는 통신 규약이란, 컴퓨터끼리 데이터를 주고 받을때 정해둔 약속을 의미합니다.
  • 비유를 해볼까요?
    • 제가 여러분에게 한국어로 말을 걸면 여러분이 제 말을 한국어로 이해하듯이, 갑자기 제가 독일어나 불어로 말한다면 한국로 알아듣지 못하겠죠?
    • 혹은 제가 같은 한국말로 말하더라도 여러분이 잘 알고 있던 표준어가 아닌, 우리가 모르는 아주 아주 작은 어느 지방에서만 사용하는 이해하기 난해한 사투리를 사용한다면요?
  • 이렇듯이 여러분은 앞으로 수업을 진행하면서 HTTP라는 통신 규약을 이용하여 서버나 클라이언트(브라우저)끼리 의사 소통을 할 수 있게 됩니다!
• 현대에 존재하는 대부분의 웹 서버가 HTTP를 기반으로 데이터를 주고 받습니다. 또한 모든 브라우저는 HTTP 프로토콜을 기본으로 지원하기 때문에 여러분은 매일 HTTP를 이용하는 셈이 됩니다 😉

🔥 여기서 오해하면 안되는 포인트!

우리가 "말"을 통해 의사 표현을 할 수 있듯이 모든 컴퓨터는 “네트워크”를 통해 의사 표현을 할 수 있습니다. 현실 세계에서 말은 의사 표현의 수단이며, 언어(ex. 한국어)는 의사 표현의 방법입니다. 그리고 디지털 세상에서는 네트워크가 의사 표현의 수단이고, 통신 규약(ex. HTTP)이 의사 표현의 방법입니다.

 

의사 표현의 수단: (현실 세상) 말 ↔ (디지털 세상) 네트워크

의사 표현의 방법: (현실 세상) 언어 ↔ (디지털 세상) 통신 규약

어떻게 HTTP로 데이터를 주고 받을까?

• HTTP에서는 언제나 Request, Response라는 개념이 존재합니다.
• 서버와 브라우저의 관계로 가볍게 말해보면 아래와 같이 동작합니다.
  1. 브라우저는 서버에게 자신이 원하는 페이지(URL 등의 정보)를 요구(Request)합니다.
  2. 서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 싣어 반환(Response)해줍니다. 없다면 없는 페이지에 대한 데이터를 반환합니다. (일반적인 웹 서버 기준)
  3. 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려줍니다.
• 그리고 위와 같은 사례에서 "데이터"는 어떠한 데이터든 주고 받는게 가능합니다.

추가 데이터? 데이터? 뭐가 다른걸까?

위에서 개발자 도구로 직접 보면서 나온 애매한 단어들이 있었죠?

Headers 탭에서는 추가 데이터라고 많이 말했었고, Response 탭에서는 그냥 데이터라고 말했습니다. 이것에 대해서 조금 더 자세히 알아보도록 하겠습니다!

• HTTP에는 크게 다음과 같은 구성 요소가 존재합니다.
  • Method 설명
    • GET: 이름 그대로 어떤 리소스를 "얻을 때" 사용됩니다. 그리고 브라우저는 기본적으로 여러분이 웹 서핑을 한다고 가정하므로 모든 요청은 "GET" 메서드를 사용해서 서버에 요청을 보냅니다. (예외 상황도 있지만 거의 마주하지 않는 상황이기 때문에 여러분의 머리를 보호하기 위해 생략합니다 😇... 그래도 궁금하다면? 클릭)
    • POST: 웹 서버에 데이터를 "게시"할 때 사용하는게 일반적입니다. (ex. 회원가입, 게시글 작성, 댓글 작성)
  • Header 설명 (추가 데이터. 메타 데이터)

 -request header 신분증같은 개념

-response header 보통 기본적인 것만 보내줌 

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

이러한 사례 외에도 아주 다양한 의사 표현을 위한 데이터를 모두 Header 필드에 넣고 주고 받습니다. 위에서 설명 된 메서드도 사실은 헤더에 포함되어 서버로 보내집니다 😁

• • Payload 설명 (데이터. 실질적인 데이터)
    • 서버가 응답을 보낼 때에는 항상 Payload를 보낼 수 있습니다.
    • 클라이언트(브라우저)가 요청을 할 때에도 Payload를 보낼 수 있습니다. 그리고 "GET method를 제외하곤 모두 Payload를 보낼 수 있다" 는게 HTTP에서의 약속입니다.
• 네트워크 탭에서 한번 확인해보세요! 😉

웹 서버의 이해 - 브라우저랑 통신할 수 있는 데이터를 주고받는 것

• 1. 웹 서버란?
  • 웹서버는 인터넷을 통해 HTTP를 이용하여 웹상의 클라이언트의 요청을 응답해주는 통신을 하는 컴퓨터라고 생각하시면 됩니다.
  • 오늘날 우리가 자주 사용하는 이메일이나 웹사이트 등 대부분의 인터넷 사용은 웹서버를 통해 우리가 사용할 수 있게 되었습니다.

• 1. 웹 서버의 기본 동작 원리
  • 브라우저를 통해 HTTP request로 웹사이트를 웹서버에 요청합니다. 이후 웹서버는 요청을 승인하고 HTTP response를 통해 웹사이트 데이터를 브라우저에 전송합니다. 마지막으로 브라우저는 서버에서 받아온 데이터를 이용해 웹사이트를 브라우저에 그려내는 일을 합니다.
  • 기본적으로 브라우저가 웹서버에 요청을 할때는 항상 GET method로 요청하게 됩니다.

• 1. 퀴즈! google.com 에 접속하면 보여지는 화면에 대한 데이터는 어떻게 받아오는걸까요?
  • 1. 내가 볼 페이지를 구글이 사진으로 보여준다.
    1. 브라우저가 서버에서 사이트 정보를 받아와 표현한다.
    1. 구글이 내 컴퓨터에 접속해서 브라우저에 그려준다.
  • 정답
    • 정답은 2번입니다. 사용자가 브라우저에 주소(URL)를 입력하면 해당 동작에 맞게 HTTP 데이터를 만들어 서버로 보내고 서버는 알맞는 응답 데이터를 브라우저(클라이언트)로 보내 이 데이터가 브라우저에 표현됩니다.

Express.js의 이해

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

• 일반적인 웹 서버와 Node.js로 만든 웹 서버는 다르지 않습니다!
  • 그저 어떤 도구를 사용해서 만들었나의 차이일 뿐, 동일한 기능을 수행하는 웹 서버를 만들수 있으며, 이것은 다른 언어나 도구를 이용해 만든 웹 서버도 마찬가지 입니다.
  • 기능이 다른 웹 서버는 존재할 수 있지만 기반이 되는 개념 자체가 다른 웹 서버는 존재하지 않습니다! 우리가 배운게 전부라고 볼 수 있어요!

2) Express.js란?

• • Express.js는 Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크 입니다.
  • Express.js 이외에 다양한 웹 프레임워크가 존재하지만 오늘날 가장 많은 Node.js 웹서버가 Express.js 프레임워크를 통해 개발되었습니다.

3) 웹 서버와 Express.js의 차이점

• • 다시 한번 복습! Express.js와 웹서버는 동일하지 않습니다!
  • Express.js는 웹서버 자체가 아닌 Node.js를 위한 웹 프레임워크로 웹 서버를 구현하기 위해 사용 되는 것이 Express.js 프레임워크 입니다.
  • Express.js로 만든 웹서버예요 O
  • 이건 Express 웹서버예여 X

미들웨어 학습 및 구현(모듈)   -  router 도 미들웨어!!!!!

• 1. 미들웨어 기본 개념(웬만한 웹서버에 다 있는 개념)

미들웨어란 무엇일까요?

웹 서버에서 요청을 받을때 가끔 모든 요청에 대해 공통적인 처리를 하고싶은 경우가 생길 수 있습니다.

미들웨어를 통해 웹 서버의 요청/응답에 대해 공통적으로 관리가 가능합니다.

이런 기능적인 부분 외에도 아주 기본적인 미들웨어로, 브라우저가 보낸 데이터를 우리가 쉽게 사용할 수 있게 바꿔주는 미들웨어도 존재합니다. 이건 다음 주 수업에서 만나볼 수 있을거예요! 😄

예를 들어, 모든 요청에 대해서 로그를 남겨 확인하고 싶은 경우처럼 말이죠.

이 외에도 승인된 사용자만 API를 접근할 수 있게 만들고 싶을때도 해당 될 수 있습니다.

이런 기능적인 부분 외에도 아주 기본적인 미들웨어로, 브라우저가 보낸 데이터를 우리가 쉽게 사용할 수 있게 바꿔주는 미들웨어도 존재합니다.

• • 다른 웹 서버에도 이런게 있을까요?

가장 유명한 웹 서버-모듈개념로 2가지가 존재합니다. 

• Apache-아파치
• Nginx-엔진엑스

두 웹 서버 모두 “모듈” 이라는 개념을 가지고 있는데요, 미들웨어와 아주 유사합니다.Express.js의 미들웨어와 같은 개념이예요 😉

요즘은 어디서나 볼 수 있는 보안 연결 방법인 HTTPS를 지원하기 위해서는 https 모듈을 추가하고, 모든 요청과 응답을 기록하고 싶다면 로깅을 해주는 모듈을 추가하면 됩니다.

• • Express.js 에도 있습니다!

app.use(express.urlencoded({ extended: false }));

app.use(express.json()); 

• urlencoded: form-urlencoded 라는 데이터 규격의 body 데이터를 손쉽게 코드에서 사용할 수 있게 도와주는 미들웨어에요!
• json: JSON 이라는 규격의 body 데이터를 손쉽게 코드에서 사용할 수 있게 도와주는 미들웨어에요!

이 외에도 다양하게 있지만 우리의 수업에서는 이 두가지를 사용 할 예정이에요!

Express.js에서 미들웨어 작성해보기

• • 미들웨어는 어떻게 작성할 수 있을까요? 위의 형태에서 req, res, next는 각자 역할을 지니고 있는 인자(Parameter)입니다.
    • req: 요청에 대한 정보가 담겨있는 객체입니다.
      • HTTP Headers, Query Parameters, URL 등 브라우저가 서버로 보내는 정보들이 담겨있습니다.
    • res: 응답을 위한 기능이 제공됩니다.
      • 어떤 HTTP Status Code로 응답 할지, 어떤 데이터 형식으로 응답 할지, 헤더는 어떤 값을 넣어 응답 할지 다양한 기능을 제공합니다.
    • next: 다음 스택으로 정의된 미들웨어를 호출합니다.
  • app.use((req, res, next) => { // 필요한 코드 });

• 

  
  
  • Request 로그 남기는 미들웨어 작성

app.use((req, res, next) => {

console.log('Request URL:', req.originalUrl, ' - ', new Date());

next();

});

• • 코드를 작성한뒤 저장하고 다시 node app.js로 서버를 실행해서 메인페이지로 접속해보세요!
  • 터미널을 확인해보면 로그를 확인 할 수 있습니다.

미들웨어는 어떤 경우에 사용하는게 적합할까요?

• • 미들웨어는 여러분이 만들기 위한 기능에 다양하게 사용 가능하고 또한 관리 측면에서도 많은 이점을 가져다 줍니다.
  • 이미 존재하는 미들웨어를 보면 다양하게 존재하고 있습니다.
    • 기본 미들웨어: https://expressjs.com/ko/4x/api.html

Express 4.x - API 참조

여러개의 미들웨어가 겹치는 경우 동작하는 방식

• 

  
  
  • 여러개의 미들웨어가 겹치는 경우, 이는 첫번째 미들웨어부터 순차적으로 진입하게 됩니다.
  • 예시로 아래와 같이 3개의 미들웨어가 있다고 가정해보겠습니다.

app.use((req, res, next) => {

console.log('첫번째 미들웨어');

next();

});

 

app.use((req, res, next) => {

console.log('두번째 미들웨어');

next();

});

 

app.use((req, res, next) => {

console.log('세번째 미들웨어');

next();

});

• • 위와같은 그림처럼 순차적으로 미들웨어를 통과하고 중간에 응답을해서 종료가 되거나 다음 미들웨어로 넘어가서 터미널에 첫번째 미들웨어라는 로그부터 차례대로 세번째 미들웨어라는 로그가 쓰여진걸 확인 할 수 있습니다.
  • 하지만 중간에 미들웨어에 next 가 실행되지 않으면 다음 미들웨어는 실행되지 않습니다.

const express = require('express');

const { nextTick } = require('process');

const app = express();

const port = 3000;

// // 3) 미들웨어를 사용하는 함수, 순서가 중요!

// app.use((req,res,next)=>{

//     // console.log("미들웨어가 구현됐나?")

//     // 미들웨어사용시 가장 중요한 것, next()를 써야 다음 미들 웨어로 넘어감

//     // next()가 없으면 서버가 끊나지 않는 무한로딩에 빠짐

//     // next();

//     if(req.path==='/test'){

//         // path는 주소창 옆에 나오는 값

//         res.send('테스트 주소로 왔구나!');

//     } else {

//         next();

//     }

// });

const requstMiddleware = (req,res,next)=>{

    // originalUrl은 보낸 Url 그대로 나오는 값

    console.log('Request URL:', req.originalUrl, " - ", new Date());

    // res이 없이 next()를 안쓰면 문제가 커짐

    next();

};

// log를 남기는 미들 웨어

app.use(requstMiddleware);

// 2) get은 응답하는 것

app.get('/',(req,res)=>{

    res.send("Hello world");

});

// 1) listen은 서버를 켜는 것

app.listen(port, ()=>{

    console.log(port, "포트로 서버 연결!")

});