3 min to read
부스트캠프 7기 1,2주차 회고
추석이 끼어있는 부캠일정의 회고
들어가며
8월 27일에 적었던 글에서 제 대학 동기이자, 부스트캠프 한 기수 선배처럼 회고를 열심히 써야지 하고 결심하였지만, 게으름이 발동하여서, 계속 미루고만 있었습니다. 3주차가 시작하기 전에 1,2 주차 회고를 빠르게 써볼까 합니다.
멤버십 일정이 돌아가는 방법
챌린지때는 매일마다 CS지식에 관련된 미션이 주어지고, 하루 안에 과제를 죽이되던 밥이되던 어떻게든 만들어내는 그런 루틴의 반복이었지만, 멤버십은 조금 달랐습니다.
우선 함께하는 팀 단위가 일주일에 한번씩 돌아가는 것은 이전과 동일했지만, 미션의 단위가 하루가 아니고 1주(첫 미션만 해당) 또는 2주(그 외 모든 미션)단위로 돌아가기 때문에, 매일 아침마다 팀원끼리 줌으로 모여서 상황 공유를 할 때, 챌린지때는 본인의 코드를 보여주면서 미션을 어떻게 해결했는지를 보여줬지만, 멤버십은 미션의 단위가 크기 때문에, 서로 어떤 관점에서 미션을 바라보았는가, 구현을 하였다면 어떤 부분을 구현하였는지, 학습을 했다면 어떤 학습을 하였는지에 관한 공유를 하는 시간을 가졌던것 같습니다.
챌린지때와는 다르게, 학습 정리, 학습 메모 같은것이 의무적이진 않지만, 광범위한 미션 수행을 하다 보면, 자연스럽게 간단히 노션 등에 정리하게 됩니다. 여기서 의무감이 빠지니까, 좀 약간 대충하게되는건 안비밀. 그리고 이번주에는 KBSC라는 KB은행에서 하는 공모전을 마감하느라, 일주일 코딩 30시간의 기적을 성공하게 됩니다. (살려줘…) 그래도 마감은 성공했네요…
사용한것 + 배웠던것
1,2주동안 사용한 스택과 그 스택을 사용하면서 느낀점을 정리해 보겠습니다.
express.js
node.js에서 돌아가는 심플하면서도 괜찮은 서버입니다. 예전에 영상 CRUD 서비스를 개발하면서는 처음부터 파일 구조를 작성하였지만, express-generator 라는 물건을 알고 나서 이걸로 부트스트래핑을 하니까 정말 편하더라고요. ES5의 var 문법등으로 부트스트래핑 되는게 약간 찝찝하긴 했지만, 파일 구조를 뚝스딱스 해준다는것은 참 좋은 일입니다.
pug.js
pug는 템플릿 엔진입니다. express.js에서 SSR을 할 때, 단순 HTML 문자열을 던져줄 수 있지만, 반복되는 컴포넌트라던지 그런것들을 다 처리해주는것은 정말로 귀찮은 일입니다. pug.js를 사용하면 그런 것들을 처리해주는 mixin 등의 문법을 사용해서 템플릿팅을 더 편하게 할 수 있습니다.
scss
css는 퍼블리싱에서 빼놓을 수 없는 존재입니다. 근데 반복되는 부분이라던지, 계층적인 부분 같은것은 css로 하면 똑같은것을 복-붙 해야하는 귀찮은 작업들입니다.
하지만 scss를 활용하면, 그러한 계층구조를 nesting하는 것으로 더욱 간단히 나타낼 수 있고, 애니메이션에 반복되는 요소를 반복문 등으로 나타내어 조금 더 코드를 간결하게 만들 수 있습니다.
Webpack
FE개발의 동반자입니다. 모듈화는 정말로 중요한 것이지만, 배포되는 환경에서 파일들이 쪼개져있으면, 이거 다운로드 받는다고 성능 저하를 불러올 수 있습니다. 파일을 사용할 때, 압축을 한다거나, 전처리를 한다거나 하는 상황이 필요할 수도 있지요. 그러한 것들을 해주는 것이 webpack 입니다.
웹팩의 모든 것을 여기서 다루기에는 회고라는 글의 제목에 어울리지 않을것 같을 정도로 좀 방대합니다. 저도 사실 웹팩의 모든 스펙을 꿰고 있지는 않고요.
특히 path와 publicPath에 관해서 이게 모지… 하면서 헷갈렸었는데, 그때 참고한 문서들 링크를 남겨두고자 합니다.
- https://bambielli.com/til/2017-04-22-webpack-pt-1/
- http://52.78.22.201/tutorials/translate/webpack-the-confusing-parts/
이번 프로젝트에서 webpack 미들웨어를 express에 달아서, 예전에 영상 CRUD 서비스 와는 다르게 npm dev을 하나만 띄울 수 있다는 점이 매우 매력적이었습니다. 관련 docs를 남겨놓겠습니다.
https://jeonghwan-kim.github.io/dev/2020/07/18/webpack-dev-middleware.html
svg
Scalable Vector Graphics의 줄임말인 svg입니다. 이때까지는 그냥 외부에서 긁어오는 png 파일과 똑같은 그러한 느낌으로만 접근했지만, 이번 미션에서는 데이터를 받아서, 동적으로 그래프를 그렸어야 했습니다. 이를 위해서 svg를 사용해서 그래프를 그리고, 채색 등을 하면서 svg의 사용법을 본격적으로 다루면서 path, multiline 등을 사용하였습니다.
또 그래프를 동적으로 그리기 위해서 DOM을 사용해서 그래프를 그리는데, svg는 DOM구조처럼 나타나지만, XML구조이기 때문에 document.createElement()로 svg내에 있는 모든 자식을 제대로 그릴 수 없습니다.
그래서 document.createElementNS()를 사용하고, 뒤쪽 parameter에 http://www.w3.org/2000/svg를 넣어서 사용해야 합니다. 더 자세한 이야기는 mdn docs를 참조바랍니다.
맺으며
이 글에서 2주간의 모든 경험을 녹여내는것은 사실 불가능 한것 같습니다. 2주동안 매일 매일 기록을 남겨놓지도 않고, 대략 커밋을 돌려보면서, 노션 짜잘한 기록들을 보면서, 이런걸 했었지… 하면서 남기는 기록이니까요. 그래도 2주간 이런걸 했다 하는 회고를 남김으로서 계속해서 열심히 기록을 남길 첫 발자국을 내딛는다라는 의미에서 해보자 합니다! 내일부터 시작하는 3주차도 화이팅!!!
