2020-10-25개인적인 / 에세이

Brandi Internship - Part 1

Wecode!

올해 4월 코드스피츠로 자바스크립트 공부를 하던 나는, 자바스크립트가 가지고 있는 깊이와 활용도에 크게 매력을 느꼈다. 다만 아쉬운 점은 혼자서는 큰 단위의 코드를 작성하면서 배운 내용을 적용하기가 어려웠고 프로젝트를 진행하고 싶어졌다. 통신하는 부분의 코드를 작성해보면서 promise와 async await, generator등을 직접 활용해보고 싶었다.(아쉽게도 아직까지도 충분히 활용해보지는 못했다.) 그래서 프로젝트를 진행하면서 코드리뷰를 받을 수 있는 곳을 찾아보게 되었다. 그렇게 찾게 된 곳들은 대부분 부트캠프들이었는데, 나는 당장 다닐 수 있는 곳을 찾았었고, 당시에 당장 등록할 수 있는 곳이면서 프로젝트를 진행할 수 있는 곳인 wecode를 선택하게 되었다. wecode는 3개월동안 2개의 프로젝트와 1달 간의 인턴쉽을 제공하는데 개인적으로 너무 감사한 시간들이었다. 이번 글에서는 여성 의류 플랫폼 서비스를 제공하는 스타트업, Brandi에서 1달간 진행했던 프로젝트와 그 프로젝트를 어떻게 해결했는지 적어보았다.

Brandi 인턴쉽의 시작

Brandi에서 인턴쉽을 진행한 인원은 총 20명이었다. 10명씩 두 팀으로 나눠서 현재 브랜디에서 운영 중인 서비스 사이트와 어드민 사이트를 만드는 것이 한달 동안의 과제였다. 물론 완전히 동일하게 만들어야 하는 것은 아니었지만 필수 구현으로 제시된 페이지가 꽤 많은 양이었다. 만들어야 할 페이지가 많은 것도 어려움이었지만, 부트캠프 기간동안 react를 사용했던 것과는 다르게 브랜디에서는 vue를 사용해야 했다. 따라서 뷰를 새롭게 공부하는 것과 동시에 많은 페이지들을 구현해야 한다는 부담이 있었다. 일단 우리팀 10명(FE 5명, BE 5명)은 다시 5명씩 서비스팀과 어드민 팀으로 나누었고 나는 어드민 팀에 속하게 되었다. 그리고 우리가 만들어야할 페이지들을 관찰하기 시작했다. 그런데 프론트들은 페이지들을 관찰하기 전에 넘어야 할 산이 있었다.

첫 번째 난관: Webpack

편하게 vue-cli3를 사용할까요?

회사에서 필수구현으로 명시된 사항 중에 webpack을 사용하여 개발, 배포 환경을 구성해야 한다는 사항이 있었다. 지난 2달동안 wecode에서 리액트로 프로젝트를 진행할 때, CRA를 사용하여 웹팩을 직접 만지는 일 없이 개발, 배포 환경을 제공받았었기 때문에, webpack에 대한 지식이 거의 없었다. 다행히 vue에서도 cra처럼 vue-cli라는 도구가 있었고 vue를 만든 evan you의 팀이 재작년 버전을 3으로 올리면서 vue 환경을 설정할 때의 편의성을 높였기 때문에 쉽게 사용할 수 있었다. 정말 vue-cli3는 사용하기 편리했고, 추가로 설정하고 싶은 로더나 플러그인들은 vue.config.js에 추가하기만 하면 됐다. 문제는 이런 선택이 웹팩을 사용하라는 필수 구현 사항에 배치되는 선택이냐는 것이었다. 우리는 추가적인 설정을 vue.config.js를 사용하여 webpack에 추가할 예정이었기 때문에 아예 웹팩을 사용하지 않는 것도 아니었다. 그래서 우리 인턴쉽을 담당하고 있는 원철님께 slack으로 dm을 날렸다. 다행히도 vue-cli를 사용하고 vue.config.js로 추가 설정을 해도 된다는 답변을 받았다. 덕분에 과제를 받은 첫 째날 퇴근 직전에 프로젝트를 시작할 수 있는 vue 환경 설정을 끝낼 수 있었고, 이제 수 많은 페이지들을 만드는 작업을 시작하면 되었다. 그런데 팀원 중 한명이었던 상훈님이 다른 의견을 내셨다. “근데 vue-cli를 쓰면 왜 작동이 되는거에요? 인턴쉽 과정도 공부인데, 우리가 직접 처음부터 만들어보면 어떨까요?” 그래서 우리팀 프론트 5명은 vue-cli를 사용하지 않고 직접 웹팩을 설정해보기로 결정했다. 그리고 선택을 후회…

googling, webpack, vue, none…

