프론트의 희망사항이 반영되어 수정된 와이어프레임이 오늘 윤곽이 드러나기 시작했다. 확인하자마자 바로 뷰 작업을 시작했다. css에 딱히 신경쓰지는 않았지만 그래도 1차 배포를 할 수 있을 정도로 완결성이 어느 정도 갖춰져 있던 뷰를 갈아엎으려니 마음이 아팠다ㅠㅠ.. 하지만 새로운 와이어프레임이 예쁘니 이 정도는 그냥 넘어가자.
원래는 와이어프레임 수정본이 나오면 통일성을 챙기기 위해서 컴포넌트 구조를 제대로 분석해서 만들어보자고 프론트 팀원들과 다짐했었는데, '사이드바 하나만 내가 미리 만들어놔야지' 하고 시작한 뷰 작업은 메인 페이지를 다 만들고 나서야 끝이 났다. 만들어놓은 메인 페이지에서 사이드바 따로, 헤더 따로, 바디 부분 따로 컴포넌트 독립을 시키고 나니 고정적인 틀이 갖춰져서 굳이 컴포넌트 분석을 같이 할 필요가 없어졌다...!? 어쨌든 시간을 절약했으니 좋은 일인가.
내일 할 일
디자이너분들이 짜 주신 와이어프레임에 모양이든 비율이든 최대한 맞춰서 작업하려다 보니 시간이 훅훅 간다. 내일도 뷰만 잡다 하루 다 갈 것 같다..
리덕스 유저 모듈과 댓글 모듈은 프론트 팀원분들께 하나씩 나눠 드렸다. 그 틈에 시간이 좀 생긴 나는 어제 리덕스 게시글 모듈 짠 것을 더 들여다보고 다듬을 수 있었다. 아직 완벽하게 잘 짜지는 못하는 리듀서 쪽을 이런저런 코드를 넣어가며 실험(?)도 해보고, 여러 모로 수확이 있는 시간을 보냈다.
오후 2시 반쯤 백엔드에서 API 서버를 열어주셨다. 리덕스 모듈에 API를 넣어서 axios를 적용해보고 게시판에 연결해 보았다. 중간에 오류를 발견하면 노션에 적힌 해당 API 담당자분께 말씀을 드렸는데, 알고 보니 서버를 연 분은 한 분이라 결국 그 분이 다 확인을 하셔야 하는 거였다. 백엔드 작업 절차가 어떻게 되는지 전혀 모르는 나로서는 죄송하고 민망했다.
프론트 셋이서 모듈 완성하는 대로 API를 나눠 붙이고 확인하고 오류를 잡고 반복에 반복을 거듭한 끝에 기본적인 기능 8개를 구현할 수 있었다.
내일이 디자이너님들이 와이어프레임 수정본을 주시기로 한 날이라서 생각난 김에 피그마에 들어가봤더니, 어느 정도 윤곽이 보이는 와이어프레임(매우 마음에 듦!)과 바쁘게 움직이는 디자이너님들의 커서가 보였다. 자정이 넘은 늦은 시간이었는데도 수고를 아끼지 않으시는 것 같아 감사한 마음이 들었다.
내일 매주 한 번씩 있는 팀별 중간 점검을 앞두고 1차 배포를 완료했다. 비록 도메인도 버킷도 예전에 미니 프로젝트에서 쓰던 걸 그대로 갖다 쓰긴 했지만, 그 덕에 배포에 걸리는 시간을 많이 단축했다. 배포하고 나니 마음이 한결 여유로워졌다. 오늘은 조금 편안하게 잘 수 있을 것 같다.
리액트 공식문서 중 '폼'을 읽었다. 솔직히 무슨 말인지 잘 모르겠다. ㅋㅋㅋ
내일 할 일
변경된 와이어프레임 기준으로 뷰를 다시 잡는다. 이번에는 컴포넌트 단위로 잘 나눠서 통일성을 향상시켜야겠다.
뷰를 대충 다 잡긴 했는데 와이어프레임이 없는 상황에서는 언제든지 추가적인 수정이 가해질 수 있으니 다 해놓고서도 마음이 마냥 편하지만은 않다. 일단 가장 큰 수확은 어쨌건 리덕스 붙이는 단계로 넘어갈 수 있다는 것..? 백엔드 쪽에서 내일 점심쯤까지 API를 1차로 내놓겠다 했으니, API 붙이는 시간을 많이 단축시킬 수는 있을 것이다.
구역이 여러 개로 나눠진 뷰를, 그리드를 잔뜩 이용해 그리드 지옥을 만들어서 잡는 방법을 프론트 팀원들에게 알려주었다. 이게 정석은 아닐지라도 일단 지금 당장 오류를 줄이면서 써먹을 수 있는 방법이라고 생각한다.
회원가입 페이지와 마이페이지의 뷰를 잡았다. 중간중간 잊을만하면 오류를 안겨주는 깃 덕분에 시간을 진짜로 정말로 너무 많이 뺏겼다. 아주 가끔 깃 덕분에 편리하다는 생각을 하긴 하는데.. 이건 무슨 애증의 관계도 아니고 도대체 깃 때문에 생기는 추가 작업은 또 얼만지. 물론 내가 제대로 사용하는 방법을 몰라서 벌어지는 일이겠지만 말이다.
이범규 대표님과의 팀별 멘토링에 참석했다. 30분은 쏜살같이 지나갔고, 마이크를 한 번도 켜지는 않았지만 멘토링 내용으로 전혀 생각지 못했던 것들을 배우게 되었다. '어떻게 하면 우리가 원하는 반응을 사용자로부터 이끌어 낼 수 있는가'가 주요 골자였다. 우리 팀의 프로덕트는 아무래도 기능이나 눈에 보이는 화려한 그 무엇이라기보다는, 끝없는 아이디어와 대화의 산물이 될 것 같다. 앞으로는 팀에서 그 주제를 놓고 하루에 30분씩 대화를 나누기로 했다.
리덕스 붙이는 방법을 프론트 팀원들에게 알려주었다. 나는 이걸 이해함으로써 많은 부분에서 궁금증이나 답답함이 해소되었으니, 조금이라도 팀원분들께 도움이 된다면 좋겠다는 생각에서 한 일이었다. 리덕스 붙이는 방법이라기보다는 리덕스를 붙였을 때의 데이터의 흐름 정도가 될 것이다. 이것 역시도 정석은 아니고 내가 이해한 그대로 풀어 설명한 것이므로 부족한 부분이 많았다. 다행히 팀원분들이 이해하는 데 아주 어려움을 느끼진 않은 것 같았다. 역시 지난 주에 각자 프로젝트에 참여했던 경험이 크게 도움이 됐나 보다.
게시글 CRUD와 관련한 리덕스 모듈을 짰다. API를 내일 바로 받을지도 모르는 상황, 그리고 내일 저녁에는 배포 작업을 해야 하는 상황을 대비해 내가 모듈을 전적으로 도맡아 혼자 짜버리는 것에 대해서 미리 양해를 구했다. 대신 컴포넌트에서 모듈을 호출하고 데이터를 가져다 쓰는 부분은 팀원들에게 맡기기로 했다. 다음 모듈은 차근차근 팀원들과 함께 작성해 나가고 싶다.
내일 할 일
뷰가 부족한 부분은 수정하고, 디자이너분들이 미처 생각하지 못한 게시글 [수정], [삭제] 버튼을 적당한 위치에 알아서 붙인다. 그래야 CRUD를 시작하지...
짜놓은 게시글 리덕스 모듈에 대한 설명을 간략히 진행하고, useDispatch와 useSelector 함수를 이용해 컴포넌트와 연결한다.
API를 받으면 axios를 적용하면서, 지금은 대강 짜여 있는 리덕스 모듈을 전체적으로 한번 손을 본다.
금요일 중간 점검을 대비해 배포 작업을 한다. 어차피 임시 배포이니 깃허브를 통해 하는 것도 괜찮을 것 같다.
오늘은 하루종일 뷰만 잡았다. 페이지 수가 많아도 세 명이서 나누니 할만하다 생각했는데, 머리가 셋인 만큼 각자 생각이 다르니 컴포넌트 사이즈 단위도 다르고, 같은 회색 계열 중에서도 설정하는 색상이 다르고, 적당하다 생각하는 마진도 달랐다. 100%까지는 아니어도 나중에는 어쨌든 통일을 해야 할 텐데. 하지만 코드로 짜서 yarn start를 돌려보기 전까지는 어떤 게 적당한 건지 나 혼자서도 알기 어려운 노릇이니 뾰족한 수를 모르겠다. 이렇게 웬종일 뷰만 잡아도 다 끝내지 못했다. 깃허브 저장소를 어제 만든 것 같은데 벌써 커밋이 36개다.
아침 회의 때 프로젝트 이름을 정했다. 어제 자정까지 온라인 투표를 진행한 결과 두 이름이 동점이었는데, 오늘 아침에 다시 한번 투표를 해서 내가 제출했던 '토크부트(Talk'bout)'로 확정됐다.
S.A 제출할 때 필수적으로 들어가야 하는 내용이라, 팀 전체의 타임라인을 함께 설정했다. 프론트는 어제 저녁에 Miro에서 대강 정해놓은 내용을 거의 옮겨 적었다. 당장 내일도 무슨 일이 일어날지 모르는데 몇 주 앞의 계획을 어떻게 하나하나 자세히 짤 수 있을까. 어차피 애자일인걸! :)
백엔드에서 API 리스트를 만들고 공유해 주셔서 다함께 살펴봤다. 수정할 점이 아예 없는 건 아니지만, 아무튼 어쩌면 그렇게 뚝딱 만드셨을까. 볼 때마다 신기한 분들이다. API 리스트를 보고 있자니 새로운 프로젝트가 시작한 게 확 실감이 났다. 그리고 API는 보면 볼수록 처음 보는 것 같다.. 새롭다.
프론트끼리는 최소 단위 컴포넌트인 엘리먼트들을 만들었다. 프론트가 세 명이니 엘리먼트도 한 시간 반 만에 다 만들어졌다. 역시 일손은 다다익선인가 보다.
오후 6시에는 디자이너님들까지 껴서 8명이서 전체 회의를 했다. 주제는 1차로 나온 와이어프레임이었는데, 다룰 만한 건 정해져 있다고 생각했는데 얘기는 자꾸자꾸 길어졌다. 그리고 우리가 뷰를 잡는 데 최종적으로 쓸 만한 와이어프레임은 한참 뒤에야 나올 것 같은 불길한 예감이 들었다.
PWA와 PWA에서 구현 가능한 푸시 알림 기능에 대한 자료를 찾아보았다. 지금은 읽어보아도 무슨 소리인지 잘 와닿지 않았지만, 조만간 필요할 때가 오면 절실하게 읽게 되지 않을까 싶다.
정규표현식에 대한 유튜브 영상을 봤다. 정규표현식은 외계 문자 같은데, 영상을 보고 나니 그 문법을 다 외우지는 못해도 이제는 어떤 건지 알 것 같다.
리액트 공식문서를 '조건부 렌더링'과 '리스트와 Key'까지 읽었다. 읽는 도중 자꾸 눈이 감겨서 혼났다. 겨우겨우 정신 차려가며 두 장이나 읽은 나, 칭찬해!
내일 할 일
게시판에 들어갈 컨텐츠에 대해 다시 한 번 팀 단위로 논의한다.
언제까지고 와이어프레임만을 기다리고 있을 수만은 없다. 나중에 디자이너님들의 시안에 맞춰 다 뜯어고치는 한이 있더라도 내일부터는 본격적으로 뷰를 잡아야겠다.
쉬는 날이었지만 온전히 쉬지는 않았다, 언제나 그렇듯. 예정대로 정오에 회의가 있을 줄 알고 프론트는 모두 출근했지만 회의는 없었다고 한다. 그래서 오늘까지 제출하기로 한, 각자 생각한 프로젝트의 이름은 슬랙에다가 올리고 우리끼리만 신나게 회의를 했다. 디자이너 분들이 올려주신 로그인, 회원가입, 마이페이지의 와이어프레임에 대한 피드백을 공유한 후 각자 슬랙에 올렸다. 그 외에는 우리 프로젝트의 컨텐츠가 일반적이고 전형적인 만큼 뷰라도 조금 특색 있었으면 해서, 와이어프레임 구조 자체의 변경에 대해 내가 의견을 종합해 팀장님께 말씀드렸다. 사실 혼자만 말씀드릴 생각은 없었고 팀장님의 생각이 궁금해서 그렇게 했던 거였는데, 어쩌다 보니 그 자리에 디자이너 분도 바로 참석하시고 해서 어찌저찌 팀장, 프론트리더, 디자이너의 맞대결회의가 펼쳐졌다. 다행히 디자이너 분이 애초에 우리가 생각한 대로 구상할까 고민하셨었다고 하셔서, 우리의 요청사항은 잘 반영될 수도 있을 것 같다.
제출된 프로젝트 이름 후보에 대해 온라인 기명 투표를 했다. 아직은 결과가 안 나온 것 같다...? 내일 아침 회의 때 알 수 있으려나.
내일 제출해야 하는 S.A에 포함되어야 하는 사항이 주제, 와이어프레임, API, 타임라인이어서 저녁에 프론트끼리 다시 모여 타임라인을 주차별로 간단히 설정했다. 회의 시간이 길어진 것에 비해 결과물은 별로 없었지만... 아직 와이어프레임도, API도 확정되지 않은 상황에서는 어쩔 수 없다. 내일은 추후 디자인적으로 변경이 된다 하더라도 기본 엘리먼트들만 만들기로 했고, 작업량을 적절히 분배했다. 깃 커밋 메시지에 대한 컨벤션도 간단하게나마 정해보았다.
리액트 공식문서 'State와 생명주기', '이벤트 처리하기'를 읽었다.
내일 할 일
아침 9시 회의에 늦지 않게 참석한다. 타임라인, API를 백엔드 분들과 함께 설정한다.
깃헙 저장소를 만들고 브랜치를 만들고(브랜치 만들어 보는 거 처음이다..!) 템플릿을 넣는다.
본격적인 첫 팀 회의였는데 어제 늦게 자서 그런지 30분이나 지각하고 말았다..ㅠㅠ 이제 꼭 반드시 기필코 자는 시간을 앞당겨 보리라.
지각했는데 심지어 게더도, 줌도 자꾸만 터졌다(나 한정). 인터넷이 문제인 것 같았다. 지금까지, 아니 어제 아침 프로젝트 발제 때만 해도 100명도 넘게 있던 줌 회의실 멀쩡하게 잘만 돌아가더니 왜 오늘은...ㅠㅠ 모바일로 접속해야 그나마 원활했다. 모바일이 데스크탑보다 잘 돌아간다는 게 말이 되냐고요ㅠㅠ
거기다 더해 오늘은 개인 일정이 있어서 자리를 오래 비웠다. 세 가지 문제가 다 겹쳐서 회의 내용이 내 것처럼 느껴지지 않고 겉도는 것만 같은 기분이다. 글자 하나하나 꾸역꾸역 머리에 집어넣으려고 노력하고 있다.
리액트 공식문서를 'Component와 Props'까지 읽었다. 친절하고 쉽게 쓰여진 공식문서라지만 가끔 무슨 소리인지 모르겠는 건 왜일까.
내일 할 일
내일은 제발 인터넷에 문제가 없었으면 좋겠는데... 갑자기 생긴 문제이니 갑자기 사라졌으면...
일요일이지만 S.A 제출이 월요일인 관계로 시시때때로 회의에 참석할 예정이다. 와이어프레임이 내일 중으로 모두 확정된다면 뷰 작업도 시작하게 될 것 같다.
깃헙 리드미에 클론코딩 프로젝트에서 구현한 기능에 대해 간단하게 적어두었다. 오늘 바로 제대로 작성하는 게 최선이고, 하지 않으면 나중에 기억에 의존해서 꾸역꾸역 해야 한다는 걸 알지만 어쨌든 오늘은 뭘 더 하고 싶지가 않았다.
실전 프로젝트 발제 때 팀 빌딩 관련 공지가 있었는데 다들 반대 의견이 많았다. 팀 정원의 절반 정도만 되는 인원들로 랜덤하게 조를 편성한 다음, 실전 프로젝트의 팀장이 속한 조와 속하지 않은 조가 서로 합쳐서 한 팀을 만드는 방식이었다. 게더와 줌에서 여러 가지 방식에 대한 논의를 거친 후에, 사람들이 팀장의 기획안을 보고 1~3지망을 제출하면 2명은 팀장이 직접 뽑고 나머지는 다른 기준들을 적용해서 배정되는 방식으로 변경되었다. 팀 배정은 오후 7시에나 발표가 되었는데, 처음부터 원했던 팀에 들어갈 수 있어서 다행이었다.
그리고 우리 팀 프론트엔드는 3명이었다. 지금까지의 프로젝트들이 1주일 내에 완성해야 하는 것들이었고 그래서 더 일손이 달렸던 거였지만, 아무튼 제발 이번만큼은 3명이었으면 좋겠다고 계속 생각해 왔는데 이것도 참 다행스러운 일이었다. 어쩌다 보니 프론트 리더가 되어서 막중한 책임이 생겼다. 나는 아직 많이 부족하고 모르는 것도 많은데 이 일을 잘 해나갈 수 있을지 조금 걱정이 된다. 하지만 프론트 회의 분위기가 워낙 좋아서 그런 걱정도 다 잊혀지는 듯했다.
리액트에 대한 체계적인 공부가 필요할 것 같아 공식문서를 정독하기 시작했다. 이걸 이제야 시작한다는 것도 웃기지만, 아무튼 급한 만큼 얼른얼른 속도를 내야겠다. 오늘부터 지혁님과 노션에서 각자 공부한 내용을 공유하기로 해서 공식문서 앞부분에서 따 온 내용을 간략하게 적었다.
내일 할 일
아침 9시 30분에 팀 회의에 참석한다. 오늘 프론트 회의에서 오갔던 얘기들을 다시 한 번 정리한다.