개발과 일상 사이

들어가며 React, Vue 등을 활용하여 개발한 웹서비스는 대부분 SPA로 개발되었을 것이다. 그러나 SPA 에도 명백히 단점이 존재하고, 해당 단점을 극복하기 위해 위와같은 SPA 프레임워크를 쓰면서도 SSR이 되어야 하는 상황이 존재할 것이다. 그러한 것을 가능하게 하는 Next.js, Nuxt.js 등의 프레임워크가 있는 것이고 그 중에서도 오늘은 Nuxt.js 의 Universal Mode를 정리해보려고 한다. 시작하기에 앞서서 CSR, SSR 부터 정리해보자. CSR (Client Side Rendering) React, Vue 등을 활용한 SPA (Single Page Application) 에서 사용되는 방식 최초 한번의 페이지에 대해서만 서버로 부터 받은 다음, 이후에는 필요한 데이터만 ..

화면을 구성할때 반드시 잡아놓는것... 바로 레이아웃이다. 흔히들 말하는 GNB, LNB, 컨텐츠 등등... 아무튼 화면개발 하게되면 이건 무조건 잡고 가는거다 Nuxt 에서는 간편하게도 layouts 라는 디렉토리를 통해 화면별 사용할 레이아웃들을 만들어 둘 수가 있다. 레이아웃은 크게 3가지 종류가 있다고 내가 맘대로 정했다 1. default 레이아웃 말그대로 모든 화면에 적용되는 default 레이아웃이다. 파일명을 default.vue 로 만들면 그것이 디폴트 레이아웃이 된다. 예시로 든 Header 와 Footer 는 실제로 만들어둔 컴포넌트이며, Nuxt 컴포넌트에서 화면 routing 이 일어난다. 즉 화면의 상단과 하단에 공통적으로 항상 출력되는 컴포넌트가 있을 때, default.vue..