20240213 TIL #35

[1] TIL

  1. Standard 반 강의 내용 정리 : 순수 redux에서 외부 데이터 활용하기

   (1) axios, json-server 설치

yarn add axios
yarn add json-server

 

  (2) db.json 파일 만들기

{
  "todos": [
    {
      "id": "1",
      "title": "스프링 공부하기",
      "contents": "인강 열심히 들어보기!!",
      "isDone": true
    },
    {
      "id": "2",
      "title": "데이트",
      "contents": "홍대입구역에서 3시까지",
      "isDone": true
    },
  ]
}

  root 경로에 만들어줘야 함.

 

 (3) json-server 실행하기  

npx json-server db.json --port [port 번호]

  보통 react-app이 localhost:3000 번대를 사용하기 때문에 json-server는 4000 번대, 5000 번대를 사용하는 것이 좋음.

 

 (4) port의 개념과 통신

   1) Front End

     ex) localhost:3000 => request, 요청을 하는 client side

   2) Back End

     ex) firebase => request에 대한 response, 응답을 하는 server side

   3) DB

     ex) localhost:4000 or firestore

     

     - client side, server side는 상대적인 개념

       : Back End에서 다른 DB나 API에 data를 요청한다면 Back End가 client가 되는 것

     - port 번호가 다른 localhost:3000, localhost:4000은 각각의 컴퓨터가 따로 존재한다고 생각해야 함.

     - Front End와 Back End 사이의 통신 : http protocol (통신 규약)을 따름

     - Back End와 DB 사이의 통신 : Baas

 

 (5) Baas (Backend as a Service, 서비스형 백엔드)

    1) 개발자가 웹 또는 모바일 애플리케이션의 모든 백그라운드 측면을 아웃소싱하여 프런트엔드만 작성하고 유지 관리하는 클라우드

      서비스 모델 

    2) Baas vendor는 사용자 인증, 데이터베이스 관리, 원격 업데이트, 푸시 알림(모바일 앱 전용), 클라우드 스토리지, 호스팅 등 

      서버에서 이루어지는 활동을 위해 미리 작성된 소프트웨어를 제공함.

    3) 백엔드 기능을 구축하지 않고 프런트엔드 애플리케이션 코드 작성에 집중할 수 있기 때문에 모바일, 웹 애플리케이션을 더 빠르게

      개 발할 수 있음.     

   [ref] https://www.cloudflare.com/ko-kr/learning/serverless/glossary/backend-as-a-service-baas/

 

  (6) axios method : put vs patch

    1) put : 덮어쓰기

    2) patch : 수정하기 = update

    3) patch를 쓰자!!!