[이유진] 9주차 과제 제출

[pororori]

결과 소개

(화면 스크린샷 또는 녹화 첨부)

기능 설명

(커밋이나 큰 기능 단위 별 설명)

어려웠던 점, 질문

(없다면 생략 가능)

[his0si]

흠잡을 곳 없는 완성도 있는 과제였습니다. 참고할만한 사항 몇개만 코드리뷰 올려드렸습니다. 과제하느라 수고많으셨어요!

[his0si]

라우팅 배우신대로 잘 하셨습니다! 다만 라우터가 중첩 구조가 아니어서 상위 레이아웃(헤더·네비) 재사용이 어려울 수 있기 때문에 아래와 같은 방법도 공유드려요

// routes.jsx const router = createBrowserRouter([ { path: "/", element: <Layout />, // 공통 헤더 children: [ { index: true, element: <SignUpForm /> }, { path: "boards", element: <BoardsLayout />, // Outlet children: [ { index: true, element: <BoardListPage /> }, { path: "write", element: <BoardWritePage /> }, { path: ":boardId", element: <BoardDetailPage /> }, { path: ":boardId/edit", element: <BoardEditPage /> }, { path: ":boardId/posts", element: <PostListPage /> }, { path: ":boardId/write", element: <PostWritePage /> }, ], }, { path: "posts/:postId", element: <PostDetailPage /> }, { path: "edit/:postId", element: <PostEditPage /> }, ], }, ]);

[his0si]

-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";

[his0si]

POST 전체를 가져와 중복 Board를 reduce로 잘 제거하셨습니다. 다만 조금 비효율적일 수 있으니 백엔드에 GET /boards(pageable) 엔드포인트를 먼저 요청 → 없으면 /posts?size=1&fields=board 같은 가벼운 쿼리도 사용해보길 권장합니다.
const { data: boards = [], isLoading, error } = useQuery(["boards"], () => axiosInstance.get("/boards").then(r => r.data));