D'story

오늘 한 일

• 공부하자, 공부! 면접에 대비하기 위한 100문 100답을 작성하는 날이라고 해서 구글링해가며 100문을 어떻게든 작성은 했다. 항해 측에서는 100답보다 100문이 더 중요하니 질문 100개를 채우는 데 일단 포커스를 맞추자고는 했었지만, 작성하고 나니 두려움이 물밀듯 밀려왔다. 사실 코드는 돌려봐서 작동하는지 안 하는지 확인하고 나면 그 다음에 취해야 할 액션이 정해져 있기 때문에 확실하게 검증이 된다. 하지만 이론적인 부분이라면 얘기가 달라진다. 이해는 하는데 이걸 말로 설명하라고 한다면? 오마이갓
• 감사하게도 지원 서류가 통과되어 다음 일정을 잡자는 연락은 오늘도 계속 이어졌다. 다음주에만 면접 두 번에 과제가 한 번이다. 생각만 해도 긴장돼서 뱃속이 간질간질하다. 이 긴장을 잊을 수 있는 건 오로지 공부뿐입니다.

오늘 배운 것

• 오늘 배운 것은 따로 정리할 예정이다. 어차피 내일을 기점으로 항해가 끝나고 나면 TIL은 항해가 아닌 다른 메뉴에 넣어야 할 테니까, 오늘부터 미리 그렇게 하는 셈이다.

내일 할 일

• 내일은 항해99 2기 수료식이 있는 날이다. 수료라니? 벌써? 아니 나 수료해도 게더 맨날 출근할 것 같은데?

오늘 한 일

• 오늘은 낮잠을 자지 않았다. 프로젝트 기간은 아니지만 집에 공사가 좀 있어서 아침에도 잠을 3시간밖에 자지 못했다. 그래서 낮에 까무룩 잠들어버릴 줄 알았는데 어쨌든 용케도 잘 버텼다. 대신 자정 넘어서 잤다. 밤잠?
• 서로 계속 타이밍이 엇갈려서 한 자리에 모이기 참 어려웠는데, 드디어 Open door 첫 회의를 가졌다. 다음 주가 지나면 바로 추석이라 지금은 뭔가를 새로 시작하기가 매우 애매한 지점이라는 데 다들 동의하는 분위기였다. 프론트에서는 꼭 한 번 도전해보고 싶었던 타입스크립트를 공부해서 적용해보기로 했다! 첫 회의이기도 하고, 본격적인 방향을 설정하는 자리는 아닌가 싶어서 가만히 있었는데 먼저 제안해 주셔서 너무 좋았다. 오늘 구인공고를 둘러보니, 자격요건에 타입스크립트를 명시한 곳이 꽤 있어서 한 번쯤은 경험해보고 넘어가야 할 것 같았다. 공부할 생각에 벌써부터 설렌다.
• 낮잠이 없어 길었던 낮 시간 동안 로켓펀치와 원티드를 오가며 마음에 드는 회사의 채용공고를 꼼꼼히 읽어보고 이력서를 넣었다. 어제의 30이나 오늘의 15나 들어가는 노력은 만만찮았다. 숫자로만 판단하고 어느 한 쪽이 어떨 것이다 지레짐작한 것은 의미가 없었다.
• 프로젝트 토크부트를 함께한 디자이너님이 며칠 전에 연락 주신 내용을 바탕으로, 프로젝트는 끝났지만 다시 한 번 전체적으로 손을 보려고 간만에 vscode를 켰다. 헤더를 position: fixed로 붙이니 그 위에 잘만 올라가 있던 로그인 버튼이 없어져버리고, 화면 크기에 따라 화질구지가 되기도 하는 확장자 png의 이미지 파일을 svg로 변환해서 넣으니 시꺼멓게(????) 변해버리고, 아주 난리도 이런 난리가 없었다. 아니 왜 처음부터 개선의 의지를 꺾으려고 하는 건데!?...물론 컴퓨터는 아무런 잘못이 없다...

