오늘은 주로 CSS 관련 작업만 계속 했다. 메인 페이지의 상단 카테고리 바를 스크롤을 내려도 브라우저 상단에 고정되게 만들었다. 스크롤 높이에 따라 카테고리 바가 고정되거나 고정되지 않는 것을 조정해야 하는 줄 알았는데, 단순히 position: sticky 속성을 주니 해결됐다.
또, 카테고리를 클릭하면 해당 카테고리 아래에 테두리가 생기게 했다. :active 의사 클래스를 사용하면 마우스 클릭 버튼을 누르고 있는 동안 특정 CSS 속성을 활성화하는데, 이걸 유지하는 데에만 신경을 썼었다. 하지만 이것도 해당 카테고리를 클릭하면 들어가 있는 window.location.pathname을 따 와서 이게 카테고리와 일치하는 경우에만 CSS를 주도록 만들었다.
입력한 검색어에 해당하는 검색 결과가 없을 때, 검색 결과가 없다는 걸 알려주는 페이지 하단에 추천 검색어가 뜨는데, 해당 검색어를 클릭하면 그 검색어에 대한 검색 결과 페이지로 넘어가도록 했다.
어제부터 고전하던 로딩 스피너 문제를 드디어 해결했다. 물론 내가 아니라 튜터님이^^; 우리는 어떻게든 해결해보겠다고 이틀 내내 구글에 별 검색어를 다 적어넣으며 샅샅이 찾아봤는데, 그때마다 '아니 로딩 스피너 하나 제대로 붙이는 게 이렇게 어렵다고!?' 라는 말을 하곤 했다. 데이터가 로딩되는 중에는 스피너를 보여주고 싶은데, 꼭 스피너가 나오기 전에 데이터가 로딩되지 않은 미운 컴포넌트가 잠깐 반짝하고 보이는 현상이 있었다. 그래서 루트 컴포넌트인 app.js에 스피너를 넣으려고 시도하던 중이었다. 구글링해서 찾은 내용에 따라 app.js를 함수형 컴포넌트에서 눈에 익지도 않은 클래스형 컴포넌트로 억지로 바꿔가며 끼워 맞추고 있었는데 그러고 나니 끔찍한 혼종(데이터 로딩이 완료되었는데도 스피너가 그 위에서 중첩되어 계속 돌았...다..)이 탄생하고야 말았다. 마침 그때 튜터님이 빛처럼 강림하셔서 뚝딱 해결해주고 가셨다. 구글에서 대충 긁어 온 코드를 갖다붙인 나로서는, 튜터님이 하나하나 코드에 대해 물으실 때마다 내 대답이 시원찮아 너무나 민망했다. 튜터님은 어떤 상황에서 로딩 스피너를 붙이려고 하는 건지 차근차근 생각해보면 어려울 게 없다고 하시면서 토닥여주고 가셨다. 그리고 튜터님이 만들어주신 코드는 먼 길 돌아가려고 했던 내가 생각한 복잡한 코드와는 달리 간결하고 클린한 코드였다ㅠㅠ... 간단하게 생각하는 법을 잘 모르는 나는 갈 길이 무한 스크롤 같다.
오늘은 우리 조 프론트 분에게 리덕스 사용법에 대해 설명해 드렸다. 나도 기본적인 개념은 잘 모르지만, 그래도 데이터가 어떤 방향으로 흐르는지는 알게 되어서 그 덕분에 지금까지 리덕스를 그럭저럭 사용해 왔던 것 같다. 그 방법을 간단하게나마 자료로 만들어 공유해 드렸다. 리덕스가 까다로운 건 분명하지만 부디 너무 어려워하지 않으셨으면 좋겠다. (하지만 나도 어렵지 야호)
지금까지의 수정사항을 모두 반영해서, 며칠간 미루고 미루던 재배포를 했다. 한층 더 완성도가 높아져서 뿌듯하다. ╰(*°▽°*)╯
내일 할 일
자잘한 메뉴들은 우리 팀의 노션 페이지와 연결한다. 하지만 노션 페이지에 개인정보가 있으므로 그 부분은 삭제하거나 다른 페이지를 새로 파야 할 것 같다.
footer에 hover 시 애니메이션을 준다. 이건 완전히 추가적인 기능이지만, 시도해보자.
처음에는 숨겨져 있다가 스크롤을 내리면 나오는 프로그레스 바에 상세 페이지 뉴스 제목을 붙인다. 오늘 프론트 분과 같이 여러 차례 도전해봤지만 허탈하게 실패하고 말았다.