[ToDo] Play API 연결 #22
Description
요약
- 담당자: @bubblelim
- 마감 기한: 23-08-25
- 할 일 요약: 재생 페이지에 api 연결하기
작업 내용
- DB 연결 세팅
-
/api/contents/:content_id로 GET 요청 보내기 - 가져온 데이터로 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 레포지토리 에서도 확인 가능합니다 - 서버 작업에서 어떤 것들이 변했는지는 [ToDo] Initiate server #19 이슈와 #19/feat/initiate server #20 PR을 참고해주세요