FE API 연동하기

프로젝트를 진행하면서, 처음으로 백엔드와 함께 일해보면서 api 연결을 시도해보았다. REST API를 사용하였고, swagger을 통해 api 명세서를 작성하였다.
간단하게 api란, 식당에서 손님과 주방장을 이어주는 웨이터 같은 역할을 하는 것이다.

🐵 MSW로 mock api 만들기

swagger를 작성하기 전에, 나는 직접 mock api를 만들어 연결해보았다. MSW를 이용하였다.

MSW는 서비스 워커를 이용하여 네트워크 호출을 가로채 api 모킹을 하는 라이브러리이다.

msw의 동작 원리는 다음과 같다:
브라우저가 fetch와 같은 명령어로 작성한 api에 요청을 보내면, service worker가 중간에서 해당 요청을 가로 챈다.
그러면 서버에 요청을 보내지 않고, msw handler와 매칭을 시킨다.
msw handler는 mock response를 service worker에 전달하여 브라우저까지 전달이 된다.

1. msw 다운로드 받기

npm install msw --save-dev

2. 브라우저에 서비스 워커 등록

다음 명령어를 입력하면, 서비스 워커에 필요한 파일이 public 폴더에 저장된다.

npx msw init public/ --save

3. 요청 핸들러 작성

/src/mock/handler.js에 요청이 오면 전달할 모의 응답을 작성하였다.
rest. 뒤에 get이나 post를 작성하여 메서드를 정의할 수 있고, 파라미터로 req, res, ctx가 있다.

export const apiHandlers = [
  rest.get('/api/search', (req, res, ctx) => {
      return res(ctx.status(200), ctx.json(searchResults));
    }),

  rest.post('/api/paperlike', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(paperLike))
  }),
]

나는 미리 json형식으로 가상 응답을 정의한 후 ctx.json() 안에 담았다.

4. worker 설정

src/mock/browser.js에서 worker instance를 생성하고, 요청 핸들러를 정의한다.

import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

5. worker 실행

src/index.html에서 개발할때는 msw를 실행하도록 작성한다.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start()
}

6. 확인

개발자 도구에서 콘솔 창에 다음과 같이 뜨면 연결에 성공한 것이다.

[MSW] Mocking enabled.

비고

간단하게 직접 핸들러를 정의하여, api 연동을 해볼 수 있어 좋은 도구였다. 하지만, req로는 무엇이 와야 하는지 정확히 제한할 수 없었고(내가 방법을 모르는 것일 수도 있음), 핸들러를 직접 FE개발자가 작성해야 하며 BE 개발자는 함께 보기 힘들다는 단점이 있었다.

🍀 SWAGGER로 api 명세서 만들고 연결해보기

그러다가 api 명세를 작성하기 위해서 swagger이란 툴을 사용하기로 하였다.

SWAGGER는 RESTFUL API를 자동 문서화하여주는 서비스이다.

SWAGGER에서 직접 코드로 작성할 수도 있고, 스프링 부트를 이용하여 작성할 수도 있다. 나는 FE이므로.. 그냥 SWAGGER에서 직접 작성하였다.

SWAGGER API 작성법

작성법은 여기를 참고하였다.
SWAGGER를 이용해보자!

API 연동

SWAGGER에는 가상 서버로 API를 연결해 볼 수 있다.

servers:
	- description: test api
      url: https://virtserver.swaggerhub.com/test/api

에디터에 작성한 이 url로 api를 연동할 수 있다.

비고

보통 api 명세는 FE, BE 개발자가 함께 상의하여 작성한다. 그러나 SWAGGER는 유료 버전에서만 2명 이상 함께 작성할 수 있다는 단점이 있다. 그래서 우리 팀은 계정을 함께 쓰고 있다.

⛓️ 실제 API 연동하기

api 명세를 따라 각자 열심히 개발을 하였고, 백엔드 api가 나와서 실제 api와 연동해 볼 수 있었다. 우리는 aws에 백엔드 서버를 올려두었고, 프론트엔드는 S3에 담고 git action으로 CI/CD 구축까지 해놓은 상태라 쉽게 확인할 수 있었다. (이것도 시간이 남으면 포스팅해야지)

실제 api 적용하기

개발할때는 MSW를 사용했다면, 배포 시에는 실제 api를 사용하도록 해야한다.

var api = '';
if (process.env.NODE_ENV === 'development'){
  api = `${import.meta.env.VITE_REACT_APP_LOCAL_SERVER}`
}
else if (process.env.NODE_ENV === 'production'){
api = `${process.env.VITE_REACT_APP_AWS_SERVER}`
}

위와 같이 development와 production 분기를 나눠서 다른 api를 사용하도록 코드를 작성하였다.

환경변수 정의하기

api는 숨겨두는게 좋아서 VITE_REACT_APP_LOCAL_SERVER는 로컬의 .env
파일에 저장해 두었다. .env는 당연히 .gitignore을 통해서 git에 올라가지 못하도록 하였다.

팁이 몇가지 있다. (내가 계속 삽질 했던...)

• VITE_REACT_APP_LOCAL_SERVER="~~" 이렇게 큰따옴표를 사용하면 안된다.
• vite 환경에서 돌릴 땐 환경변수 이름의 시작은 무조건 VITE_로 시작해야한다.
• vite 환경에서는 환경변수를 부를때도 import.meta.env 를 사용해야한다.

production때 사용할 실제 api같은 경우는 현재 git action을 통해 CI/CD를 구축해두었으므로 깃 저장소에 실제 api가 올라가야 한다. 그러면 환경변수를 지정해두는 의미가 없다.
이럴 때는 repository setting -> secrets and variables -> actions에서 환경변수를 지정해두면 해당 레포지토리에서 사용할 수 있다! 이 환경변수는 .github/workflows/main.yaml에서 echo를 통해 넣어주면 된다. 자세한 사항은 여기를 참고해보라

끝

이렇게 처음으로 api를 연동해보면서 많은 것들(git action, 환경변수, msw등)을 부가적으로 배울 수 있었다. 그리고 실제로 잘 적용이 되는 것을 보니까 정말 뿌듯 * 100 ! 개발이 점점 더 재밌어지는 것 같다.