[남기연] sprint9 #308

Namgyeon · 2025-01-21T05:21:02Z

요구사항

기본

자유 게시판 페이지 주소는 “/boards” 입니다.
전체 게시글에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
게시글 목록 조회 api를 사용하여 베스트 게시글, 게시글을 구현합니다.
게시글 title에 검색어가 일부 포함되면 검색이 됩니다.

심화

반응형으로 보여지는 베스트 게시판 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
next의 data prefetch 기능을 사용해봅니다.

주요 변경사항

기존의 next버전에서 최신 버전(15)으로 업데이트했습니다.

스크린샷

홈화면에서 /boards로 이동합니다.

최신순

좋아요순

검색기능

화면크기에 따라 게시글 갯수 변경

멘토에게

next의 data prefetch ssr로 구현을 해볼려고하는데 쉽지 않아서 일단 구현한 코드로 풀리퀘스트합니다.. 계속 시도해보겠습니다.(완료! 좋게 구현했는지는 잘모르겠습니다ㅠ)
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

1005hoon

기연님, nextjs / ts로 변환하시면서 오류가 발생한다 하셨는데 그래도 되는 부분들에 대해서 잘 작성해주셨어요!

일단 전반적으로 기능 구현하는 측면에서 큰 어려움은 없어보여요!
그리고 타입 시스템도 적절하게 활용하고 계시구 있구요.
이제 개선시킬 수 있는 부분이 크게 세가지로 보여요!

콤포넌트의 크기 줄이기
너무 복잡해진 타입들 펼쳐주기
타입 이름 엔티티 기반으로 명확하게 구분하기

콤포넌트 크기 줄이기의 경우, 지금 한 콤포넌트가 너무 많은 작업을 처리하는 경우가 많이 보이고 있습니다. 따라서 큰 콤포넌트가 다 처리하도록 하기보단, 작은 단위의 역할이 명확한 콤포넌트 여럿으로 분리시켜서 그 콤포넌트들을 묶어주는 형태로 풀어보면 아마 훨씬 가독성이 높은 코드로 탈바꿈 할 수 있으리라 생각해요.

그리고 타입 시스템의 경우, type alias를 어떻게든 활용하고자 다양한 타입들을 만들어 사용하는 현상이 보이고 있는데요. 사실 타입스크립트의 타입 시스템은 정말 필요한 타입이 아니라면 굳이 만들지 않는걸 추천하기는 합니다. 따라서 뭔가 타입이 계속 복잡하게 만들어지고, 타입을 위한 타입이 만들어지거나, 타입 이름이 되게 직관적이지 않게 느껴진다면 한번 내가 콤포넌트의 prop을 너무 복잡하게 구조화 하지는 않았나 한번 살펴볼 수 있으면 좋아요.

마지막으로 타입 이름 엔티티 기반으로 구분하기의 경우, 우리가 ~~Data, ~~ListData와 같이 데이터임을 표현하는 식으로 타입 이름들이 설정되어있어요. 근데 타입스크립트의 경우 기본적으로 타입 시스템을 적용함에 있어서 객체지향적인 코드 형태를 따른다고 말씀드렸었죠? 이 관점에서 우리가 객체로 평가할 요소들을 살펴보면, 등록된 제품들, 제품에 대한 댓글들 등이 있을거에요. 이런 요소들을 타입으로 평가해보면 Product, Comment 등으로 평가할 수 있을거고,
이에 대해서 데이터를 불러왔을때의 결과물인 경우, GetProductResponse, GetCommentResponse 와 같이 새로운 타입들을 지정해 활용해볼 수 있을거에요.

자세한 피드백들은 코드리뷰에 남겨두었으니 한번 참고 부탁드리구
지속적으로 프로젝트 해 나가시면서, 고민되는 부분 또는 걱정되거나 해결하기 어려운 부분이 있다면 디스코드로 언제든지 질문주셔요!

고생 많으셨습니다

1005hoon · 2025-01-21T13:06:20Z

next/next.config.ts

1005hoon · 2025-01-21T13:07:41Z

next/src/api/api.ts

