금요일 퇴근하자마자 집에 다녀오느라 TIL도 남기지 못했다. 집에 갈 땐 가벼운 게 최고라며 노트북도 팽개치고 빈손으로 내갔다. 금요일 하루 빵꾸난 게 좀 아쉽지만 어쩌겠나, 뭐..
금요일에는 게시판 모듈은 어떤 기능을 더 넣어야 할 지 아직 확실하지 않아서 기본적인 부분만 마무리했다. 그러고 나서 시작한 건 로그인, 회원가입 페이지였다. 여기서부터는, 앞으로 얼마큼이나 변경사항이 있을지 모르지만 일단 현재 나와 있는 기획안에 맞춰서 작업하기로 했다. 프로젝트에서는 기획에도 직접 참여했는데 회사에서는 기획을 담당하는 다른 누군가가 그 프로세스를 맡아준다는 것 자체가 새롭다. 뷰가 기획안대로 짜여져 나갈 때의 쾌감이란.. 기능이 하나 둘씩 붙고 코드가 점점 복잡해질수록 매 순간 당황하게 되겠지만 지금으로서는 충분히 행복하다.
주말은 실컷 놀고 오늘 다시 서울로 돌아왔다. 동생이랑 이런저런 얘기를 하다가 갑작스럽게 프로젝트 하나를 하게 되어 버렸다(?!!) 코인이나 주식 투자에 관심이 많은 동생이 매수 최적 포인트를 찾기 위한 전략을 짰다는데(난 들어도 잘 모르겠고) 그 전략에 맞춘 프로그램이 필요한 상황이었다. 얘기를 들어보니 사실은 그 전략이라는 게 전부고 프로그램은 거들 뿐이라 아주 복잡하진 않을 것 같다. 일단 해봐야겠지만. 이거야말로 가내 수공업 아니고 프로젝트 아닌가ㅋㅋㅋ 암튼 재밌겠다 히히
드디어 프로젝트 결과물 제출 기일이 되었다. 수정사항 반영해서 마지막으로 로컬에서 확인해 보는 중에, 검색 결과에서 [관련순] 버튼을 눌러도 게시글 순서가 바뀌지 않는 원인이 모든 페이지에 들어가는 뉴스 목록 컴포넌트에 무조건적으로 날짜 내림차순 정렬이 적용되어 있기 때문이라는 것을 알게 되었다. 급히 수정했다. 검색 결과를 보여주는 방식은 [최신순]과 [관련순]이 있었는데 이 버튼을 누르면 어차피 서버에서 날짜순과 관련순으로 구분해서 데이터를 넘겨주기 때문에, 검색 결과를 보여주는 창에서는 굳이 프론트에서 날짜 내림차순 정렬을 하지 않아도 됐다. 그래서 검색어를 뉴스 목록에 props로 넘겨주고, 검색어가 있는 경우에는 서버에서 들어오는 데이터에 날짜 정렬을 아예 적용하지 않는 방식으로 해결했다. 마지막 배포 전에 후다닥 해치울 수 있어서 다행이었다.
프로젝트 제출 페이지에 넣을 시연 영상을 찍었다. 찍는 게 서툴러서 몇 번을 다시 찍었는지 모르겠다. 제출하고 보니 우리 조가 첫 번째였다. 지금까지 무엇이 됐든 이렇게 일찍 제출해본 적이 없었는데. 왠지 감격스러웠다.
오늘은 피곤이 극에 달해 몇 시간에 한 번씩 자꾸 잠을 잤다. 아침에도 회의 시간에 맞춰 겨우 일어나고, 점심 먹고 나서 다시 자고, 일어나서 조금 하다가 오후 9시쯤 또 자고 다시 일어나고.
내일 할 일
프론트엔드 깃헙 리드미 파일을 좀 작성해야 할 것 같다. 지금껏 한 번도 작성해보지 않아서 어떤 식으로 적어야 할지 모르겠지만... 지금이 뭔가 남길 수 있는 마지막 기회일 것 같다.
내일은 드디어 마지막, 실전 프로젝트가 시작되는 날이다. 조 편성부터 어떻게 될지 많이 궁금하다. 6주라는 기간이 주어지는 만큼, 지금까지처럼 무리하지 말고... 잠도 줄이지 말고... 긴 호흡으로 꾸준히 잘 버틸 수 있으면 좋겠다.
오늘은 주로 CSS 관련 작업만 계속 했다. 메인 페이지의 상단 카테고리 바를 스크롤을 내려도 브라우저 상단에 고정되게 만들었다. 스크롤 높이에 따라 카테고리 바가 고정되거나 고정되지 않는 것을 조정해야 하는 줄 알았는데, 단순히 position: sticky 속성을 주니 해결됐다.
또, 카테고리를 클릭하면 해당 카테고리 아래에 테두리가 생기게 했다. :active 의사 클래스를 사용하면 마우스 클릭 버튼을 누르고 있는 동안 특정 CSS 속성을 활성화하는데, 이걸 유지하는 데에만 신경을 썼었다. 하지만 이것도 해당 카테고리를 클릭하면 들어가 있는 window.location.pathname을 따 와서 이게 카테고리와 일치하는 경우에만 CSS를 주도록 만들었다.
입력한 검색어에 해당하는 검색 결과가 없을 때, 검색 결과가 없다는 걸 알려주는 페이지 하단에 추천 검색어가 뜨는데, 해당 검색어를 클릭하면 그 검색어에 대한 검색 결과 페이지로 넘어가도록 했다.
어제부터 고전하던 로딩 스피너 문제를 드디어 해결했다. 물론 내가 아니라 튜터님이^^; 우리는 어떻게든 해결해보겠다고 이틀 내내 구글에 별 검색어를 다 적어넣으며 샅샅이 찾아봤는데, 그때마다 '아니 로딩 스피너 하나 제대로 붙이는 게 이렇게 어렵다고!?' 라는 말을 하곤 했다. 데이터가 로딩되는 중에는 스피너를 보여주고 싶은데, 꼭 스피너가 나오기 전에 데이터가 로딩되지 않은 미운 컴포넌트가 잠깐 반짝하고 보이는 현상이 있었다. 그래서 루트 컴포넌트인 app.js에 스피너를 넣으려고 시도하던 중이었다. 구글링해서 찾은 내용에 따라 app.js를 함수형 컴포넌트에서 눈에 익지도 않은 클래스형 컴포넌트로 억지로 바꿔가며 끼워 맞추고 있었는데 그러고 나니 끔찍한 혼종(데이터 로딩이 완료되었는데도 스피너가 그 위에서 중첩되어 계속 돌았...다..)이 탄생하고야 말았다. 마침 그때 튜터님이 빛처럼 강림하셔서 뚝딱 해결해주고 가셨다. 구글에서 대충 긁어 온 코드를 갖다붙인 나로서는, 튜터님이 하나하나 코드에 대해 물으실 때마다 내 대답이 시원찮아 너무나 민망했다. 튜터님은 어떤 상황에서 로딩 스피너를 붙이려고 하는 건지 차근차근 생각해보면 어려울 게 없다고 하시면서 토닥여주고 가셨다. 그리고 튜터님이 만들어주신 코드는 먼 길 돌아가려고 했던 내가 생각한 복잡한 코드와는 달리 간결하고 클린한 코드였다ㅠㅠ... 간단하게 생각하는 법을 잘 모르는 나는 갈 길이 무한 스크롤 같다.
오늘은 우리 조 프론트 분에게 리덕스 사용법에 대해 설명해 드렸다. 나도 기본적인 개념은 잘 모르지만, 그래도 데이터가 어떤 방향으로 흐르는지는 알게 되어서 그 덕분에 지금까지 리덕스를 그럭저럭 사용해 왔던 것 같다. 그 방법을 간단하게나마 자료로 만들어 공유해 드렸다. 리덕스가 까다로운 건 분명하지만 부디 너무 어려워하지 않으셨으면 좋겠다. (하지만 나도 어렵지 야호)
지금까지의 수정사항을 모두 반영해서, 며칠간 미루고 미루던 재배포를 했다. 한층 더 완성도가 높아져서 뿌듯하다. ╰(*°▽°*)╯
내일 할 일
자잘한 메뉴들은 우리 팀의 노션 페이지와 연결한다. 하지만 노션 페이지에 개인정보가 있으므로 그 부분은 삭제하거나 다른 페이지를 새로 파야 할 것 같다.
footer에 hover 시 애니메이션을 준다. 이건 완전히 추가적인 기능이지만, 시도해보자.
처음에는 숨겨져 있다가 스크롤을 내리면 나오는 프로그레스 바에 상세 페이지 뉴스 제목을 붙인다. 오늘 프론트 분과 같이 여러 차례 도전해봤지만 허탈하게 실패하고 말았다.