안녕하세요. 지난 글에 이어 지적 덕후생활 공동체(지덕체)개발기를 연재하고 있는 ryukim입니다.
지덕체 개발에는 총 3개월이 소요 되었는데요. 그 중 한 달은 스켈레톤 개발, 두 달은 리팩토링과 기능 추가에 할애했습니다.
오늘은 그 중 첫 한 달간 스켈레톤을 개발하는 과정에서 저의 시행착오와 고민들에 대해 적어보려고 합니다.
일단 따라해보기
나에게 맞는 강의
흔히 개발자들은 평생 공부하는 직업이라고들 합니다. 하지만 저는 글 읽는 것, 이론 공부하는 것을 그다지 즐기지 않습니다. (이것이 슬럼프 기간 동안 저를 가장 괴롭힌 요인 중 하나였습니다.)
하지만 코드를 치고 결과물을 만들어내는 것은 즐거웠기에 저는 최대한 이론은 적고 따라하며 쉽게 배울 수 있는 강의를 찾기 시작했습니다.
그렇게 인프런에서 ‘John Ahn’님의 따라하면서 배우는 풀스택 로드맵을 찾게 됩니다.
한 편이 짧게 구성되어 있어 인터넷 강의를 오래 듣지 못하는 저에게 최적이었습니다.(광고 아님) 그렇게 로드맵을 따라가며 저는 자연스럽게 MERN 스택(MongoDB – Express – React – Node.js)을 저의 주 스택으로 가져가게 됩니다.
따라하며 완성한 세 개의 결과물
로드맵을 따라가며 제가 얻고자 했던 것은 크게 세가지 였습니다. 빠르게 제작하고자 하는 목표를 세우다 보니 주로 기능 위주의 목표였는데요.
- 웹 개발에 대한 기초적인 지식 (API의 개념, Restful API, 프론트와 백의 정확한 역할 등…)
- 메인 화면, 그리드 구현
- 댓글, 좋아요 기능 구현
최소한의 커뮤니티 기능을 위해 이 정도만 배우고 나면 저만의 사이트를 만들 수 있을 것이라고 생각했습니다.(물론 로그인, 회원가입과 같은 필수 기능은 당연히 포함되어 있었습니다)
다행히 로드맵의
- 첫 강의에서 로그인, 회원가입 등을 담은 boilerplate을 익힐 수 있었습니다.
- 두 번째 강의인 영화 사이트 만들기를 통해 메인화면과 그리드 구현하는 방법을 익혔습니다.
- 세 번째 강의인 유튜브 따라하기를 통해 댓글과 좋아요 기능을 구현하는 방법을 익혔습니다.
이렇게 세 개의 강의를 듣고 나니 이제 혼자서 만들 수 있겠다는 확신이 섰고, 본격적으로 저의 웹 사이트를 만들기 시작했습니다.
‘덕질이 밥 먹여준다’ 프로젝트가 남긴 것
비록 ‘덕질이 밥 먹여준다’프로젝트가 완전한 마무리를 하지 못하고 끝나긴 했지만 저에겐 정말 많은 것을 남긴 경험이었습니다.
API를 어떻게 작성하는지에 대해 이해할 수 있었고, 멘토님께 멘토링 받으면서 작성한 시퀀스 다이어그램도 저의 목표를 분명하게 하는데 많은 도움이 되었습니다.
팀원들과 기획을 하며 페이지 레이아웃을 짰던 경험도 무엇을 개발해야하는지 알게 하는데 많은 도움을 줬습니다.
배운 것 활용해보기
막막할 땐 배운 것 짜집기
늘 그렇듯 강의를 볼 때는 잘 이해되고 어떻게 활용할지도 떠오르던 것들이 막상 강의를 끄고 직접 만들어가다보니 막막한 것 투성이였습니다.
그래서 막힐 때는 최대한 강의를 보며 짰던 코드들을 돌아보며 이해하고 짜집기하는 식으로 접근해봤습니다.
그렇게 댓글, 좋아요 등의 막막한 고지들은 쉽게 넘을 수 있었습니다.
왜 안 되지…? 이건 왜 되지…?
하지만 강의로 해결할 수 없는 부분은 찾아오고 말았습니다.
영화 사이트 만들기를 할 때 구현했던 그리드와 조금 다른 형태로 변형하니 갑자기 잘 나오던 화면이 안 나왔습니다. 한 시간, 두 시간 바꿀 수 있는 것을 모두 바꿔봤지만 도저히 답이 나오지 않았습니다.
동료의 중요성
그러나 제가 있는 곳은 42가 아니겠습니까? 자스를 잘하는 동료를 찾아가 무엇이 문제일지 물어봤더니, 이럴 수가… 중괄호를 소괄호로 바꾸면 되는 간단한 문제였습니다. (세미콜론도 없는 자바 스크립트에 처음으로 배신감을 느낀 순간이었습니다.)
그 사건을 계기로 제가 얼마나 언어적인 지식이 부족한지를 깨달았고, (그럼에도 불구하고 이론 공부를 최대한 덜 하고 싶었던 저는)틈틈이 모르던 문법적요소들이 나올 때마다 꼼꼼히 찾아보며 부족한 지식을 채워나갔습니다.
그 이후에도 계속 똑같은 실수를 반복했는데 그 때마다 옆에 있는 동료가 저의 문제점을 잡아줬습니다.
그렇게 하룻밤 샐 때마다 한 페이지씩 완성해 나가며 약 3주만에 첫 번째 스켈레톤이 완성되었습니다. (이렇게 밤새는 것 또한 동료가 없었으면 불가능했을 일 입니다.)
보다 본격적으로
그렇게 완성된 저의 첫 웹 페이지 스켈레톤입니다.
내 자식 자랑이 기회를 만들었다
스켈레톤이 완성된 날, 뭐라도 하나 해냈다는 기쁨에 클러스터를 돌아다니며 막 자랑을 하고 있었습니다.
그리고 ‘덕질이 밥 먹여준다’ 프로젝트 때부터 도와주신 이호준 멘토님께도 자랑했고, 멘토님이 저에게 카뎃들을 모아두고 코드리뷰를 해볼 것을 제안하셨습니다.
그렇게 저의 생애 첫 코드리뷰가 시작되었습니다.
코드의 구조보다는 ‘일단 돌아는 가는’ 코드를 만들었기 때문에 코드 리뷰를 하기에도 부끄러운 수준이었는데요.
콜백 지옥 끝판왕이었던 저의 첫 번째 코드… 두 번의 리팩토링을 거치며 어떻게 변화했는지 보시는 것도 재미있을 것 같습니다.
멘토님은 뭐라도 하나 완성해온 것을 칭찬해주시며 다음 번에는 리팩토링을 해서 가져오는 과제를 주셨습니다.
리팩토링…?
리팩토링이라고는 42의 놂(norminette)을 맞추기 위해 26줄을 25줄로 바꿔본 경험 밖에 없던 저에게 상당히 어려운 미션이었습니다.
멘토님은 지금 컨트롤러 부분이 너무 무거우니 이 부분을 라이브러리로 떼어내고 라이브러리가 모델과 소통하도록 구조를 바꿔와보라고 조언해주셨습니다.
처음 듣는 단어들에 혼란 그 자체였던 저는 일단 무작정 리팩토링에 대한 책, 디자인 패턴에 대한 책들을 빌려 MVC패턴에 대해 이해하고 접근하기 시작했습니다.
다음 글에서는 저의 첫 번째 리팩토링 과정과 그 피드백에 대해 써보겠습니다.
긴 글 읽어주셔서 정말 감사합니다.