[남기연] sprint10 #320
[남기연] sprint10 #320
Conversation
There was a problem hiding this comment.
아마 null placeholder의 경우, 대체적으로 이미지만 아이콘 또는 svg 이미지를 활용하고
그 하위에 달리는 텍스트의 경우, 우리가 코드로 구현하는 상황이 좀 더 많을거에요.
보통 emptyState라는 콤포넌트를 하나 만들어두고, 거기에 보여질 이미지와 텍스트를 동적으로 수정할 수 있는 공통 UI 콤포넌트를 만ㄷ르어 관리하기도 한답니다.
이미지를 그대로 가져와 쓰는 방법 말구, 이런 데이터가 없음을 표현하기 위한 콤포넌트를 한번 작업해보면 어떨까요?
| if (!response.ok) { | ||
| throw new Error("articles를 생성하는데 실패했습니다."); | ||
| } |
There was a problem hiding this comment.
HTTP status code 400이상의 응답에 대한 에러 핸들링을 여기서 해주는데요
보통 이 경우라면 서버쪽에서 왜 에러로 응답을 제공했는지를 response body에 데이터로 전달을 해줄거에요.
그리고 이 정보를 활용해야 디버깅이 수월할텐데요, 지금 전반적으로 꾸준히 이 정보가 유실되는듯 싶습니다.
따라서 서버에서 반환한 에러 객체를 로깅을 해볼 수 있으면 좋겠어요!
| const result = await response.json(); | ||
| console.log("Success:", result); |
There was a problem hiding this comment.
요청 성공했는데 아무런 데이터를 반환해주지 않고 있어요.
사실 데이터가 생성이 되었다면, 해당 데이터를 활용해 UI update를 함께 진행하는 경우가 많은데요,
이를 위한 트리거가 서버에서 제공해준 생성된 엔티티를 반환하거나, true / false를 반환해 성공적으로 생성이 되었는지에 대한 여부정도는 반환해주어야 이 함수를 활용하는 개발자 입장에서 사용하기가 수월하답니다.
하지만, 이 함수는 그런 반환이 없이 오류가 났는지, 성공적이였는지를 판단하기 위해서는 무조건 개발자도구를 열어야만 할거에요.
There was a problem hiding this comment.
우리 멘토링때 이야기했던 내용중,
프로그램이란 입력값을 우리가 작성한 코드로 실행해 원하는 결과물을 반환하는 소프트웨어라고 이야기 했었잖아요.
이 관점에서, 우리가 작업한 이 함수도 어떤 범위에서 보면 하나의 완성된 프로그램입니다.
입력값은 formadata이고, 우리가 작성한 알고리즘을 실행시켜 원하는 결과물을 반환해주어야 하는데,
이 관점에서 원하는 결과물이 무엇인지도 판단하기가 어렵고, 그 결과물이 어떤 형태로 반환되어야 하는지에 대한 고려가 되어있지 않아보여요.
이 부분 한번 염두에 두고 리팩토링 해볼까요?
| const response = await fetch(`${baseURL}/articles/${articleId}/comments`, { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify({ | ||
| comment, | ||
| }), |
There was a problem hiding this comment.
특정 요소들은 formdata로 주고받고, 어떤 요소들은 application json으로 주고받는데 서버 요구사항을 따른거겠죠?
| try { | ||
| const response = await fetch(url); | ||
| if (!response.ok) { | ||
| throw new Error(`Failed to fetch, ${response.statusText}`); |
There was a problem hiding this comment.
statustext는 아마 불충분할거에요 ㅎㅎ
| if (!article) { | ||
| return { notFound: true }; | ||
| } |
There was a problem hiding this comment.
오 너무 좋습니다. 데이터 없는경우 notfound로 서버사이드 렌더 처리해주는거
| console.error("Failed to fetch article:", error); | ||
| return { notFound: true }; |
There was a problem hiding this comment.
다만 에러 발생시 notfound보단 500 page를 보여주는게 더 적합한 에러핸들링 방식으로 보여요
https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#error-handling
|
|
||
| export default function AllPosts({ initialAllPosts }: AllPostProps) { | ||
| const [postList, setPostList] = useState<Post[]>(initialAllPosts); | ||
| const [posts, setPosts] = useState<Post[]>(initialAllPosts); |
There was a problem hiding this comment.
initial post가 뭐 에러가 발생하거나, 잘못된 값이 들어오는 경우가 있을수도 있을텐데요,
이에 대해 대비하는 fallback값을 추가해주면 어떨까요?
| const filteredPosts = posts.filter((post) => | ||
| post.content!.includes(searchValue) | ||
| ); |
| onChange={setSearchValue} | ||
| onChange={(e) => setSearchValue(e.target.value)} | ||
| onEnter={() => {}} | ||
| withSearch={true} |
There was a problem hiding this comment.
true 값을 지닌 attribute의 경우, attribute={true} 설정 없이 attribute 이름만 할당해주어도 동작합니다!
2 participants
요구사항
기본
심화
멘토에게