거짓말처럼 뭘 좀 본격적으로 해보려고 하면 서버가 터져버리고 말았다ㅠㅠ어제는 정말로 하루종일 한 게 거의 없었다. 서버가 없어도 할 수 있는 뷰 수정 정도? 그나마 디자이너분들이 세세한 부분까지 신경쓰고 계셔서 실시간으로 변화하는 디자인에 맞춰서 해야 하는 일들이 꽤 있었다.
Day60 한 일
벌써 60일차라니 말도 안 된다. 이제 1개월 남짓 남았다는 얘긴데... 프로젝트 진행 속도가 더뎌지니 그만큼 걱정이 쌓여간다. 잠을 줄여가며 바쁘게 자료를 찾아보고 에러 띄워서 해결해도 모자란데. 며칠간 서버가 연약했던 차에 작업이 거의 올스톱 상태였어서, 오늘은 서버가 비교적 잘 돌아가는 데 비해 머리가 돌아가지 않아 또 속도가 안 났다ㅠㅠ...
어제 오늘 API 리스트의 길이가 급격히 길어지고 있어 질문글과 이미지에 대한 리덕스 모듈을 짰다. 이미지는 게시글을 작성할 때 파일을 첨부할 수 있는데, 파일을 선택하자마자 미리보기를 띄워주는 것까지는 큰 문제가 없었는데 막상 서버에 업로드하는 부분에서 막혀서 시간이 좀 걸렸다. 한창 작업할 때는 몰랐는데, 잠깐 놓고 돌아섰을 때 생각해 보니 서버에 업로드를 정상적으로 하더라도 API가 준비되어 있지 않아 정작 게시글을 불러올 때 업로드한 이미지를 함께 가져올 수 없는 상황이었다. 그러다 보니 또 완결하지 못한 채로 다음으로 넘어가 버렸다.
내가 맡은 게시판의 페이지네이션을 해보았다. 예전에는 지금보다 더 간단한 형태의 페이지네이션을 했었는데, 그때 적어뒀던 스켈레톤 코드를 응용해서 좀 더 복잡시럽게 만들어 보았다. 세련되지 못한, 너무나 원시적인 코드라 또 어떤 문제가 있을지는 두고 봐야 알 것 같다. 그래도 기능을 혼자 구현해봤다는 것 자체가 의미 있는 걸까.
그리고 2차 배포를 앞두고 한창 작업을 하고 있는데 또 다시 서버에 문제가 생겨버렸다. 어제까지의 문제만큼 심각한 건 아니라는 것 같은데, 사실 프론트 입장에선 결과적으로 크게 다른 건 없는 듯하다. 어쨌든 또 다시 올스톱 상태가 되어버렸다.
내일 할 일
서버가 잘 돌아가는 것만 얼른 확인한 후, 다른 프론트 팀원분이 하신 로그인 유지 기능이 정상 작동하는지만 보고 2차 배포를 한다. 지난 1차 배포에 비해서 디자인적으로는 많은 게 변했지만 기능은 거의 붙어 있지 않은 상태라 영 마음이 편치 않다.
오전에는 우리 조 팀장님과 디자이너분들과 함께 의견 조율의 시간을 가졌다. 서로가 생각하는 데드라인이 어느 한쪽에는 너무 촉박하고, 또 다른 한쪽에는 너무 널널한 상황이었다. 작업할 거리가 없어 시간만 때우고 있는 프론트의 입장으로서는 꼭 필요한 자리였다. 우리 입장에서는 100%까지는 아니어도 원하는 것들을 충분히 얻어낼 수 있었다고 생각했다.
디자이너분들은, 어떤 사항들은 팀 내에서 결정된 바가 없어서 디자인 작업에 바로 착수하기가 어렵다고 하셨다. 그래서 점심 식사 직후부터 프론트끼리 지금까지 어떤 것들이 결정되지 않았는지 정리했다. 그러고 나서 백엔드에서 API 2차 작업이 끝난 후 우리가 정리한 내용을 가지고 수많은 결정들이 난무하는(ㅋㅋ) 회의를 진행했다. 그리고 다시 이 내용을 정리해서, 와이어프레임에 대한 프론트의 요청사항들과 함께 디자이너분들께 전달했다.
원하는 것을 글로 적는다는 건 생각보다 어려운 작업인 것 같다. 고치고 또 고치기를 여러 번, 그러고 나니 시간이 훌쩍 지났다. 연락을 마치고 나서 드디어 수정된 API를 다같이 테스트해보며 작업합시다, 하고 얼마 지나지 않아 서버에 뭔가 문제가 생긴 듯 보였다. 몇 초 전에만 해도 새로고침을 하면 컴포넌트 렌더링과 동시에 멀쩡히 로드되던 데이터들이 어느 순간 다시 새로고침하자 온데간데 없이 사라져버렸다. 컴포넌트에는 당연히 구멍이 뻥뻥 뚫렸다. 테스트용 데이터가 하나밖에 안 들어 있었던 상황이라, 프론트에서 삭제 버튼을 잘못 눌러서 없어진 게 아닌가 의심을 했었다. 하지만 셋 중 누구도 삭제 버튼에는 아무 기능도 달아놓지 않은 상태였다..!!(호러..?) 묻고 물은 끝에 AWS 인스턴스 자체의 문제인 것 같다는 얘기를 들었고, 아무도 예상치 못한 사태에 또 다시 길을 잃고 말았다..ㅠㅠ
엎친 데 덮친 격으로, 디자이너분들과 우리가 서로의 상황을 전혀 이해하지 못할 수밖에 없었던 이유를 알게 되었다. 디자이너분들은 우리가 이렇게까지 주6일 풀타임으로 모든 시간을 쏟아붓는 작업을 한다는 걸 모른 채로, 우리는 그분들이 현업에 계시며 오로지 포트폴리오만을 바라고 무보수로 참여하신다는 걸 모른 채로 진행했던 것이었다. 우리의 요구사항에 맞추기 위해 퇴근 후에 밤을 새며 작업하셨다는 걸 뒤늦게 듣고 나서 죄송하고 마음이 쓰렸다. 진작 알았다면 이렇게까지 서로 힘들지는 않았으리라. 아무리 이게 실전 프로젝트이고 협업하는 과정 자체가 중요하다고 하더라도 중간자 역할을 하는 항해 측에서 충분히 사전 고지를 해야 하지 않았나 싶다.
내일 할 일
서버가 복구된다면, 최대한 빠르게 많은 API를 테스트해보고 백엔드분들께 피드백을 드린다.
항상 남은 일이 많아 허덕이던 나에게 오늘 같은 상황은 낯설기 그지없었다. 피그마에서 본 디자이너분들의 와이어프레임도 금요일 이후 전혀 변화가 없었고, 그새 우리는 지금까지 나온 부분에 대한 뷰 작업을 모두 완료했다. 뷰에 관해서 할 수 있는 일은 이제 와이어프레임에서 실수로 누락된 버튼 같은 작은 요소들을 일단 적당히 임시로 끼워넣거나, 사소하게 어긋나거나 신경쓰이는 곳들을 수정하는 것뿐이었다(통일성을 갖추는 것은 나중으로 잠시 미루기로..). 리덕스는 지난번 변경 전의 와이어프레임에 붙여보느라 모듈을 미리 짜놨기 때문에, 게시판 종류별로 CRUD API가 있었다면 각 게시판 뷰에 맞게 API 콜을 해봤을 텐데 그것도 상황이 여의치 않았다. 본의 아니게 한가로웠다.
현재의 와이어프레임에 맞춰 내가 맡은 두 게시판의 뷰를 마저 조정하고, 누락된 글쓰기/수정/삭제 버튼을 적당히 붙여놓고, 클릭하면 메뉴 리스트가 나오는 형태를 포함하여 헤더를 분기시켰다.
주말이라는 걸 몸은 알고 있는 걸까? 금요일인 어제까지만 해도 이 정도는 아니었는데 오늘따라 왜 이렇게 힘이 쭉쭉 빠지고 아무것도 하기 싫은지 모르겠다. 프론트 팀원분들의 배려로 낮잠도 엄청 잤다. 슬슬 전격적으로 밤낮이 바뀌고 있는 것 같다.
오늘 뭘 했는지는 이제 깃허브 저장소 커밋 내역을 보면서 쓰는 게 빠르다. 오늘도 하루종일(이라고 말할 수 있나.. 거의 안 하고 쉬었는데) 뷰 작업만 했다. 와이어프레임이 바뀐 이후로 프론트 한 분의 컴퓨터에서만 유독 뷰가 다르게 보인다고 하셔서 그걸 해결한답시고 템플릿 파일을 하나 만들었다. 정말 신기한 건, 템플릿 코드를 붙여넣고 진행하니 뷰가 멀쩡해졌다고 하셨다. 진짜 원인 무엇이지..
프론트의 희망사항이 반영되어 수정된 와이어프레임이 오늘 윤곽이 드러나기 시작했다. 확인하자마자 바로 뷰 작업을 시작했다. 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개다.