오늘 한 일
- 메인 페이지 뉴스 목록 아래에는 '더보기' 버튼이 있어서, 처음에는 목록을 몇 개만 불러오고 그걸 눌렀을 때 추가로 더 붙여서 보여주는 식이다. 버튼을 누를 때마다 다음 목록이 나오는 거니까 페이지 버튼만 없을 뿐, 결국 화면에 나오지 않는 모든 데이터의 목록을 균등하게 나누는 페이지네이션이 필요했다. 주특기 주간 과제로 무한스크롤을 구현할 때 페이지네이션이 너무 어려웠던 기억이 나서, 이번만큼은 강의자료를 보는 대신 구글링을 먼저 했다. 운좋게도 나에게 필요한 수준의 간단한 페이지네이션을 아주 쉽게 설명해 놓은 블로그를 찾았다. 눈으로 쭉 코드만 훑었을 때에도 '이걸로 이게 된다고?' 싶을 정도로 짧았다. 역시 간결한 코드가 좋은 코드인 걸까, 단번에 실행됐다. 따라 치며 이해를 한 후에는 그 코드를 내 방식대로 더 짧게 만들어 보았다.
const CardList = () => {
const [end, setEnd] = useState(12); // 한 번에 불러올 개수 입력
const all_news = useSelector(state => state.news.list);
const news_list = all_news.slice(0, end); // 0부터 (end-1)번째까지 출력
const loadMoreNews = () => {
if (end >= all_news.length) { // 다음 목록이 없으면,
return; // 리턴
}
setEnd(end + 12); // 다음 목록이 있으면 end를 증가
};
}
- 메인 페이지 뉴스 목록에 데이터가 잘 들어오기는 하는데 CSS에 하자가 좀 있어 오늘은 그 부분을 뜯어 고쳤다. 코드가 내 마음에 들게 실행되는 순간만큼 기쁠 때가 또 있을까.
- 뉴스 목록에 뜨는 날짜들이 뒤죽박죽인 걸 깨닫고 나서는 날짜 내림차순으로 정렬해서 다시 배치했다.
- 카드 리스트 안에 카드들이 들어있는 형태인데, 각자가 테두리 선을 가지고 있어서 겹치는 부분은 굵어졌다. 구글링을 통해 찾은 border-collapse: collapse; 로도 해결이 되지 않아 box-shadow 속성을 이용하는 방법을 찾아서 적용해봤다. 정석대로 처리한 건 아닌 것 같지만 전혀 생각지 못한 방법으로도 해볼 수 있다는 걸 배웠다.
- 카테고리 메뉴를 누르면 카테고리별로 서버에서 데이터를 받아와 메인에서와 같은 카드 리스트 안에 담아 띄우도록 구현했다.
내일 할 일
- 사용자가 이메일 주소와 닉네임을 입력하면 해당 데이터를 서버에 넘겨주는 axios를 짠다.
- 검색창 CSS가 알 수 없는 이유로 완전히 뭉개졌다...ㅠ.ㅠ 고치는 것을 시도해봐야겠다.