+  pageSize = 3,
+}: getBestPostsDataProps) {
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/articles?page=1&pageSize=${pageSize}&orderBy=${orderBy}`


page size와 order조건 외에도 다양한 패러미터들을 전달할 수 있을텐데요,
이런 요소들을 다 묶어서 타입 설정을 해보면 어떨까요? .

search parameter들의 경우, 영문자와 숫자가 아닌 경우 서버를 옮겨다니면서 �query들이 깨질 수 있어요

이를 안전하게 처리하기 위해서 javascript 내장 모듈인 URLSearchParams를 사용하는걸 추천드려요

1005hoon · 2025-01-21T13:08:48Z

next/src/api/api.ts

+  const response = await fetch(
+    `https://panda-market-api.vercel.app/articles?page=1&pageSize=${pageSize}&orderBy=${orderBy}`
+  );
+  if (!response) {


음 사실 response 데이터가 아예 없는 경우는 없답니다!
따라서 네트워크 오류에 대한 핸들링을 하고자 한다면 response.ok 를 판단해주어야 해요
https://developer.mozilla.org/ko/docs/Web/API/Response/ok

1005hoon · 2025-01-21T13:09:36Z

next/src/api/api.ts

+    `https://panda-market-api.vercel.app/articles?page=1&pageSize=${pageSize}&orderBy=${orderBy}`
+  );
+  if (!response) {
+    throw new Error("베스트 게시글 페칭에 실패");


또한 서버에서 오류가 발생했다면 오류 메시지를 전달하게 될텐데 지금의 경우
서버에서 반환해주는 오류 메시지를 로깅하는 곳이 없답니다.
따라서 실제 배포 또는 테스트 환경에서 구동할때 오류가 발생한다 해도 디버깅 하기가 상당히 어려워질거에요.
적절한 오류 핸들링을 한번 해보면 좋겠습니다!

1005hoon · 2025-01-21T13:10:11Z

next/src/api/api.ts

+    throw new Error("베스트 게시글 페칭에 실패");
+  }
+  const data = await response.json();
+  return data.list;


data list만 전달하게 되면 사실 몇번째 페이지 데이터인지 판단하기가 어렵잖아요
이에 대한 데이터들을 다 반환해주면 어떨까 싶긴 하지만
최초 n개의 데이터만 보여주면 되는 로직이다 보니 굳이 그렇게 구현할 필요가 없어보이기도 하네요!

1005hoon · 2025-01-21T13:20:49Z

next/src/types.ts

+export interface PostData {
+  id: number;
+  title: string;
+  content: string;
+  image: string | null;
+  likeCount: number;
+  createdAt: string;
+  updatedAt: string;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+}
+
+export interface PostListData {
+  list: PostData[];
+  totalCount: number;
+}


다음과 같이 구분지어보면 어떨까요?

interface Post { .. } interface GetPostResponse { list: Post[] totalCount: number }

1005hoon · 2025-01-21T13:20:58Z

next/src/utils/date.ts

1005hoon · 2025-01-21T13:24:37Z

next/src/pages/boards/components/BestPosts.tsx

+  const pageSizeCheck = () => {
+    const pageWidth = window.innerWidth;
+    if (pageWidth < 480) {
+      setPageSize(1);
+    } else if (pageWidth >= 480 && pageWidth < 768) {
+      setPageSize(2);
+    } else {
+      setPageSize(3);
+    }
+  };
+


이런 ui차원의 로직은 한번 분리시켜보면 어떨까요?

export function useMediaQuery() { ... } const { isMobile, isTablet, isDesktop } = useMediaQuery() useEffect(() => { if(isMobile) setPageSize(...) if(isTablet) ... if(isDesktop) ... }, [])

useMediaQuery에서 resize 이벤트에 대한 구독을 해주고, 넓이에 따라 현재 어떤 기기인지 판단해주는 로직을 구현해두는거죠

1005hoon · 2025-01-21T13:25:50Z

next/src/pages/boards/components/BestPosts.tsx

+    const fetchBestPosts = async () => {
+      const posts = await fetchPosts({ orderBy: "like", pageSize });
+      setBestPosts(posts);
+    };
+    fetchBestPosts();


꼭 이렇게 래퍼 함수를 둘 필요는 없구,

useEffect(() => { fetchPosts({ ... }) .then(setBestPosts) .catch( ... ) }, [])

로 처리해도 괜찮습니다

1005hoon · 2025-01-21T13:26:14Z

next/src/pages/boards/index.tsx

