[우아한 테크코스 3기] LEVEL 2 회고 (105일차)

안녕하세요? 제이온입니다.

 

오늘은 온라인이므로 집에서 우테코 관련 활동을 진행하였습니다.

 

 

영상 편집 & 글쓰기 미션 & 학습 로그 작성

이번에는 주모의 SPA 테코톡 영상을 편집하게 되었습니다. 안그래도 오늘 SPA 방식으로 동작하는 Vue를 조금 공부했는데, 관련된 주제라서 좋았습니다. 특히, 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이를 쉽게 알려주셔서 이해할 수 있었습니다. 가장 저에게 느껴지는 차이는, 서버 사이드 렌더링의 경우 일부분의 요소를 바꾸기 위하여 모든 요소를 갈아낀다는 것과 클라이언트 사이드 렌더링의 경우 일부분의 요소만 딱 갈아끼워줄 수 있다는 것입니다. 이렇게만 보면 또 클라이언트 사이드 렌더링이 좋아보이는데, 검색 최적화 문제나 초기 로딩 속도가 느리다는 문제가 있어서 둘이 양립해서 잘 써야한다고 느꼈죠.

 

이후에는 레벨 2 글쓰기 미션인 '우테코에서 찾은 나만의 효과적인 공부법'을 수행했습니다. 기존의 저는 학자형 방식으로 학습하였으나, 우테코에 와서 야생형 방식으로 학습해 보았고 두 방식을 혼합함으로써 큰 성장을 이루어냈다는 내용의 글을 썼습니다. 추후 여러 피드백을 받고 나서 블로그에 올릴 계획입니다.

 

마지막으로 학습 로그 작성입니다. 저는 레벨 2 첫 미션을 제외하고는 너무 바빠서 학습 로그 작성을 못했는데, 금요일에 학습 로그 토론을 한다는 공지를 듣고 부랴부랴 썼습니다. 다행히, 배포 인프라와 지하철 두 미션에 대해서 제가 회고를 잘 해놔서 금방 작성했습니다. 특히, 시간 들여서 학습 관련 회고한 부분은 URL만 복붙하면 돼서 간단했죠. 더불어, 몇 주전에 배운 내용을 복습할 수 있어서 유익했다고 생각합니다.

 

 

Vue 학습

저는 어제 새로고침 시 로그인이 풀리는 현상을 고치려고 노력했습니다. 물론, main.js와 vue.config.js 코드를 수정함으로써 해결할 수 있었습니다. 다만, 저는 구글링하면서 Vue가 SPA로 동작한다는 사실을 알게 되었습니다. 그리고 아래 코드와 같이 라우터 mode가 history라면, 루트 URL의 하위 URL을 입력하면 404 에러가 발생한다고 합니다. (ex. /jayon)

 

 

export default new VueRouter({
  mode: "history",
  routes: [
    ...stationRoutes,
    ...lineRoutes,
    ...mainRoutes,
    ...sectionRoutes,
    ...pathRoutes,
    ...memberRoutes,
  ],
});

 

 

이것은 Vue가 앞서 말했듯이 싱글 페이지 애플리케이션이기 때문입니다. 싱글 페이지 애플리케이션은 아래와 같이 코드를 build하면 index.html과 js, css 파일만 존재하게 됩니다. (물론, 곁다리 파일들도 당연히 있습니다.)

 

 

 

 

SPA가 아니라면 '/station'에 대해서는 station.html, '/line'에 대해서는 line.html처럼 각 URL에 상응하는 html 파일이 있어야 합니다. 하지만, SPA는 index.html만 갖고 다른 url로 접근하는 라우터만 존재합니다. 따라서 '/' 외에 루트의 하위 url로 접근하려고 하면 404 에러가 뜹니다. 그렇다면, 이를 어떻게 해결할까요?

 

여러 가지 방법이 있을 수 있는데, 저는 vue.config.js에 있는 devServer에서 'historyApiFallback: true' 옵션을 주었습니다. historyApiFallback가 true가 되면, 404 에러에 한하여 에러를 띄우지 않고 index.html을 렌더링하는 역할을 합니다. 그리고 하위 url 쿼리에 따라 적절한 라우터를 찾아서 해당 js를 띄웁니다.

 

그런데, 여기서 제가 이해가 가지 않는 상황을 겪었습니다. 바로, vue.config.js 단에서 historyApiFallback이 없어도 404 에러가 발생하지 않고, index.html이 렌더링된다는 점이죠. 그래서 vue 프로젝트가 생성될 때 자동으로 이 옵션을 걸어주는 것인지에 대한 추측만 있을 뿐이었습니다. 'vue default historyApiFallback'과 같은 키워드로 구글링하였으나 명확한 정보를 얻지는 못해서 우테코 프론트엔드 크루들에게 질문하였습니다.

 

감사하게도 심바와 동동이 이에 대해 도움을 주셨습니다. 결론부터 말하자면, vue 프로젝트가 생성될 때 해당 옵션을 자동으로 true가 되는 것이 맞습니다. 그렇기에 이 옵션을 함부로 false 처리하면 안 됩니다. 자세한 DM 전문은 아래와 같습니다.

 

 

프론트 고수시면서 모르신다니..ㅎㅎ 겸손까지..

 

 

해당 링크들은 포스팅 최하단부에 걸어두겠습니다. 두 크루들 덕분에 webpack-dev-server는 historyApiFallback 초기 옵션이 false라는 사실까지 배웠습니다.

 

 

정리

주말 이틀을 달리는 바람에 오늘은 조금 쉬면서 했습니다. 그래도 필수적으로 해야할 일은 모두 했기에 내일부터 스프링을 학습하면 될 것 같습니다.

 

 

Vue 관련 DM 링크

https://webpack.js.org/configuration/dev-server/

DevServer | webpack

 

https://cli.vuejs.org/guide/#cli-service

Overview | Vue CLI

 

https://github.com/vuejs-templates/webpack/blob/298503082f1ff758ef8ec5dbf5f91f5d8bdd0333/template/build/webpack.dev.conf.js#L23

vuejs-templates/webpack

 

https://cli.vuejs.org/config/#devserver

Configuration Reference | Vue CLI