우리는 vue 공부도 병행해야 했기 때문에, webpack 설정은 프론트에서 나와 상훈님 두명이서 빠르게 진행하기로 하고(너무 몰라서 빠르게 진행할 수 있다고 생각했다…), 다른 3명의 팀원은 뷰 공부를 시작하는 것으로 결정했다. 그리고 정리한 내용을 팀원들에게 전달해주기로 했다. 나와 상훈님 두명은 구글링을 시작했는데, 우리는 webpack 설정에 도움이 될만한 자료들은 다 읽어보았다. 꼭 vue설정이 아니더라도 react설정에서도 도움을 얻을 수 있는 자료가 있다면 찾아서 읽어보았다. 문제는 대부분의 자료들이 너무 얕은 수준의 설정만 제공하고 있다는 점이었다. 우리는 개발환경과, 배포환경을 나누어서 환경 설정을 해야 했는데, 대부분의 자료들은 개발 환경에 맞춰져 있었고, 로더를 붙이는 방식도 조금씩 다 달랐는데 왜 다른지에 대한 이유를 알기도 어려웠다. webpack, vue라는 키워드로 검색해서는 우리가 원하는 자료를 얻기가 어려울 것 같았다. 그래서 일단 브랜디에서도 vue 설정이 있기 때문에 인턴쉽 과정과 인원들을 담당하셨던 팀장님께 가서 어떤 방식으로 웹팩 설정을 하는 것이 좋을지 자료를 얻을 수 있는지 물어보았다. 팀장님의 답변은 “일단 스탠다드한 설정을 찾고, 그 설정에 대해서 커스텀 하게 수정을 하는 방식으로 해야 한다.” 라는 도움이 되면서 도움이 되지 않는 것 같은 답변을 해주셨다. 하하하… 하지만 이 답변이 큰 도움이 되었다. 문제를 해결할 시작점은 “스탠다드한 설정”을 찾는 것이었다. 그런데 “스탠다드한 설정”을 도데체 어디에서 찾는다는 말인가? “스탠다드한 설정”을 찾아 헤메던 우리가 갑자기 깨달은 바가 있었다. 우리가 이미 사용한 vue-cli3가 “스탠다드한 설정”이라는 것

vue-cli3를 뜯어봅시다.

CRA에서 webpack 설정을 보기 위해서 eject를 제공하듯이 vue-cli3에서는 inspect라는 명령어를 제공한다. inspect 명령어는 다양한 옵션들을 제공하는데, 개발환경과 배포환경의 파일을 각각 보여주는 옵션도 있었다. 우리는 개발과 배포 환경에서의 웹팩 설정을 output-dev, output-prod라는 파일에 저장하고 두 설정을 비교하기로 했다. 그런데 inspect를 통해 나온 결과물이 각각 1300줄이 넘었다… 우리는 2가지를 확인하기로 했다. 각각의 설정 파일에서 사용한 내용들이 어떤 역할을 하는 것인지 전부 조사하는 것, 그리고 개발환경과 배포환경에서 어떤 차이가 발생하는 확인하는 것이었다. 코드를 한줄한줄 확인하면서 우리는 구글링으로는 알 수 없었던 최적화를 위한 로더와 플러그인들이 vue-cli에 존재한다는 것을 알았고, webpack 설정파일의 대부분이 css처리에 관한 내용이라는 것을 알게 되었다. 우리는 scss만 사용할 예정이었지만, vue-cli의 경우에는 일반적인 사용자의 경우를 다 커버해야 하기 때문에 less, stylus들에 대한 처리도 있었다. 또한 두 환경의 차이는 diffchecker라는 웹 사이트의 도움을 받았다. css의 경우 개발 환경에서는 바로 css를 js에 주입하면 되지만, 배포 환경에서는 css파일로 추출되어야 했기 때문에 이 두 부분을 처리하는 로더와 플러그인이 각각 달랐다.

각 로더와 플러그인들의 역할도 찾았고, 두 환경에서의 차이도 알게 되었기 때문에 wepback 설정을 시작했다. 일단 두 파일 모두의 공통사항은 webpack.config.base라는 파일에 설정하기로 하고 이 설정을 webpack-merge로 받아서 webpack.config.dev, webpack.config.prod에서 사용하기로 했다. 이렇게 순조롭게 진행되면 좋은데, 항상 일은 그렇게 진행되지 않는다… 설정을 하던 중에 뭔가 놓친 것이 있다는 것을 알게 되었는데, 바로 개발 환경에서의 devServer 설정이었다. inpect를 통해서 나온 파일에서는 devServer설정이 없었고, 이렇게 되면 webpack-dev-server를 실행했을 때에 대한 설정이 존재하지 않게 되었다. 그런데 vue-cli3 환경에서는 devServer가 잘 작동을 했다. 뭔가 놓친점이 있다고 생각했고, vue-cli github에서 직접 파일들을 확인해보기로 결정했다. 그렇게 vue-cli 레포지토리에 들어가서 한참을…

vue-cli 레포지토리의 파일들을 직접 확인을 한 결과 새로운 사실 2가지를 알게 되었다. 우선 vue-cli3는 웹팩 체인을 사용하여 함수 체이닝으로 웹팩 설정 객체를 만들도록 구성되어 있었다.(그래서 코드들이 훨씬 간편하게 작성되었는데, 우리도 체이닝 방식으로 바꾸고 싶었지만 그러기에는 이미 너무 많은 시간을 사용한 상태였다…) 그리고 devServer설정이 개발 환경에서 빠지는 이유는 devServer설정을 해주는 웹팩 체이닝 파일은 webpack-dev-server가 실행되었을 때, serve 명령어에서 실행되도록 별도로 분리되어 있기 때문에 inpect로는 볼 수가 없게 되어 있었다. 결과적으로 vue-cli3의 devServer 설정은 우리가 그대로 사용하기에는 어렵다고 판단을 했고, 간단하게 contentBase, compress, open, historyApiFallback 옵션만 붙여서 사용하기로 결정했다.

이제 시작

이 모든 설정을 정리해서 개발환경과 배포환경이 잘 만들어지는 것을 확인한 것이 토요일 오전 11시 30분쯤이었다… 벌써 한주가 지나갔지만 만들어 진 것은 webpack 설정 뿐, 3주 안에 뷰 공부와 10개가 넘는 페이지에 대한 구현을 해야 했다. 남은 프로젝트를 어떻게 진행했는지는 다음 글에 이어서 적도록 하겠다.