D'story

오늘 한 일

• 아침에는 프론트와 백이 각자 진행상황을 공유했다. 좀 더 밝은 분위기의 디자인이었으면 좋겠다는 얘기가 나왔고, 스파르타코딩클럽 컨셉으로 가는 것도 괜찮은 것 같다는 얘기도 나왔다. 그래서 우리는 스파르타코딩클럽의 대표 색상인 진한 분홍색을 주로 사용해서 CSS를 꾸며 나갔고 헤더의 로고도, 푸터 스타일도, 헤더에서 메뉴에 나타나는 hover 효과도 비슷하게 구현했다.
• 오후에는 아직은 사용해보지 않은 axios 가이드를 잠깐 살펴보았고, 리액트 기초 가이드를 찾아서 읽어봤다. 쉽게 넘어가는 부분이 이제는 그래도 많아졌지만, 그럼에도 아직 '아 이게 그래서 이런 거였구나' 하게 되는 대목이 있었다. 예를 들면 JSX 안에서의 주석 처리와 열린 태그 안에서의 주석 처리 모양새가 다르다는 것?
• 내일은 쉬는 날이니 오늘은 오후에 회의를 한번 더 진행했다. 거의 완성된 CSS를 공유하고, 피드백을 받았다. 피드백의 내용에 따라 로고나 버튼 배치 같은 것들을 부분적으로 수정했다.

내일 할 일

• 내일은 마음 편하게 쉴 것이다. 항해를 시작하고 나서 처음 있는, 스스로 아무런 과제도 주지 않는 일요일이다. 마음이 내킨다면 코딩 관련 책을 조금 읽어볼까 싶다.

오늘 한 일

• 미니 프로젝트 주간이 시작되었다. 이제 온종일 강의 듣고 공부하는 시간은 끝났다. 프로젝트를 하면서 틈틈이 찾는 자료들로 충분히 공부가 될지는 다소 의문스럽다. 어찌 됐든 함께 프로젝트를 진행할 우리 조에는 프론트엔드가 나까지 2명, node.js를 다루는 백엔드가 3명 있다. 아이디어 회의를 진행해서 스터디처럼 소모임을 구성하기 위해 게시글을 올리는 페이지를 만들기로 했다. 다함께 miro에서 와이어프레임을 짜고, 노션으로 api 리스트를 작성한 후 S.A를 제출했다. 서로 뭘 알고 있는지 잘 모르는 프론트와 백의 첫 회의란 그야말로 우당탕탕이었다. 그리고 서로의 지식을 공유할 때마다 진심으로 신기해하곤 했다.
• 프론트엔드끼리 버튼, 인풋, 그리드, 텍스트 같은 기초 단위부터 헤더, 푸터 및 메인 페이지, 상세 페이지 등 페이지 단위의 컴포넌트까지 세분화하여 분배했고 각자 코드를 작성하고 깃헙에 올렸다. 나중에 깃헙 리드미에 넣을 내용은 리덕스를 붙일 때부터 정리하고, 그 전에 작성하는 단순 UI 이외의 코드들에 대해서는 주석을 상세히 남기기로 했다.
• 나는 페이지 단위 컴포넌트에서는 목록에서 게시글을 클릭하면 나올 상세 페이지를 맡았는데, 상세 페이지에 들어갈 내용이 많기도 했지만 만들어 놓은 기초 단위 컴포넌트들만 가지고 구성하려니 여백이나 사이즈 같은 것들, 또는 배치 방식이 상이해 자꾸만 시행착오를 겪었다. 뷰포트를 기준으로 한 단위를 사용하지 않으면 브라우저 크기를 줄였을 때 보기 싫을 정도로 시각적 삑사리가 났다. 반응형 웹페이지란 모든 걸 픽셀 단위로만 작성하던 나에게는 가장 힘든 일이 아닐 수 없었다.. 오늘은 일찍 잘 수 있을 줄 알았는데 지금 보니 여전히 비슷한 시각이다. 그래도 다행히 마치기 전에 어느 정도 윤곽을 잡았다.

내일 할 일

• 백엔드와의 회의에 참여해 지금까지의 진행 상황을 공유하고 앞으로의 남은 일정을 재확인한다.
• 로그인 페이지, 회원가입 페이지 작성을 그대로 진행한다고 하면 내일 추가로 완성해본다.
• 전체적인 UI 디자인을 고려해 본다.
• JWT와 AXIOS에 대해 찾아본다.

오늘 한 일

