Facts
- 유튜브 강의실 3단계 미션을 제출했다.
- 지하철 노선도 1단계 미션을 제출했다.
- 웹팩을 공부했다.
Feelings & Findings
유튜브 강의실 3단계 미션을 제출했다.
사실 2단계 미션을 제출하고 나서 바로 3단계도 미리 구현을 했었다.
2단계를 이렇게 오랫동안 끌고 있을줄 모르고... 구현을 했었다.
유튜브 강의실은 MVC 패턴으로 구현을 했는데, SearchController에서 Classroom 모델과 뷰를 알고 있는 것이 좋지 않다는 리뷰를 받았다.
여기에서 싱글턴이나 옵저버 패턴을 사용해보라는 피드백을 받았고, 옵저버 패턴에 싱글턴을 사용해 구현을 했다.
옵저버 패턴은 어떤 이벤트가 발생했을 때, 그 이벤트를 구독하고 있는 대상에게 알려서 함수를 실행시킬 수 있는 유용한 패턴이다.
싱글턴은 한 클래스의 인스턴스가 어디에서 쓰이던지 모두 같은 인스턴스를 바라보는 전역객체 같은 느낌이다.
연습을 해보기 위해 둘 다 사용해서 구현을 했고, 결론적으로 SearchController에서는 더이상 Classroom 모델과 뷰를 알 필요가 없어졌다.
MVC 패턴을 사용할 땐 의존성을 해결하는 것이 중요하다는 생각을 하게 되었다.
지하철 노선도 1단계 미션을 제출했다.
1단계 미션을 위해 화, 수, 목, 금, 토 이렇게 5일을 달렸다.
처음에는 쉬워보였지만 api를 요청하고, SPA로 구현하기 위해 라우팅 기능을 구현하는 것이 꽤나 어려웠다.
그래서 매일 12시까지는 했고, 금요일은 새벽 2시를 넘어서도 했었다.(그래서 데일리 회고를 못했다..)
솔직히 가장 어려웠던 것은 웹팩이었다.
웹팩은 사용해본 적도 없고, 페어도 같은 입장이라서 처음부터 공부를 해야 했다.
첫 날은 웹팩 설정만 6시간 넘게 했는데, 오늘 그 부분에 대해서 다시 한번 공부를 했다.
이해가 안가던 부분은 path vs publicPath였고, htmlWebpackPlugin을 왜 써야하는지에 대한 부분이었다. 또, dev-server의 동작 원리도 궁금했다.
내가 이해한 것을 짧게 정리해보겠다.
path vs publicPath
path : entry로 만들어진 파일이 저장될 공간
publicPath: 빌드를 할 때, url-loader, file-loader와 같은 로더의 url의 path를 지정하기 위한 prefix 같은 개념
ex) background-image : url('./src/images/image.png')에 publicPath : '/dist/'가 지정되어 있으면 빌드를 하고 열어보면 url('./dist/image.png')로 바뀐다.
htmlWebpackPlugin
webpack-dev-server를 사용해서 굳이 왜 htmlWebpackPlugin을 사용해야하지? 라는 생각을 했었다.
배포를 위해서는 무조건 사용해야 하는 것이었다.
배포할 땐 dist 폴더를 배포하는데, 이 안에 index.html이 없으면 실행이 되지 않기 때문이다.
htmlWebpackPlugin은 기본적으로 main.js를 로드한다.
하지만 난 이것을 모르고 내가 만든 index.html에서 src="./dist/main.js"를 했었고, 잘 작동하는 줄 알고 진행을 하다가 두 번씩 로드된다는 사실을 알게 되었다.
이유도 모른채 2시간 ~ 3시간을 썼다.
그러고 크루에게 질문을 해서 inject : false를 사용하면 한번만 로드된다는 사실을 알게 되었고, 그대로 사용했다.
하지만 사용하다보니 왜 우리만 inject를 사용해야할까? 라는 의문이 생겼고, 계속 찾다보니 main.js를 두 번 로드해서 나타나는 문제였다.
다음부터는 절대 실수하지 않을 것 같다.
webpack-dev-server
webpack-dev-server는 브라우저의 메모리에 build를 하기 때문에 webpack build랑은 조금 다르다.
그래서 실시간으로 코드의 변화를 감지해 브라우저를 리로딩해주는 좋은 기능을 사용할 수 있다.
이러한 기능은 inline과 hot이 있는데,
inline은 코드가 변하면 브라우저를 리로드시키는 것이고, hot은 변한 부분만 리로드시키는 것이라고 한다.
하지만 난 hot을 사용해도 전체가 리로드되던데 아직 이것에 대한 이유는 잘 모르겠다.
게다가 webpack을 build할 때 -w 옵션을 주면 이것도 실시간으로 코드의 변화를 감지하여 리로드를 시켜주는데, 굳이 webpack-dev-server를 사용해야 할 이유를 아직까진 찾지 못했다.
js에 빌드를 계속 하지 않아도 된다는 이점?? 하나밖에 모르겠다.
이렇게 웹팩에 대해 공부를 했고, 공부를 계속 하고는 있지만 잘 모르겠다.
다 처음보는 것이고, 어떤식으로 공부를 해야할지 감을 못잡겠다.
필요한 부분이 나올 때마다 그 부분을 공부하는 것이 가장 효율이 좋을 것 같다.
publicPath가 전혀 이해가 안됐었는데, 이젠 어느 상황에서 사용해야 하는지 이해를 했다.
이것으로도 큰 수확이라고 생각한다.
Plans
- 지하철 피드백 반영 및 2단계 구현
- 유튜브 강의실 피드백 오면 반영하기
- 블로그 스터디 참여
- 페어 프로그래밍 진행
