코딩 부트캠프 '코드스테이츠'에서 진행했던 파이널 프로젝트의 회고를 작성하려 한다. 일주일 전에 프로젝트는 끝이 났지만 (진짜 끝은 아님) 지금 쓰는 이유는 지난 일주일간 초록 프로젝트를 '텀블벅'에 업로드 준비를 했다. 텀블벅 링크는 마지막에 첨부할테니 다들 많이 들려주시길...!
프로젝트 설명
초록(草錄) - ChoLog
풀(草)을 기록(錄)한다는 의미에서 '초록'이라고 지었다. 물론, 식물관리 어플인만큼 식물의 대표적인 색깔 '초록색'도 의미하고 있다. 이 프로젝트 이름은 한자가 있어야 간지인데 영문이름도 지어야해서 처음에 고민을 많이 했던 기억이 있다. 지금 이미 지어진 'ChoLog'만 보면 발음 그대로 성의없게 옮겼다고 생각하겠지만 그게 아니다. 원래는 의미 그대로 담는 영어 단어들이 후보에 올랐었다. 'Greenery', 'Plant Diary' 같은... 그러다 정말 아무 생각 없이 '그냥 발음 나는 대로 적는게 어때요?' 라는 의견에 'Cholog'라고 적어봤는데(사실 진짜 '초록'을 적고 싶었으면 스펠링도 저게 아니지만...) '기록'의 의미를 가지고 있는 'log'를 발견한 것이다! 맞다, 초록 어플은 나의 식물(풀)을 기록하는 어플이다.
사용한 기술
나는 계속 백엔드 포지션으로 구직하고 활동할 계획이 있었기에 이번 프로젝트에서도 백엔드를 맡았고 백엔드에서 사용한 스택은 다음과 같다.
TypeScript, TypeORM, Passport, JWT, 그리고 당연히(?) Node.js와 Express.
공교롭게도 Node.js와 Express 외에는 그렇게 익숙한 스택이 아니었다. 심지어 TypeScript와 TypeORM은 아예 처음 접해보는 거였으니... 배움과 동시에 프로젝트를 진행했다고 해도 무방할 정도였다.
왜 식물관리 어플인가?
나는 이 부분이 개인적으로 웃기다고 생각한다. 나는 코드스테이츠 우리 동기 내에서 '장비충'과 '얼리어답터'를 맡고 있었다. 그래서인지 의도한 적은 없지만 최신 트렌드를 잘 따라가는 사람으로도 비춰지고 있었고 우연찮게도 나는 항상 최신 트렌드를 거의 다 알고 있었던 거 같다...
이 프로젝트 아이디어는 내가 아닌 우리 팀, 팀장님이 제안한 아이디어였고 나는 아이디어가 좋아서 이 프로젝트에 지원했다. 그 이유는 지금 트렌드가 '밀레니얼 세대'에 집중하고 있었고 이 밀레니얼 세대에서는 '화초 세대'라는 것이 생겨났기 때문이다. 밀레니얼 세대란, 지금의 2030 세대를 일컫는다. 화초 세대는 반려 동물을 넘어서서 '반려 식물'을 키우고 이것의 의미는 단순히 식물 키우기에서 더 전문적으로 식물을 관리하고 식물과 공감하고 사랑하는 사람들을 말한다.
나는 시대를 읽은 아이디어라 생각했기 때문에 이 프로젝트에 지원했지만 막상 이 아이디어 제공자인 팀장님은 이런 것들을 전혀 모르고 계셨다는 것이다...! 그냥 주변 분들이 식물을 갑자기 많이 키우고 어떠한 흐름이 보였기에 낸 아이디어일뿐이라며... 그래서 처음 텀블벅에서 제의가 들어왔을 때 다들 '이게 (돈이)되는 서비스일까?' 라는 걱정에 선뜻 승낙을 못했던 것도 있다. 그 때 내가 이 얘기를 해줘서 다들 '(돈이)되는 서비스구나!' 하는 마음으로 으쌰으쌰 하게 되었지만 ㅎㅎ
쨌든 결론은 모로가도 서울만 가면 된다고, '화초 세대'를 겨냥한 서비스를 만들었다!
프로젝트를 진행하면서...
지금 계획으로는 프로젝트를 하면서 겪었던 것들을 따로 작성하려고 하고 있지만 문제는 바로바로 데브로그를 작성하지 못해서 개별적인 데브 로그를 작성할 수 있을 지 모르겠다. 그래서 최악의 경우를 대비해서 회고 포스팅에서도 짧게 짚고 넘어가려고 한다.
개인적인 경험에서는 Passport + JWT 사용이 가장 큰 이슈였지만 전체적인 흐름에서는 TypeScript와 TypeORM 역시 매력이 큰 언어들이라고 느꼈다.
타입스크립트를 더 잘 사용하고 싶어졌다. 이번 프로젝트에서는 총 4주의 기간동안 약 2주간을 기획에만 투자했기 때문에(텀블벅 때문) 개발의 시간은 많이 부족한 편이었다. 거기에다가 처음 접하는 언어를 사용하려 하니 타입스크립트를 타입스크립트만으로 사용하지 못했다. 타입을 설정해서 자바스크립트가 가졌던 한계점을 잡고 만날 수 있는 에러를 줄여준다는 점은 좋았다. 하지만 타입스크립트를 더 잘 사용하고 효율적으로 코드를 짜려면 'Interface'나 'Class'를 같이 사용했어야 했는데 그러지 못하고 기존 JS 코드 짜듯이 짜게 되어서 아쉬움이 많이 남는다.
이번 프로젝트에서는 타입스크립트의 매력보다는 TypeORM의 매력이 더 크게 다가온 것 같다. TypeORM은 Sequelize와 같이 ORM(Object Relational Mapping)의 한 종류인데 타입스크립트와 잘 어울리는 ORM인 거 같아 Sequelize 대신 TypeORM을 채택했다. Model을 만드는 것은 Sequelize와 비슷한데 REST API에서 PATCH를 작성할 때 TypeORM의 매력을 볼 수가 있었다. PATCH에서는 이미 있는 데이터를 수정하는 방식이기 때문에 기존에 '필수항목'이었던 부분도 수정할 때는 데이터가 안들어 올 수도 있다. 하지만 우리 model의 타입만을 관리하는 @types.d.ts를 만들어서 모든 항목을 optional로 설정한다음 들어온 항목에 대해서만 수정하게끔 관리할 수 있었다.
플로우를 이해하고 코드를 작성하는게 중요하다는 것을 깨달았다. Passport 모듈을 사용해서 인증을 구현하려고 했을 때 그냥 인터넷과 책에 있는 대로 코드를 작성하면 금방 해결될 줄 알았다. 하지만 이것은 나의 큰 오산이었다. 기존 First Project에서는 서버 아키텍쳐가 Controller 없이 Router에서 모든 것을 해결하였다. 하지만 이번 프로젝트에서는 Router를 작성하고 이 라우터를 동작하는 코드를 Controller로 빼주었다. 하지만 Passport에 대해 기존에 설명하고 있는 방식은 Router에서 해결하는 코드만이 있었고 나는 초반에는 이 플로우를 이해하지 않은 채 그냥 작성했기 때문에 미들웨어가 언제 어디서 작동하는 지, Passport 모듈 내의 콜백 함수가 언제 어디서 작동하는 지 전혀 모른 채로 코드를 작성하고 말았다. 결국 다시 처음으로 돌아와 플로우를 이해해야 하는 시간을 가져야했기에 시간은 배로 들었다.
답이 있는 문제라도 한 번 더 짚고 넘어가지 못하면 마지막에서 헤맬 수 있다. 겨우겨우 인증부분을 다 짰다고 생각했을 때 '포스트맨'으로 잘 작동되는 지 확인하고 싶었고 회원가입과 로그인을 시도해보았다. 회원가입은 모듈을 사용하지 않고 직접 구현했기에 잘 되었지만 문제는 모듈을 사용한 로그인이었다. '플로우도 다 이해했고, 그에 맞게 코드도 구성했는데 뭐가 문제일까?' 라고 다시 고민하는 시간을 가졌다. 같은 코드를 한 100번쯤은 본 것 같다는 생각이 들었을 때 Passport 모듈에서 JWT 토큰 처리하는 부분을 다시 검색해보았다. Passport에서 제공하는 JWT처리 모듈은 몇 개의 토큰 처리 방법을 제공하고 있었고 이 부분은 내가 참고한 책과 블로그에서 답이 똑같은 코드였기에 별 의심하지 않던 부분이었다. 하지만 포스트맨을 사용하기 위해서는 토큰이 어떻게 담겨서 가고, 오는 지 확실하게 알아야했기에 다시 검색을 해본 후에야 토큰을 처리하는 방법을 알게 되었다. 코드 수정은 없었지만 포스트맨에서의 마지막 확인 때문에 또 얼마의 시간을 낭비한 꼴이 되었기에 내가 확실하게 모르는 부분은 확실한 답이 있다고 하더라도 알고 넘어가는게 중요하다는 것을 깨달았다.
Promise.all을 기억하자. Promise가 실제 코드에서 어떻게 쓰이는 지 잘 감이 안왔을 때였다. 데이터 처리를 함에 있어서 map안에 await을 넣어야 하는 순간이 왔고 처음에는 당연히 Promise.all을 생각해내지 못하고 끙끙 앓았었다. 모든 줄에 console.log를 찍어보았더니 map 안에서는 데이터가 잘 찍히는 것을 볼 수 있었는데, map 밖에서는 데이터들이 안들어와 있는 것이었다. 근데, 세상에, map안에서의 데이터들도 실행할 때마다 순서가 자꾸 바뀌는 것이 아닌가! 이걸 발견하고 동기적으로 처리가 안되고 있음을 알게 되었고 그제서야 Promise.all을 기억해낼 수 있었다. 깔끔하게 순서대로 데이터가 쌓이는 것을 보았을 때 그 희열감은 아직도 잊을 수가 없다.
회고를 마치며...
꼭 내가 겪은 이슈들마다 개별 데브로그를 작성할 수 있도록 노력하겠다.
'초록' 프로젝트는 끝이 아니다. 이제 시작이다. 텀블벅에 개발 비용 펀딩을 받으면서 커뮤니티 기능을 추가하기로 했기 때문이다. 내가 지금까지 겪은 이슈들이 나의 자산이 되어서 다음에는 큰 빛을 발할 거라고 믿는다.
텀블벅 리워드 때문에 일주일 내내 디자인 작업만 했더니 갑자기 디자이너로 돌아간 느낌이었지만 다시 개발자의 본분을 잃지 않고 화이팅해야겠다!
마지막으로, 초록 어플 텀블벅 링크를 첨부한다. 여기에서 자세한 프로젝트 어플 소개도 볼 수 있으니 많은 응원(펀딩)을 바란다...
