이번주차도 지난번과 마찬가지로 2주동안 프로젝트를 진행했다. 지난주에는 SSR으로 웹 어플리케이션을 제작했는데, 이번에는 CSR로 SPA 웹 어플리케이션을 진행하게 되었다. 난 이제껏 리액트로만 SPA를 개발했었는데, 바닐라 JS로 SPA 어플리케이션을 개발하게 되었다... 결론부터 말하자면 어려웠다!!
😂 무엇이 어려웠나?
Webpack
Webpack 설정이 진짜 너무너무 어려웠다. 한 3일동안은 계속 웹팩 설정을 했다. 하루는 완전히 웹팩 설정만 했고, 나머지 이틀도 거진 2~3시간 정도는 웹팩 설정을 했다... 고생한 이유는 여러가지가 있겠지만, 우선 버그때문에 정말 고생했다.
css-loader와 file-loader를 같이 사용하니, css에서 url()로 가져온 이미지가 제대로 빌드되지 않는 버그가 있었다. 임시방편으로 css-loader의 url옵션을 false로 주고 빌드된 이미지 경로를 적어줌으로써 해결했으나, 제대로된 해결방법은 아니라고 생각한다.
그러다가 해결법을 발견했다. webpack file-loader does not load background image SOLVED css-loader의 옵션으로 esModule: false를 주면 해결이 되었다. 그런데 문제는 리뷰어분과 같이 이야기해보았을 때, 이 방법도 근본적인 해결책은 아닐 것이라는 의견이 나왔다. 왜냐면, webpack으로 빌드된 이미지의 주소를 정상적인 path로 가져오는 것은 file-loader의 역할이기에, css-loader가 아닌 file-loader쪽의 본질적인 문제가 있을 거란 거였다.
그래서 css-loader에 조작을 가하지않고 해결하는 방법을 또 찾아보다가, 웹팩5가 나오면서 file-loader 대신 asset이라는 모듈을 사용할 수 있다는 것을 보고 asset을 적용해보았다. 결과는 대성공이었다. css-loader에 별다른 옵션을 주지않고도 제대로 작동하는 것을 보고 드디어 해결했다라는 생각이 들었다. 며칠간 이 버그때문에 골머리를 앓았는데, 해결되어 좋았다.
이 버그 말고도 빌드된 결과물의 publicPath 설정이나 babel-loader의 설정 등에서도 많이 애먹었다. 웹 개발자라면, 특히나 프론트쪽이라면 필수적으로 알아야하는 번들러이지만, 그에 상응하게 익히기가 어려운 것 같다...
SPA
바닐라 JS로 만드는 SPA는 고통 그 자체였습니다... 앵귤러, 리액트, 뷰가 얼마나 고차원 프레임워크인지 깨달았습니다...
SPA 구현은 황준일 님의 블로그 Vanilla Javascript로 웹 컴포넌트 만들기를 참조하였는데, 기존에 SPA에 대한 기본적인 지식은 있어서 이해하는데 크게 어렵지는 않았다. 그래도 내가 직접 SPA로 동작하도록 바닐라 JS에서 코드를 작성해보니, 정말 시간과 비용이 많이 드는 작업이라는 것을 깨달았다.
- TMI - 부스트캠프 멤버십에서는 코드를 리뷰해주는 리뷰어분들을 배정해주시는데, 놀랍게도 황준일 님이 내 첫주차 리뷰어님이 되셨다.
- 블로그를 보면서 진짜 대단하시다고 생각했는데, 내 코드를 리뷰해주시는 걸 보고 더 대단하다고 느꼈다.
jsx
바닐라js에서 jsx를 사용하기 위해, jsx를 트랜스파일링하는 모듈을 직접 만들어 바벨과 연동했었다. 별거 없을 줄 알았는데, 이게 생각보다 생각할 게 많았고 동작방식에 대해 정확하 알지 못해 버그도 꽤나 발생했었다. 그걸 고치느라 다시 디버깅하면서 코드를 수정하면서 시간을 꽤 썼었다.
그래도 재미있게 구현한 부분이었고, 이런게 나중에 발전해서 내가 만든 모듈을 npm에 올리는 일도 생길 거라 생각한다.
✨ 무엇을 공부했나?
nCloud & Ubuntu 서버 배포
이번 프로젝트의 배포는 nCloud를 통해 직접 우분투 서버를 발급받고 서버를 올리게되었다. nCloud에서 배포에 필요한 설정들을 해주면서 포트포워딩과 같은 개념이나 배포에 필요한 pm2와 같은 기술들을 공부할 수 있었다.
이번 프로젝트에는 사용하지 않았지만, 다음 기회에는 서버를 배포할 때 Nginx(엔진엑스)를 사용해보아야겠다.
Webpack & Babel
이번 프로젝트하면서 웹팩과 바벨에 대해 꽤나 공부했다. 아직 잘한다고는 할 수 없지만, 최소한 웹팩과 바벨을 왜 쓰는지, 변환이 어떻게 되는 것인지, 설정할 때 어떤걸 알아봐야 하는지에 대해 많이 공부했다.
추후에 Webpack과 Babel이 무엇인지, 설정하는 방법은 어떤지에 대해 글을 작성해야겠다.
Mysql
지난 과제에서는 내가 쓰고싶은 MongoDB를 사용했었는데, 이번에는 Mysql로 강제되어서 Mysql을 공부하게 되었다. SQL문에 대해 대략적으로는 알고있었지만, 맨날 MongoDB같은 NOSQL이나 RDBMS도 ORM을 얹어서 사용하다보니 SQL문을 실제로 쓴적은 거의 없었다.
그러나 이번 기회에서 권한과 관련된 DCL, 테이블과 관계를 설정하는 DDL, 실제 데이터를 다루는 DML까지 골고루 사용할 수 있는 기회가 되었다. 또, 프로젝트를 설계하는 과정에서 개체와 관계를 기술하는 ER 다이어그램도 그려보았다.
컴포넌트 단위의 개발
이번에 바닐라 JS로 SPA를 구현하면서, 컴포넌트 단위로 개발하는 것을 주로 공부했다. 마치 리액트의 동작처럼 기능별로 나뉘어진 컴포넌트들의 조합으로 DOM을 구성하는 것이었다. 구현을 하는 것을 황준일 님의 블로그를 많이 참조하였다. 컴포넌트를 어떻게 구상해야할 지, 이벤트를 어떻게 처리해야할지에 대해 감을 잡을 수 있었다.
이 컴포넌트 단위의 개발을 하면서, Virtual Dom을 구현해보기도 하고 생산성을 높이기 위해 JSX 변환함수를 직접 만들어보기도 했다. 아직 완전히 이해한 것은 아니기에 추후 더 공부를 할 예정이다. 실제 현업에서는 프레임워크의 도움을 받으며 개발을 하겠지만, 그 내부의 구현을 모르면 제대로 활용할 수 없다고 생각한다. 그래서 로우한 레벨의 동작을 이해하기 위해 더 노력해야 겠다.
🎈 맺음말
이번 주차는 조금 실망이 크다. 이전 기수 선배님들이나 마스터님들이 학습 스프린트 과정은 구현보다는 학습이 주라고 항상 강조하셨다. 나도 그 말에 동감하기에, 이번 주차는 구현보다는 공부에 집중하고 싶었다. 그래서 공부를 하는 비중을 늘리고 개발은 부수적으로 진행하였다. 그런데 개발을 너무 뒷편에 던져버린게 문제였다. 아무리 공부를 우선시하더라도 공부와 개발의 밸런스가 중요하다고 생각하는데, 너무 공부에만 집중한 경향이 있었다. 그래도 공부를 함으로써 얻은게 많으니 나쁜 것은 아니지만, 다음번에는 개발과 공부의 밸런스를 잘 맞춰보고 싶다.
이번 주차가 끝나고 이제 추석 연휴기간인데, 추석동안은 푹 쉬고 원기회복해서 다음 주차는 더 잘해봐야겠다.
