Open
Conversation
Nohgh
reviewed
May 8, 2025
Comment on lines
+2
to
+3
| import { CommentsAPI } from "../../../5_entities/comment/model/api" | ||
| import { Comment } from "../../../5_entities/comment/model/type" |
Nohgh
reviewed
May 8, 2025
| } | ||
|
|
||
| export const usePostFilterStore = create<PostFilterState>()( | ||
| persist( |
Member
There was a problem hiding this comment.
오 .. persist 사용해서 전역상태 관리하셨군요
너무 좋은것 같습니다!!
Nohgh
reviewed
May 8, 2025
Comment on lines
+5
to
+100
| export const postAPI = { | ||
| getPosts: async (params: { limit: number; skip: number }): Promise<PostListResponse> => { | ||
| const response = await fetch(`/api/posts?limit=${params.limit}&skip=${params.skip}`) | ||
| const data = await response.json() | ||
| return data | ||
| }, | ||
|
|
||
| // 게시물 추가 | ||
| addPost: async (post: NewPost): Promise<Post> => { | ||
| const response = await fetch("/api/posts/add", { | ||
| method: "POST", | ||
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify(post), | ||
| }) | ||
| const data = await response.json() | ||
| console.log(data) | ||
| return data | ||
| }, | ||
|
|
||
| // 게시물 검색 | ||
| searchPosts: async (searchQuery: string): Promise<PostListResponse> => { | ||
| const response = await fetch(`/api/posts/search?q=${searchQuery}`) | ||
| const data = await response.json() | ||
| return data | ||
| }, | ||
|
|
||
| // 게시물 태그 검색 | ||
| searchPostsByTag: async (tag: string): Promise<PostListResponse> => { | ||
| const response = await fetch(`/api/posts/search?tag=${tag}`) | ||
| const data = await response.json() | ||
| return data | ||
| }, | ||
|
|
||
| // 게시물 업데이트 | ||
| updatePost: async (post: Post): Promise<Post> => { | ||
| const response = await fetch(`/api/posts/${post.id}`, { | ||
| method: "PUT", | ||
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify(post), | ||
| }) | ||
| const data = await response.json() | ||
| return data | ||
| }, | ||
|
|
||
| // 게시물 삭제 | ||
| deletePost: async (id: number): Promise<void> => { | ||
| await fetch(`/api/posts/${id}`, { | ||
| method: "DELETE", | ||
| }) | ||
| }, | ||
|
|
||
| getPostsWithAuthors: async ({ limit, skip }: { limit: number; skip: number }) => { | ||
| // 게시물 가져오기 | ||
| const postsData = await postAPI.getPosts({ limit, skip }) | ||
|
|
||
| if (postsData.posts.length === 0) { | ||
| return { | ||
| posts: [], | ||
| total: postsData.total, | ||
| } | ||
| } | ||
| // 사용자 가져오기 | ||
| const usersData = await userAPI.getUsers({ limit: 0, skip: 0 }) | ||
|
|
||
| const postsWithUsers: Post[] = postsData.posts.map((post) => { | ||
| const author = usersData.users.find((user) => user.id === post.userId) | ||
| if (!author) throw new Error(`User not found for userId: ${post.userId}`) | ||
| return { ...post, author } | ||
| }) | ||
|
|
||
| return { | ||
| posts: postsWithUsers, | ||
| total: postsData.total, | ||
| } | ||
| }, | ||
|
|
||
| getPostsByTag: async (tag: string): Promise<{ posts: Post[]; total: number }> => { | ||
| const [postsRes, usersRes] = await Promise.all([ | ||
| fetch(`/api/posts/tag/${tag}`), | ||
| fetch(`/api/users?limit=0&select=username,image`), | ||
| ]) | ||
|
|
||
| const postsData = await postsRes.json() | ||
| const usersData = await usersRes.json() | ||
|
|
||
| const postsWithUsers = postsData.posts.map((post: Post) => ({ | ||
| ...post, | ||
| author: usersData.users.find((user: User) => user.id === post.userId), | ||
| })) | ||
|
|
||
| return { | ||
| posts: postsWithUsers, | ||
| total: postsData.total, | ||
| } | ||
| }, | ||
| } |
Member
There was a problem hiding this comment.
제 리뷰에 남겨주신 피드백 내용처럼 작성해주셨네요!
저도 이 방식 참고하겠습니다!!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
과제 체크포인트
기본과제
목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 FSD 폴더 구조 적용하기
체크포인트
심화과제
목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기
체크포인트
과제 셀프회고
과제에서 좋았던 부분
현업에서 tanstack-query로 관리하는 데이터를 zustand로 또 관리해서 이 부분을 바꾸기 위해서 리팩토링을 진행하려고 하는데 좋은 연습이 되었다. FSD 구조로 공부를 하게 되니까 자연스럽게 선언형 프로그레밍, 클린코드 등등 공부하고 고민하게 되는 계기가 되었다. 그리고 개발자로써 어떤식으로 코드를 짜야하는지 방향성이 잡히게 되는 과제였다.
과제를 하면서 새롭게 알게된 점
FSD 구조와 전반적인 클린 아키텍쳐에 대해서알게 되었다.
과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들
스웨거 같은 문서가 없어서 구조를 잘 짜는 것보다 타입을 지정하는데 시간을 더 많이 쓰게 되었다.
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문