오늘 배운 것

• 로켓펀치와 원티드의 이용방법을 알게 되었다. 처음에는 둘 다 나에게 원하는 게 지나치게 많다고 느꼈지만, 여느 채용플랫폼과 마찬가지로 한 번 기본 세팅을 해놓으면 그 이후의 일은 일사천리로 진행된다. 로켓펀치의 장점은 내가 지원한 회사에서 내 이력서를 확인했는지, 검토 중인지, 뭐라고 답신을 주는지를 전부 실시간으로 알려준다는 것이다. 반면 원티드는 그렇게까지 상세하고 친절한 알림 서비스는 없지만 한 회사에 지원하고 나면 비슷한 채용공고를 올린 다른 회사들의 목록을 보여주면서 한꺼번에 지원할 수 있는 기능을 제공한다.

내일 할 일

• 내일은 면접 준비 과정의 일환으로 100문 100답을 작성해보는 날이다. 내일도 하루종일 정신이 없을 것만 같다.
• vscode를 다시 한 번 켤 용기를 가지고 문제들을 해결해보자.

오늘 한 일

• 협력사 중 30개사를 추려 지원서를 넣었다. 30개를 꽉 채워야 좋다길래 최대한 열심히 각 협력사별 링크도 타고 들어가보고, 링크가 제대로 되어 있지 않은 곳은 검색도 해보고, 지원하는/지원하지 않는 이유도 나름대로 만들어 보았다.
• 프로젝트 Open door의 현재 진행 상황을 알 수 있다고 해서 줌 회의에 참여해 보았다. 나는 그냥 한 마디도 하지 않고 거기 있을 뿐이었다. ALL 영어라 나로서는 알아듣기 어려운 부분도 있었지만, 나름대로 지금의 기능을 설명하려고 애쓰는 학생들의 모습이 인상깊었다. 교수님인 줄 알았던 분은 교수님이 아니셨다...!?
• 그간 제대로 돌보지 않은 깃허브 저장소 여러 개 중 미니 프로젝트 때의 것을 들여다 보았다. 아예 없다시피 한 리드미(CRA.....)도 또한 아예 없다시피 한 그때의 기억을 되살려 써보고, 감사하게도 당시 팀장님이 주신 시연 영상 파일이 있어서 gif로 변환해 넣어 보았다. 별로 한 것도 없는데 시간만 흘러흘러 벌써 이렇게 되어버렸다.

오늘 배운 것

• 프로젝트 시연 영상은 중요하다. 프로젝트가 끝나고 나서 S3 버킷을 터뜨려버리면 사이트 URL은 더 이상 무용지물인 거고(애초에 서버 연결이 끊어지면 버킷이 있어도 의미 없다), 남는 건 시연 영상뿐이다. 그때는 몰랐다.
• 동영상을 gif로 변환할 때는 여기서 → https://gifmaker.me/ 영상을 통째로 변환한다거나 길이가 120초 이상 길어지면 못 한다. 길게 하려면 차라리 gif로 변환할 게 아니라 영상 자체를 써야 하는 거지.

내일 할 일

• 한 번 바뀌어버린 낮밤이 돌아오질 않는다. 프로젝트 없이도 지금 이 시간에 멀쩡하다는 것 자체가 문제다. 내일은 꼭 낮에 자는 잠은 졸려도 참거나 줄여보자. 이러다 자다가 망하겠다.
• 내일은 협력사가 아닌, 다른 사이트에서 지원할 회사 15개를 추려야 한다.
• 토크부트에서 수정해야 하는 부분부터 조금씩 다시 작업을 시작해 보자.

오늘까지 한 일

