나보단 잘하자

웹페이지를 브라우저가 아닌 서버에서 보여지게 하는 방법이다. 서버는 완전히 렌더된 페이지를 클라이언트에게 보낸다. 클라이언트의 자바스크립트 번들은 vue.js 앱을 하이드레이트 하게 해준다. 이를 prerendered와 hydrate라고 하는데, prerendered는 서버사이드에서 seo를 위해 미리 보여줄 부분을 렌더링 하는 것이고, hydrate는 이후에 자바스크립트 파일들로 필요한 부분을 클라이언트에서 렌더링 하는 것이다(추가 설명). Node.js 서버 필요 자바스크립트 환경은 웹페이지를 렌더링 하기 위해 필요합니다. Node.js 서버는 vue.js 앱을 실행하기 위해 구성됩니다. 서버의 실행과 관리 서버는 serverMiddleware를 통해 실행할 수 있고 middleware를 통해 라우트..

Views Views 부분은 데이터 설정과 넉스트 앱의 특정한 라우트의 뷰의 모든것을 설명합니다. 뷰는 앱 템플릿, 레이아웃 그리고 실제 페이지에 있습니다. 또한, SEO에 중요한 각각 뷰의 헤드 섹션에 들어가는 메타 태그를 정의할 수 있습니다! Pages 모든 페이지 컴포넌트는 뷰 컴포넌트지만, 넉스트는 최대한 앱을 쉽게 만들도록 하기 위해 특별한 속성과 함수들을 추가합니다. Layouts 레이아웃은 말 그대로 레이아웃. Default layout Default.vue 파일에 디폴트 레이아웃을 정의해둡니다. 이곳에 정의 된 레이아웃은 모든 페이지에 적용됩니다(특정한 레이아웃이 적용되지 않은)! 이 디폴트 레이아웃에 를 추가하면 마치 slot처럼 이 부분에 페이지 컴포넌트를 렌더링 합니다. Custom ..

영어로 돼 있지만 난 굴복하지 않는다 라우팅(Routing) 자동 라우트(Auto-route) 일반적인 vue로 개발을 할 때는, router.js와 같은 configuration 파일을 셋업 후 내부에 모든 라우터를 import 해야 라우터를 구현할 수 있지만, nuxt는 자동으로 생성해줍니다. 라우터 config를 적을 필요가 없다는 뜻! 모든 라우트에 자동 코드 스플리팅도 제공해줍니다. 이 말인 즉, 앱 라우팅을 위해서는 그냥 pages폴더 내에 (이름).vue 파일을 만들면 됩니다. 예를 들어, pages 폴더 안에 home.vue 라는 파일을 만들면 /home 으로 자동 라우팅 됩니다. 어떻게 라우팅이 적용됐는지는 root단계에서 .nuxt 파일 내 router.js를 확인하면 됩니다. 네비게이..