[김도균] Sprint9 #286
[김도균] Sprint9 #286
Conversation
There was a problem hiding this comment.
https://gitignore.io/ 같은 사이트 참고해서 git ignore 적용해보시는것도 좋을것같아요ㅎㅎ!
There was a problem hiding this comment.
기본적으로 next 설치 시 생성되는 ignore를 썼는데, 위 사이트도 참고해볼게요!
There was a problem hiding this comment.
d.ts 파일은 딱히 만들 필요는 없을꺼에요
그냥 .ts 파일을 만들고 export 하는게 좀 더 좋아요
d.ts파일은 javascript 파일과 typescript 파일을 섞어쓸때 정의하기 위해서 사용하는 파일이거든요ㅎㅎ!
There was a problem hiding this comment.
넵 감사합니다! 수정하도록 하겠습니다.
| if (i === 1) hidden = 'hidden md:flex'; | ||
| else if (i === 2) hidden = 'hidden pc:flex'; | ||
|
|
||
| return <BestArticle key={article.id} article={article} hidden={hidden} />; |
There was a problem hiding this comment.
여기서 사용하는 hidden 이 그냥 className이랑 크게 다른것같진 않은데 맞나여??
따로 hidden이라는 이름을 쓰신 이유가 궁금해서요ㅠ
There was a problem hiding this comment.
className이 맞습니다! 이 부분 수정하겠습니다.
| <p>{article.writer.nickname}</p> | ||
| <div className='flex items-center gap-1'> | ||
| <Image src='/assets/icons/heart_empty.svg' alt='빈 하트 이미지' width={16} height={16} style={{ width: 16, height: 16 }} /> | ||
| <p>{article.likeCount}</p> |
There was a problem hiding this comment.
<p>{article.likeCount.toLocaleString()}</p> 위와같이 노출하면 1000 -> 1,000 으로 노출되어서 보기가 좀더 좋을꺼에요~ ㅎㅎ
There was a problem hiding this comment.
Figma에는 천단위 구분자를 안넣어서 따로 넣진 않았는데, 참고하겠습니다!
|
|
||
| export async function getArticles(query: ArticlesParam = {}, option: RequestInit = {}): Promise<{ list: Article[]; totalCount: number }> { | ||
| const queryParam = new URLSearchParams(Object.entries(query)).toString(); | ||
| const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/articles?${queryParam}`, option); |
There was a problem hiding this comment.
오... 이렇게 환경변수로 관리하면 매우 좋아요ㅎㅎ!
나중에 서버의 host가 바뀌었을떄 관리하기가 좋거든요ㅋㅋ
| images: { | ||
| remotePatterns: [ | ||
| { | ||
| protocol: 'https', | ||
| hostname: 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com', | ||
| }, | ||
| { | ||
| protocol: 'https', | ||
| hostname: 'example.com', | ||
| }, | ||
| { | ||
| protocol: 'https', | ||
| hostname: 'mblogthumb-phinf.pstatic.net', | ||
| }, | ||
| { | ||
| protocol: 'https', | ||
| hostname: 'ibb.co', | ||
| }, | ||
| { | ||
| protocol: 'https', | ||
| hostname: 'flexible.img.hani.co.kr', | ||
| }, | ||
| ], | ||
| }, |
There was a problem hiding this comment.
모든 도메인 허용하려 했다가 그건 좀 아닌 것 같아서 패턴 넣었는데 잘한 것 같네요 ㅎㅎ
| function SkeletonUi({ cnt }: { cnt: number }) { | ||
| return ( | ||
| <> | ||
| {Array.from({ length: cnt }).map((_, i) => ( | ||
| <div key={i} className='flex flex-col gap-6 rounded-lg p-6 bg-gray-100'> | ||
| <div className='w-[102px] h-[30px] bg-gray-200'></div> | ||
| <div className='flex gap-2 justify-between'> | ||
| <div className='w-[256px] h-[64px] bg-gray-200'></div> | ||
| <div className='w-[72px] h-[72px] bg-gray-200'></div> | ||
| </div> | ||
| <div className='flex justify-between'> | ||
| <div className='flex gap-4'> | ||
| <div className='w-14 h-6 bg-gray-200'></div> | ||
| <div className='flex items-center gap-1'> | ||
| <div className='w-3.5 h-3.5 bg-gray-200'></div> | ||
| <div className='w-12 h-4 bg-gray-200'></div> | ||
| </div> | ||
| </div> | ||
| <div className='w-20 h-4 bg-gray-200'></div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
오 스켈레톤 UI까지 구현하셨군여ㅋㅋ
이런 디테일 매우 좋아요ㅎㅎ!
| import dayjs from 'dayjs'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const DEFAULT_IMAGE = '/assets/icons/profile.svg'; |
There was a problem hiding this comment.
향후 홈페이지 작업 때문에 남겨놨습니다!
| - 기존에 CSR로만 프로젝트를 구현했었기에 서버 컴포넌트를 프로젝트를 시작하면서 정의하기엔 생각보다 쉽지 않았다. | ||
| - 그래서, 우선 리액트에서 사용했던 방식인 CSR로 먼저 MVP를 만들었고, 그 후에 서버 컴포넌트 전환이 필요한 컴포넌트가 무엇인지 고민했었다. | ||
| - 베스트 게시글의 경우 여타 웹사이트처럼 사용자에 요청에 따라 반드시 최신의 데이터를 보장할 필요가 없다고 판단했고, 사용자의 상호작용 또한 불필요하다고 생각하여 ISR로 전환하였다. | ||
| - 전체 게시글의 경우 정적인 것보다 동적으로 게시글 목록을 부여해야 한다고 판단하여 SSR + 하이드레이션, CSR 방식 중 고민했는데, 어차피 둘다 추가적인 데이터를 클라이언트 측에서 요청을 해야 한다고 생각하여 기존에 리액트에서 사용했던 방식인 CSR로 구현하였다. |
There was a problem hiding this comment.
이부분은 app router 에 loading.tsx 를 활용해볼수도 있을것같아요!
스켈레톤 적용하신 부분들이 있던데, 이런 부분들을 따로 관리할 수 있거든요ㅎㅎ
There was a problem hiding this comment.
Suspense 컴포넌트의 fallback으로 활용했었는데, loading.tsx도 고려해보겠습니다!
| ### 왜 axios를 안쓰고 fetch로 데이터를 불러오는가 | ||
| - 기존 리액트에선 fetch보다 axios라이브러리를 쓰면 조금 더 쉽고, 짧게 데이터를 불러올 수 있었다. | ||
| - next 프로젝트에선 왜 axios보다 fetch를 더 많이 쓰는 지 궁금해서 찾아본 결과, 본래 자바스크립트의 fetch 메서드에서 추가적인 기능이 있다는 걸 알게 되었다. | ||
| - 그 추가적인 기능이 데이터 캐싱이었고, revalidate 설정, tag기반 캐싱, 강제 캐싱 등 여러 옵션을 설정할 수 있었는데, 이러한 캐싱 설정을 간편하게 할 수 있다는 이유로 fetch를 더 많이 쓰던 것이었다. |
There was a problem hiding this comment.
이거는 조금 말이 많긴 해요ㅎㅎ;;
어차피 캐싱은 react-query 같은 곳에서도 해주기도 하고, 그게 그렇게 큰 비용이 아니라고 생각되어서...
경험상 60:40 으로 axios를 조금더 많이 사용하는듯 싶어요!
There was a problem hiding this comment.
조언 감사합니다! 상황에 따라 써야겠네요
|
|
||
| - 요구사항에 모든 버튼에 대해 자유롭게 Hover 효과를 적용하라고 되어있었다. | ||
| - Heart 아이콘에 Hover 효과를 부여해서 배경색을 변화시키고 싶었는데, 찾아보니깐 svg 파일을 리액트 컴포넌트로 변환시킬 수 있는 걸 알게 되었다. | ||
| - 리액트 컴포넌트로 변환시킨 svg 컴포넌트가 hover 됐을 때 fill속성에 값을 줌으로써 배경색을 채웠다. |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
/boards 페이지
boards 페이지 캡처
페이지 초기 접속 요청에 따른 HTML 파일 응답 캡처
추가 예정 사항
멘토에게