• 그동안 도대체 무슨 일이 있었더라... 항해를 하다가 바다에 빠져서 파도가 치는 대로 그냥 그냥 흘러 다닌 것만 같은 기분이다. 정신을 차리고 나니 프로젝트 발표회도 끝났고, 그 날 하루는 푹 쉬었으며, 그 다음날부터 바로 이력서를 작성하라는 칼 같은 주문이 떨어졌다. 그리고 계속 틈나는 대로 아침잠이든 낮잠이든 저녁잠이든, 잠을 자고 있다. 생각보다 그간 몸이 많이 지쳤던 모양이다. 아직도 베개에 머리만 대면 잠에 빠져들고, 눈을 뜨면 몇 시간이고 지나 있다. 다행인 건, 그렇게 자느라 지친 몸을 이끌고 다시 시간에 쫓기면서 코딩을 하지는 않아도 된다는 것.
• 프로젝트 발표회는 89일차인 지난 주 금요일에 있었다. 게더에서 마치 코엑스나 킨텍스의 오프라인 박람회마냥 공간을 구성해 놓고 팀별로 부스를 차려 놓았다. 주로 우리 팀 부스 안에 자리를 잡고 있다가, 혹시나 협력사나 다른 누군가가 들어와 질문하거나 하면 대답을 하는 시스템이었다. 튜터님들이 와서 말씀하시기를 필수 요원만 제외하고는 부스 밖으로 나가서 말하자면 호객을 해야 한댔지만, 유일한 프론트엔드 팀원으로서 자리를 비울 수가 없었다. 물론 자리를 비우고 싶진 않았다ㅋㅋ 조금은 어색하고 쑥스럽기도 한 행사였지만 생각했던 것보다도 좋은 경험이었다. 언제 이렇게 우리의 프로덕트를 외부에 내보이겠으며, 또 언제 이렇게 다양한 사람들을 만나볼 수 있을까. 무엇보다도, 프로덕트가 좋다는 칭찬을 많이 받았다. 그때마다 그동안의 일들이 주마등처럼 스쳐 지나가면서 눈물이 나오려는 걸 참느라 혼났다.
• 90일차인 지난 주 토요일에는 주문대로 이력서 작성을 시작했고, 그 다음날 제출했다.
• 오늘은 채용플랫폼이자 커리어 매칭 기업인 원티드에서, 제출한 이력서 피드백을 주제로 특강을 나왔다. 엄청나게 놀랍고 내가 전혀 생각지도 못했던 그런 솔루션이 있었다기보다는, 피드백 받는 분들의 이력서 내용을 한 번 훑어볼 수 있었다는 점이 훨씬 유익했다.
• 그리고 또 다시 내 이력서를 수정하고 가다듬어서 제출했다.
• 블로그가 따로 있으니 예쁘게 꾸밀 의욕이 별로 없었던, 그래서 코드 저장소로만 사용되어 왔던 깃허브의 프로필 페이지를 보기 좋게 수정했다. 어느 정도 해 놓고 나니 블로그도 깃허브로 옮겨버릴까 싶다. 그러면 잔디도 심을 수 있고 좋겠는데..?

내일 할 일

• 내일은 협력사 리스트를 살펴보고 지원할 곳을 추려보는 날이다.
• 시간이 허락한다면 그동안 방치해왔던 깃허브 저장소들을 좀 돌보는 시간도 가져야겠다.

오늘까지 한 일

