[김연만] sprint8 #131
Hidden character warning
Conversation
keepoki
left a comment
keepoki
left a comment
There was a problem hiding this comment.
바쁜 일정에도 불구하고, 스프린트 미션 제출해주셔서 감사합니다~!!
기본적인 기능들은 잘 작성하셨습니다 ㅎㅎ
| @@ -0,0 +1,180 @@ | |||
| "use client" | |||
There was a problem hiding this comment.
데이터 페칭을 "use client" 에서만 정의한 것으로 확인 되는데
CSR 방식 말고도 SSR 방식도 있으니 해당 방식으로도 작성해보는 것은 어떨까요~?
| const fetchData = async () => { | ||
| const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/posts`); | ||
| const data = await response.json(); | ||
|
|
||
| setPosts(data); | ||
| } | ||
| fetchData(); |
There was a problem hiding this comment.
try/catch문을 사용하여 서버 상태에 따른 분기 처리, 예기치 않은 에러에 대한 예외 상황을 처리하면 좋습니다.
또한 process.env.NEXT_PUBLIC_API_URL 처럼 env를 사용하는 경우 .env.example 파일으로 어떤 값들이 필요한지 파일을 남겨두면 어떤 데이터가 필요한지 명확하게 알 수 있을 것 같습니다. (보안에 위배되지 않는 선에서요)
| <div key={post.id} className='flex-1 bg-[#F9FAFB] bg-gray-50 mr-[24px] ml-[24px] pr-[24px] pl-[24px] rounded'> | ||
| <div className='flex bg-[#3692FF] w-[100px] pr-[24px] pl-[24px] rounded-b-2xl mb-[10px]'> | ||
| <Image src={best} alt="베스트"></Image> | ||
| <div className='text-[#FFF] text-[16px] font-bold leading-[25px] font-pretendard'>best</div> | ||
| </div> | ||
| <div className='flex justify-between mb-[26px]'> | ||
| <div className='text-[#1F2937] font-bold'>{post.title}</div> | ||
| <Image src={item} width={50} height={50} alt="물품" className='border'></Image> | ||
| </div> | ||
|
|
||
| <div className='flex justify-between text-center mb-[10px]'> | ||
| <div className='flex gap-[8px] text-[#4B5563] text-[14px]'> | ||
| <div>{post.author}</div> | ||
| <div className='flex ' onClick={() => likeChange(post.id, post.likes)}> | ||
| <Image src={liker} alt="좋아요"></Image> | ||
| <div>{post.likes > 9999 ? "9999+": post.likes}</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='flex gap-[8px] text-[#4B5563] text-[14px]'> | ||
| <div>{post.createdAt}</div> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
해당 로직은 컴포넌트로 분리하여 관리한다면, 재사용 및 확장성의 이점을 가져갈 수 있습니다.
There was a problem hiding this comment.
Logo 폴더의 리소스는 public 폴더나 assets 폴더에서 관리하는 편이 리소스의 변경하는 데 있어서 더 좋을 것 같습니다.
There was a problem hiding this comment.
현재 폴더명에 오타나셨습니다~ components
| { | ||
| "compilerOptions": { | ||
| "paths": { | ||
| "@/*": ["./src/*"] |
There was a problem hiding this comment.
절대 경로 임포트를 설정하셨지만, 다른 곳에서 사용되지 않고 있는 것 같습니다.
import Header from "@/app/components/Header"; 와 같이 절대 경로로 변경하면 임포트 경로의 일관성을 유지하고 파일 위치 변경 시 더 유연하게 대처할 수 있습니다.
|
|
||
| return ( | ||
| <div> | ||
| <div className='mr-[360px] ml-[360px]'> |
There was a problem hiding this comment.
tailwindcss를 잘 사용해주셨습니다. 조금 개선하자면, 하드코딩된 스타일을 대신 mx-auto, mx-4와 같은 스타일로 중앙 정렬하는 방식을 고려해보면 좋을 것 같습니다~
3 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게