[정혜연] sprint9 #315

yeon0036 · 2025-01-24T14:31:02Z

요구사항

기본

자유 게시판 페이지 주소는 “/boards” 입니다.
전체 게시글에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
게시글 목록 조회 api를 사용하여 베스트 게시글, 게시글을 구현합니다.
게시글 title에 검색어가 일부 포함되면 검색이 됩니다.

심화

반응형으로 보여지는 베스트 게시판 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
next의 data prefetch 기능을 사용해봅니다.

주요 변경사항

스크린샷

멘토에게

템플릿코드 없이 아예 빈 파일에서 시작해서 해당 페이지 외에는 루트페이지와 상품페이지밖에 작동하지 않습니다.
BestArticle이 문제인데, 쿼리스트링 디폴트값인 최신순 10개의 데이터에서만 정렬을 해서 slice가 됩니다. 쿼리에 임의로 100등의 수를 넣으면 이미지 로딩 문제가 생겨 이 방식도 불가능합니다.. 아직 해결을 못했는데, 아무리 봐도 해결이 안돼서 조언 부탁드립니다ㅠㅠ components > board > BestArticleSection파일에 해당 내용 있습니다.
�아직 타입스크립트가 익숙치 않아 우선 js로 작성하였습니다. BestArticle까지 완료되면 이후에 typescript로 리팩토링 하겠습니다 !

[Fix] delete merged branch github action

withyj-codeit

스프린트 미션 하느라 수고 많으셨어요~👏🏻

템플릿코드 없이 아예 빈 파일에서 시작해서 해당 페이지 외에는 루트페이지와 상품페이지밖에 작동하지 않습니다.

좋아요~ 혜연님 속도에 맞춰서 하나씩 추가해주세요.

BestArticle이 문제인데, 쿼리스트링 디폴트값인 최신순 10개의 데이터에서만 정렬을 해서 slice가 됩니다. 쿼리에 임의로 100등의 수를 넣으면 이미지 로딩 문제가 생겨 이 방식도 불가능합니다.. 아직 해결을 못했는데, 아무리 봐도 해결이 안돼서 조언 부탁드립니다ㅠㅠ components > board > BestArticleSection파일에 해당 내용 있습니다.

articles GET 요청할 때, ?orderBy=like&pageSize=3&page=1 이런 방식으로 쿼리 파라미터 설정해서 보내면 될것 같은데 혹시 문제가 있었나요?

아직 타입스크립트가 익숙치 않아 우선 js로 작성하였습니다. BestArticle까지 완료되면 이후에 typescript로 리팩토링 하겠습니다 !

넵~! 타입스크립트로 변환은 꼭 해보셔요~

withyj-codeit · 2025-01-31T13:51:47Z

tsconfig.json

+    "**/*.tsx",
+    "pages/boards/[id].jx",
+    "pages/boards/index.tsx"
+, "pages/_app.jsx"  ],


*/.ts, */.tsx 가 하위 내용들을 포함할텐데 pages/OOO 추가한 이유가 있나요?

withyj-codeit · 2025-01-31T14:29:31Z

components/button/DropdownButton.jsx

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import styled from "styled-components";


styled-components 와 module.css 혼용해서 사용중인 걸로 보이는데,
학습 목적이 아니라면 둘 중 하나를 사용하는 방향이 좋아 보여요.

보통 두개를 혼합해서 계속 사용했었는데, 하나로만 사용하는게 맞는건가요? 어떤 방식을 더 추천하는지 알려주시면 감사하겠습니다 !

프로젝트를 진행하거나 업무적으로 진행할 때는 하나의 서비스에서는 스타일링을 하나로 통일하는 편이 좋아요.
그래야 스타일링 코드에 대한 예측가능성이 높아지고, 코드를 읽거나 수정하는 방식에 대해서도 두 가지로 나눠서 생각하지 않아도 되기 때문에 그래요.

styled-components 와 css modules 는 둘 중 어떤 걸 사용하셔도 무방하다고 생각해요.
다만, 각자의 방식이 가지고 있는 장점과 한계에 대한 이해는 가지고 사용하는게 필요해요.

withyj-codeit · 2025-01-31T14:30:24Z

components/button/DropdownButton.jsx

+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState("최신순");
+
+  const toggleDropdown = () => setIsOpen(!isOpen);


setIsOpen((prev) => !prev) 가 이전 상태를 가져온다는 걸 보장할 수 있어 조금 더 안전한 코드에요.