• 이게 TIL인지 WIL인지 모르겠다...ㅋㅋ블로그 한 번 들어와 볼 시간 없을 정도로 정신없는 게 뭔지 이제는 알 것 같다. 오늘까지 뭘 했는지 다 적으려면 시간도 많이 걸릴 것 같고, 사실 머릿속이 뒤죽박죽이라 정리하기가 어렵다. 생각나는 대로 간단히만 적겠다.
• 모바일 사이즈로 미디어쿼리를 한창 적용하고 있던 중에 발견되는 다른 오류들을 고치고 하다 보니 결국 오류의 늪에서 벗어나지 못하고 모바일 사이즈는 절반도 채 제작하지 못했다. 그리고 난 아직도 그 안에...
• 있어야 하지만 아직도 없는 페이지들을 급히 만들었다.
• AWS에서 SSL 인증서를 발급받아 https 도메인을 적용했다.
• 구글, 카카오 소셜로그인 기능 적용하는 것을 백엔드 팀원인 하영님과 함께 며칠에 걸쳐 시도해 보았는데, 기능을 다 붙여놓고 나서 처음에는 둘 다 잘 되는 듯했다. 나중에는 유독 구글 로그인 후에만 CORS 에러가 빈번하게 발생했다. 구글 쪽으로는 눕고 싶지도 않았다..
• 이 CORS 에러를 해결하기 위해 XMLHttpRequest, 프록시 설정 등 온갖 찾을 수 있는 해결책은 다 때려 넣어봤다. 몇 시간을 붙잡아도 해결이 되지 않아서 우리는 CORS 에러 자체가 나오지 않는 환경을 만들기 위해 동일 도메인 배포를 시도했다. 48시간 동안 6시간만 자는 고난을 겪었지만 마음처럼 잘 되지는 않았다. 하지만 그렇게 긴 시간, 잠을 제대로 안 자도 열중해서 뭔가를 파고들 수 있다는 게 스스로 참 신기했다. 비록 결과는 만족스럽지 않았을지라도, 과정 자체에서 배운 게 많았다.
• 바로 윗 단락을 훈훈하게 마무리했지만, 동일 도메인을 포기하자마자 기다렸다는 듯이 https 배포가 말썽을 일으키기 시작했다. 도메인부터 해서 기본적인 설정들이 워낙 많이 다시 바뀌었으니 배포도 처음부터 차근차근 다시 했는데, 잘만 됐던 https가 이번에는 안 되는 것...!!! 울며 겨자먹기로 https마저 보류했다. 인터넷에서는 어쩜 그렇게 다들 쉽게 설명해 놨는지 모르겠지만 모든 방법을 다 따라해도 안 됐다ㅠㅠ(사실 나도 첫 번째 배포는 쉬웠어...)
• 1주일 내내 시도해본 것은 많았는데, 그랬던 것치고는 손에 쥘 수 있는 결과물이 얼마 없었다. 프로젝트에 적용을 못했으니 결국 누구도 이런 피나는 노력을 알아봐주지 않을 테니 허탈했다. 그래도 좋은 경험이었다. 대표적으로 하영님 말씀대로, AWS는 하도 들락날락거려서 이제 예전만큼 어렵게 느껴지지 않았다.
• 그러고 나서는 다른 조보다 늦어진 1차 배포를 준비했다. 크고 작은 에러, 어떤 경우에는 발생하고 어떤 경우에는 발생하지 않는(왜인지 원인을 아직 모르겠는) 에러들이 많은 상황에서 최대한 에러를 잡고 오류를 수정했다. 미완성인 부분이 꽤 있지만 어찌 됐든 일단 1차 배포는 할 수 있었다. 이건 '1차'니까 계속 수정하고 다차 배포하면 되지ㅎㅎ
• 배포를 하고 나서 든 생각인데, 어차피 나 스스로에게나 누군가에게나 지적받을 수밖에 없는 오류라면 배포해서 보여줘버리고 피드백으로서 추후에 반영하는 것도 괜찮은 것 같다. 조금이라도 더 고쳐놓고 배포하려고 하니 그 과정에서 시간이 너무 많이 걸렸고 효율적이지 않을 수 있다. 한 번 배포했다고 프로젝트가 끝나는 게 아닌데 피드백 받을 수 있는 기간이 긴 게 더 낫지 않았을까.
• 1차 배포 기념으로 처음으로 우리 팀 넷이서 맥주 한 캔씩 들고 얘기하는 시간을 가졌다. 프로젝트 관련이 아닌, 그냥 그때그때 생각나는 얘기 아무거나 할 수 있다는 게 너무 좋았다🍺
• 다들 주무시러 가셨고 나는 배포 이후에 바로 들어온 피드백 중 오류 관련한 사항들을 몇 가지 해결했다. 그리고 오랜만에 이렇게 TIL 아닌 TIL을 쓴다.
• http://talkbout.camp → https://talkbout.camp

