HTTP 통신

두 컴퓨터 간에 텍스트 데이터를 주고받는 길
HTTP라는 길로 요청(request)과 응답(response)을 주고 받음

HTTP 요청(Request)

웹브라우저에서 홈페이지(프론트엔드 컴퓨터)가 실행 중이라면 작성한 게시물 텍스트 데이터를 HTTP를 통해 백엔드 컴퓨터로 보내고, 백엔드 컴퓨터에게 이 데이터를 DB에 저장해달라고 request

HTTP 응답(Response)

request 받은 백엔드 컴퓨터가 성공, 실패 등의 처리 결과를 response

백엔드 컴퓨터는 응답할 때, HTTP 상태 코드를 함께 보내줌

HTTP 상태 코드는 100~599까지의 숫자로 구성

💡 보안 및 데이터 정제 등의 이유로 백엔드에서능 검증 과정을 거쳐야 하기 때문에, 아무나 함부로 DB에 request 불가능

API

HTTP 요청을 백엔드 컴퓨터에 보냈을 때 실행되는 백엔드 기능 → 각각의 요청에 따른 담당자

API에 요청할 때 보내는 데이터는 API 함수로 들어갈 인자, 응답으로 받게되는 데이터는 API 함수의 return 데이터

Rest-API vs GraphQL-API

1. 함수 이름의 차이

• Rest-API는 API 이름이 홈페이지 주소처럼 생김
• GraphQL-API는 API 이름이 일반적이 함수와 같음

1. 응답 결과물의 차이

• Rest-API는 응답 결과로 백엔드 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야 함 → 요청 담당자는 axios ⇒ 용량이 너무 커서 무거움
• GraphQL-API는 백엔드 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있음 → 요청 담당자는 apollo-client ⇒ 효율적인 통신 가능

요청 담당자는 프론트엔드에서 설치하는 라이브러리를 뜻함

💡 Rest-API를 배울 필요가 있음 1. 회사나 팀 내에 다른 사람이 Rest를 사용 중일 수 있음 2. 다른 회사에서 제공해 주는 API를 사용하는 경우 Rest-API로 제공될 수 있음

API 요청 결과 타입(JSON)

API 요청의 결과는 key와 value 형태

{
	작성자: "훈이",
	제목: "좋은 아침입니다"
}

HTTP header와 body

HTTP로 요청과 응답을 보낼 때, 그 메시지 안에는 시작 라인, 헤더, 바디가 있음

HTTP 요청 메시지

• 시작 라인
  • HTTP 메서드
  • 요청 엔드포인트(’/board’)
  • HTTP 버전
• 헤더
  • Host: 요청을 보내는 브라우저의 주소
  • Content-Type: 응답하는 메시지의 내용 종류

HTTP 응답 메시지

• 시작 라인
  • HTTP 버전
  • HTTP 상태 코드
• 헤더
  • Content-Type: 응답하는 메시지의 내용 종류

요청과 응답 모두 Body가 들어갈 수 있으며, 실제 전송하려는 데이터가 Body 객체에 담김

API와 CRUD

API는 크게 4가지 방식으로 구분

1. CREATE : 새로운 것을 생성하는 API
2. READ : 기존의 것을 조회하는 API
3. UPDATE : 기존의 것을 수정하는 API
4. DELETE : 기존의 것을 삭제하는 API

Rest 방식인지 GraphQL 방식인지에 따라 다르게 사용

• Rest-API는 CRUD마다 사용하는 방식(method)이 존재
• GraphQL-API는 데이터를 조작하지 않고 조회만 할 때는 QUERY, 그 외의 데이터를 조작할 때는 MUTATION 사용

Postman

개발자들이 API를 디자인, 빌드, 테스트를 반복하기 위한 API 플랫폼

Swagger

Rest-API를 위한 설명서

Playground

GraphQL-API를 위한 설명서를 볼 수 있으며, 동시에 API를 테스트해 볼 수 있음

Mutation 요청

데이터를 조작(등록)하는 요청을 보낼 때 사용

