이번 주 주제: 클론코딩
우리는 9조 (총 6명)
클론 사이트: 당근마켓
깃헙: Team9-DaangnMarket
클론 사이트 시연 영상 보러가기
내가 맡은 부분은 로그인과 전제목록조회 페이지
로그인 페이지 주요 기능
토큰 쿠키 저장
1. 사용자가 로그인 버튼을 누른다
2. post요청을 보낸다
3. 토큰을 받는다
4. 받은 토큰을 리덕스에서 쿠키로 저장한다
전체목록조회 페이지(메인) 주요기능
무한 스크롤
1. 리덕스에서 api로 목록을 불러온다
ex) /posts?page=0&size=2
2. 리덕스에 저장
3. 화면에 뿌려진다
4. 목록 맨 밑에 스피너를 넣어준다
5. 옵저버가 스피너를 감지한다
6. 그러면 다시 1번을 실행
7. 마지막 데이터가 나올 때 까지 반복 실행
마지막 인지 어떻게 알지...?
화면에 보이는 리스트보다 한 개를 더 불러와
리스트 개수를 비교해 미만이면 무한 스크롤이 작동되지 않게 구현
if (res.data.length < 21) {
is_next = false
} else {
res.data.pop()
is_next = true
}마지막 회고 시간에 멘토님이 알려준 것들
✨프로젝트가 커질수록 컴포넌트도 많아지고 코드도 복잡해지는 데 잘 정리할 수 있는 방법 문의
- 리액트 테마 다운 받아서 구조 알아보기
- Line Entry의 Atomic Design 적용기
✨무한스크롤에서 중요한 건 페이징이다
✨리다이렉트 말고는 라우트를 사용하자
✨렌더링은 최소화
✨서버 시간으로 인해 날짜를 받아오는데 문제 해결 방법 문의
-
UCT로 받아와서 다시 KCT로 변경
이번 주는 도망가지말고 포기하지 말자 라고 계속 생각했다
그래서 그런지 내가 맡은 부분은 잘 마무리 했다
하지만 팀원들과의 소통에 있어서는 아쉬웠다
빨리 지식과 경험을 쌓아 소통이 원할한 동료가 되고 싶다 💪
🌿💻💪🧠👍✨🎉