내일 할 일

• 내일은 스파르타 대표와 우리 팀 전체의 면담이 있다. 그 전에 일어날 수 있겠지...?
• 모바일 사이즈 미디어쿼리를 후딱 적용하고 피드백 들어오면 가급적 바로바로 처리하자.
• 튜터님 면담 이후 작성한 할일 목록 중 이제 추가적으로 적용할 사항들 몇 가지만 남아 있는데, 하나씩 시도해보자.
• 그러고도 시간이 남으면 https와의 재대결을 위해 공부를 하자.

어제까지 한 일

• 며칠 만에 쓰는 TIL인지 모르겠다. 게을러서 혹은 바빠서 안 쓴 것도 있었지만, 그동안 멘탈 터질 일이 많았다. 아직 잠을 안 잤으니 오늘이 토요일이라 치면, 엊그제인 목요일에 우리 팀 프론트 두 분이 항해99에서 동시에 하차하셨다. 이로써 놀랍게도 우리 팀 프론트에는 나 하나 남게 되었고(ㅋㅋㅋ) 추가하려던 기능은 거의 모두 포기해야 했다.
• 하차 이유야 어찌 됐든 사전에 귀띔 한 번 하지 않은 것은 문제였다고 본다. 하지만 이미 앞으로의 시간은 2주도 채 남지 않았고, 이 문제에 대해서 왈가왈부할 시간도, 여유도 없었고, 감정 소모조차 하고 싶지 않았다. 팀장님 포함 팀원들도, 항해99 매니저님도, 리액트 튜터님도 모두가 나를 너무 걱정했다. 감히 짐작건대, 그 걱정은 1차적으로는 '이러다 얘마저 하차해버릴 수도 있겠는데...?' 하는 마음 아니었을까. 그렇지만 나는 애초에 하차를 고려해 본 적도, 외부 요인으로 하차할 마음도 전혀 없었다. 다른 분들의 우려는 이해하지만, 그 우려가 나는 약간 찜찜했다. '내가 그렇게 책임감이 부족해 보이나?' 싶었다. 그리고 사실 하차하신 두 분이 나에게 그렇게 영향력 있는 분들은 아니었으니 흔들릴 일도 아니었다.
• 아무튼 급한 대로 당장 코드 리팩토링부터 시작했는데, 구석구석 살펴보다가 알게 된 사실은 이미 태블릿 사이즈 CSS 적용 단계로 넘어간 상태였음에도 데스크탑 버전조차 삐끗하는 부분들이 있다는 거였다. 그러니 태블릿 버전은 말할 필요도 없었다. 이번 주 초에 두 분에게 '계획을 세워서 작업을 (빡세게) 해보자'고 얘기했었고(실제로는 하다 보니 그렇게 진행하지도 못했지만) 혹시 그것 때문에 부담을 느끼셔서 하차를 고민하신 게 아닐까, 잠시 그런 생각을 했었다. 하지만 코드를 정리하면서, 아무리 그렇게 얘기했어도 실제로 작업을 수행하는 쪽에서 전혀 협조적이지 않았었다는 것도 깨달았다. '이것도 안 했다고?' 하는 생각이 끝없이 중첩되고, 리팩토링을 하면 할수록 기운이 빠졌다. 상황을 이렇게 만든 나 자신에게 너무나 실망스러웠다. 밤새 코드를 만지고 나니 밤낮은 완전히 바뀌었고 기분도 많이 상했다.
• 그런 상태에서 어제 금요일 낮에는 튜터님이 오셔서 이 절망적인 상황을 타파하기 위해 전체적인 프로젝트 코칭을 해주셨다. 물론 프론트 중심이었지만, 튜터님이 오셔서 촌철살인 해주신 덕분에 앞으로의 작업 방향이 구체적으로 세워질 수 있었다. 내가 프론트지만 프론트는 정말 진짜로 엄청나게 꼼꼼해야 한다는 걸 절실하게 배웠다. 단 한 번도 생각지도 못한 포인트를 끝도 없이 짚어주셨다. 말 그대로 디테일에 강해야 했다. 할 일 목록이 길어지다 못해 바닥에 끌릴 정도였다. 그마저도 지금 나 혼자인 상황을 고려해서 규모가 크거나 시간 소요가 많을 만한 작업들은 다 제외하고 말씀해 주신 거였다.
• 그러고 나니 체력도 정신력도 온통 고갈되어 버려서 침대에 눕거나 눕지 않더라도 정신없이 잠들고 아주 난리가 났었다.

