sprint7 조한준#83
Open
BackNo23 wants to merge 1 commit intocodeit-sprint-fullstack:next-조한준from
Hidden character warning
The head ref may contain hidden characters: "next-sprint7-\uc870\ud55c\uc900"
Open
Conversation
BackNo23
added
매운맛🔥
wseungjin
approved these changes
Feb 25, 2026
Collaborator
wseungjin
left a comment
wseungjin
left a comment
There was a problem hiding this comment.
수고하셨습니다.
- 폴더 구조 관련
특정 페이지에서만 사용하는 컴포넌트도 components/ 폴더에 두는 편이 더 좋을거 같아요.
app router에는 page 같이 관리하는게 좋을거 같고
좀 더 사이즈가 커진다면
components/특정페이지명
같이 확장도 가능하겠죠.
- 서버/클라이언트 컴포넌트 구분 방식 관련
app router를 그렇게 지금 사용하고 있지는 않아서 정확하게는 모르겠는데 충분히 괜찮아 보입니다.
이슈는 없어보이고요.
- Server Action 사용 방식 관련
방법 1번이 보안이나 데이터 일관성이나 더 좋아 보입니다.
| sort, | ||
| }) { | ||
| const [items, setItems] = useState(initialItems); | ||
| const [page, setPage] = useState(1); |
Collaborator
There was a problem hiding this comment.
page말고 index 써주시고 0부터 해주시면 더 좋을거 같아요
| keyword, | ||
| sort, | ||
| }) { | ||
| const [items, setItems] = useState(initialItems); |
Collaborator
There was a problem hiding this comment.
관련해서 훅으로 정리하면 어떨까요
loading, error같은 상태를 중간에 두면 더 좋을거 같아요.
| const [keyword, setKeyword] = useState(searchParams.get('keyword') ?? ''); | ||
| const sort = searchParams.get('sort') ?? 'recent'; | ||
|
|
||
| const buildQuery = (kw, s) => { |
| @@ -0,0 +1,59 @@ | |||
| const BASE_URL = process.env.API_BASE_URL; | |||
|
|
|||
| export async function getArticles() { | |||
Collaborator
There was a problem hiding this comment.
size 넣어서 요청하고 slice로도 끊으면 좋을거 같아요
| limit: String(limit), | ||
| }); | ||
| const res = await fetch(`${BASE_URL}/article?${params}`); | ||
| if (!res.ok) throw new Error('게시글을 불러오지 못했습니다.'); |
Collaborator
There was a problem hiding this comment.
실패해서 에러 던지면 서버에서 html을 send해줄 수 있나요?
예외처리가 필요하지 않을까요?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
1. 스프린트 미션 요구사항
기본 요구사항
공통
자유 게시판 페이지
게시글 등록 & 수정 페이지
게시글 상세 페이지
심화 요구사항
공통
3. 멘토님에게 남길 메시지
현재 폴더 구조가 이렇게 되어 있는데 괜찮은 방식인지 여쭤보고 싶습니다.
src/ └─ app/ └─ freeboard/ └─ [id]/ └─ page.js └─ components/ ├─ ArticleDetail/ │ └─ ArticleDetail.jsx ├─ Comments/ │ └─ Comments.jsx ├─ CommentsList/ │ ├─ CommnetsList.jsx │ └─ CommentsListItem/ │ └─ CommentsListItem.jsx └─ ArticleList/ └─ ArticleCard/ └─ lib/ ├─ api.js └─ actions.js특정 페이지에서만 사용하는 컴포넌트도 components/ 폴더에 두는 게 맞는지, 아니면 app/freeboard/[id]/ 하위에 두는 게 나은지 궁금합니다.
현재 이런 구조로 사용하고 있습니다.
FreeboardDetailPage (서버) → ArticleDetail (서버), Comments (클라이언트), CommnetsList (서버)
api.js의 fetch는 서버 컴포넌트에서만 직접 호출
댓글 등록 후 router.refresh()로 CommnetsList 서버 컴포넌트를 재실행해서 목록을 업데이트
이 방식이 Next.js App Router에서 권장하는 패턴인지 궁금합니다.
클라이언트 컴포넌트에서 POST 요청이 필요할 때 두 가지 방법이 있는 것 같아서 어떤 방식이 더 올바른지 여쭤보고 싶습니다.
방법 1. actions.js에 'use server'를 선언해서 Server Action으로 처리
→ 서버에서 실행되므로 API_BASE_URL 환경변수를 NEXT_PUBLIC_ 없이 그대로 사용 가능
방법 2. 환경변수를 NEXT_PUBLIC_API_BASE_URL로 변경해서 클라이언트에서 직접 fetch 호출
현재는 방법 1을 사용하고 있는데, Next.js App Router에서 어떤 방식이 더 권장되는지, 그리고 각각의 장단점이 무엇인지 궁금합니다.
// actions.js
'use server';
export async function submitCreateCommnets(content, articleId) {
return createCommnets(content, articleId);
}
이 방식이 올바른 Server Action 활용인지, 아니면 더 적절한 방법이 있는지 궁금합니다.