🚨🚨🚨!!주의!!🚨🚨🚨
아래의 포스팅은 제가 왜 웹팩을 가지고서 글을 쓰게 되었는지, 제가 웹팩의 무엇에 관해 글을 쓰려고 하는지에 대한 서문입니다. 웹팩의 기능이 무엇인지에 대해서는 다음 연재 글에서 다뤄보도록 하겠습니다! 이번 글에는 웹팩에 대한 기능 설명 1도 없어요!
TL;DR
- Vue.js로 블로그 만들다가 웹팩을 처음 봐서 공부할 겸 정리해요.
- 무엇을 정리하냐면요, 웹팩의 현재, 과거, 그리고 미래를 정리해보려고 해요.
안녕하세요. 개발자 chullin입니다.
오랜만에 글을 쓰는지라 어색어색한디 인사부터 드리고 싶네요. 다들 잘 지내셨는지요? 저는 그럭저럭 지내고 있어요. 한달 전에는 책도 좀 보고 정리하면서 책상에 앉아 시간을 보냈던 것 같은데요, 요새는 시간 날때마다 틈틈히 개인블로그를 만들면서 다시금 컴퓨터 앞에서 시간을 보내며 삶을 살고 있습니다.
블로그 개발스택은 Vue.js로 단일 페이지 어플리케이션 형식으로 만들고, netlify를 통해서 배포했어요. 블로그에 넣어야 하는 글들을 저장하는 DB로는 싼맛에 aws S3를 선택했어요. 데이터는 aws api gateway로 get,post API로 통신하려구요. (그런데 유저의 인터랙션을 concurrently하게 저장해야하는 기능이 필요해서 아예 제대로 된 db도 고민 중인데요, 물망에 오른 것 중에 하나는 5GB까지 무료인 faunaDB 에요. 아마, DB를 바꾸면, api도 변경해야 할 수도 있겠어요.)
개인 블로그는 개발할 수 있는 서비스 중에서 아주아주 마이크로한 서비스에요. 때문에 비용이든 서비스든 최대한 가볍게 가려고 했어요. Aws Elastic Beanstalk 대신 netlify를 선택했기에 배포의 과정이 단순해졌구요. 24시간 돌려서 서버비용이 따로 드는 mongoDB, Postgresql대신 사용자들의 요청 수에 비례해서 비용이 드는 aws s3를 선택해서 비용도 거의 0에 수렴하는 서비스가 완성되었습니다.
배포에 대한 인지적 비용 아주 적구요.
클라이언트의 네트워크 비용도 적구요.
스토리지 비용도 아주 적은 편이에요.
Concurrency 문제 때문에 리얼 DB인 FaunaDB도 고민 중이구요.
버전 0.0.1이 완성되었다고 느낄 때 미디엄에도 블로그 주소를 공개해보려고 합니다. 나름 DIY라서 그런지, 시간도 많이 들이고 공도 많이 들여서 예쁘게 만들고 있거든요. 제 관심사가 인공지능, 개발, 심리철학인지라 관련 글들을 스크랩하고, 글도 쓰고, 개발 프로젝트도 한번 모아보려고 만들었어요.
글 제목은 웹팩인데 사설이 길지요?
사실 개인블로그의 개략적인 뼈대는 거의 개발했는데, 아직 콘텐츠가 없어요. 어떤 글을 담으면 좋을까 고민하던 차에, 이번에 블로그를 만들면서 깊이 이해하고 싶은 내용들이나 잘 모르겠는 내용들을 정리해서 블로그에 써두면 좋겠거니 싶었어요. 그 중 하나가 webpack이었어요.
지금까지 python을 주로 사용해서 개발했고, 이번 블로그 만들 때에는 새로운 것 공부해보자는 마음으로 vue.js를 사용하게 되었어요. vue-cli로 vue 프로젝트를 init을 해보니, 웹팩과 마주하게 되더라구요. Vue도 처음인 와중에 웹팩을 마주했을 때, 이름부터 좀 어렵게 느껴져서 좀 당황했는데요. 몇 번 허슬링 하다보니, 또 어느새 익숙해지더랍니다. 웹팩이 뭔지 정확히는 몰라도 무슨 기능하는지 감은 잡을 수 있게 되었습니다.
웹팩: 온갖 파일들 싹다 끌어모아서 하나의 파일로 만들어주는, 번들러다.
그런데 또, 정확히 모른채 이렇게 대충 기능만 알고 넘어가는 게 마음에 좀 걸려서 웹팩이 뭔지 정확히 알아보고 정리해두고자 이번 글을 쓰게 되었어요.
글의 순서는 다음과 같아요.
첫째로는, 웹팩 사용법을 정리할 예정이에요.
이 글을 검색해서 들어오신 개발자분들의 핵심 관심사일 것이라고 생각해요. 사실 2–3년 전부터도 많은 개발자분들이 웹팩이 무엇인지 상세하게 설명해주셨어요. 웹팩의 이니셜 릴리즈는 2012년이었으니, 그 사이에 얼마나 많은 개발자분들께서 한국으로 웹팩을 임포트하셨을까요. 제 글은 그분들의 노력에 기대어서 나온 산물이라는 점 미리 언급해두고 싶어요.
둘째로는, 웹팩의 과거, 즉 웹팩이 해결한 문제를 정리하구요.
웹팩은 2012년에 처음 릴리즈가 되었고 지금은 웹팩 버전 4가 등장한 상황입니다. 웹팩 등장의 배경에는 무엇이 있었을까 생각해보면, 당연히 2009년 이니셜 릴리즈된 Node.js, 2010년 Node.js의 패키지매니저인 npm이 등장한 2010년을 빼놓고 설명할 수가 없겠더라구요. 현재의 웹개발 생태계의 시초라고 볼 수 있는 2010년대 초반에 어떤 문제가 있었기에 웹팩은 이니셜 릴리즈를 만들었던 것일까요? 웹팩을 어떻게 쓰는지 아는 것도 중요하지만 왜 등장했는지 알면 웹개발에 대해 한웅큼이라도 이해한 느낌이 들것이라는 희망에 이 시기를 파보기 시작했어요. 거창한 시도였는데, 정보성이 충분한 글이 될지 잘 모르겠군요.
세번째로는, 웹팩의 미래에 대해서 이야기해보려구요.
사실, node.js 모듈 번들러라고 구글링해보시면 알겠지만 많은 서비스들이 있어요. 그 중에서도 웹팩이 오래도록 살아남을 수 있을까요? 웹팩 관계자들은 “정말 빠른 빌드”, “configuration에 대한 고민없는 개발” 등등을 이야기하는데 과연 다른 모듈 번들러들은 이런 가치를 제공하지 않을까요? 저는 다른 모듈 번들러와의 (가능하면 피상적이지 않은) 구체적인 비교를 통해서 이 문제에 대해서 알아보려고 해요. 웹팩없는 웹개발이 유익할 수도 있다면, 우리는 그 방향으로 또 이동해야 하는 개발자들이니까요. 혹은 웹팩 깃헙에 이슈를 남길 수도 있겠죠!
자, 이렇게 사설 및 서두가 마무리됩니다!😃😃 웹팩 사용법이 궁금하신 분들은 첫번째 링크로, 그리고 웹팩이 해결한 문제가 궁금하신 분들은 두번째 링크로 들어가보시길 바랍니다. 혹여나 웹팩의 미래를 점치는 데에 관심이 있으신 분들은 세번째 링크로 들어가보시면 되겠어요.[링크는 글을 쓰는대로 활성화시킬 예정이며, 2~3주 내로 연재가 완료될 예정입니다. 빠구없는 성공적인 연재작이 되길 기원해봅니다!]
1️⃣ 웹팩; 기능 사용하기
3⃣-2웹팩; JS 모듈화 역사 돌아보기(2)X
3️⃣ 웹팩; 미래 점쳐보기(4월 24일 링크 오픈 예정)
이상 개발자 Chullin이었습니다. 박수와 댓글은 방구석에서 글쓰는 개발자의 삶에 크나큰 행복감을 준다는 점, 조심스레 남기며 글을 마치겠습니다.
