HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생
/
🙂
동근팀
/
2023/01/23(월)
2023/01/23(월)
2023/01/23(월)

2023/01/23(월)

팀원
회의
Jan 23, 2023
프로젝트
프로젝트 종료 후 DAY-18

오늘의 할 일


무한스크롤 구현하기


  • 구글링을 통해서 무한스크롤 방법을 찾아서 팀원들이 함께 화면공유를 하며 진행
  • 처음 호출할 때 중복된 값이 3번 들어오는 문제
→ 리액트 스트릭 모드를 꺼서 2번으로 줄임
→ 처음에 intersecting 값이 왜 true로 변했다가 false가 되는가??
→ 두번 중복 호출될 때 api를 다음 데이터로 바로 받아오게 하면 되지 않을까?
axios.get에서 then으로 묶어서 setPageLimitnumber 를 더한다.
하지만 중복 호출될 때 page의limit 값이 더해지지 않았음.

<해결>
useState의 의존성배열에 들어가는 값을 변경 (맞나?)
api 호출의 offset과 limit가 의미하는 게 무엇인지 다시한 번 확인…^^
 

미디어 쿼리 적용하기


각 페이지 별 미디어 쿼리 적용 해보자!!
모바일 버전의 경우 채널 목록을 제거하고 하단 footer에 bar를 만들어 이동하는 식으로 구현
검색 페이지를 별도로 구현
 

다크 모드 색상 정리


다크 모드 색상을 대략적으로 선택
 
axios.get (`...`).then((res) => setPageLimitNumber((prev) => prev + 1))