레벨 테스트 작업 로그 #4 - 상품 목록 화면 구현 (22.12.01 TIL)

 오늘은 어제 크롤링한 데이터를 backdoor 에 적용해서 H2 DB 로 밀어넣은 후 그 데이터를 화면에 불러오는 작업을 진행했다. (한마디로 상품 목록 화면을 구현했다는 소리) 그리고 완성한 작은 기능에 따른 인수 테스트를 통과 시키고, 완성된 컴포넌트에 대한 단위 테스트도 진행했다.

 데이터를 화면에 불러올 때, 처음에 약 70개의 데이터를 불러왔었고, 계속 수정할 때마다 70개의 사진을 로딩하는 것이 맘에 들지 않아서 페이지네이션을 먼저 구현할 까 했는데, map 을 하기 전에 slice 로 8개까지만 보여주게 하면 되는 문제였다!

{products.slice(0, 8).map((product) => ( /* 생략 */ )}

 

어쨌든 이렇게 페이징을 구현 한 것처럼 8개의 데이터를 화면에 출력하는 것에 성공했다. 다만 아직 컴포넌트를 쪼개지 않아서 컴포넌트를 쪼개는 리팩토링 작업을 오늘 밤 안에 진행하고, 내일은 상품 상세 페이지 구현을 시작할 예정이다. 그 후에 로그인/회원가입과 주문 기능에 들어간다. 어느 정도 기능이 구현된 상태를 이번 주말 안에 끝내고 추가적인 디테일은 다음주에 잡으면서 그동안 미뤄뒀던 책 읽기와 후반부 강의 영상을 다시 한 번 시청하는 것이 남은 금토일 3일의 목표이다! 가보자고~