[REACT] 프론트와 백엔드의 기본 소통

 

해당 api를 호출하면 아래 같은 결과값을 반환함

백엔드는 이 api를 프론트에게 제공

이때!

백엔드는 url(웹 상에서 서비스를 제공하는 각 서버(컴퓨터)들에 있는 자원(파일)의 위치)만 띡하고 넘기는 것이 아니라

api를 어떻게 사용하는지 api 명세서 정리 (post, put, get 등)

 

프론트는 백엔드가 보낸 api 명세서를 확인한 후 

html, css, js 사용하여 일반적인 사용자가 볼 수 있도록 하는 사용자 인터페이스인 ui 개발

 

 

 

 

1. 예를 들어 원래는 3개의 포켓몬만 있고, 나머지는 유저들이 올리는 것이라고 가정 -> 스펙이 추가되는 웹 화면

그러면 백엔드 개발팀은 포켓몬을 등록할 수 있는 등록 api 개발 [서버측]

그러면 프론트 개발팀은 사용자가 포켓몬을 등록할 수 있도록 백엔드가 개발한 api를 사용하여 등록할 수 있는 화면 개발 [클라이언트측]

 

2. 예를 들어 포켓몬을 가장 많이 등록한 유저를 추첨하는 기능 추가해야한다고 가정

이는 사용자들의 이벤트에 의해서 실행되는 것이 아닌 서버측에서 매일 한 번씩 자동으로 db에 접근하여 정기적으로 수행 (배치 프로그램)

즉, 백엔드는 프론트에서 요청하는 api 뿐만 아니라 서버측의 모든 애플리케이션 개발

 

https://www.youtube.com/watch?v=aXi1H_4ncvs

 

 

*api 명세서에서 활용하는 단어 _ HTTP method

 

get : 데이터를 서버에서 받아올 때 (조회)

post : 데이터 생성 

put : 데이터 수정 및 생성 (업데이트) 할 때 -> request body에 담아옴

 

---

*라우팅

- 백엔드에서 라우팅: 클라이언트의 요청에 대해, 서버가 그 URL을 보고, 적절하게 분기하여 처리하여 주는 것 입니다.
- 프론트엔드에서 라우팅: 어떤 url로 들어왔을때, 특정 페이지를 보여주는 것 입니다. (url에 따라 알맞은 콘텐츠(UI)를 전달해주는 기능)

---

REST API 프론트엔드

1. api 호출하기

// apis/companiesApi.js
import axios from 'axios';

const apiRoot = axios.create({
  baseURL: 'http://localhost:3000/companies',
});

export const getAllCompaniesApi = async () => {
  try {
    const { data } = await apiRoot.get('');
    return data;
  } catch (error) {
    throw error;
  }
};

export const getCompanyApi = async (companyId) => {
  try {
    const { data } = await apiRoot.get(`/${companyId}`);
    return data;
  } catch (error) {
    throw error;
  }
};

export const postCompanyApi = async () => {
  try {
    const { data } = await apiRoot.post('', {
      "회사명": "네이버",
      "국가": "한국",
      "지역": "판교",
      "email": "Naver@gmail.com",
      "password": "naver123",
    },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    return data;
  } catch (error) {
    throw error;
  }
};

export const putCompanyApi = async (companyId) => {
  try {
    const { data } = await apiRoot.put(`/${companyId}`, {
      "회사명": "쿠팡",
      "지역": "서울",
    },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    return data;
  } catch (error) {
    throw error;
  }
};

export const deleteCompanyApi = async (companyId) => {
  try {
    await apiRoot.delete(`/${companyId}`,
    {
      headers: {
        'Content-Type': 'application/json',
      },
    });
  } catch (error) {
    throw error;
  }
};

1. api 데이터 사용하기

export const companyRegionList = selector({
  key: 'companyRegionList',
  get: async () => {
    const data = await getAllCompaniesApi();

    const seoulCompaniesList = data.filter((company) => company.지역 === '서울');
    const busanCompaniesList = data.filter((company) => company.지역 === '부산');

    return {
      seoulCompaniesList,
      busanCompaniesList,
    };
  },
});

---

 

번외) Body

api 단어

*https://velog.io/@keepcalm/API-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-%ED%8C%A8%ED%82%B7-%ED%97%A4%EB%8D%94-%EB%B0%94%EB%94%94-CRUD-URI-path-variable-%EB%AA%85%EC%84%B8%EC%84%9C

API 기본 개념 : 패킷, 헤더, 바디, CRUD, URI, path variable, 명세서

회원가입 api 명세서

*https://seb.oopy.io/26660d97-e4e3-4bac-90e0-7ed483f71311 

API 명세서