[장해명] sprint9#95
Merged
kiJu2 merged 38 commits intocodeit-bootcamp-frontend:Next-장해명from Apr 23, 2025
Hidden character warning
The head ref may contain hidden characters: "Next-\uc7a5\ud574\uba85-sprint9"
Merged
Conversation
[Fix] delete merged branch github action
design: Header UI 구현 및 Pretend Font 설정 및 적용
- getAllArticles API 호출 방식 axios > fetch 로 변경
- feat: dropdown handler 클릭 시 메뉴 열림 - design: dropdown 기본 UI 작성
- handleDropDownToggle 함수 인라인 작성 - 상수 > 타입 > 상태 > 라우터 > useEffect > 이벤트 핸들러로 순서 조정
- chore: svg 파일명 컨벤션 snake_case 로 변경
Collaborator
|
스프리트 미션 하시느라 수고 많으셨어요. |
Collaborator
키워드 검색 시, 데이터가 새로 페칭되기 전 화면이 잠깐 깜빡이는 현상이 발생합니다. 정확한 원인을 파악하지 못해서 함께 질문드립니다 !오잉 로컬에서 확인해본 결과 딱히 블링크 되는 현상은 없는 것 같아요.
2025-04-23.1.56.02.mov혹시 제가 놓친게 있다면 DM주세요 😊 |
kiJu2
approved these changes
Apr 23, 2025
Collaborator
There was a problem hiding this comment.
오호 vscode 세팅도 형상관리에 저장해두셨군요?
같은 팀원들이 같은 툴과 비슷한 환경으로 개발한다면 헙업에 도움 될 수 있지요 !
|
|
||
| type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>; | ||
|
|
||
| export default async function BoardsPage({ searchParams }: { searchParams: SearchParams }) { |
Collaborator
There was a problem hiding this comment.
굿굿~ 상단 페이지 컴포넌트에서 서버사이드로 fetch를 하고 있군요 !
이러한 구조는 서버 사이드에서 fetch를 하고 하위 컴포넌트로 데이터를 내려줘서 TTV를 줄일 수 있는 좋은 패턴이예요 !
Time To View(TTV): 사용자가 웹브라우저에서 내용을 볼 수 있는 시점
기존 리액트 때: 클라이언트가 서버에 요청 -> 클라이언트에 HTML을 전달 -> 서버에 데이터 요청 -> 데이터베이스 -> ...
현재 구조: 클라이언트가 서버에 요청 -> 서버가 데이터베이스에 데이터 요청 -> 클라이언트 반환 및 렌더링
간선도 훨씬 짧아졌습니다 👍👍
| @@ -0,0 +1,128 @@ | |||
| @import 'tailwindcss'; | |||
|
|
|||
| @theme { | |||
Comment on lines
+11
to
+14
| export const metadata: Metadata = { | ||
| title: "Panda Market", | ||
| description: "Trading site for used goods", | ||
| }; |
Collaborator
There was a problem hiding this comment.
메타 데이터 설정도 훌륭합니다 !
layout.tsx에서 정의할 수 있지요. 추 후 boards/:id 페이지가 개발 된다면 동적인 메타 데이터도 넣어볼 수 있겠네요 😊😊
Comment on lines
+11
to
+43
| export const getArticles = async ({ | ||
| page = 1, | ||
| pageSize = 10, | ||
| orderBy = 'recent', | ||
| keyword, | ||
| }: GetArticlesParams = {}): Promise<GetArticlesResponse> => { | ||
| // set query parameter | ||
| const params = new URLSearchParams(); | ||
| params.append('page', page.toString()); | ||
| params.append('pageSize', pageSize.toString()); | ||
| params.append('orderBy', orderBy); | ||
| if (keyword) { | ||
| params.append('keyword', keyword); | ||
| } | ||
|
|
||
| // get baseURL | ||
| const baseURL = process.env.NEXT_PUBLIC_API_URL; | ||
| const res = await fetch(`${baseURL}/articles?${params.toString()}`, { | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| next: { | ||
| revalidate: 3600, | ||
| }, | ||
| }); | ||
|
|
||
| if (!res.ok) { | ||
| throw new Error(`HTTP Error : ${res.status}`); | ||
| } | ||
|
|
||
| const data = await res.json(); | ||
| return data; | ||
| }; |
Collaborator
There was a problem hiding this comment.
오호 이 친구만 fetch를 사용해보셨군요.
nextjs의 .next를 활용해보고자 시범적으로 바꿔보신 것으로 보여요 ! 훌륭한 학습 자세예요 😊😊
테스트도 직접 해보시면서 유효한 시간 내에 서버 단에서 네트워크 요청을 안보내는지 확인도 해보시면 좋을 것 같네요 👍
Comment on lines
+45
to
+79
| // post article | ||
| export const postArticle = async (data: ArticleBody) => { | ||
| const res = await apiClient.post<ArticleResponse>('/articles', data); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // get article by id | ||
| export const getArticleById = async (articleId: number) => { | ||
| const res = await apiClient.get<ArticleResponse>(`/articles/${articleId}`); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // patch article by id | ||
| export const patchArticleById = async (articleId: number, data: ArticleBody) => { | ||
| const res = await apiClient.patch<ArticleResponse>(`/articles/${articleId}`, data); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // delete article by id | ||
| export const deleteArticleById = async (articleId: number) => { | ||
| const res = await apiClient.delete<DeleteArticleResponse>(`/articles/${articleId}`); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // post like in article by id | ||
| export const postLikeInArticle = async (articleId: number) => { | ||
| const res = await apiClient.post<ArticleResponse>(`/articles/${articleId}/like`); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // delete like in article by id | ||
| export const deleteLikeInArticle = async (articleId: number) => { | ||
| const res = await apiClient.delete<ArticleResponse>(`/articles/${articleId}/like`); | ||
| return res.data; | ||
| }; |
Collaborator
There was a problem hiding this comment.
깔-끔 합니다 👍
추가로, 만약 로깅을 해야한다면 try, catch를 해볼 수도 있겠네요 😊
Collaborator
|
수고하셨습니다 해명님 ! 잠시 쉬었음에도 불구하고 엄청난 속도의 학습력입니다 👍👍👍👍 과제 하시느라 정말 수고 많으셨어요 해명님 ! |
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
4 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.
요구사항
기본
심화
스크린샷
주요 변경사항
멘토에게