• 기분이 너무너무 바닥을 쳤던 어제에 비하면 오늘은 컨디션이 그나마 나았다. 여세를 몰아서 상세 페이지에서 게시글을 수정하고 삭제하는 기능을 붙였다. 삭제할 때는 게시글 내용은 물론, 게시글과는 별도로 스토리지에 저장되는 이미지 파일까지 함께 삭제할 수 있도록 디스패치를 붙였다. 어제 실패했던 무한스크롤도 차근차근 다시 하니 언제 그랬냐는 듯 잘 작동했다. 답안 코드를 보고 거의 그대로 따라 작성하긴 했지만 상품마다 찜을 누를 수 있는 기능도 추가했다. 하지만 찜을 누르고 나면 회색이었던 하트 모양이 분홍색으로 변하기는 하는데, 컴포넌트 리렌더링 없이는 찜 개수에 1이 더해지지를 않았다. 불필요하게 리렌더링 할 필요 없이 하트가 들어있는 컴포넌트만 부분적으로 리렌더링 하고 부모 컴포넌트에는 영향을 미치지 않으면 좋겠는데 그게 생각처럼 쉽게 되지 않았다. 결국 찜을 눌렀으면 원래의 찜 개수에서 1을 더하는 식으로 조건문을 사용해서 표면적으로 해결하기는 했는데 이것도 꼭 시간 날 때 다시 구현해보고 싶다.
• 실시간 알림 및 알림 페이지를 보여주는 기능과 게시글을 작성할 때 게시글의 레이아웃을 미리 사용자가 고를 수 있게 하는 기능은 시간 문제로 과감하게 버릴 수밖에 없었다. ㅠㅠ 과제 필수사항도 전부 포함하지 못해 아쉬웠다.
• 지난번에도 그랬던 것 같은데, 이번에도 배포 전에 로컬에서 돌렸을 때는 특별한 이상이 없었고 그래서 미련 없이 배포를 했다. 배포가 완료된 후 시험 삼아 들어가 본 페이지에는 각종 CSS를 준 태그들의 위치가 뒤틀려 있었고, 잘만 돌아가던 무한스크롤마저 무한로딩에 걸려 다음 페이지를 불러오지 못하고 있었다.. 태그는 급히 수정했고, 무한스크롤도 한 번에 불러오는 게시글 개수를 일단 조금 늘려놓긴 했지만 아직도 마음이 아프다ㅠㅠ http://market-ob.shop/

내일 할 일

• 내일은 주특기 주간이 모두 끝나고 다시 새로운 협업 프로젝트 주간이 돌아오는 날이니만큼 프로젝트 진행에 대한 계획을 잘 짜야 할 것 같다. 주특기 심화 과제조차 온전하게 해내지 못한 내가 무슨 프로젝트를 한다는 건가 싶기는 하지만... 일단 열심히 해보자.

오늘 한 일

• debounce와 throttle을 이용해 무한스크롤을 붙이려고 했는데, 에러는 안 나는데 작동을 하지 않았다. 무한스크롤이지만 어쨌든 실질적으로는 구현되어야 하는 페이지네이션도 콘솔에 찍어보면 적절하게 데이터를 불러오는 걸 보면 잘 된 건 맞는 것 같다. 하지만 콘솔에만 찍히고 정작 실제로 화면의 스크롤 움직임에 따라 변화가 일어나지는 않았다. 스크롤 높이 계산을 해서 적용하기도 전에 생긴 문제였다. 뷰를 잡으면서 CSS 할 때 일찌감치 스크롤바를 없애려고 이것저것 설정한 게 원인인지, 아니면 코드에서 뭔가 잘못 진행된 부분이 있었는지, 별 생각을 다 해가며 서너 시간 동안 온갖 시도를 했지만 소용이 없었다. 왠지 나중에 알게 되면 대단치 않은 이유였을 것 같지만...ㅠㅠ 코드도 중간중간 console.log를 찍어가며 확인했지만 불러오는 데이터 자체에는 이상이 없었다.
• 이런 실패를 겪고 나니 이미 시간은 많이 흘러버렸고 의욕이 한 풀 더 꺾여버렸지만 일단 작동 안 되는 코드들은 주석처리를 해놓고 다음으로 넘어갔다. 목록에서 클릭하면 상세페이지라고 해봤자 다른 것들 없이 단독으로 뜨는 게 끝이지만가 뜰 수 있게 연결하고, 내가 쓴 글에서만 수정/삭제 버튼이 뜨도록 했다.
• 알림 메시지가 뜨는 페이지를 만들려고 보니 찜을 누르고 안 누르고에 따른 그 데이터를 저장할 DB를 구축하고 또 리덕스를 만져야 했다. 강의자료에 나온 것들을 변형하면 어떻게야 될 것 같았는데, 도저히 여기서부터는 머리가 굴러가지 않는다. 써놓고 보니 TIL은 점점 일기장이 되어가고 있다.

내일 할 일

• 내일은 알림 페이지와 찜 누르기 기능 구현에 다시 한번 도전해보자. 비록 망해서 울고 싶을지라도...ㅠㅠ
• 만약 위 구현에 성공한다면, 그밖에 신경써야 했지만 미뤄놨던 것들을 다시 돌아보고, 컴포넌트들 간의 이동이 매끄러운지 확인해보자.

오늘 한 일

