2023.03.11) 항해 34일차 (2-json-server, HTTP)

협업이 곧 얼마 남지 않았음이 와닿는 주차긴 하다.

json-server도 사용해보고 HTTP 프로토콜도 배우고 나니

뭔가 설레면서 걱정되는 기분이 동시에 들었다.

다른 분들의 발목을 잡지 않기 위해 열심히 해야겠따!!!

 

1) json-server

json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고,

FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있다.

json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다.

우리가 json-server를 사용하는 이유는BE에서 실제 DB와 API Server가 구축될 때까지,

FE 개발에 임시적으로 사용할 mock data를 생성하기 위해서다!

 

① json-server 설치하기

yarn add json-server

CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치한다.

나는 yarn을 사용하니 yarn으로 설치했당.

 

② json-server 사용하기

json-server가 간단한 패키지이긴 하나, 말그대로 서버 이다.

그래서 리액트와는 별개로 따로 실행을 해줘야 한다.

즉, 리액트도 start하고, json-server로 start 해야 한다....!

그래야 리액트와 json-server가 서로 통신 할 수 있다.

아래 명령을 통해 json-sever를 실행하면 된다.

(명령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 뜻)

yarn json-server --watch db.json --port 3001

③ 설치 후  db.json 파일과 코드 자동 생성

이렇게 명령어를 입력하면 db.json이 자동으로 생성된다.

이 json 파일을 db로 사용하는 것이다.

그리고 posts, comments, profile 라는 기본적인 값들을 자동으로 넣어준다.

 

❶ 설치 후 db.json 파일의 모습

//db.json 파일
{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

❷ 설치 후 터미널의 모습!!

❸ db 수정해보기!

//db에 todos를 추가해보았다
{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}

 

todos가 추가되었고 브라우저도 정상적으로 보인다~

 

❹ 서버 들어가보기! (맥 기준 cmd키를 누르며 주소창 클릭하면 된당)

서버에 들어가보면 터미널에서

이렇게 누군가 GET했다고 알려준다.

 

2) HTTP

① 프로토콜

웹에서 서버(웹 서버)와 클라이언트(웹 브라우저)가 대화하기 위해 서로 약속된 방식이 필요하고,

그 방식대로 서로 데이터를 주고 받아야만 오류가 없다.

약속을 프로토콜(protocol)이라고 한다.

특히, 웹에서 서버 ↔ 클라이언트간 주고 받은 상호간의 약속(프로토콜)을 HTTP 프로토콜이라고 하고,

데이터를 주고 받기 위해 HTTP 프로토콜을 사용하고 있다.

 

 

② 요청(Request)과 응답(Response)

서버와 클라이언트가 서로 데이터를 주고 받기 위해서는 항상 ‘요청(request)’을 하고, 그에 따른 ‘응답(response)’을 준다.

보통 클라이언트가 대화를 시도하고, 서버는 요청을 받아 그에 따른 응답을 준다.

 

③ URL

• URL에서 등장하는 용어들

• protocol
• domain(sub domain, domain name)
• resource path(path/page)
• query variable, path variable

 

 

④ 메서드

메서드란 HTTP 요청의 종류로, 클라이언트가 서버에 하는 요청의 종류이다!

(더 많지만 간략하게 알고, 필요할때 마다 찾아보기!)

(참고 링크: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)

• 메서드GET - 조회
• POST - 생성
• PUT, PATCH - 수정(변경)
• DELETE - 삭제

 

⑤ 상태코드

클라이언트가 서버에 어떤 요청(request)를 하고 나면, 서버는 그에 맞는 응답(response)를 제공한다.

그 때, 각 응답은 상태코드를 갖는다.

• 상태코드

• 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
• 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
• 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
• 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
• 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.