웹 서비스의 개념

네이버 메인화면은 어떻게 나오게 되는 것일까?

• (1) 네이버의 서버와 통신하기 위해 IP가 필요, www.naver.com을 DNS에 질의
• (2) 네이버 웹 서버의 IP가 3.10.256.3 이라는 것을 응답
• (3) 네이버 웹 서버로 웹 페이지 요청
• (4) 웹 서버는 요청에 맞는 작업을 수행 (DB에서 데이터를 조회)
• (5) 조회한 데이터 기반으로 웹 서버에서 가공
• (6) 클라이언트에게 응답

응답 형태

• 웹 환경에서 우리가 사용하는 Protocol은 HTTP 입니다.
• 특징
  • 클라이언트의 요청이 반드시 선행되어야 서버가 응답을 내려줍니다.
  • Stateless, connectless (무상태) - 연결된 통로가 끊긴다.
  • TCP 기반의 OSI의 7계층 프로토콜
• (1) html 형태의 응답
  • 브라우저 → https://www.naver.com 치고 엔터를 치면 다음과 같이
  • 의 응답이 반환 
  • 응답에 대한 메타데이터(헤더)를 확인해보면
    
  • 응답의 형태가 Content-Type ⇒ text/html 이기 때문에
  • 브라우저의 경우 html을 받아서 인간이 이해하기 좋은 시각화 형태로 렌더링 합니다.
    • 브라우저의 역할 ⇒ html, css등을 해석해서 렌더링하고 js의 행동을 수행합니다.
      
  • API 테스트 플랫폼인 postman에서 https://www.naver.com 을 호출하면 html 형태로 응답
    
• (2) json 형태의 응답
  • 네이버 화면 로드 이후 추가로 호출된 API를 살펴보면 다음과 같이
  • json 형태의 응답을 반환하는 API가 있습니다.
    
  • 응답에 대한 메타데이터(헤더) 를 살펴보면
    
  • 응답의 형태가 Content-Type ⇒ application/json 이기 때문에
  • 브라우저가 화면을 렌더링 할 수 없습니다.
  • 그렇다면 json 형태의 API는 언제 사용하는 걸까요?
    • 페이지가 로드된 이후 필요한 데이터를 가져올 때 사용
    • (또는) 사용자가 어떠한 액션 (클릭, 드래그 등)을 했을때 수행해야 하는 작업을 수행

웹 서비스 흐름

• https://www.naver.com 을 postman을 이용해 호출하면 html 형태의 응답을 받습니다.
• 응답의 preview를 보면
  
• 네이버 검색창만 보일 뿐 어떠한 컨텐츠도 보이지 않습니다.
• 그렇다면 브라우저 https://www.naver.com 을 들어갔을때 뉴스나 광고 등이 보이게 되는 걸까요?
• 이유는 html을 로드한 이후 어떠한 추가 작업을 하기 때문입니다. (즉, json 형태의 추가 API를 호출하여 필요한 정보를 얻어온 후 동적으로 렌더링 합니다. - 참조)
• 흐름을 시각화 해보면 다음과 같습니다.
  • 동적 DOM 생성이란 js 개인과제에서 배웠던것처럼 html을 코드로 생성하는 부분을 말합니다.

    form.innerHtml += `<div>.... 내용....</div>`

• 7번까지의 과정이 모두 완료되면 우리가 보는 네이버의 화면이 온전히 나오게 되는 것입니다.
  

REST API

API의 정의

• Application Programming Interface ⇒ API는 애플리케이션끼리 연결해주는 매개체이자 약속이라고 볼 수 있습니다.
• 쉽게 말하면, 클라이언트가 어떤 리소스를 받거나 컨트롤 하기 위한행위를 웹 서버에게 시키기 위한 인터페이스 (방법)

행위란?

• 웹 서비스는 우리 생활과 아주 밀접하게 연관되어 있고 친숙 합니다.
  • ex) 네이버, 쿠팡, 유튜브, 페이스북, 인스타그램
