[최윤석] Sprint9 #708
[최윤석] Sprint9 #708
Conversation
…ithub-actions [Fix] delete merged branch github action
There was a problem hiding this comment.
코드 병합 시 충돌 수정 안된 상태로 그대로 남아있네요~! 확인 부탁드립니다. :)
There was a problem hiding this comment.
README.md 파일이라 크게 문제는 없지만, 충돌 제대로 수정하는 습관은 꼭 필요합니다!
| export default function BestPost() { | ||
| const [bestArticles, setBestArticles] = useState([]); | ||
|
|
||
| async function getBestArticles() { |
There was a problem hiding this comment.
아티클을 조회하는 API 함수를 만들어 분리하고, 이를 가져와서 사용하시는게 좋을 것 같습니다~!
(해당 함수는 API 요청만 처리하면 좋을 것 같아요.)
// 아래 분리하고 이를 가져와서 사용합니다.
async function getBestArticles(params) {
// 오류 처리는 필요한 곳에 위임할 수 있도록, 꼭 필요한 경우가 아니면 하지 않습니다.
const res = await axios.get(`articles?page=${params.page}&pageSize=3&orderBy=${params.orderBy}`);
return res.data.list ?? [];
}| } | ||
|
|
||
| useEffect(() => { | ||
| getBestArticles(); |
There was a problem hiding this comment.
응답의 결과로 데이터가 업데이트된 경우에만 고려되고 있는데요.
로딩 및 오류 처리가 가능하도록 다음 상태도 같이 관리하시면 좋을 것 같네요~!
isLoading: 데이터 패칭 여부isError: 오류 여부
There was a problem hiding this comment.
이러한 기능을 할 수 있는 커스텀 훅을 만들어보는 것도 좋은 것 같습니다.
아래는 사용하는 예시입니다~!
(간단한 예제로 Infinite 케이스는 조금 더 복잡합니다~!)
const { isLoading, isError, data } = useAsync(
() => getBestArticles(), // fetch 함수
[] // 의존성 배열
)| </li> | ||
| </ul> | ||
| <div> | ||
| <Image src={signImg} width={40} height={40} alt='로그인 이미지' /> |
There was a problem hiding this comment.
<img/> 태그의 alt 속성은 스크린 리더 사용자나 해당 이미지를 볼 수 없는 사람에게 제공되는 대체 텍스트입니다~!
유의미한 텍스트를 넣어주시는게 좋아요. (이 경우는 로그인하기 등이 될 수 있을 것 같네요.)
| const [articles, setArticles] = useState([]); | ||
|
|
||
| async function getArticles() { | ||
| try { | ||
| const res = await axios.get("/articles?page=1&pageSize=6&orderBy=recent"); | ||
| const nextArticles = res.data.list ?? []; | ||
| setArticles(nextArticles); | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| getArticles(); | ||
| }, []); |
There was a problem hiding this comment.
아티크를 가져오는 코드도 위에 코멘트 드린 것과 동일하게 개선해보시면 좋을 것 같습니다.
| getArticles(); | ||
| }, []); | ||
|
|
||
| console.log(articles); |
There was a problem hiding this comment.
불필요한 콘솔은 제거해 주세요~ :)
|
|
||
| export default function Document() { | ||
| return ( | ||
| <Html lang="en"> |
There was a problem hiding this comment.
언어는 서비스 대상 국가의 언어인 ko로 하시는게 더 적절할 것 같습니다~! :)
| export default function App({ Component, pageProps }) { | ||
| return ( | ||
| <> | ||
| <Header /> |
There was a problem hiding this comment.
각 페이지 별로 Layout을 가져와서 사용하는 형태도 있습니다~!
(페이지마다 레이아웃을 별개로 가져갈 수 있어, 기획/디자인 변경에 유연하게 대응 가능하면서도 공통으로 가져갈 수 있습니다.)
There was a problem hiding this comment.
여기도 코드 충돌 남아있습니다!
hoody-jellybean
left a comment
hoody-jellybean
left a comment
There was a problem hiding this comment.
이번 파트 첫 위클리 과제네요! 고생 많으셨습니다. 👍
There was a problem hiding this comment.
Path alias 적용해보시는 것 좋네요! 👍
There was a problem hiding this comment.
Axios에서 제공해주는 인터셉터 활용해보시는 것 좋습니다! 👍
4 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게