오늘 한 일

• 튜터님이 가르쳐 주신 포인트들을 우선순위를 매겨 대충 정리한 후 위에서부터 하나씩 지워나가고 있다. 하지만 다 지우려면 아직 한참 멀었지...
• 리스트로 죽 나열한 이미지 카드들에는 투명도가 낮게 설정되어 있고, 동적인 느낌을 주기 위해 마우스 호버 시에만 투명도를 높이게 되어 있었다. 그러다 보니 호버 효과가 나오면 이미지 위에 하얀색으로 적힌 타이틀이 거의 안 보이는 문제가 있었다. 텍스트 쪽을 어둡게 처리하면 된다는 그림이 그려졌고, 튜터님은 텍스트 쪽에 알파값을 주면 된다고 하셨었는데, 관련해서 아무리 검색을 해도 이렇다 할 시원한 해결책이 보이지 않았다. 결국 처리방법의 정석은 아닌 것도 같지만, 의사 요소 ::before와 linear-gradient를 적절히 섞어 이용했다. 마음에 드는 모양을 만들어 낼 때까지 너무 많은 시간이 걸렸다.

const ImageDiv = styled.div`
	opacity: 0.4;
    &:hover {
    	opacity: 0.9;
        ::before {
            position: absolute;              // 부모 요소에 position: relative 를 준다
            bottom: 0;
            content: '';
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,.6) 100%);
        }
    }
`;

내일 할 일

• 일단 아침에는 좀 쉬고....라고 해봤자 지금 벌써 8시구나ㅠㅠ
• 아마 많이는 못 쉬겠지...

오늘 한 일

