2주간의 길고 긴 프로젝트가 끝났습니다. 이번 프로젝트를 통해서 제가 느낀 점과 앞으로 배울 점들은 아주 넘치고 넘친다고 생각합니다. 제가 가지고 있는 이 프로젝트는 비록 매우 부족하지만 저에게는 소중한 아이(?)가 될 것입니다.
1. 시작
이번 프로젝트에서 팀장을 맡게 되었습니다. 팀을 이끌어야 한다는 책임감과 동시에 첫 프로젝트에 대한 기대감을 가지게 되었습니다. 팀 이름은 No Coding No Gain, 하루라도 코딩을 하지 않으면 얻는 것이 없다는 거창한 팀입니다. 저희는 아주 부풀어오른(?) 꿈을 가지고 프로젝트 회의를 시작했습니다. 그리고 첫 프로젝트 회의부터 난관에 쌓이게 됩니다.
2. 아이디어부터 어렵다...
회의에서 나왔던 Todolist, 냉장고 확인앱, 가계부 등등의 아이디어를 제치고 요즘(물론 예전에도) 핫한 넷플릭스 리뷰 사이트를 만들자고 의견이 모이게 되었고 진행을 추진하였습니다. 하지만 그때는 몰랐습니다. 넷플릭스가 더 이상 API를 제공하지 않는다는 것을...
그래서 방향을 틀어서 사람들에게 친근하게 다가갈 수 있는 영화 리뷰 사이트를 만드는 방향으로 결정을 하게 되었습니다. 아이디어도 정해졌고! SR은 금방 할수 있겠지! 라고 과거의 저는 생각했습니다..
3. 첫 단추의 중요성
저희가 늘 해오던 스프린트에서는 기본적으로 구조와 데이터가 이미 제공되어있고 가이드라인도 주어집니다. 하지만 저희에게 있는 것은 아이디어와 사람뿐. schema를 짜본 적도 없고 wireframe도 직접 그려본적도 없을 뿐더러 API를 직접 만들어야 한다니!
서로 처음인지라 무에서 유를 창조하는 것은 절대 쉬운 것이 아니었습니다. 특히 기능 플로우를 짤 때에는 기능플로우를 그리면서 저도 이게 맞나 싶을 정도로 난해할 뿐이었습니다.
3일 간의 노력끝에 드디어 기획을 마치고 피드백도 받았겠다! 이제 드디어 작업을 시작하게 되었습니다.
그리고 이 SR은 지금도 두고두고 생각날 정도로 매우 중요한 밑작업이라는 것을 깨닫게 되었습니다.
4. state, state, state...
제가 맡은 것은 프론트엔드. 다른 프론트엔드 팀원분과 함께 기운차게 시작!
react와 react hooks를 이용해 기능들을 하나씩 구현하기 시작하였고 처음에는 무언가가 만들어진다는 생각에 뿌듯한 기분도 느껴졌습니다.
하지만 중간 쯤 오니 제가 사용하고 있는 state는 10개가 넘어가고, 기능함수들도 10개가 넘어가기 시작하면서 슬슬 state 관리에 한계가 오기 시작하였습니다. 하지만 redux를 사용하기에는 늦어버렸습니다. 이미 작성한 작업이 반을 넘게 되어서...
5. 디버깅, 그 과정에서 버려지는 기능들
클라이언트 뿐만 아니라 서버측에 연결해보는 과정은 필수적이었습니다. 처음에는 되었던 기능이 두번째에는 작동을 안하기도 하고, request와 response의 과정에서 서로의 코드가 달라 제대로 연결이 안되기도 하였습니다. 더군다나 기획했던 schema와 진행하고 있는 데이터 구조가 달라서 수정을 하기도 해야 할 경우도 있었습니다.
더군다나 저희가 처음에 준비했던 내 댓글 가져오기, 댓글 새로고침 등등의 기능 구현은 state 관리의 한계와 구현에 필요한 시간의 부족함을 느끼고 아쉽게도 포기하게 되었습니다. bare minimum의 기능임에도 다른 기능에 욕심을 부린 결과라고 생각합니다.
6. CSS, 정복해야 할 산
마지막으로 남은 것은 css. 단순히 자료를 정리하는 것과 이용자의 눈에 이쁘게 바꾸는 것은 차원이 다른 차이였습니다. 저희가 했던 것은 최소한 자리를 자리잡아주는 것이었습니다. 하지만 모든 기능을 제대로 꾸며주는 것에는 아직은 한계가 많았다고 생각합니다.
7. 전체적인 피드백
- 기록의 부재
프로젝트 기록의 시작과 끝은 이슈에서 시작되어야 했지만 이슈카드를 제대로 작성하지 못하였고 현재의 작업과 앞으로의 과제에 대해서 암기로 파악해야 한다는 점이 정말 많이 부족했다고 생각합니다. 이슈의 부재는 곧 프로젝트에서 같은 작업 반복 같은 불필요한 시간 할애로 이어지게 되었던 것 같습니다.
- 기능 구현의 우선도
Bare minimum에서 저희가 할 수 있었던 기능들을 우선적으로 완벽하게 구현해야 한다고 생각합니다. 이 기본적인 기능들을 바탕으로 발전하는 것이 advanced라고 생각하고 이렇게 순차적으로 쌓아가는 것이 작업의 기초라는 것을 배우게 되었습니다.
- 비동기의 중요성 (feat 로딩)
처음에는 페이지들이 왜 로딩창을 쓰는지를 몰랐지만 이제는 확실히 알게 되었습니다. 서버의 데이터를 넣어줄 때 loading 과정을 분기를 하지 않는다면 데이터가 들어가지 않았습니다. 비동기 작업을 처리해주는 과정은 매우 필요하였습니다.
- css의 중요성
아무리 부족한 페이지라도 보기 좋은 사이트는 들어가보기 좋을 것입니다. 프론트엔드 직군을 하면서 css를 신경 쓰지 않는다는 것은 화장도 안하고 연극을 한다는 것과 똑같을 것입니다. css에 대한 공부가 더욱 절실히 느껴졌습니다.
앞으로 할 일
First Project에서도 다뤄야 할 state가 10개 이상이라면 Final Project에서는 더 많은 상태관리가 필요하게 될 것입니다. redux를 통해 효율적으로 상태를 관리할 수 있도록 공부를 할 것입니다.
특히 비동기 처리, css는 넘지 않으면 안되는 산이라고 봅니다. 현업에서도 능숙하게 관리를 하고 디자인을 하려면 남은 프로젝트 기간 동안에 반드시 정복해야겠다고 생각합니다.
이슈 관리도 철저히 할 것입니다. 저의 머리 속에서 정리하는 것은 분명 한계가 있습니다. 기록은 답을 알고 있고, 팀원들도 함께 답을 공유해줄 수 있을 것입니다. 이슈카드 관리와 더 많은 커뮤니케이션을 통해서 이전 프로젝트보다 더 효율적으로 작업을 하도록 노력 할 것입니다.