mutation {
  createProfile(name : "철수", age : 8, school : "다람쥐초등학교"){
    message
  }
}

Query 요청

데이터를 조회하는 요청을 보낼 때 사용

query {
  fetchBoards(page : 1){
    title
    contents
  }
}

Express

Node.js를 활용해 웹 서버를 개발할 수 있도록 도와주는 프레임워크

yarn을 이용해 express 설치

yarn add express

package.json 파일은 서버를 구동하는데 필요한 모듈, 라이브러리의 정보를 모아둔 문서

실질적으로 서버를 구동시키기 위해 필요요한 파일은 node_modules 폴더 안에 저장

github로 공유되는 것을 방지하기 위해서 폴더 최상단 위치에 .gitignore 파일 생성

import express from 'express'

const app = express()

// GET 요청이 들어왔을 때
app.get('/', (req, res) => {
	res.send('Hello, World!")  // 응답 보내기
})

// 3000번 포트에서 실행(서버가 24시간동안 실행)
app.listen(3000, () => {
	console.log(`Example app listening on port ${3000}`)
})

express 프레임워크는 기본적으로 json 형태의 데이터를 지원하고 있지 않음

**app.use() 메서드는 모든 요청에 대해 실행할 코드를 정의할 수 있음**

모든 요청이 들어올 때마다, express.json() 메서드를 실행해 json 형태의 데이터를 받아올 수 있도록 처리

app.use(express.json());

💡 코드를 수정했다면 서버를 종료하고 다시 열어줘야 함

port

서버 프로그램은 하나의 컴퓨터 상에서 동일한 포트로 실행될 수 없음

이들을 각각 구분해줘야하는데, 이를 위해서 사용하는 것이 port 번호

→ 동일한 컴퓨터에서 여러 서버 프로그램 실행을 위해 구분을 짓는 숫자(0~65535)

res, req

API를 구성하는 화살표 함수는 미들웨어 함수

미들웨어 함수는 req, res라는 두 개의 매개변수

• req는 클라이언트(브라우저)에서 보낸 HTTP 요청이 들어있음(구체적으로는 요청을 보낸 브라우저 주소, 쿠키, 바디, 쿼리 등이 들어있음)
• res는 서버에서 다시 클라이언트(브라우저)로 응답을 보낼 때 사용(쿠키, HTTP status 코드, json 등의 내용이 들어있음)

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

export와 export default

export

파일 전체에서 필요한 함수들만 꺼내서 가져올 수 있고 파일 전체를 import 해서 하나씩 꺼내가며 사용할 수도 있음

이때, as는 반드시 사용되어야 함

// index.js

// 필요한 함수만
import { checkValidationPhone, getToken, sendTokenToSMS } from './phone.js';

function createTokenOfPhone(myphone, count) {
	const isValid = checkValidationPhone(myphone);
}

// 파일 전체
import * as entireFunction from './phone.js';

function createTokenOfPhone(myphone, count) {
	const isValid = entireFunction.checkValidationPhone(myphone);
}

export default

export default를 붙이면 파일은 항상 기본 값으로 해당 함수를 export 함 → 중괄호로 감싸서 특정 함수를 꺼내올 필요가 없음

import 해오는 이름을 무엇으로 설정하든 항상 해당 함수가 그 이름으로 받아와짐

// phone.js

export default function sendTokenToSMS(myphone, token) {
	// ...
}

express 또한 모듈 내부에서 default 함수가 지정되어 있음

// index.js

import express from 'express';
import sendSMS form './phone.js';

Swagger를 활용한 API-Docs 만들기

Node.js로 구현한 API를 swagger와 연결하기 위해 npm 모듈 두 가지를 설치해야 함

API 설명이 적힌 파일을 넘겨주면, express에서 사이트를 만들어서 띄워줌

주석으로 API에 대한 설명을 적으면 swagger-uri-express에 넘겨주기 위한 문서들을 만들어줌

yarn add swagger-ui-express swagger-jsdoc

swagger 문서는 들여쓰기에 매우 민감