• 정말 다행히도, 어제 계획한 것보다 많은 일을 할 수 있었다. 오늘은 로그인, 회원가입, 게시글 데이터 저장하고 불러오기까지가 목표였는데, 여기에 게시글에 업로드한 파일의 이미지 저장하고 불러오기까지 완료했다. 기본적으로 강의 자료를 많이 참고하면서 진행했지만, 에러 메시지나 로그아웃 상태에서 출력되는 화면 같은 것들은 내 프로젝트 구성에 맞게 조금씩 바꿨다. 바꾸는 과정에서 오류가 나면 오류의 원인을 바닥에서부터 내가 찾아야 하기 때문에 해결하는 데 애먹긴 했어도, 작은 부분이라도 나름 커스텀하게 진행했다고 생각하니 뿌듯하다. 

내일 할 일

• 게시글 데이터나 업로드 파일의 이미지 같은 것들을 저장할 때, 특히 게시글을 입력할 때에는 그걸 키보드로 입력하는 이벤트가 일어날 때마다 그 값을 읽어내게 된다. 하지만 이벤트가 일어날 때마다 변화를 감지하기 때문에 필요 이상으로 여러 번 같은 일을 수행한다. 이미 내 프로젝트는 너무나 많은 이벤트들과 맞닥뜨리고 있다. 내일은 이 이벤트를 관리해 효율성을 높이는 debounce와 throttle부터 시작할 것이다.
• 게시글에서 찜하는 기능을 붙이고, 찜 알림 페이지에서 내가 올린 글에 찜을 누른 사람이 누군지 볼 수 있게 한다.

오늘 한 일

• 온종일 걸리기는 했지만 다행히 이번 주 과제의 뷰는 잡았고, 컴포넌트별 CSS도 생각해본 대로 구현할 수 있었다. 원래대로라면 본격적으로 코딩을 시작하기 전에 노트에든 피그마에든 꼼꼼하게 그려봤어야 했는데, 시간이 모자랄 것도 걱정이 됐고 기획을 할 때보다 코딩을 하면서 즉석에서 생각나는 아이디어(?)를 쓰는 경우가 더 많은 것 같아 일단 시작해버리고 말았다. 사전 기획서 작업은 또 다음으로 밀려버리고 만 것 같다.
• 항해99니까 게더에서도 배 위에서 생활하는 것처럼, 이번 페이지는 그 컨셉을 빌려 선상 시장을 열려고 한다. 심화반 강의 내용이나 과제 와이어프레임을 봐도 이번 주제는 인스타그램 같이 게시글을 올리고 소통하는 페이지를 만드는 것이었다. 하지만 뭔가 구체적인 주제가 있는 게시글이 올라오는 게 나을 거라고 판단했고, 형식은 인스타그램이지만 내용은 당근마켓(ㅋㅋㅋ)을 따라가게 되었다. 선상의 느낌을 주기 위해 배와 관련된 이미지를 배경에 깔았는데 그 때문에 내용을 넣을 수 있는 컨테이너는 상대적으로 작게 나와서 모바일 환경에서는 제대로 구현이 되지 않을 수 있는 단점을 가진다.

내일 할 일

• 파이어베이스에서 이메일 인증 로그인 방식을 미리 설정해놓았고, 이제는 그 기능과 컴포넌트를 연결해서 로그인과 회원가입을 완전히 구현해야 한다.
• 파이어스토어와 연동하여 게시글 데이터를 주고받는 기능도 완성한다.

오늘 한 일

• 유튜브 생활코딩 자바스크립트 관련 영상을 전부 시청했다. 새롭게 알게 된 게 많지는 않았지만, 생활코딩을 통해서 프로그래밍을 대하는 기본적인 태도 같은 것들을 배우고 마음가짐을 바로할 수 있어서 좋았다.
• 주특기 심화 과제의 컨셉을 잡고, 뷰를 그리기 시작했다. 페이지에 따라 배경 이미지를 달리 해야 해서 배경만 담당하는 컴포넌트를 따로 만들었는데, background-image 속성으로 해당 이미지를 불러올 수가 없어서 애를 먹었다.  다행히 구글링을 통해 해결했다. 이미지 파일을 해당 컴포넌트에 import한 후 변수처럼 사용했다. 여기서 시간을 많이 잡아 먹었지만 어찌 됐든 해결해서 다행이다.

	import deck from '../deck.jpg';

	...

	background-image: url('${deck}')

• 그러고 나서는 페이지의 본격적(?)인 창으로 사용할 div, 버튼, 텍스트와 같은 기본적인 요소들에 대한 컴포넌트를 만들었다.

내일 할 일

• 뷰를 마저 잡는다. 내일 하루 동안 끝내고 싶지만 가능한 일인지는 잘 모르겠다.

오늘 한 일

• 오늘은 한 일이 강의를 들은 것 이외에는 없다.. 그래도 4주차 강의까지 완강했다. 비록 수박 겉핥기 식이지만, 이렇게나마 들으면 과제 할 때 자료 찾아보는 게 훨씬 편하더라. 또 운 좋게 머릿속에 남는 것들이 있기도 하고?

내일 할 일

• 오늘 못한 자바스크립트 강의를 듣는다.
• 과제 필수사항을 체크하고, 오늘 못한 과제 기획을 해본다.. 내일은 사실 일요일이다ㅠㅠ원래대로라면 쉬는 게 맞다.