Conversation
- 사용하지 않는 파일, 라이브러리 삭제 - 폴더페이지, 공유페이지 필터 링크 로직 개선 - 자주 쓰이는 상수 constant 파일로 분리 - 공유기능 수정
| return await fetch(`${DOMAIN_URL}${url}`, { | ||
| method: "PUT", | ||
| headers: { | ||
| Authorization: `Bearer ${accessToken}`, | ||
| "Content-Type": "application/json; charset=utf-8", | ||
| }, | ||
| body: JSON.stringify({ favorite: !link.favorite }), | ||
| }).then(() => mutate("/links")); | ||
| } |
There was a problem hiding this comment.
📌 즐겨찾기 기능 구현 중에 api 요청시 다음과 같이 violate 에러가 발생하는데 원인을 잘 모르겠습니다ㅠㅠ
링크데이터는 이미 폴더ID를 기반으로 생성되는데 folderId가 null value로 확인되는 이유를 잘 모르겠습니다,,
There was a problem hiding this comment.
헐~ 저두 똑같은 문제가 생겨요. 스웨거에서 체크해봐도 그렇더라구요 ㅠㅠ..
There was a problem hiding this comment.
안녕하세요 소현님 ! 현재 코드 기준으로 해당 에러는 제가 확인할 수가 없는데 제가 방법을 잘못하고 있는걸까요?
새 폴더를 만들고 즐겨찾기/ 즐겨찾기 해제를 눌러보았습니다.
| return await fetch(`${DOMAIN_URL}${url}`, { | ||
| method: "PUT", | ||
| headers: { | ||
| Authorization: `Bearer ${accessToken}`, | ||
| "Content-Type": "application/json; charset=utf-8", | ||
| }, | ||
| body: JSON.stringify({ favorite: !link.favorite }), | ||
| }).then(() => mutate("/links")); | ||
| } |
There was a problem hiding this comment.
헐~ 저두 똑같은 문제가 생겨요. 스웨거에서 체크해봐도 그렇더라구요 ㅠㅠ..
| @@ -24,7 +24,7 @@ export default function AddFolders({ onClose }: AddFoldersProps) { | |||
| "Content-Type": "application/json; charset=utf-8", | |||
| }, | |||
| body: JSON.stringify({ name }), | |||
| }).then((res) => res.json()); | |||
| }).then(() => mutate("/folders")); | |||
There was a problem hiding this comment.
오~ 저는 promise chaining 이 익숙지 않아서 자꾸 if문 써서 동기적으로 코드 짜는데 한수 배워갑니당 --__
@hongjw030 |
|
위클리미션 진행하시느라 수고 많으셨습니다 소현님. =) |
| @@ -1,2 +1,4 @@ | |||
| export const TEST_USER_ID = 1; | |||
| export const DEFAULT = "전체"; | |||
There was a problem hiding this comment.
DEFAULT라는 이름보다는 좀 더 목적성 있는 변수명을 짓는게 어떨까요?
src/common/constants.ts에 있는 내용은 흔하게 쓰일 공통 상수로 보입니다.
사실, DEFAULT처럼 흔하게 쓰일 값은 지역적으로 두는 것이 좋을 것 같은데
소현님의 프로젝트를 살펴보니 총 4 곳에서 사용되고 있군요 !
그렇다면 해당 기본값을 명칭하는 자원을 변수명에 넣어서 FOLDER_FILTER_DEFAULT_VALUE 와 같이 짓는게 어떨까요?
만약, 폴더처럼 link 자원에서 DEFAULT 값이 필요할 수도 있으니까요. 😊
| export async function signupUser(userData: SubmitFormData) { | ||
| const res = await fetch(`${DOMAIN_URL}/auth/sign-up`, { | ||
| method: "POST", | ||
| headers, | ||
| headers: headers, |
There was a problem hiding this comment.
| headers: headers, | |
| headers, |
간단한거지만 위와 같이 표현할 수도 있어요 !
| export const DOMAIN_URL = "https://bootcamp-api.codeit.kr/api/linkbrary/v1"; | ||
| export const headers = { "Content-Type": "application/json; charset=utf-8" }; |
There was a problem hiding this comment.
hedaers는 상수가 아니라 config의 성격과 잘 맞을 것 같아요.
headers는 상수보다는 config의 성격과 잘 맞을 것 같아요.
common에 fetch.config.ts와 같은 값을 두고 사용하시는 건 어떨까요?
만약, axios를 사용하신다면 instance를 생성해서 사용하는 것도 하나의 방법일 것 같아요.
headers, url, path를 초기에 한 번만 설장할 수 있으면 어떨까요? (심화 주제)
그렇다면 headers를 매번 불러오지 않도록 하는건 어떨까요?
다음은 GPT에게 물어본 예시 코드입니다:
// 공통 설정을 반영한 fetch 함수를 정의
const customFetch = (baseURL, headers = {}) => {
// fetch를 wrapping하는 함수를 반환
return (endpoint, options = {}) => {
// 공통 헤더와 옵션을 병합
const mergedOptions = {
...options,
headers: {
...headers,
...options.headers,
},
};
// 실제 fetch 호출
return fetch(`${baseURL}${endpoint}`, mergedOptions)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
});
};
};
// 사용 예시
// customFetch 함수를 사용하여 공통 설정이 적용된 새로운 fetch 함수 생성
const myFetch = customFetch('https://api.mywebsite.com', {
'Content-Type': 'application/json',
// 기타 필요한 공통 헤더 추가
});
// myFetch 사용
myFetch('/users', {
method: 'GET',
}).then(data => {
console.log(data);
}).catch(error => {
console.error('There was an error!', error);
});물론 axios를 활용한다면 위와 같은 세팅은 필요 없겠지만, 한 번의 세팅으로 fetch를 재사용할 수 있다면 유지보수 측면에서 수월할 수 있어요. 한 번 즈음 생각해보면 소현님에게도 도움이 될 수 있을 것 같아요 =)
| interface ToggleButtonProps { | ||
| toggle: boolean; | ||
| onIcon: ReactNode; | ||
| offIcon: ReactNode; | ||
| onToggle: (e: MouseEvent<HTMLDivElement>) => Promise<void>; | ||
| } |
| @@ -1,19 +1,24 @@ | |||
| import Image from "next/image"; | |||
| import { useState } from "react"; | |||
| import { MouseEvent, useEffect, useState } from "react"; | |||
| import { mutate } from "swr"; | |||
| const result = await fetcher(`/links/${link.id}`); | ||
| console.log(result); // error | ||
| } catch (error) { | ||
| console.log(error); |
There was a problem hiding this comment.
console은 생각보다 다양한 메서드가 있어요.
| console.log(error); | |
| console.error(error); |
console.log 말고도 console.error, console.dir, console.count 등 console은 개발자들이 모르는 많은 메써드들이 있어요 !
이번은 실수일 수도 있겠지만 디버깅 할 때 유용하므로 이번 기회에 console에 대해서 mdn 문서를 한 번 보시는 것도 도움이 될 것 같아요. =)
mdn console
| @@ -0,0 +1,3 @@ | |||
| export default function FilledStarIcon() { | |||
| return <img src="/assets/filled_star.svg" alt="favorite" />; | |||
There was a problem hiding this comment.
alt를 좀 더 구체적으로 작성해볼까요?
alt를 꼼꼼하게 작성했군요 ! 좋은 습관입니다.
다만, alt는 스크린 리더 사용자에 대한 보조 텍스트가 될 수 있으므로 "어떠한 이미지 인지"를 작성해주는 것이 좋아요 !
alt의 목적
- 인터넷 연결이 끊겼을 때 대체되는 이미지
- 스크린 리더 사용자를 위한 대체 텍스트
- 이미지를 볼 수 없는 환경에서 이미지를 대체하기 위한 텍스트
등 목적을 알게 된다면 alt를 어떻게 사용하시면 될지 알 수 있을 것 같아요.
다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:
tl;dr
- Write Good Alt Text
- Add alt text all non-decorative images.
- Keep it short and descriptive, like a tweet.
- Don’t include “image of” or “photo of”.
- Leave alt text blank if the image is purely decorative
- It's not necessary to add text in the Title field.
|
수고 많으셨습니다 소현님 ! 👍👍👍 |
요구사항
기본
심화
주요 변경사항
멘토에게