아 이해했습니다. 참고하여 수정하겠습니다 !

withyj-codeit · 2025-01-31T14:33:17Z

components/board/BestArticleSection.jsx

+      const nextBestArticles = res.data.list;
+
+      // likeCount 기준으로 정렬 후 상위 3개 추출
+      const sortedArticles = nextBestArticles


articles 관련 정렬을 api에 쿼리 파라미터로 orderBy 설정을 제공하기 때문에 이걸 활용해서 like 기준으로 정렬하는 방향이 좋아요. (참고)

아, orderby를 활용하는 방법으로 가는게 더 낫겠네요..! 말씀해주신 방법으로 수정해보겠습니다

withyj-codeit · 2025-01-31T14:36:48Z

components/board/ArticleList.jsx

+            </Link>
+            {articles.image ? (
+              <Image
+                src={articles.image}


src에서 삼항연산자를 사용하지 않고 이미지 컴포넌트를 별도로 렌더링하는 이유가 있나요?

yeon0036 · 2025-01-31T16:26:25Z

BestArticle이 문제인데, 쿼리스트링 디폴트값인 최신순 10개의 데이터에서만 정렬을 해서 slice가 됩니다. 쿼리에 임의로 100등의 수를 넣으면 이미지 로딩 문제가 생겨 이 방식도 불가능합니다.. 아직 해결을 못했는데, 아무리 봐도 해결이 안돼서 조언 부탁드립니다ㅠㅠ components > board > BestArticleSection파일에 해당 내용 있습니다.

articles GET 요청할 때, ?orderBy=like&pageSize=3&page=1 이런 방식으로 쿼리 파라미터 설정해서 보내면 될것 같은데 혹시 문제가 있었나요?

쿼리 파라미터 적용해서도 해봤는데, 적용해서 불러온 해당 데이터 안에서만 순위가 매겨졌습니다.ㅠㅠ api에 저장된 모든 데이터 안에서 순위를 배겨 BestItem을 뽑아야 하는데, 가져온 일부 데이터안에서만 자꾸 순위가 매겨집니다

withyj-codeit · 2025-02-03T17:52:23Z

쿼리 파라미터 적용해서도 해봤는데, 적용해서 불러온 해당 데이터 안에서만 순위가 매겨졌습니다.ㅠㅠ api에 저장된 모든 데이터 안에서 순위를 배겨 BestItem을 뽑아야 하는데, 가져온 일부 데이터안에서만 자꾸 순위가 매겨집니다

아 그래요? 이건 api 이슈일 수도 있는데, 시간될 때 같이 한번 살펴봐요.

withyj-codeit and others added 12 commits September 3, 2023 21:57

chore: 머지 후 브랜치 삭제 github action 추가

93a0e93

reset

b2e37bd

Merge branch 'codeit-bootcamp-frontend:main' into main

6f8bbb0

fix: 머지 후 브랜치 삭제 github action 수정

e11e25f

env: workflows 폴더로 이동

212e864

Merge pull request #237 from hanseulhee/fix-github-actions

4dc5dd0

[Fix] delete merged branch github action

feat: 구조 및 api 연동 완료

2180dc6

feat: Header

85de37a

feat: header 완성

4d9f3a7

feat: all, Best 상품 불러오기 및 전체 CSS적용

7e8b8da

feat: 드롭다운 선택에 따라 정렬 구현

ec74ffa

feat: 검색 기능 구현

7c53fe4

yeon0036 requested a review from withyj-codeit January 24, 2025 14:31

yeon0036 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jan 24, 2025

Merge branch 'codeit-bootcamp-frontend:main' into Next-정혜연-Sprint9

7448621

withyj-codeit approved these changes Jan 31, 2025

View reviewed changes

withyj-codeit merged commit 7cd1208 into codeit-bootcamp-frontend:Next-정혜연 Jan 31, 2025

		@@ -0,0 +1,88 @@
		import React, { useState } from "react";
		import styled from "styled-components";

[정혜연] sprint9 #315

[정혜연] sprint9 #315

Uh oh!

Conversation

yeon0036 commented Jan 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

withyj-codeit left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yeon0036 commented Jan 31, 2025

Uh oh!

withyj-codeit commented Feb 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yeon0036 commented Jan 24, 2025 •

edited

Loading

withyj-codeit left a comment •

edited

Loading