• 벌써 이번 주 이틀이 지났다. 할 일은 산더미 같은데 오류를 한 번 만나면 내 멘탈 바사삭 되어 한동안은 더 이상 생산적인 사고가 불가능한 상태가 되어버린다. 기능을 더 탄탄하게 만들기 위해 필요한 추가적인 API가 아직 준비되지 않은 상황이라, 오늘은 프론트 팀원들과 함께 비교적 가벼운 목표들을 설정했고, 앞으로 더해볼 수 있을 만한 기능들을 탐색하는 데 시간을 보냈다.
• 그러면서 '로딩스피너나 붙여 볼까나 룰루' 했다가 큰 코 다쳤다... 의외의 복병이었다. 생각해보니 리덕스 모듈을 여러 개 쓰는 프로젝트에서 로딩스피너를 붙여본 적이 없었던 것이다(!!) 모듈이 하나이면 로딩 상태 여부에 대한 boolean 값을 리듀서에서도 설정해 줄 수 있는데, 모듈이 여러 개다 보니 결국 적어도 어느 하나의 모듈에서는 모듈 밖에 있는 로딩 상태를 건드려야 하는 꼴이었다. 이렇게 된 이상 모든 모듈들에게 공평하게, 로딩만 다루는 모듈을 새로 하나 팠다. 그리고 각 모듈 안에서 액션함수를 호출할 때마다 시작 지점쯤에 로딩 상태를 true로 바꿔주었다. 그런데!? 바로 여기서 문제가 있었다. 아무 생각 없이 모듈 한 개짜리 프로젝트에서 했던 것처럼 리듀서 안에서 다시 로딩 false로 바꿔주려니, 리듀서에서는 다른 동작을 불러 일으키는 짓을 할 수 없었던 것이다...! 모든 상태가 리듀서 안에서 깔끔하게 완결이 되어야 하지, 다른 모듈을 건드려서 또 다른 함수를 호출하면 안되는 것이었다. (stackoverflow에서 이걸 뭐라고 하던데 기억이 안 난다)
• 아무튼 매우 큰 실망을 안고 차선책을 찾아 헤맸다. 액션함수 앞에 넣은 로딩 true를 리듀서에 들어가기 전에 다시 바꿔주려면 결국 액션함수 말미쯤에나 로딩 false를 넣어야 한다는 건데, 그렇게 해서 스피너가 보이기는 할까 싶었다. (눈물을 머금고 해봤더니 보이긴 보이더라...) 원하던 그대로의 예쁜 코드는 아니었지만 트러블은 이렇게 일단락되었다.
• 그동안 나중에 봐야지 하고 미뤄놨던 자료들을 한 번 들춰보는 과정에서, 주특기를 리액트로 선택하기 이전에 진행되었던 주특기 Q&A 시간에 받아놨던 자료도 보게 되었다. 리액트를 "리액트스럽게" 사용하는 방법은, 컴포넌트를 재활용하고 서버에 대한 요청 횟수를 가급적 줄여서 리소스를 아끼는 것이라고 했다. 안 그래도 지금 우리 프로젝트 중 내가 짜 놓은 컴포넌트 일부가 API 콜을 필요 이상으로 많이 하는 것 같다는 생각을 하고 있던 와중에 접한 내용이었다. 이건 오늘이 날이다 싶었다. 마침 급하게 해결할 일도 없는 이 상황은 오늘이 마지막일 것이니 각 잡고 시작했다. 3개로 나눠진 페이지에 공통적으로 속해 있는 컴포넌트 하나를 완전히 위로 빼 버리고, 거꾸로 3개의 페이지는 하위 컴포넌트로 바꾸어 집어넣었다. 결론적으로 3개였던 페이지는 1개가 되고, 1개였던 하위 컴포넌트는 3개가 되었다. 그 3개의 페이지는 어차피 상단의 디자인은 같고 하단의 탭 간 이동만 발생하는 구조라 상식적으로도 하나의 상위 컴포넌트 밑에 3개가 함께 묶여 있는 게 맞다고 생각했다. (그 말인즉슨 지금까지는 비상식적...)
• 해결하는 과정에서 라우팅에도 변동이 생겨 에러란 에러는 다 만났지만 탭 간 이동을 할 때마다 API 콜을 하거나 useSelector를 쓰거나 history.state로 데이터를 넘겨줘야만 했던 문제가 해결되었다.

내일 할 일

• 오늘 찾아본 에디터 라이브러리를 적용해보자. 기껏 만들어 적용한 이미지 프리뷰와 업로드는 이 에디터에 묻혀버릴 것만 같지만...ㅠㅠ어쩔 수 없지.
• 태블릿과 데스크탑의 중간 어느 특정 구간에서 깨지는 배너를 어떻게 좀 해결해 보자.
• 프로필 사진 업로드 기능을 넣어보자. (이미지 프리뷰, 업로드 여기서 쓸 수 있겠군)
• 태블릿 CSS 최대한 빨리 끝내자ㅠㅠ그만하고 싶다..CSS..

오늘 한 일

