|
31 | 31 | 해당 Repository의 해답을 자신의 저작물에 추가할 수 있지만 **반드시** 본 Repository의 |
32 | 32 | 주소 `https://github.com/codeisneverodd/programmers-coding-test` |
33 | 33 | 를 명시하여야합니다. |
| 34 | + |
| 35 | +## 📃 Types and Example |
| 36 | +저와 같이 우리 레포의 데이터를 활용하고 싶으신 분들을 위해 타입과 간단한 예제를 남겨놓을게요! |
| 37 | + |
| 38 | +### Fetch 예제 |
| 39 | +axios나 tanstack query 등 라이브러리 사용에 익숙하지 않거나 TypeScript에 익숙하지 않은 분들을 위한 간단한 예제에요. |
| 40 | +```js |
| 41 | +const DATA_ENDPOINT = |
| 42 | + "https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main-v2/data"; |
| 43 | + |
| 44 | +export const getProbs = async () => { |
| 45 | + const res = await fetch(`${DATA_ENDPOINT}/problems.json`); |
| 46 | + return res.json(); |
| 47 | +}; |
| 48 | + |
| 49 | +export const getSols = async () => { |
| 50 | + const res = await fetch(`${DATA_ENDPOINT}/solutions.json`); |
| 51 | + return res.json(); |
| 52 | +}; |
| 53 | + |
| 54 | +``` |
| 55 | + |
| 56 | + |
| 57 | +### TypeScript & Tanstack Query(React Query) 예제 |
| 58 | +우리 레포에서 오는 값을 사용할 수 있는 custom hook 인 `useRepo`를 만드는 예제에요. |
| 59 | + |
| 60 | +```ts |
| 61 | +import { useQuery } from "@tanstack/react-query"; |
| 62 | +import axios from "axios"; |
| 63 | + |
| 64 | +const DATA_ENDPOINT = |
| 65 | + "https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main-v2/data"; |
| 66 | + |
| 67 | +export default function useRepo() { |
| 68 | + const probsQuery = useQuery({ |
| 69 | + queryKey: ["repo", "sols"], |
| 70 | + queryFn: async () => { |
| 71 | + const res = await axios.get<Sol[]>(`${DATA_ENDPOINT}/problems.json`); |
| 72 | + return res.data; |
| 73 | + } |
| 74 | + }); |
| 75 | + const solsQuery = useQuery({ |
| 76 | + queryKey: ["repo", "probs"], |
| 77 | + queryFn: async () => { |
| 78 | + const res = await axios.get<Prob[]>(`${DATA_ENDPOINT}/solutions.json`); |
| 79 | + return res.data; |
| 80 | + } |
| 81 | + }); |
| 82 | + |
| 83 | + return { probsQuery, solsQuery }; |
| 84 | +} |
| 85 | + |
| 86 | +export type Prob = { |
| 87 | + id: string; |
| 88 | + title: string; |
| 89 | + solvedCount: number; |
| 90 | +}; |
| 91 | + |
| 92 | +export type Sol = { |
| 93 | + id: string; |
| 94 | + author: string; |
| 95 | + code: string; |
| 96 | + probId: string; |
| 97 | + createdAt: ReturnType<typeof Date.now>; |
| 98 | + lang: Lang; |
| 99 | +}; |
| 100 | + |
| 101 | +export type Lang = "JavaScript" | "Python"; |
| 102 | + |
| 103 | +``` |
0 commit comments