κ²μ μ¬μ΄νΈμ μ½λλ μ΄ μ μ₯μμ 곡κ°λμ΄ μμ΄μ
- π± λ€μν μ¬λμ νλ‘κ·Έλλ¨Έμ€μ μ½λ©ν μ€νΈ μ λ΅μ΄ μ¬λΌμμμ΄μ!
- β νλ‘κ·Έλλ¨Έμ€λ μ λ΅μ ν΅κ³Όμν€λ©΄ λ€λ₯Έ μ¬λλ€μ νμ΄λ₯Ό λ³Ό μ μμ΄μ!
- π κ²μ μ¬μ΄νΈ λ₯Ό ν΅ν΄ κ°νΈνκ² κ²μνκ³ νμ΄λ₯Ό μ¬λ¦΄ μ μμ΄μ!
- β λμμ΄ λμ ¨λ€λ©΄ μ€λ₯Έμͺ½ μλ¨ β μ βοΈ Starλ₯Ό ν΄λ¦ν΄ μ΄ νλ‘μ νΈλ₯Ό μμν΄μ£ΌμΈμ!
- μ½λ©ν μ€νΈ 곡λΆμ μλλ μμΌλ©°, λ€μν μ¬λλ€μ νμ΄λ₯Ό 보며 λ§μ λ¬Έμ λ₯Ό νΈλ κ²μ΄ μ΅κ³ μ λ°©λ²μ λλ€.
- λ¬Έμ μ λ‘λ λ°©μ κ°μ κ³Ό μ λ΅ κ΄λ¦¬λ₯Ό μν΄ κΈ°μ‘΄ README λ°©μμμ π κ²μ μ¬μ΄νΈμμ κ²μνλ λ°©μμΌλ‘ λ°λμμ΄μ!
- λ¬Έμ λͺ©λ‘κ³Ό μ λ΅μ μ΄ νμΌλ€λ‘ κ΄λ¦¬λκ³ μμ΄μ. GitHub APIλ₯Ό μ΄μ©ν΄μ ν΄λΉ νμΌμ μμ λ‘κ² μ¬μ©ν΄λ μ’μμ! λ¨, μ½λλ₯Ό 보μ¬μ£Όλ κ²½μ° λ°λμ μλ μ μκΆμ λ°λΌμ£ΌμΈμ.
ν΄λΉ Repositoryμ ν΄λ΅μ μμ μ μ μλ¬Όμ μΆκ°ν μ μμ§λ§ λ°λμ λ³Έ Repositoryμ
μ£Όμ https://github.com/codeisneverodd/programmers-coding-test
λ₯Ό λͺ
μνμ¬μΌν©λλ€.
μ μ κ°μ΄ μ°λ¦¬ λ ν¬μ λ°μ΄ν°λ₯Ό νμ©νκ³ μΆμΌμ λΆλ€μ μν΄ νμ κ³Ό κ°λ¨ν μμ λ₯Ό λ¨κ²¨λμκ²μ!
axiosλ tanstack query λ± λΌμ΄λΈλ¬λ¦¬ μ¬μ©μ μ΅μνμ§ μκ±°λ TypeScriptμ μ΅μνμ§ μμ λΆλ€μ μν κ°λ¨ν μμ μμ.
const DATA_ENDPOINT =
"https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main-v2/data";
export const getProbs = async () => {
const res = await fetch(`${DATA_ENDPOINT}/problems.json`);
return res.json();
};
export const getSols = async () => {
const res = await fetch(`${DATA_ENDPOINT}/solutions.json`);
return res.json();
};
μ°λ¦¬ λ ν¬μμ μ€λ κ°μ μ¬μ©ν μ μλ custom hook μΈ useRepo
λ₯Ό λ§λλ μμ μμ.
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
const DATA_ENDPOINT =
"https://raw.githubusercontent.com/codeisneverodd/programmers-coding-test/main-v2/data";
export default function useRepo() {
const probsQuery = useQuery({
queryKey: ["repo", "sols"],
queryFn: async () => {
const res = await axios.get<Sol[]>(`${DATA_ENDPOINT}/problems.json`);
return res.data;
}
});
const solsQuery = useQuery({
queryKey: ["repo", "probs"],
queryFn: async () => {
const res = await axios.get<Prob[]>(`${DATA_ENDPOINT}/solutions.json`);
return res.data;
}
});
return { probsQuery, solsQuery };
}
export type Prob = {
id: string;
title: string;
solvedCount: number;
};
export type Sol = {
id: string;
author: string;
code: string;
probId: string;
createdAt: ReturnType<typeof Date.now>;
lang: Lang;
};
export type Lang = "JavaScript" | "Python";