feat: 메인페이지 개발 #109

her0707 · 2023-09-14T12:07:26Z

📌 이슈 링크

🌟 FEATURE: [2 Week] 메인 페이지를 개발합니다. #47

📖 작업 배경

메인 페이지를 개발합니다.

🛠️ 구현 내용

articles 데이터 렌더링 및 페이지 네이션
태그 클릭 시 태그에 맞는 데이터 페칭
반응형 레이아웃 적용

💡 참고사항

astro 를 최대한 활용하려 하였으나 SSG framework인 astro 에서 user interaction 적용에 vanilla js 만으로 구현하기에 번거로움이 존재하여 우선 react 컴포넌트로 기능을 구현함
추 후 ssg 를 적용가능 한 영역을 astro 기반으로 리팩토링 예정

🖼️ 스크린샷

astro 사용을 위해 astro 전용 플러그인 별도 추가

commit convention, pre-commit

인증 모듈 개발 시 수정 예정

KimHunJin · 2023-09-15T10:00:19Z

src/components/pagination/Pagination.tsx

+        <button
+          disabled={page === i}
+          id="pagination"
+          onClick={() => handleClick(i)}


큰 차이는 아니지만 매번 이렇게 함수를 동적으로 생성하는 것 보다
handleClick 함수를 고차 함수로 만들어서 사용하면 좀 더 가볍게 만들 수 있어요

handleClick = (page: number) => () => { setPage(page); } onClick={handleClick(i)}

큰 차이는 아니지만 매번 이렇게 함수를 동적으로 생성하는 것 보다 handleClick 함수를 고차 함수로 만들어서 사용하면 좀 더 가볍게 만들 수 있어요

handleClick = (page: number) => () => { setPage(page); } onClick={handleClick(i)}

리뷰보다가 궁금한것이 있어서 @KimHunJin 헌진님께 질문드립니다!
작성하신 형태로 많이 쓰고 있는데 이게 고차함수인지는 처음 알았네요 ㅎㅎ
혹시 왜 가벼워지는 지에 대해서 공부할 수 있게 어떤 키워드를 찾으면 좋을 지 알려주실 수 있을까요?
(gpt에 물어보니 익명함수라서 매번 새롭게 할당된다?)

그리고 onClick={handleClick(i)}를 넘기면 함수호출형이라서 바로 실행이 되지 않을까요?
저렇게 함수 호출형을 넘겨줬을 때 바로 실행되던 순간들이 있어서 여쭤봅니다!

아하 지금보니 다시 이해했습니다. 바로 실행되지 않습니다.......

형태가 다르군요.......다시 보니 이해했습니다.
질문 무시해주셔도 됩니다!

@headring 님
넵 렌더링을 진행할 때 마다 매번 함수를 새로 생성하기 때문에 옛날에는 성능상 좋지 않아 지양하긴 했었어요.
사실 해당 함수 자체가 고차함수기 때문에 렌더링 할 때마다 함수를 리턴 받는건 동일하긴 한데, 컨벤션 처럼 지키려고 하기도 해서 렌더링 시점에 함수를 생성하는 방식을 가급적 피하는 편입니다!

요즘은 뭐 워낙 개선이 많이 돼서 성능적으로 큰 차이는 없을거지만요 :)

hyjoong

수고하셨습니다!

아래코드 같은 복잡한 css 방식?? 도 잘 사용하시고 transition 이나 애니메이션 효과도 잘 주셨네요 👍

[`${pageButton}.active > &`]: {

hyjoong · 2023-09-15T11:07:29Z

src/components/pagination/Pagination.tsx

+  offset: number;
+}
+
+const Pagination = ({ totalPage, page, setPage, offset = 5 }: Props) => {


Pagination.tsx 파일에는 UI위주로 작성하고 로직은 usePagination.ts 과 같은 커스텀 훅으로 만들어도 좋을 것 같아요! 이건 취향 차이여서 참고만 해주세요 ㅎㅎ

말씀해주신대로 뷰 영역과 로직을 분리하여 관심사를 명확히 구분하는게 좋을 것 같네요!

hyjoong · 2023-09-15T11:17:23Z

src/feature/article/ArticleList.tsx

+        : data.articles.map((v, i) => (
+            <Article
+              key={`article-${i}`}
+              favorited={v.favorited}
+              favoritesCounts={v.favoritesCount}
+              imgSrc={v.author.image}
+              authorName={v.author.username}
+              createDate={v.createdAt}
+              title={v.title}
+              description={v.description}
+              tagComponent={<TagList tagList={v.tagList} />}
+            ></Article>
+          ))}


v대신 article 같이 의미있는 변수명을 사용해도 좋을 것 같습니다 !

