[ToDo] Dashboard API 연결

[designDefined]

요약

• 담당자: @nuagenic
• 마감 기한: 23-08-25
• 할 일 요약: 대시보드에 api 연결하기

작업 내용

• [x] DB 연결 세팅
• [ ] /api/curations로 GET 요청 보내기
• [x] 가져온 데이터로 map UI 그대로 구현하기

주의 사항

DB 연결 세팅 방법

현재 DB 관련 코드는 다 작성되어 있지만, 로컬 환경변수 파일로 DB 연결에 필요한 계정 정보를 관리해야합니다. 프로젝트 루트 디렉토리에 .env.local 파일을 생성하고, @designDefined 가 DM으로 전달한 내용을 입력해주세요.

API 연결 방법

Next.js의 서버 컴포넌트("use client"가 붙지 않은 컴포넌트)에서는 async / await 문법을 컴포넌트 단위에 적용하여 비동기 처리를 쉽게 하는 로직을 제공합니다. 그러나 이보다 일반적인 방법으로 먼저 서버 연결을 구현해보겠습니다. 모둔 리액트 프로젝트에서 공통으로 사용할 수 있는 방법입니다.

• (Next.js에서만) 클라이언트 컴포넌트로 전환합니다
• 서버에서 가져온 데이터를 저장할 state를 생성합니다(초기 값은 적당히 비어있습니다)
• 컴포넌트가 마운트될 때 서버에서 값을 가져옵니다
  • fetch와 useEffect를 적절히 사용합니다
• 가져온 값을 state에 저장하여 컴포넌트를 리렌더시킵니다

이 방법을 사용할 경우 서버에서 데이터를 가져오기 이전(즉 state가 비어있을 때)에 보여줄 화면도 처리해주어야 하지만, 지금은 그냥 비어있게끔 해주시면 됩니다.

참고할 것들

• API 엔드포인트는 프로젝트의 /docs/api.md 문서에 정리해놓았습니다! github 레포지토리 에서도 확인 가능합니다
• 서버 작업에서 어떤 것들이 변했는지는 #19 이슈와 #20 PR을 참고해주세요

참고 / 출처