+
+export const getServerSideProps = async () => {
+  const initialPosts = await fetchPosts({ orderBy: "like", pageSize: 3 });
+
+  return {


이거는 한번 페이지 사이즈나 orderby와 같은 설정값들을 어떻게 전달할 수 있을지 한번 고민해보면 어떨까요

1005hoon

되게 리뷰사항들 잘 반영해주고 계시네요!
이번 이어서 올라오게 될 pr도 기대됩니다!

1005hoon · 2025-01-23T15:04:28Z

next/src/types.ts

+export interface OrderByValue {
+  orderByValue: "recent" | "like";
+}


이런 단순 필드에대한 타입의 경우 인터페이스로 만들면 굳이 불필요한 객체를 생성해야만 합니다
따라서 그냥 타입 얼라이어스를 만들어 사용하는걸 더 추천드려요

export type PostListOrderOption = 'recent' | 'like '

1005hoon · 2025-01-23T15:05:15Z

next/src/lib/fetch-posts.ts

      throw new Error(`Failed to fetch, ${response.statusText}`);
    }
-    const data: PostListData = await response.json();
+    const data: Posts = await response.json();


우리 멘토링떄 이야기했던것처럼 list 반환타입의 경우 제네릭을 활용해서 거기에 list필드가 반환하는 값이 Post[] 가 될 수 있도록 한번 해볼까요?

1005hoon · 2025-01-23T15:05:47Z

next/src/pages/boards/components/AllPosts.tsx


 export default function AllPosts({ initialAllPosts }: AllPostProps) {
-  const [postList, setPostList] = useState<PostData[]>(initialAllPosts);
+  const [postList, setPostList] = useState<Post[]>(initialAllPosts);


[postList, ...] 보다 마찬가지로 해당 엔티티 그 자체를 사용해 posts라고 변수선언을 해보면 어떨까요?

1005hoon · 2025-01-23T15:07:29Z

next/src/pages/boards/components/AllPosts.tsx

  const [orderBy, setOrderBy] = useState<"recent" | "like">("recent");
-  const [filterPostList, setFilterPostList] =
-    useState<PostData[]>(initialAllPosts);
+  const [filterPostList, setFilterPostList] = useState<Post[]>(initialAllPosts);


filter값이 바뀔때마다 리렌더링 되다보니 그냥

const [filter, setFilter] = useState('') const filteredPosts = posts.filter(post => post.title.includes(filter)) return { fileredPosts.map( ... ) }

하는식으로 하는걸 추천드려요!

1005hoon · 2025-01-23T15:09:54Z

next/src/hooks/useMediaQuery.ts

+  isDesktop: boolean;
+};
+
+export function useMediaQuery(): MediaQuery {


오 커스텀 훅 사용하신거 상당히 좋습니다.

조금만 더 정리해본다면, 지금 상황의 경우, pageSize 가 객체로 데이터를 주다보니 결국 활용하는 입장에서 이 결과를 또 다시 어디ㅓㄴ가 풀어 사용해야할텐데요.
그냥 이런 경우 직관적으로 풀어서 필드 하나씩 때려주는것도 괜찮은 방법이에요.

개인적으로 사용하는 코드 참고 차원에서 첨부드립니다

"use client"; import { useEffect, useState } from "react"; function getDevice(): "mobile" | "tablet" | "desktop" | null { if (typeof window === "undefined") return null; return window.matchMedia("(min-width: 1024px)").matches ? "desktop" : window.matchMedia("(min-width: 640px)").matches ? "tablet" : "mobile"; } function getDeminsions() { if (typeof window === "undefined") return null; return { width: window.innerWidth, height: window.innerHeight }; } export function useMediaQuery() { const [device, setDevice] = useState<"mobile" | "tablet" | "desktop" | null>( getDevice(), ); const [dimensions, setDimensions] = useState<{ width: number; height: number; } | null>(getDeminsions()); useEffect(() => { const checkDevice = () => { setDevice(getDevice()); setDimensions(getDeminsions()); }; checkDevice(); window.addEventListener("resize", checkDevice); return () => { window.removeEventListener("resize", checkDevice); }; }, []); return { device, width: dimensions?.width, height: dimensions?.height, isMobile: device === "mobile", isTablet: device === "tablet", isDesktop: device === "desktop", }; }

Namgyeon added 14 commits January 19, 2025 23:05

git 연결

f554999

feat: 기본기능 구현

9b6a5ca

feat: favicon추가, font:Pretendard 적용

5569432

feat: 검색기능 추가

2fab846

chors: 배포 코드추가

fba2e36

chors: 배포 코드추가2

8acaf03

feat: props nickname 기본값 추가

7cfb7c7

배포 코드 수정

6becf40

배포 코드 수정

a71f491

배포 코드 수정

ed284bb

배포 코드 수정

badd979

배포 오류 수정을 위해 파일경로 수정

eac3d41

배포 오류 수정을 위해 파일경로 수정

b8f1f6e

배포 오류 수정

c9c3229

Namgyeon changed the base branch from main to Next-남기연 January 21, 2025 05:21

Namgyeon changed the title ~~Next 남기연 sprint9~~ [남기연] sprint9 Jan 21, 2025

Namgyeon requested a review from 1005hoon January 21, 2025 05:22

Namgyeon added the 순한맛🐑 마음이 많이 여립니다.. label Jan 21, 2025

Namgyeon added 2 commits January 21, 2025 19:00

feat: 서버사이드 렌더링으로 변경

4e00daa

feat: AllPosts SSR로 변경

f4de0eb

1005hoon approved these changes Jan 21, 2025

View reviewed changes

Namgyeon added 8 commits January 22, 2025 23:04

feat: api요청에 URLSearchParams를 사용

38b936a

feat: OrderByValue type alias 추가

6f7bdb6

feat: baseURL 상수화

979b2ac

feat: 에러 핸들링 수정

a0c4627

feat: 불필요한 상태 제거

75419fb

refactor: 콤포넌트 prop 가독성, 유지보수 개선

895e82a

refactor: 불필요한 useState삭제, textMapper 객체를 활용하여 기능 유지

a09eae4

refactor: useMediaQuery hooks를 따로 구분하여 가독성 개선

bbaa9f2

1005hoon self-requested a review January 23, 2025 15:03

1005hoon approved these changes Jan 23, 2025

View reviewed changes

1005hoon merged commit d62a689 into codeit-bootcamp-frontend:Next-남기연 Jan 23, 2025

[남기연] sprint9 #308

[남기연] sprint9 #308

Uh oh!

Conversation

Namgyeon commented Jan 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

1005hoon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

1005hoon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Namgyeon commented Jan 21, 2025 •

edited

Loading