- data.articles.map((v, i) => (` + data.articles.map((article, i) => (`

저는 게시글 리스트 컴포넌트에 map()을 사용해서 게시글 컴포넌트를 나타낼 때 아래와 같이 data를 한번에 넘기고 자식 컴포넌트에서 구조분해 할당으로 데이터를 가져왔었는데 이 방식에 대해서 사람들이 어떤방식을 더 선호하는지 토론글을 봤었는데 어느 방식을 사람들이 더 선호했었는지 기억이 안나네요 ㅎㅎ;

// ArticleList component {articleList.map((article,index)=> ( <Article article={article} /> )} // Article component const Article = ({ article }) => { const { username, content, createdAt, description} = article; return ( <div>{username}</div> <div>{content}</div> <div>{createdAt}</div> <div>{createddescription}</div>

or 아래와 같이 표현도 가능합니다. 참고만 해주세요 !

: data.articles.map((v, i) => ( <Article {...v} />

처음엔 최대한 추상화하여 만들어보고자 하였으나 feature 단위의 컴포넌트다 보니 Article 도메인에 종속된 컴포넌트가 되어버렸네요 도메인에 종속되었으니 article 자체를 전달받아 사용하는 것이 더 깔끔할 것 같네요! 꼼꼼한 확인 감사합니다

hyjoong · 2023-09-15T11:19:05Z

src/feature/article/TagList.tsx

+  return (
+    <>
+      {tagList.map((v, i) => (
+        <Label key={`tag-${i}`} text={v} />


key 값은 항상 unique 하게 설정하시네요 ! 👍👍
여기도 v 대신 tag 로 작성하셔도 좋을 것 같아요

hyjoong · 2023-09-15T11:21:43Z

src/hooks/useArticles.tsx

+    try {
+      setLoading(true);
+      const response = await httpClient.get(


통신이 실패해서 catch문을 탈 수 있으니setLoading은 try문 위에 있어야 하지 않나요 ??

- try { - setLoading(true); + setLoading(true); + try {

그리고 loading 상태값 컨벤션이 맞춰지면 좋을 것 같습니다~

- const [isLoading, setLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false);

통신이 실패해서 catch문을 탈 수 있으니setLoading은 try문 위에 있어야 하지 않나요 ??

제 생각에 해당 함수에서 setLoading의 위치로 인한 문제는 없을거 같아요!
통신을 타기 전에 loading을 진행하기 때문에 문제되지는 않을거 같네요.

다만, 관심사를 명확히 분리한다면 리뷰처럼 try 밖으로 빼는게 좋을거 같습니다~

headring

작성하신 스타일이나 Skeleton 코드 정말 잘 봤습니다.
참고 해보겠습니다 :)

KimHunJin · 2023-09-17T14:13:16Z

src/components/tab/Tab.tsx

+
+  return (
+    <div className={container}>
+      <ul ref={elementRef} className={`${tabContainer} ${containerStyle} ${isExpanded ? "expanded" : ""}`}>


참고만 해주시면 될거 같아요~
저는 classname이 길어지고, 여러 조건이 생기는 경우 개인적으로 밖으로 빼서 관리하는 편입니다!

const classnames = () => { const cn = [tabContainer, containerStyle]; if (isExpanded) { cn.push('expanded'); } return cn.join(' '); }

KimHunJin · 2023-09-17T14:19:10Z

src/layouts/header/Header.astro

+import HeaderLink from "./HeaderLink.astro";
+
+import { Image } from "astro:assets";
+---


1번과 8번 라인에 대시 3개는 무슨 역할을 하나요??

아스트로 컴포넌트의 렌더링 단계에서 한번만 실행되는 스크립트 영역입니다!
dom 렌더링 이전에 동작하여 window 객체 접근이 불가능하고 '---' 내부에서 한번 계산된 동적 값은 변경할 수 없는 값이 되어버리는 특징이 있습니다

KimHunJin · 2023-09-17T14:20:29Z

src/services/http-client.ts

+  }
+}
+
+export default new HttpClient();


오 여기서는 클래스 문법을 쓰셨네요

함수로 통일 해보는 것도 좋은 경험이 될거 같습니다~

네! fetch 영역을 intercepter 까지 추가하여 리팩토링 해보려고 합니다!

KimHunJin

새로운 코드 잘 보고 갑니다!
코드마다 다양한 방식들을 볼 수 있어서 흥미롭네요

her0707 and others added 30 commits August 25, 2023 23:34

chore: typescript init

fc8c395

chore: eslint, prettier 설정

51dc9ae

astro 사용을 위해 astro 전용 플러그인 별도 추가

chore: hook 사용을 위한 husky 추가

602301c

commit convention, pre-commit

feat: astro 에서 사용할 react 환경설정

c2c2663

refactor: astro 폴더구조에 따라 src 하위 디렉토리 로 이동

90aa59e

feat: review-assign-action.yml 깃헙 액션을 추가합니다.

f59fd0f

chore: astro v3 migration

2499f36

chore: lint, ts error 로 인한 코드 수정

2b80228

chore: 상태 관리를 위한 nanostores 추가

8f5a6cd

chore: import lint error off

52785bc

chore: react css 사용을 위한 ve 추가

901bac1

feat: 레이아웃 헤더 구현

6d52bda

Update review-assign-action.yml

4d80c9f

Update review-assign-action.yml

e577cd8

Update review-assign-action.yml

4bedb3a

Update review-assign-action.yml

6ea21d9

Update review-assign-action.yml

daad074

chore: vite vanilla extract 설정

0d46a8a

feat: article 컴포넌트 구현

b338b00

feat: http client add

00cb32c

인증 모듈 개발 시 수정 예정

refactor: template 원본파일 제거

f014bee

feat: pagination component add

8ce21e7

feat: skeleton ui 컴포넌트 추가

d72f266

refactor: 메인페이지 react 컴포넌트 리팩토링

e22b0eb

refactor: 메인페이지 레이아웃 Css 수정

013ca43

refactor: 최초 마운트 시 articles 호출하지 않도록 변경

2f65faa

feat: tab 컴포넌트 추가

56a4664

refactor: tab 스타일 수정

be8d899

feat: tag 별 API 호출 구현

b9340ce

refactor: pagination disabled 옵션 변경

103c66d

her0707 and others added 7 commits September 11, 2023 01:28

refactor: header 반응형 css 수정

3191006

refactor: 탭 컴포넌트 반응형 대응

3378be2

refactor: tab 컴포넌트 스타일 수정

a163bdd

refactor: 레이아웃 스타일 수정

21cbe76

Merge branch 'pagers-org:main' into main

71416c7

Merge remote-tracking branch 'upstream/team1/her0707'

ae5cb05

fix: 태그 클릭 시 페이지네이션 초기화

38ac8fe

her0707 requested review from KimHunJin, InSeong-So, headring and hyjoong September 14, 2023 12:07

KimHunJin reviewed Sep 15, 2023

View reviewed changes

hyjoong approved these changes Sep 15, 2023

View reviewed changes

headring approved these changes Sep 16, 2023

View reviewed changes

KimHunJin reviewed Sep 17, 2023

View reviewed changes

KimHunJin approved these changes Sep 17, 2023

View reviewed changes

her0707 added 2 commits September 17, 2023 23:22

refactor: pagination 리팩토링

de51611

refactor: 탭 리팩토링

0040330

her0707 merged commit cf50500 into pagers-org:team1/her0707 Sep 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 메인페이지 개발 #109

feat: 메인페이지 개발 #109

her0707 commented Sep 14, 2023

KimHunJin Sep 15, 2023 •

edited

Loading

headring Sep 16, 2023 •

edited

Loading

headring Sep 17, 2023

headring Sep 17, 2023

KimHunJin Sep 17, 2023

hyjoong left a comment •

edited

Loading

hyjoong Sep 15, 2023

her0707 Sep 17, 2023

hyjoong Sep 15, 2023 •

edited

Loading

her0707 Sep 17, 2023

hyjoong Sep 15, 2023 •

edited

Loading

hyjoong Sep 15, 2023 •

edited

Loading

KimHunJin Sep 17, 2023 •

edited

Loading

headring left a comment

KimHunJin Sep 17, 2023

KimHunJin Sep 17, 2023 •

edited

Loading

her0707 Sep 17, 2023

KimHunJin Sep 17, 2023

her0707 Sep 17, 2023

KimHunJin left a comment

feat: 메인페이지 개발 #109

feat: 메인페이지 개발 #109

Conversation

her0707 commented Sep 14, 2023

📌 이슈 링크

📖 작업 배경

🛠️ 구현 내용

💡 참고사항

🖼️ 스크린샷

KimHunJin Sep 15, 2023 • edited Loading

Choose a reason for hiding this comment

headring Sep 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hyjoong left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hyjoong Sep 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hyjoong Sep 15, 2023 • edited Loading

Choose a reason for hiding this comment

hyjoong Sep 15, 2023 • edited Loading

Choose a reason for hiding this comment

KimHunJin Sep 17, 2023 • edited Loading

Choose a reason for hiding this comment

headring left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KimHunJin Sep 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KimHunJin left a comment

Choose a reason for hiding this comment

KimHunJin Sep 15, 2023 •

edited

Loading

headring Sep 16, 2023 •

edited

Loading

hyjoong left a comment •

edited

Loading

hyjoong Sep 15, 2023 •

edited

Loading

hyjoong Sep 15, 2023 •

edited

Loading

hyjoong Sep 15, 2023 •

edited

Loading

KimHunJin Sep 17, 2023 •

edited

Loading

KimHunJin Sep 17, 2023 •

edited

Loading