• 오늘은 회의에 많은 시간을 쏟았다. 지난 주 토요일에 중간 점검이 있었는데, 다른 팀들이 워낙 준비를 잘 하기도 했고, 우리 팀에게서 부족한 점을 생각보다 많이 발견한 계기가 되었다. 다른 팀에는 질문하지 않는 CSS 관련 질문을 받는가 하면, 리덕스에 대한 기본적인 질문도 있었다. 모양새는 얼추 대답 비슷한 걸 내놨던 것 같기는 한데, 발표 준비에 소홀했던 나 자신을 되돌아보게 되었다. 그래도 우리가 앞 순서여서 다행이었던 걸까, 조금 긴장이 풀린 상태로 다른 팀의 발표를 들었다. 마지막 팀 발표까지 전부 보고 싶었지만, 그 전날 이미 한숨도 안 자고 밤을 새버린 나는 중간에 주어진 쉬는 시간 1시간 사이에 잠들어서 밤에 일어나고 말았다.. 아무튼 토요일 이후로 나는 물론 팀장님 포함 우리 팀원들 전체가 적지 않은 충격을 받았다. 그래서인지 바빴던 와중에 모처럼 앞으로의 계획을 차근차근 얘기해볼 기회가 있었다.
• 프론트 팀원들끼리는 지금까지 완성한 기능들을 톺아보는 시간을 가졌다. 에러가 나는지, 기능이 잘 돌아가는지 교차 확인도 해주고, 에러가 나면 같이 해결도 해보고, 서로서로 부족한 점도 얘기해주고. 평범하다는 평가를 받을 수밖에 없었던 CRUD를 오늘에야 마무리하는 듯싶다.
• 오후 8시 저녁 회의가 끝나고 나서는 피그마에 올라온 태블릿 사이즈 디자인을 적용해보기 시작했다. 지난번 클론코딩 때 눈에 충분히 익혔던 미디어쿼리를 적용해보았고, 직접 해보니 생각보다 까다롭지 않았다. 이미 styled-components를 사용하고 있던 중이라 원래부터 클래스나 아이디 선택자는 잘 사용하지 않았었는데, 이번에는 어쩌다 보니 클래스 선택자를 써야 할 일이 생겼다. 데스크탑 버전(1440*1080)에서는 메인 화면에 등장하는 카드가 6개인데, 태블릿 버전(768*320)에서는 그 수가 4개로 줄어야 하기 때문이었다. 잘 쓰지 않던 클래스 선택자와, 본격적으로는 처음 사용해보는 미디어쿼리를 적절히 섞어서 styled-components와 함께 쓰려니 약간 애매하게 느껴지긴 했다. 하지만 하늘은 역시 구글링하는 자를 돕는다고.
• "맨 마지막 카드 2개만을 어떻게 없애지!?" -> "일단 이름을 붙여야 없애든 말든 할 것이니 클래스를 써보자" -> "맵을 돌리는 카드들을 어떻게 각각 이름을 붙이지?" -> "인덱스가 다르니 인덱스로 이름을 줘 보자" -> "이름은 붙였는데 어떻게 없애지!?" -> "안 보이게 하면 그만 아닐까, 미디어쿼리 안에 클래스 선택자를 써서 display: none을 줘버리자" ... 이만하면 의식의 흐름도 생산적이었다(❁´◡`❁) 내 코드 웬만하면 TIL에 안 넣는데 오늘은 너무 뿌듯해서 넣는다.

....
	<CardList>
    	{pop_camps.map((pc, idx) => {
        	return (
            	<CampCard className={`campcard${idx}`} key={idx}>
 					....
                    
const CardList = styled.div`
	....
    @media screen and (min-width: 768px) and (max-width: 992px) {
    	.campcard4, .campcard5 {
        	display: none;
        }
    }
`;

내일 할 일

• 사용자 인증에 쓸 구글폼은 어떤 식으로 적용하는지 찾아보자.
• 보안을 강화하기 위한 HTTP ONLY 쿠키에 대해 알아보고 적용할 방법을 찾아보자.
• 백엔드에 요청한 API가 들어오는 대로 적용하자.
• 그러고도 남는 시간에는 태블릿 사이즈 디자인을 작업한다.
• 구독자가 구독 취소하는 게 가장 겁나므로 앞으로는 TIL을 꼬박꼬박 쓰자.