D'story

오늘 한 일

• 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주차 강의까지 완강했다. 비록 수박 겉핥기 식이지만, 이렇게나마 들으면 과제 할 때 자료 찾아보는 게 훨씬 편하더라. 또 운 좋게 머릿속에 남는 것들이 있기도 하고?

내일 할 일

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

오늘 한 일

• 오늘 열린 주특기 심화 강의 <리액트 심화반>을 2주차까지 수강했다. 수강 시간도 길고, 내용도 많아서... 이것도 역시 이해를 하고 말고와는 상관없이 한번 눈으로 보고 따라해 보는 것에 의의를 두었다. 시간이 갈수록 매일매일 주어지는 새로운 과제들에, 또 아직 완료하지 못한 지난 숙제들에 양쪽으로 치이게 된다. 왜 하루는 24시간뿐인 걸까.. 잠을 잘 수 있는 시간이 점점 줄어들고 있다.

내일 할 일

• <리액트 심화반> 3주차 강의, 시간이 된다면 4주차 강의까지 수강한다.
• 프로젝트를 진행하고, 코딩을 하다 보니 자바스크립트에서 부족함을 느낄 때가 종종 있어 자바스크립트 관련 영상을 찾아본다. 하도 구글링 하고 이것저것 갖다 써 봐서 구문을 쓸 줄은 알지만, 기본 컨셉이나 중요 개념들을 잘 모르는 것 같다.
• 주특기 심화 주간 과제의 기획을 해 본다. 어제 제출한 기본 과제는 예시로 주어졌던 와이어프레임에서 크게 벗어나지 않고 CSS만 조금 더 건드린 정도라, 이번엔 색다른 시도를 해보고 싶다.

Day24 한 일

• 음... 분명 많은 걸 한 것 같은데 밤을 꼴딱 새서 기억이 잘 안 난다. Day24는 어제였고, 잠은 오늘 아침 6시 30분이 되어서야 잘 수 있었다. 리덕스를 붙이고 파이어베이스와 연결하는 것도 강의자료만 보고서도 어찌어찌 되었던 것 같다. 중간에 자꾸 map으로 뿌려줘야 하는 리스트가 'not iterable'이라며 오류가 떴지만 그것도 오랜 구글링 끝에 극적으로 해결했다. 의외로 배포하는 데서 시간을 많이 잡아먹을 수 있다길래 배포까지 해놓고 잠을 자자는 생각으로 밤을 통째로 날렸다.

Day25 한 일

• 점심 때 겨우 일어나서 컴퓨터를 켜 보니 배포는 무슨, 제대로 된 게 없었다. 뭔가 연결이 되긴 됐지만 크롬창 탭 부분에만 title이 겨우 뜨고 html로 치면 body 부분은 아무것도 출력되지 않는 상황이었다. 파이어베이스에서 배포하려던 게 잘 안 될 수도 있겠다는 걸 깨닫고는 바로 AWS S3로 전환했다. 파이어베이스로 고전하던 문제들은 S3에서는 만나지도 않았다. 그리고 생각보다 배포는 빠르게 끝났다.
• 그런데 또 다른 문제가 생겼다. 내가 의도했던 모양새는, 데이터를 추가하는 페이지에서 추가를 완료하고 나면 다시 메인 페이지로 돌아오면서 방금 추가한 데이터를 포함한 데이터 리스트가 보여지는 거였다. 그런데 추가를 하고 나면 메인 페이지로 돌아가기는 하는데, 데이터가 아무것도 보이지 않았다. 새로고침을 하면 보이기는 했지만, 왜 그게 자동적으로 안 되는 거였을까. 혼자 고민하고 찾아봐도 도저히 안되겠어서 팀원들에게 코드를 보여주고 함께 머리를 싸맸지만 그래도 해결이 잘 되지 않았다. 결국 데이터를 추가하는 버튼을 눌렀을 때 페이지를 강제로 새로고침을 하는 window.location.reload();를 넣어 해결했다.
• 그리고 또 다시 문제가 생겼다. 로컬에서는 위의 방법으로 해결이 되는 듯했지만, 배포하고 나서는 새로고침은커녕 아예 메인 페이지로 돌아가지도 않았다. window.location.reload();를 빼고 실행하면 새로고침은 안될지언정 메인 페이지로는 갈 수 있었다. 추가한 후 페이지 이동을 못하는 버전, 페이지 이동은 할 수 있지만 빈 화면을 보여주는 버전 중 택일해야 하는 상황이었다. 고민 끝에 데이터를 추가하고 나면 데이터를 추가했다는 팝업을 띄우고, 그 팝업에서 확인 버튼을 누르면 그제야 메인 페이지로 이동하는 방법을 생각해 냈다. 조금 번거로운 단계를 거쳐야 하지만 그래도 그 편이 보기에 나았다. 처음 의도했던 것만큼 깔끔하지는 않았지만 그래도 완성본을 제출할 수 있었다.
• 얼마나 오래 도메인을 유지하게 될지 모르겠지만.. http://my-dic.shop/

내일 할 일

• 내일부터 주특기 심화 주간이 시작인데, 어떤 과제가 어떤 식으로 주어지느냐에 따라 할 일이 달라질 것 같다. 새로운 과제가 주어지면 뭐가 됐든 과제 수행 계획을 세워봐야겠다.
• 주특기 심화 과정에 해당하는 강의를 듣는다.

Day22 한 일

• 주특기 과제로 구성한 두 컴포넌트 중 하나의 뷰를 거의 완성했다. 버튼 하나 고정시키는 것만 적용이 잘 안 됐다. 병원까지 장거리 이동을 해야 해서 하루 중 여기에 온전히 쏟을 수 있는 시간은 얼마 없었는데, 마지막의 마지막까지 그 버튼 때문에 머리를 싸매다가 결국 포기했다.

Day23 한 일

• 다시 어제의 버튼에 매달리는 것부터 시작했다. 이걸 찾아봐도 안 되고 저 자료를 따라해도 안 되는데, 그걸 쓴 사람들은 거의 비슷한 방식을 사용하고 있었다. 보통 부모 태그에 position: relative를 주고, 고정 대상이 될 자식 태그에 position: absolute와 z-index 속성을 줘서 화면이 스크롤 되어도 상관없이 버튼은 같은 자리에 계속 떠 있게 만드는 거였다. 코드를 그대로 가져다 써도 안 먹혀서 온갖 시도를 다 해 본 후에야, position: relative를 바로 상위 태그가 아닌 한 단계 더 위의 태그에 주니 원하는 모양새가 나왔다. 이유는 아직 잘 모르겠다. 그렇게 장장 4시간에 걸쳐 버튼 하나를 고정했다.
• 다음 컴포넌트의 뷰를 구성하는 건 버튼 붙이는 것보다 쉬웠다. 어차피 기본적인 스타일은 이미 만들어 놓은 컴포넌트와 통일성 있게 해야 하니 색상도 갖다 쓰게 되고, 세세한 것들에만 손을 대면 됐다. 그렇지만 CSS가 완성되고 나니 하루가 다 갔다.

내일 할 일

• input에 입력되는 텍스트를 ref로 가져오는 기능을 구현한다. 그런데 input은 자식 컴포넌트에 있고 state는 부모 컴포넌트가 가지고 있는데, 이걸 어떻게 하지?
• redux를 붙여서 데이터를 모은다.
• firebase를 연결한다.