데이터 프로바이더 코드 짜기

[SeojinSeojin]

⛓ Related Issues

• close 베이스 데이터 프로바이더 코드 짜기 #18

📋 작업 내용

• 데이터 프로바이더 인터페이스 만들기
• 팀 이슈 페이지에서 이 api를 호출하는 예시 코드 짜기

📌 PR Point

코드 설명

• api 디렉터리 : API 서비스의 형태(어떤 함수들이 어떤 리턴값들을 주는지)를 정의하고, API를 제공하는 방법을 정의하는 곳
  • index.ts : 가장 바깥에 있는 친구. 어떤 api들을 제공할지, 어떤 방법으로 제공할 지 정의. 결국 가장 바깥에서 쓰이는 변수는 api
  • ____.ts : ___기능과 관련된 로직들을 모아둔 곳. 어떤 함수를 제공할 것이며, 그 함수는 매개변수로 무슨 값을 받아서 리턴값으로 무슨 값을 줄 지 정하는 곳.
• mock 디렉터리 : 목 API 로직이 구현되는 곳
  • __.data.ts : 더미데이터들이 저장되는 곳
  • __.ts : 목 API의 구현체
• remote 디렉터리 : 찐 서버 통신 로직이 구현되는 곳 (아직 없음)

앞으로 이 친구를 사용할 절차

• 일단 지금은 팀원소개서 관련 기능을 하므로 teamService에다가 작업한다
• getIssueInfo를 작업한 것과 비슷하게 작업한다.
  1. api/team.ts에 해당 api의 이름, 매개변수의 타입, 리턴값의 타입만을 정의한다.
  2. 1을 하려면 리턴값의 타입을 적어야 할텐데 이는 api/types/team.ts에 있는 친구를 갖다 쓰거나 새로 만든다
  3. 목 api를 만드는 경우 mock/team.ts에 가서 방금 만든 친구를 getIssueInfo와 비슷하게 만들어준다. 제공하는 데이터는 짧으면 바로 써주고 길면 team.data.ts에 써준다.
  4. 찐 서버 통신 api를 만드는 경우 remote 디렉터리의 team.ts에 axios를 이용한 통신 로직을 짜준다. teamDataRemote()라는 함수를 만들 텐데 TeamService를 리턴값으로 갖도록 한다.

컴포넌트에서 갖다 쓰는 법

import { api } from '@api/index';
import { IssueData } from '@api/types/team';

function TeamIssue() {
	    useEffect(() => {
	      if (!teamID || !issueID) return;
	      (async () => {
	        setIsValidating(true);
	        const data = await api.teamService.getIssueInfo(teamID, issueID);
	        setIssue(data);
	        setIsValidating(false);
	      })();
	    }, [teamID, issueID]);
}

🔬 Reference

• https://github.com/we-sopt-together-twitch/frontend
• 건영님께 고개를 조아립니다.. 감사합니다...

[SeojinSeojin]

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~

[NamJwong]

넘 고생 많았고 덕분에 편하게 코드 짜놓을 수 있을 것 같아!!!! 이따 밤에 더 자세히 코드 보고 질문할거 있음 할게!

[100Gyeon]

데이터 프로바이더 이거 신세계다.. 좋은 코드 넘 고마워 서진아 🥰

[Hyoin-Kim]

코드 자세하게 읽어보고싶은데 나중에 밥먹으면서라도 시간 남을때 읽어볼게 고생많았어ㅜㅜ