한국 근현대사 관점으로 바라본 Webpack 삽질기
최근 한국의 근현대사를 공부하고 있는 회사동료와 이야기를 나누다가 문득 일상생활을 함에 있어서도 역사적인 사실의 일부분과 다소 유사한 상황이 있지 않나 라는 생각이 들었습니다. 제가 종사하고 있는 Tech분야에서도 마찬가지 입니다. 새로운 기술을 빠르게 받아들이고, 서비스에 적용해 보자는 의견과 새로운 기술을 받아들이기 전에 왜 이 기술을 쓰는지 이 기술의 좋은 점이 무엇인지 깊숙히 알아본 후 시간을 두고 도입하자는 의견. 그리고 현재 쓰고 있는 기술이 좋으니 절대 받아들이면 안된다라는 의견. 이렇게 크게 세가지의 의견이 있습니다. 한국 근현대사 측면에서 보면 온건개화파와 급진개화파 그리고 위정척사파라고 비유할 수 있을 것 같습니다.
제가 속한 팀에서도 마찬가지 입니다. 어떤면에서는 고종의 부친이자 쇄국정책을 펼친 흥선대원군 같아 보이나 다른 면에서는 기존의 유교질서 체제를 유지하면서 점진적으로 서양 문명을 수용하는것을 이상으로 여겼던 온건개화파의 김홍집과 유사한 시니어 개발자가 있고, 조선의 마지막 군주이자 커피 애호가 였던 고종과 유사한 동료 개발자가 있습니다. (동료개발자는 어떤 분을 비유해야 해야 고민을 하다가 아침마다 커피를 내리시고 커피를 좋아하기에 단순히 고종에 비유를 하게 되었습니다.) 저는 급진개화파 중 한명이라 비유할 수 있겠네요.
작년에 많은 사람들에게 읽혔던 2016년에 자바스크립트를 배우는 기분을 읽었을 때 무척 공감이 되었습니다. 자고 나면 새로운 기술들이 쏟아져 나오고 이것도 공부해야 되고, 저것도 공부해야 되고, 이러다 뒤쳐지는 것이 아닐까 걱정도 들었습니다. 그래서 시니어 개발자에게 저희도 `일부 서비스에 react를 써보면 어떨까요? webpack을 써보면 어떨까요? babel을 써보면 어떨까요? ` 이렇게 머리위에 물음표를 달고 물어보면 항상 이렇게 답해 주셨습니다. `왜죠? 왜 그 기술을 도입해야 하죠?`
매일 똑같은 반찬을 먹다 보면 가끔 다른 음식을 먹고 싶을 때가 있습니다. 그렇기에 `요번엔 피자를 먹어보면 어떨까요?` 라고 물어보면 항상 `00씨, 피자 재료에 무엇이 들어갔는지 아시나요?` 라고 되 물으시곤 했습니다. 그리고 피자를 먹고 있는 다른팀을 부러운 눈으로 바라보곤 했습니다.
그러던 어느날 개발을 하다 기존에 쓰고 있던 Task Runner를 사용하는 방식에 대한 의문점이 강하게 들었고, 이것을 개선해서 관리포인트를 줄이면 좋지 않을까 하는 생각이 들었습니다. 또한 트렌트를 따라가보고 싶은 마음이 커서 동료개발자와 개혁을 모의를 했습니다. 바로 Webpack2를 사용해 일부 서비스에 실험적으로 적용해 보고 온건개화파인 시니어 개발자를 설득해보자라는 개혁이었습니다.
처음 Webpack에 대해 조사하다 아래와 같은 글을 보게 되었습니다.
Webpack은 CommonJS 그룹과 AMD그룹 명세를 모두 지원하는 JavaScript 모듈화 도구다.
CommonJS와 AMD를 정확히 잘 몰랐기 때문에 이 부분에 대해 공부를 하게 되었고 모듈화 개념까지 알고 넘어가면 좋을 것 같다라는 생각이 들어 bottom-up 방식으로 공부를 하게 되었습니다.
그리고 온건개화파인 시니어 개발자 주변 분들을 회유하기 위한 것도 있었고, 저희가 공부한 내용을 다른 팀분들과 공유를 해보면 좋을 것 같아 세미나를 열어 발표를 했습니다.
그 이후로는 서비스에 적용해 보는 작업을 진행하였습니다. 쉽지가 않았습니다. 모르고 있었던 개념이 중간 중간 튀어나왔고 우리가 하는 방향이 정말 맞는 것인가라는 생각도 들었습니다. webpack 예제를 따라하면서 많은 의문점이 생겼는데 대표적인 두가지 의문점은 아래와 같습니다.
- webpack.config.js 에 설정을 하고 보니 이렇게 하는 것과 기존의 Task runner 하나로 작업하는 것보다 어떤 장점이 있는가
- webpack이 컴파일 속도가 빠르다고 하는데 실제로 빠른가
2번 같은 경우는 파일 병합 부분을 webpack으로 돌렸을때와 grunt로 돌렸을때의 경우를 테스트 해봤는데 아래와 같은 결과가 나오는 걸 확인 할 수 있었습니다.
custom script 비교total : 68file[파일 병합] webpack vs grunt
1. 711ms 1.1s
2. 693ms 1s
3. 970ms 1.1s
4. 657ms 1s
5. 729ms 1s
6. 686ms 1s
7. 660ms 1s
8. 740ms 1s
9. 691ms 1s
10. 774ms 1s
11. 723ms 1s
12. 720ms 1s
13. 755ms 1s
14. 943ms 1.1s
15. 804ms 1.2s평균 700ms 1s
webpack을 실험하면서 자료 조사를 통해 얻은 지식 말고 위의 의문점을 직접 풀고 증명해 보고 싶어서 테스트도 해보고 이것저것 작업을 해보고 있습니다. 먼가 증명이 있으면 우리가 하려고 했던 개혁이 받아들여지지 않을까 하는 생각이 컸기 때문입니다.
온건개화파 시니어 개발자는 기본개념을 가장 중요시 여기십니다. 왜 기술을 도입하려는지, 기존의 사용하던 기술과 무슨 차이가 있는지, 그 개념에 대해 자세히 알고 있는지.상당히 중요하게 생각하셨습니다. 그 말을 충분히 동의 하지만 이야기를 들을 때마다 척화비하나 더 세우신 느낌이 들까요?
React와 webpack을 조화롭게 사용해보는 것도 진행할 예정이고, 금요일날 팀원들에게 공유를 할 생각인데 이 시도가 갑신정변처럼 삼일천하로 끝날지 아니면 앞으로의 개혁이 성공할지 두고 봐야 될 것 같습니다.
