Closed un0211 closed 2 months ago
λ°©κΈμ μ λμλμ΄ λ§μνμ ¨λ κ²μ²λΌ, API μλ¬λ¬μ λ λ©μΈμ§ 보μ¬μ£Όλ λ°©μλ λ μ΄μΌκΈ°ν΄μΌ νλλ°, μ΄ μ΄μμμ ν©μλ€~~
λͺ¨λ API 곡ν΅μΌ μλ μλλ°, PUTμ κ²½μ° try catchλ‘ μλ¬ νΈλ€λ§ νμλ, μ ν νΈλ€λ§λμ§ μκ³ μλ¬ μ°½μ΄ λΉλλ€! react queryμ onErrorμμ νΈλ€λ§ ν΄μ£Όλ©΄ μ λμ΄μ useDeleteData, useUpdate... κ°μ ν λ€μ λ§λ€μλλ μ λμ΅λλ€. μμ§ κ·Έλ₯ try catch μΈ κ² μ’ μμ΄μ μΆνμ μμλ³΄κ³ μμ ν΄μΌ ν κ² κ°μμ1
λͺ¨λ API 곡ν΅μΌ μλ μλλ°, PUTμ κ²½μ° try catchλ‘ μλ¬ νΈλ€λ§ νμλ, μ ν νΈλ€λ§λμ§ μκ³ μλ¬ μ°½μ΄ λΉλλ€! react queryμ onErrorμμ νΈλ€λ§ ν΄μ£Όλ©΄ μ λμ΄μ useDeleteData, useUpdate... κ°μ ν λ€μ λ§λ€μλλ μ λμ΅λλ€. μμ§ κ·Έλ₯ try catch μΈ κ² μ’ μμ΄μ μΆνμ μμλ³΄κ³ μμ ν΄μΌ ν κ² κ°μμ1
νμλ νΉμ Tanstack Queryλ‘ κ΅¬ννμ 건κ°μ??
μ κ° κ΅¬νν hookλ€μ Tanstack Queryλ‘ κ΅¬ννκ³ , μλλ€κ³ νλ κ²λ€μ κ·Έλ₯ putService.ts μ μλ κ±Έ λ°λ‘ μ°λ κ²½μ°μ λλ€! κ·Έλ₯ try catch μ¨λ μ λλμ?!!
try {
const { id } = await postNewDashboard(value);
if (isPublic) {
addShareAccount(id);
}
queryClient.invalidateQueries({ queryKey: ['sideDashboards'] });
queryClient.invalidateQueries({ queryKey: ['dashboards'] });
openNotificationModal({ text: 'μλ‘μ΄ λμ보λκ° μμ±λμμ΅λλ€!' });
router.push(`/dashboard/${id}`);
} catch (error) {
if (error instanceof AxiosError) {
setErrorMessage(error.response?.data.message || 'λμ보λ μμ±μ μ€ν¨νμμ΅λλ€');
} else {
setErrorMessage('λμ보λ μμ±μ μ€ν¨νμμ΅λλ€');
}
}
};
μ¬κΈ°μ addShareAccount μμ putμ΄ μλλ° κ·Έ putμ΄ μ€λ₯λ¬μ λ μλ¬νΈλ€λ§ μλμ΅λλ€!
νμλ console.logλ‘ error κ°μ²΄ μΆλ ₯ν΄λ μμ μλμ€λμ??
μ λ μΌλ¨ λκΈμμ μμ μλ¬ μ²λ¦¬λ μ μμ μΌλ‘ λμνλ κ±° νμΈνμ΅λλ€!
try {
await postComment(commentData);
queryClient.invalidateQueries({ queryKey: ['comments'] });
setNewComment('');
} catch (error) {
console.error('λκΈ μΆκ° μ€ μλ¬ λ°μ:', error);
setNewComment('μλ¬ λ°μ');
}
κ·Έλ° μ²λ¦¬λ λλμ§ νμΈ μν΄λ΄€λλ°, μ°μ νμ΄μ§μ μμ² ν° μλ¬κ° λ μμ!!
develop λΈλμΉμμ νμΈνλ©΄ λ κΉμ?! μ λ λ€μ ν¨μΉλ°μμ νμΈν κ²μ!!
μ΄κ±΄ μ κ° μμ μ€μ κΆν μλ put μμ²μ ν΄μ κ·Έλ°λ°, μ€μ μμλ μ κ° μ§κΈ λ°λ‘ λͺ»μ°Ύκ² κ³ , μ κ° λ§λ€μ΄λμ useDelete/useUpdate ... ν μ μ¬μ©νμ§ μκ³ try catchλ‘ νκ²λ λ°κΏλ³΄μλ©΄ λΉμ·ν μλ¬ λ°κ²¬νμ€ μ μμ κ² κ°μμ..! μ κ° λμ€μ μλ¬ μν© μλ λΈλμΉ λ§λ€μ΄λκΉμ...?
μμ½
μ΄κ±΄ μ κ° μμ μ€μ κΆν μλ put μμ²μ ν΄μ κ·Έλ°λ°, μ€μ μμλ μ κ° μ§κΈ λ°λ‘ λͺ»μ°Ύκ² κ³ , μ κ° λ§λ€μ΄λμ useDelete/useUpdate ... ν μ μ¬μ©νμ§ μκ³ try catchλ‘ νκ²λ λ°κΏλ³΄μλ©΄ λΉμ·ν μλ¬ λ°κ²¬νμ€ μ μμ κ² κ°μμ..! μ κ° λμ€μ μλ¬ μν© μλ λΈλμΉ λ§λ€μ΄λκΉμ...?
μμ½
- tanstack queryμμ useQuery, useMutationμ onErrorλ‘ μ²λ¦¬νμ§ μλ μ΄μ μλ¬ νΈλ€λ§μ΄ μ λλ‘ μλλ κ² κ°λ€. (μλ¬νλ©΄ λΈ)
- μ§κΈ λΉμ₯ μλ¬ μν©μ μμ§λ§, useMutationν μ¬μ©νλ κ²λ€μ κ·Έλ₯ putService/deleteService(/μλ§λ post&getService)μ ν¨μλ‘ μμ²νλλ‘ λ°κΎΈλ©΄ try catchλ‘ μλ¬ νΈλ€λ§ ν΄λ΄€μ μλλ μν© λ§λ€ μ μμ κ² κ°λ€.
λ΅ μ’μμ!! μλ¬ μλ λΈλμΉ μ¬λ €μ£Όμλ©΄ μ λ κ°μ΄ νμΈνκ² μ΅λλ€! μ΄λ° νλ―Έν μκ° λ μκΈ°ν΄λ³΄μ£ γ γ !!
λμ보λ μλ¦Ό κΈ°λ₯μ΄ λΉλ‘κ·ΈμΈ μνμ¬λ κ²μ λμν©λλ€
[x] μ»¬λΌ μ΄λ¦ λ³κ²½ μνμ λ μ μ₯ λ²νΌ λΉνμ±ν
[x] μΉ΄λ μ½λ©νΈλ λ³κ²½ μμ λ λΉνμ±ν or API μ보λ΄κ² μ²λ¦¬ (μ΅λν λΆνμν API μ보λ΄λ κ² μ’μ κ² κ°μμμ)
[ ] μ½λ©νΈ μ λ ₯κ° μμλλ μμ² λ³΄λ -> κ²°κ³Ό μλ¬
π λ²κ·Έ μ€λͺ
API κ΄λ ¨ν΄μ μμ ν΄μΌν κΈ°λ₯λ€μ λͺ¨μ λκ³ ν΄κ²°ν©μλ€!
API κΆν κ΄λ ¨ μμ
λͺ μλμ΄ μμλμ§λ λͺ¨λ₯΄μ§λ§, λμ보λ μμ μ μλ λͺ¨λ μμ μ λμ보λ μμ±μλ§ ν μ μμ΅λλ€. (λμ보λ μμ , λ©€λ² μμ , μ΄λλ΄μ μ‘°ν, μ΄λ) μμ κ΄λ¦¬/μ΄λ λ²νΌ μ체λ₯Ό ownerμΌλλ§ λμ°λ κ² μ’κ² μ΅λλ€.
μν©
νμκ°μ λλ€μ 10μ μ ν
μλ²μμ λλ€μ 10μ μ νμ΄ κ±Έλ € μμ΅λλ€. μ°λ¦¬κ° λ΄λΆμ μΌλ‘ 미리 10μ μ΄λ΄μΈμ§ κ²μ¬νλ€λ©΄ μλ²μ μμ²νλ λΉμ©μ μλ μ μμ΅λλ€.
μν©
μ½λ©νΈ
μ΄μΈμλ κΆν κ΄λ ¨ λ¬Έμ λ°κ²¬νλ©΄ λ€λ€ λκΈ λΆνλλ €μ~~
API μλ¬ λ©μμ§ λ³΄μ¬μ£Όλ 문ꡬ/λμμΈ κ°μ