[TIL 2023.07.05] json-server와 HTTP

💻오늘 배운 내용

json-server

아주 간단한 DB와 API 서버를 생성해주는 패키지

Backend(BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(FE) 개발에 임시적으로 사용할 mock data를 생성.

FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업할 수 있다.

 

json-server 설치

yarn add json-server

 

json-server 실행하기

(root 경로에 db.json 파일이 자동으로 생성된다.)

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

 

만들어진 파일에는 기본적인 예시 값들이 생성되어 있다.

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

 

실행하면 터미널에서 귀엽게 인사해줌

 

HTTP

웹 통신 = 약속(=프로토콜)이다.

서버 ↔ 클라이언트간 주고 받은 상호간의 약속(프로토콜)을 HTTP 프로토콜이라고 한다.

보통 클라이언트가 대화를 시도. 서버는 요청을 받아, 그에 따른 응답을 주는 쪽을 의미

 

URL의 구조

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

메서드

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

상태코드

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

 

 

❓발생한 이슈/고민

json-sever 실행오류

'json-server'를 전역으로 설치했지만 여전히 인식되지 않는 문제가 발생했다.

환경 변수에 경로가 제대로 추가되지 않았을 가능성이 있어서 환경 변수 설정을 확인하고 수정해야 한다.

 

💡해결과정

윈도우 명령프롬프트를 관리자 권한으로 실행한다.

나는 yarn을 사용해서 설치 해줬으니 yarn 전역 패키지 설치 경로를 시스템 경로에 추가 해준다.

$env:Path ="$env:Path;env:LOCALAPPDATA\Yarn\bin"

결로가 잘 추가되었는지 확인하려면

$env:Path

 

잘 들어갔음

 

VScode에서 다시 json-server 실행 명령어를 입력 해보면 아주 잘 작동한다.

 

🧐궁금점과 부족한 내용

react strictmode

개발자 도구를 쓰다보면 console.log가 두 번 찍히는 것을 자주 목격하는데 상당히 거슬린다.

index.js의 <React.StrictMode>때문인데,

StrictMode는 왜 있는 것일까? 삭제하면 안되나? 궁금했다.

 

안전하지 않은 것들에 대한 경고

리액트에서 언세이프한 코드 감지하기 위해, 개발모드에서 의도적으로 마운팅을 두 번 일으킨다.

즉, 두 번 마운트 일어나더라도 문제 없이 동작해야 버그가 없다는 증거가 되기 때문

만약 double invoke가 실행되었을 때 두개의 결과 값이 서로 다르다면? 해당 코드는 문제가 있다는 뜻이 된다.

 

결론은 index.js에 쓰지 않아도 되고 부분적으로도 사용할 수 있다.

하지만 

개발모드에만 영향을 끼친다니, 잠재적인 이슈를 발견해준다는데 굳이 지우고 사용할 이유는 찾기 어렵다고 생각한다.

 

📋레퍼런스

https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-react-strict-%EB%AA%A8%EB%93%9C%EB%9E%80

https://www.crocus.co.kr/1816

https://zereight.tistory.com/587