[홍승원] sprint9 #123
[홍승원] sprint9 #123
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
누구보다 빠른 승원님! next로 잘 넘어오셨습니다 :) 앞으로 여러 렌더링 방식을 학습해 보아요~!
app 기반으로 처음 하는 프로젝트이기 때문에 잘 했는지 검토 부탁드립니다
->
지금은 검토 드릴 부분이 사실 많지는 않습니다 😅
기본적인 App Router 사용에는 큰 문제가 없었어요. 라우팅이나 레이아웃, 이미지 컴포넌트도 잘 활용해주셨습니다.
다만, next 의의에 맞게, 기능을 적극 활용하고 있는 상태는 아닙니다. 앞으로는 데이터를 어떻게 fetch하고 어떤 방식으로 렌더링하는 것이 좋은지에 대한 이해가 앞으로 중요할 것 같습니다.
예를 들어 베스트 게시글처럼 페이지 진입 시 바로 보여줘야 하는 데이터는 서버 컴포넌트에서 fetch하고 렌더링하는 방식이 더 적합할 수 있습니다.
반대로, 유저 인터랙션에 따라 바뀌는 데이터(예: 무한 스크롤)는 클라이언트에서 처리하는 게 맞을 거구요. 이 경우에도 초기 데이터는 서버에서 미리 가져오고, 이후 추가 로딩은 클라이언트에서 처리하는 구조로 분리할 수 있어요.
이러한 전략들을 잘 활용하려면 server actions, cache, revalidate 등 App Router의 기능들에 대한 추가 학습이 필요합니다!
tailwind를 처음 써보는 것이기 때문에 이 부분도 잘 했는지 검토 부탁드립니다
-> 대체로 잘 작성해주셨습니다. 다만 컴포넌트화를 통해 추상화하면 jsx가 더 깔끔해 질 거 같아요. 또한 색상 같은 공통 디자인 토큰은 tailwind config에서 관리해 보시면 더욱 좋겠습니다 :)
| import getArticles from "@/services/getArticles"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| interface Articles { |
There was a problem hiding this comment.
타입이 계속 반복되어 정의되고 있는데, tpyes폴더를 만들어 따로 관리하시는 것도 좋습니다 :)
| <div className=" mt-[40px] flex flex-col"> | ||
| <div className="flex flex-row justify-between"> | ||
| <span className="text-[20px] font-bold mb-[24px]">게시글</span> | ||
| <button className="w-[88px] h-[42px] rounded-lg bg-[#3692FF] text-[#FFFFFF] text-[16px] font-semibold cursor-pointer"> |
| }; | ||
| } | ||
|
|
||
| const Article = ({ article }: Articles) => { |
There was a problem hiding this comment.
App router의 장점 중 하나는 colocation이 가능하다는 점입니다~! 도메인별로 파일을 나눠보시는 것도 좋아요 :)
https://nextjs.org/docs/app/getting-started/project-structure#colocation
|
|
||
| const handleScroll = useCallback(() => { | ||
| if ( | ||
| window.innerHeight + window.scrollY >= |
There was a problem hiding this comment.
intersection observer를 활용해 보셔도 좋습니다~! 아니면 throttle을 적용해 보셔도 좋아요!
| <form className="relative"> | ||
| <input | ||
| type="text" | ||
| className="lg:w-[1054px] lg:h-[42px] md:w-[560px] md:h-[42px] w-[288px] h-[42px] rounded-xl bg-[#F3F4F6] text-[16px] text-[#9CA3AF] font-normal pr-[16px] pl-[44px]" |
There was a problem hiding this comment.
여기도 컴포넌트를 많이 활용해 보시면 좋아요! tailwind 단점 중 하나는 jsx가 어지러워지는 점인데요, 컴포넌트화를 잘 하면 어느정도 커버할 수 있습니다!
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게