📌 프론트엔드-서버 연결 확인

Goal

• 프론트엔드가 잘 작동하도록, WAS 측 코드를 변경합니다.
• WAS가 CORS를 허용해야 합니다.
• 프론트엔드가 올바른 서버를 바라볼 수 있도록 환경변수를 설정할 수 있어야 합니다.

1. GET /api/restaurants/ API 작성

프론트엔드 첫 화면 기준으로, 서버 연결이 잘 되었음을 확인해 줄 수 있도록 API를 작성합시다.

routes 디렉토리 아래에 api/restaurants/index.js 파일을 추가하고, 다음과 같은 내용으로 채워봅시다. 이는 하드코딩으로, 실제로 DB에서 가져오는 것은 아니지만, 최소한 프론트엔드와 서버 사이가 정상적으로 작동한다는 것은 확인할 수 있습니다.

• index.js

위 내용을 추가하고 HTTP 요청을 통해 API를 테스트해 보면, 다음과 같이 응답이 잘 오는 것을 확인할 수 있습니다.

$ curl <http://localhost:3000/api/restaurants>
[{"name":"용다방","menu":[{"name":"애플 시나몬 에이드","price":6500,"duration":5},{"name":"카페모카","price":6000,"duration":5}],"address":"서울시 마포구 양화로 1111","rating":4.5}]%

( issues 1 ) 디렉토리 오류? ⭕

2. CORS 설정

@fastify/cors 모듈의 공식 문서를 통해 모듈을 설치하고, plugins 디렉토리에 cors.js 파일을 만들어, 플러그인을 설정합시다.

'use strict'

const fp = require('fastify-plugin')

module.exports = fp(async function (fastify, opts) {
  fastify.register(require('@fastify/cors'))
})

로컬 환경에서 돌리기 위해