Next 최진영 - 스프린트미션8 제출#69
Hidden character warning
Conversation
| "prisma:migrate": "prisma migrate dev", | ||
| "start": "next start" | ||
| }, | ||
| "dependencies": { |
There was a problem hiding this comment.
잘 만들어진 라이브러리를 가져다 쓰는 건 좋다고 생각하지만, 현재 프로젝트에서는 사용하지 않는 라이브러리도 여럿 있어 보이네요. 불필요한 의존성 설치 과정과 사용 시 혼란을 없애기 위해 추가했던 라이브러리는 사용하지 않게 된 시점에 바로 제거해주면 좋습니다.
| if (params.keyword) searchParams.append("keyword", params.keyword) | ||
| if (params.limit) searchParams.append("limit", params.limit.toString()) | ||
|
|
||
| const response = await fetch(`${API_BASE_URL}/api/articles?${searchParams}`) |
There was a problem hiding this comment.
fetch에 API_BASE_URL을 항상 붙여서 사용하고 있는데, 이런 케이스는 fetch를 한 번 추상화해서 반복을 줄이면 편하게 사용할 수 있을 것 같아요.
| if (!response.ok) throw new Error("Failed to fetch posts") | ||
| return response.json() |
There was a problem hiding this comment.
추상화하는 김에 이렇게 반복되는 구문도 같이 묶으면 좋겠네요.
| useEffect(() => { | ||
| async function fetchPosts() { | ||
| try { | ||
| const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/articles?page=1&limit=5`) |
There was a problem hiding this comment.
lib/api.js에 정의해둔 함수를 사용해도 되지 않나요?
| <span | ||
| className="flex items-center gap-1 px-3 py-1 text-xs font-medium text-white" | ||
| style={{ | ||
| borderRadius: "0 0 16px 16px", |
There was a problem hiding this comment.
사용 중인 tailwind에도 아마 borderRadius 속성을 대신할 수 있는 스타일 클래스가 있을 텐데, 만들어져 있는 클래스로 대체해보면 어떨까요?
| const [editingId, setEditingId] = useState(null); | ||
| const [editContent, setEditContent] = useState(""); |
There was a problem hiding this comment.
editingId와 editContent는 결합도가 높은 상태로 보이는데, 이 경우는 각각 state로 정의하기보다는 하나의 object로 정의하면 state의 목적(용도)을 더욱 확실하게 나타낼 수 있을 것 같네요.
e.g.
// 수정일 때
setState({
id: 1,
content: "",
})
// 생성일 때
setState({
id: null,
content: "",
})| <Button | ||
| onClick={handleAddComment} | ||
| className="mt-2 rounded-xl bg-[#9CA3AF] px-5 py-2 text-white text-sm font-medium hover:bg-[#6B7280] transition-colors" | ||
| style={{ fontFamily: "Pretendard" }} |
There was a problem hiding this comment.
fontFamily는 루트 스타일 기본 스타일로 지정해도 되지 않을까요?
| export function PostForm({ mode = "create", postId }) { | ||
| const [title, setTitle] = useState("") | ||
| const [content, setContent] = useState("") | ||
| const [author, setAuthor] = useState("") | ||
|
|
||
| const isFilled = title.trim() !== "" && content.trim() !== "" | ||
|
|
||
| useEffect(() => { | ||
| if (mode === "edit" && postId) { |
There was a problem hiding this comment.
create와 edit 같은 리터럴 스트링을 직접 사용하면 실수하게 될 확률이 높아지므로 상수로 선언해서 사용하는 편이 좋습니다.
2 participants
공통
자유 게시판 페이지
게시글 등록 & 수정 페이지
게시글 상세 페이지
심화 요구사항
공통
멘토님에게
초기에 테스트해보던 mock 데이터와 이전 미션1 파일들(미션1때 이것저것해보다 올라가있었나봐요)이 함께 올라가 버렸네요 ㅠㅠ
실제 연결되는 것은 BE 미션7과 연동된 현재 미션8 코드입니다. 커밋 일부를 정리하지 못했지만 양해부탁드립니다.