5개월간의 부스트캠프에서의 여정이 모두 끝났다. 부스트캠프 멤버쉽 과정에서는 챌린지에서 배우고 익힌 자바스크립트를 기반으로 다양한 프로젝트를 진행했다. 멤버쉽 4개월의 여정은 6주간의 학습 스프린트 기간과 8주간의 그룹 프로젝트 기간으로 나뉜다.
학습 스프린트 기간
학습스프린트 기간은 6주 동안 2주 단위의 개인 프로젝트를 3번 진행했다. 2주는 또 1주일은 백엔드 구현, 나머지 1주일은 프론트엔드 구현으로 나누어졌다. 이 기간 동안에는 대부분의 라이브러리 사용 없이 바닐라js로 직접 구현을 해서 사용해야 했다.
첫 번째 프로젝트에서는 템플릿 엔진을 사용하여 서버사이드 렌더링을 하는 방식으로 구현을 해야했다. 나는 예전에 pug를 사용하여 간단한 프로젝트를 해본 경험이 있어서 첫 미션은 생각보다 수월했다. passport 나 express-session 같은 라이브러리 사용이 금지되었기 때문에 세션이나 인증 과정을 직접 구현해볼 수 있어서 쿠키와 세션 방식의 인증 흐름을 이해하는데에 많은 도움이 되었다.
두 번째 프로젝트부터는 SPA로 구현을 해봤는데, 이 때부터 프론트가 재밌어지기 시작했다.. 처음으로 Webpack 과 Babel 에 대해 알게되고, 직접 설정도 해봤다. 나만의 보일러 플레이트도 만들어 보았다. 각각의 컴포넌트를 클래스로 만들어 root 노드를 시작으로 appendChild 를 해주는 식으로 구현을 했다. 처음 폴더 구조를 어떻게 구성할지에 대해 고민을 많이 했었는데, 이 때는 components 폴더에 각각의 컴포넌트를 js 파일과 scss 파일을 하나의 폴더로 묶어서 관리했다. 바닐라로 처음 SPA를 만들어본 것이기 때문에 상태관리도 처음 해봤다. 현재 로그인된 사용자에 대한 상태를 App.js 부터 거의 리프 노드까지 일일이 하위 클래스의 생성자에 넣어 내려주는 방식으로 구현을 했었는데, 상당히 불편했다..
세 번째 프로젝트에는 프론트에 옵저버 패턴을 적용해봤다. 각각의 관심사별 모델을 Observable 클래스를 상속하는 싱글톤 클래스의 형태로 만들고, 전역으로 관리했다. 모델의 상태가 변경될 때 마다 구독자들에게 상태 변화를 알리는 메소드인 notify 를 호출하여 모델이 변화하면 모델은 구독한 뷰가 다시 렌더링되는 방식으로 구현했다. 처음으로 직접 디자인 패턴을 적용해봤는데, 이래서 디자인 패턴을 사용하는구나! 라는 생각이 들었다. 하지만 설계를 잘못하게 되면 예상치 못한 불필요한 렌더링이 발생할 수 있다는 것도 알게되었다.
폴더 구조도 두 번째와는 다르게 components 하위에 실제 DOM트리에 그려질 구조와 일치하게 계층적으로 관리해보려 했다. 장점으로는 실제 구조와 일치하기 때문에 원하는 파일을 찾기 편했고, 단점으로는 재사용성이 있는 컴포넌트의 경우 따로 관리하지 않으면 import 경로가 길어지고, 위치가 헷갈릴 수 있었다.
또 svg를 통해 데이터 시각화도 해보고 토큰 기반 인증도 배포 자동화 스크립트도 짜서 적용해보고 다양한 시도를 해볼 수 있었던 미션이었다. ㅎㅎ
학습 스프린트 기간동안 아쉬웠던 점은 내가 너무 구현에만 집중하지 않았나 하는 점이다. 마스터 클래스마다 항상 여러 캠퍼분들이 요구사항 구현 vs 학습 에 대한 질문을 많이 하셨다. 나 또한 많이 고민을 하며 프로젝트를 진행했지만 계속 요구사항 구현에 대한 비중이 더 컸던 것이 아닌가 싶다. 물론 학습을 안한 것은 아니다. 그렇지만 구현을 조금 덜 하더라도 조금 더 깊이 있게 학습할만한 부분에 있어서 더 투자를 했어도 좋지 않았을까.. 하는 아쉬움이 남는다. 그래서 지금 하는중..
코드 리뷰 🖊
학습 스프린트 기간에는 정해진 요일마다(격주로.. 백엔드 리뷰어 지원이 없어서 프론트만 리뷰를 받았다) 배정받은 리뷰어님께 코드 리뷰도 받을 수 있었는데, 나는 정말 좋은 리뷰어님을 만나게 되어 꼼꼼하게 리뷰를 받을 수 있었고 진짜 많이 배울 수 있었다.
학습 스프린트가 끝나고 그룹 프로젝트 시작 전에 1주일의 기간이 있었는데, 그 때 같이 리뷰를 받았던 캠퍼님과 함께 리뷰어님을 오프라인으로 만났다. 밥도 사주시고 좋은 이야기도 많이 해주셔서 정말 재밌고 뜻깊은 시간이었다!
그룹 프로젝트 👨👨👧👦
이번 부스트캠프에서는 작년과는 다르게 그룹 프로젝트를 8주짜리 프로젝트로 한 번에 하지 않고, 3주와 5주로 나누어 두 차례에 걸쳐 진행했다.
3주 프로젝트
3주 프로젝트는 모든 팀이 같은 주제(GitHub Issue Tracker)를 가지고 진행했다. 웹 3명 + IOS 2명 팀과 웹 4명팀 이렇게 두 종류에서 랜덤으로 팀을 배정받았다. 나는 웹 4명 인 팀으로 배정받아 다행이라고 생각했었다.. 그러나 프로젝트 진행 2일만에 팀원 중 한 분이 대학원 진학으로 인해 부캠을 그만두시는 바람에 3명이서 프로젝트를 진행하게 되었다.
첫 주는 거의 팀내 컨벤션이나 백로그 및 API 명세서, 이슈 작성 등 설계에 많은 시간을 투자했고, OAuth를 통한 GitHub 로그인 기능까지만 구현을 했다. 처음에 겁도 없이 TDD를 도입해보자고 하는 바람에 백엔드는 TDD로 진행을 했다.. 처음 시도해봤을 때는 개발 전에 틀을 잡고 진행할 수 있고, postman 대신 테스트 코드를 돌리는 것으로 간편하게 테스트를 할 수 있어서 좋았다. 유지보수 시 리팩토링 후에 특히 유용했다. 하지만, 개발 속도는 현저하게 떨어지는 단점이 있었다.. 조금 더 프로젝트의 크기가 커서 유지보수할 일이 많은 프로젝트였다면 TDD의 효율이 좋았겠지만, 3주짜리 프로젝트에서 TDD를 도입하는 것은 좋은 선택은 아니었던 것 같다.. (하지만 좋은 경험이었다!) 결국 프론트는 TDD를 적용하지 않았다.
프론트는 드디어 리액트를 사용하여 구현하게 되었는데, 3명의 팀원 중 리액트 경험이 있는 팀원이 한 분 계셨는데, 그분도 약간의 경험만 있으셨던 정도여서 초기에 학습에 많은 시간을 투자했다.
결국 목표했던 모든 기능을 구현하지는 못했지만 hooks API 의 사용법도 익히고 상태관리를 위해 context API 도 사용해보고 코드 퀄리티도 나름대로 팀원들과 많은 고민을 해가며 작성했기 때문에 뿌듯했다. 3주는 생각보다 많이 짧은 시간이었다.. 처음에는 TypeScript 까지 도입해보려 했는데 어림없는 생각이었던..
부스트캠프에서의 첫 팀 프로젝트를 하며 개발 프로세스를 경험할 수 있었고, 깃헙의 다양한 사용법도 익힐 수 있었다. 매일 아침 스크럼을 통해 진행 상황과 그날 할 일을 계획하고, 전날을 회고하며 개선점을 찾아봤다. 이슈 또한 템플릿을 작성하여 개발 전에 컴포넌트나 API 에 대한 명세 및 구조를 설계하여 이슈를 기반으로 개발을 진행했다. PR을 날릴 때에도 코드 리뷰를 꼼꼼하게 진행했다. PR 크기가 좀..? 커졌던건 비밀..
5주 프로젝트 🌊
마지막 5주 프로젝트는 네이버 기업과제로 진행됐다. 1지망부터 5지망까지를 선택하여 제출했는데, 주제들이 모두 흥미롭고 재미있어 보였다. 나는 1지망으로 “클라이언트 기반 웹 동영상 편집기” 라는 주제를 선택했고, 배정받을 수 있었다..! 이 주제를 선택한 이유는 음.. 어려워 보이고 재밌어 보여서..? 선택했다. 영상 편집이라는 주제도 흥미로웠고, 개발 요구사항의 WebCodecs, WebGL, Web Assembly 등의 처음 보는 기술들이 궁금했다.
3주 그룹 프로젝트를 이미 경험해봐서 그런지 초기 컨벤션이나 프로젝트 환경 구축은 생각보다 빠르게 진행되었다. 5주 프로젝트에서는 이슈 템플릿 뿐만 아니라, PR 템플릿과 commit 템플릿도 만들어서 사용해봤다. 추가로 3주 프로젝트에서 도입하지 못했던 TypeScript 도 도입하고, 상태관리를 위해 Redux 와 Redux-Saga 까지 도입을 했다.
프로젝트 초기에 가장 어려웠던 것이 두 가지 있었는데, 첫 번째로 WebCodecs, WebGL, Web Assembly, TypeScript, Redux, Redux-Saga 모두 한 번도 사용해본 적없는 기술들이었다는 점이다. 많은 기술을 빠르게 익히기 위해서 팀을 두 명씩 나누어 각각 하나의 주제를 학습하고 정리하여 공유하는 방식으로 다양한 기술들을 학습했다. 다행이었던 것은 WebGL 경험이 있는 팀원분이 계셔서 편집 효과를 적용하는 부분에 큰 기여를 해주셨다.
두 번째로는 프로젝트의 워크플로우를 잡는 것이었다. 팀원 모두 영상에 대한 도메인 지식이 부족한 상태였기 때문에 영상을 어떻게 편집하고, WebCodecs 를 어느 시점에 적용하여 인코딩과 디코딩을 해야할지, 서버에는 어떤 형태로 영상을 저장해야 하는지, 오디오는 어떻게 mux 해야할지 감이 전혀 잡히지 않았었다. 그래서 팀원들과 영상에 대한 도메인 지식(인코딩, 디코딩, 코덱, 컨테이너 포맷 등..)을 학습하고 나서야 워크플로우를 어떻게 잡을지 감이 조금 왔다. 하지만, WebCodecs 를 알아갈수록 구현되지 않은 API가 많았고, 여러가지 이유로 mp4 파일로 추출하기 위해서는 WebCodecs 사용을 포기해야 했다. (WebCodecs 을 쓰기 위해 https 배포도 했는데 ㅠㅠ)
영상이 어디까지 진행되고 있는지를 표시할 슬라이더 구현을 위해 css animation 을 공부해서 적용해봤는데, 갑자기 css animation에 재미가 붙어 여기저기에 짜잘하게 적용시켜보기도 했다. 또 프로젝트 특성상 영상을 로딩하고 다운로드 하는 등의 작업이 많아 로딩화면이 필요했는데, 팀원들끼리 LCC(Loading Component Contest)를 개최하여 캠퍼분들께 투표를 받아 1등한 로딩화면을 적용하기도 했다.
위의 두 개는 내가 만든 로딩 화면이다. 아쉽게 둘다 선정되지 못했…
또 많은 문제와 삽질이 있었지만 우여곡절 끝에 목표했던 기능을 거의 모두 완성했고, 좋은 평가를 받을 수 있었다. 정말 혼자였다면 완성할 수 없었을 프로젝트였고, 팀원들이 모두 열정적으로 프로젝트에 임해줘서 정말 고마웠다. 5주라는 한정된 시간 안에 요구사항을 모두 구현해야 했기에 테스트 코드는 작성하지 못해서 아쉬웠지만, 5주만에 이정도의 기능을 구현했다는 것만으로 대단한 것이라고 생각한다!
데모 시간이나 네트워킹 데이에 다른 팀들이 한 프로젝트도 많이 둘러보았는데, 정말 다들 어려운 프로젝트를 진행했고 얼마나 많은 고민과 시간이 들어갔는지 느껴졌다..
백엔드에서 프론트엔드로.. 🌉
처음에는 백엔드 개발자를 지망하고 있던 터라, 학습 스프린트 첫 프로젝트는 백엔드를 위주로 진행했었다. 두 번째, 세 번째 프로젝트를 진행하며 SPA를 처음 구현해보았다. 나는 기존에 백엔드 위주로 프로젝트를 진행해봤다보니, 템플릿 엔진을 사용한 MPA의 잦은 페이지 전환에 익숙해져 있었다. SPA는 필요한 부분만 렌더링 하여 페이지 전환 없이 원하는 동작을 할 수 있어 UX적으로 크게 매력적으로 다가왔고, 페이지의 각 컴포넌트들을 모듈 단위로 개발하여 조립해가는 것이 재미있었다. 점점 프론트엔드에 흥미가 생기기 시작했고 결국 프론트엔드 개발자를 목표로 하게 되었다. 5주 프로젝트의 주제를 선정할 때까지 많은 고민을 했는데, 3주 프로젝트에서 리액트를 처음 상용해보며 점점 마음이 굳혀졌던 것 같다. 프론트엔드가 변화가 빠르다. 그에 맞춰 공부하고 개발하는 것이 즐겁고, 새로운 기술을 빠르게 선점할 수도 있다는 점이 매력적이었다.
마무리
부스트캠프에서의 마지막 설문에 답하며 부스트캠프를 시작하기 전의 나의 모습을 떠올려보았다. 나는 백엔드 개발자를 지망하고 있었고, 때문에 졸업 작품 주제를 spring을 사용하여 웹 개발을 진행중이었다. 부스트캠프는 자바스크립트 풀스택 과정이었기에 약간의 고민은 됐었지만 언어가 중요한 것이 아니고 웹에 대한 전반적인 이해를 갖추면 어떤 언어를 하더라도 잘 할 수 있을거라고 생각했기에 웹에 대한 전반적인 이해를 갖춘 백엔드 개발자가 되는 것을 목표로 지원했다.
처음 지원할 때에는 자바스크립트를 제대로 사용할 줄도 모르고 기본 문법만 조금 알던 상태였지만, 이제는 가장 편한 언어이고 제일 자신있는 언어가 되었다. 백엔드밖에 몰랐던(사실 백엔드도 잘 몰랐던) 나는 이제 프론트엔드 개발자가 되기 위해 공부하고 있게 되었고, 깃헙을 제대로 사용하여 팀원들과 협업을 진행하는 방법, 협업의 가치를 배웠다. 가장 중요한 것은 내가 앞으로 나아가야 할 방향과 목표가 뚜렸해졌고, 무엇을 알고 무엇을 모르는지 알게되었다. 하고싶은 것도 정말 많아졌다.
올해는 여러모로 나한테 뜻깊은 해였다. 4학년 1학기 모든 과목을 A+받아 처음으로 1등을 해봤고, 전액 장학금을 받고 그대로 맥북을 구매했다. 또 챌린지 시작 직전에 정보처리기사 실기시험을 보느라 미리 js공부도 못하고 들어가게 되었지만, 결과적으로 멤버십도 합격하고 기사도 합격해서 뿌듯했다.
그렇지만 올해 가장 잘한 일은 역시 부스트캠프에 지원한 것이다. 내 인생에서 가장 많이 성장한 5개월이었다. 정말 실력있는 캠퍼분들을 많이 만나고 함께 할 수 있어서 영광이었고, 부스트캠프를 수료한 모두 잘될거라 믿고 뜻하시는 바를 이루기 바란다. 멤버십에도 챌린지 때와 마찬가지로 서로 롤링페이퍼를 써줬는데, 모두 좋은 말씀해주셔서 감사합니다~