• 우리가 웹 서비스에서 하는 행동은 아래 4가지 행위로 구분 가능합니다.
  • 생성 ⇒ 없었던 무언가를 만드는 행동
    • ex) 인스타그램 포스팅, 댓글 달기, 네이버 블로그 작성, 회원가입 등
  • 수정 ⇒ 무엇인가를 수정하는 행동
    • ex) 마이페이지 내 정보 변경, 비밀번호 변경 등
  • 삭제 ⇒ 무엇인가를 삭제하는 행동
    • ex) 댓글 삭제, 회원 탈퇴 등
  • 조회 ⇒ 어떠한 정보를 조회하는 행동
    • ex) 네이버 뉴스, 커머스 상품 목록, 친구들의 SNS 포스팅 등

CRUD (Create, Read, Update, Delete)

• 웹 서비스에서 하는 행위를 CRUD 라고 표현하기도 합니다.
• REST에서는 CRUD 각각의 행위를 http method와 연결할 수 있습니다.
  • 기술적으로 강제된게 아니고 하나의 Rule이라고 생각하면 됩니다.
  • 즉, 강제는 아니지만 관례적으로 이렇게 연결해야 뜻이 맞다는 의미
• C ⇒ Create ⇒ 생성 ⇒ POST
• R ⇒ Read ⇒ 조회 ⇒ GET
• U ⇒ Update ⇒ 수정 ⇒ PUT, PATCH (PUT / PATCH 차이는 구글링 해보시길)
• D ⇒ Delete ⇒ 삭제 ⇒ DELETE

REST API

• Representational State Transfer ⇒ 표현 상태 이전(?)
• 쉽게 말하면, API를 표현하기 위한 표현식(아키텍처)
• 구성요소
  • 자원(Resource) ⇒ URI
    • ex) /api/movies
  • 행위 ⇒ http Method
    • ex) POST, GET, PUT, PATCH, DELETE
  • 표현 ⇒ (요청하는 쪽과 응답하는 쪽의 통신 방식)
    • ex) JSON, XML

REST API 특징 ⇒ RESTful

• 가장 큰 목적 ⇒ 활용이 쉽도록 REST API를 설계하는 것
• 대부분 JSON 형태로 통신
• 구성요소의 조합만 보고도 어떤 일을 하는 API인지 알 수 있어야 한다.
  • /api/news (GET) ⇒ (조회) + (뉴스 목록정보)
  • /api/news (POST) ⇒ (생성) + (뉴스)
  • /api/news/:newsId (DELETE) ⇒ (삭제) + (뉴스)
  • /api/news/:newsId (PUT) ⇒ (수정) + (뉴스)
  • /api/news/:newsId/comments (GET) ⇒ ??
  • /api/news/:newsId/comments (POST) ⇒ ??
  • /api/news/:newsId/comments/:commentId (GET) ⇒ ??
  • /api/news/:newsId/comments/:commentId (PUT) ⇒ ??
  • /api/news/:newsId/comments/:commentId (DELETE) ⇒ ??
• 다음과 같은 예는 좋은 설계일까요?
  • /api/news (PUT)
  • /api/news (DELETE) ⇒ 전체 뉴스를 모두 내리라는건가??

JS 개인과제 NodeJS로 구현하기

Express

• NodeJS 환경에서 웹 서버를 간편하게 구성할 수 있도록 기능을 제공하는 웹 프레임워크
• NodeJS 진영에서 가장 유명하고 널리 쓰이는 웹 프레임워크
  
• 참고자료
  • https://expressjs.com/ko/
  • https://nodejs.org/docs/latest-v20.x/api/

미들웨어

• express에서 미들웨어(Middleware) 란?
• express는 사용자의 요청을 받아서 응답까지 처리하는 동안 등록된 미들웨어를 수행

  • 미들웨어 등록하는 방법

    app.use(미들웨어 함수)
    
    ex)
    const express = require('express');
    const app = express();
    
    app.use(express.json());
    app.use(express.urlencoded({extended: false}));
    // html을 떨구는 api
    app.use(pageRouter)
    // json을 떨구는 api
    app.use('/api', apiRouter)

  • express 에서 요청을 받았을 때 일어나는 일

  • API에서 작업을 처리하기전 수행해야할 선행 작업들의 모음

    • body-parser
    • cookie-parser
    • 인증
    • ip 필터링 등