Feature/#42 #44
Feature/#42 #44
Conversation
00kang
requested review from
thejsw and
gomjellie
and removed request for
thejsw
front/src/components/ArticleFeed.jsx
Outdated
| {author} | ||
| </a> | ||
| <span className="date">{createdAt}</span> | ||
| </div> | ||
| <button className="btn btn-outline-primary btn-sm pull-xs-right"> | ||
| <i className="ion-heart"></i> {favoritesCount} | ||
| </button> | ||
| </div> | ||
| <a href="" className="preview-link"> | ||
| <h1>{title}</h1> | ||
| <p>{description}</p> |
There was a problem hiding this comment.
home.jsx에서 articlefeed 내용만 따로 분리했습니다.
api 데이터가 필요한 부분을 {~~}으로 바꿨습니다.
front/src/components/Home.jsx
Outdated
| useEffect(() => { | ||
| getArticleFeed((limit: 20), (offset: 0)).then((res) => { | ||
| const data = res.data.article; | ||
| }); | ||
| }); |
There was a problem hiding this comment.
userEffect()로 렌더링 되자마자 getArticleFeed()가 실행되도록 했습니다.
swagger ui를 보면 limit은 20, offset은 0으로 default값이 설정되어 있는데, 이를 어떻게 해야할지 모르겠습니다.
There was a problem hiding this comment.
page 를 url 에 param으로 갖도록하고 이를 파싱해서 이용해보세요.
offeset: page *20 으로 주면 될것으로 보이네요 @00kang
There was a problem hiding this comment.
useEffect는 2번째 인자로 deps 배열을 받도록 되어있습니다~ 한번 react useEffect관련 문서를 살펴보시길 바랍니다.
front/src/components/Home.jsx
Outdated
| {data.map(() => { | ||
| return ( | ||
| <ArticleFeed | ||
| author={data.author} | ||
| createdAt={data.createdAt} | ||
| description={data.description} | ||
| favoritesCount={data.favoritesCount} | ||
| slug={data.slug} | ||
| title={data.title} | ||
| updatedAt={data.updatedAt} | ||
| /> | ||
| ); | ||
| })} |
There was a problem hiding this comment.
articlefeed.jsx에 사용될 데이터들을 정리했습니다.
front/src/remotes/index.jsx
Outdated
| @@ -71,7 +72,7 @@ const conduitAxios = axios.create({ | |||
| */ | |||
| const postUsersLogin = (user) => | |||
| conduitAxios.post(`/users/login`, { | |||
| data: { email: user.email, password: user.password }, | |||
| data: { email: user.email, password: user.password }, //더 받아오기 | |||
There was a problem hiding this comment.
음 잘 하고계시는데, param과 return이 헷갈린다는게 이해가 안되네요?
지금 넣고있는 data 안에 return데이터를 넣어야되는지 헷갈린다는 뜻인가요?
front/src/remotes/index.jsx
Outdated
| const getArticleFeed = (limit, offset) => | ||
| conduitAxios.get(`/articles/feed`, { | ||
| data: { | ||
| author: article.author, | ||
| createdAt: article.createdAt, | ||
| favoritesCount: article.favoritesCount, | ||
| title: article.title, | ||
| description: article.description, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
위의 리뷰와 같이 param데이터를 넣으면 되는지, returns데이터를 넣으면 되는지 모르겠습니다.
✅ Deploy Preview for ssusdc-blog-team2 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
이슈 넘버
[#42] 4-9. 게시글 불러오기
요약
변경 내용 설명
index.jsx에서 getArticleFeed() 보충
ArticleFeed.jsx 생성
Home.jsx 생성