Vue.js를 사용해 웹 어플리케이션 개발할때 라이프사이클에 대한 공부를 제대로 시작하지 고생한 경험이 있는데 Nuxt는 그런 과정을 밟지 않기위해 라이프사이클부터 차근차근 공부해보자. 일단 공식문서 번역과 아래 Nuxt Lifecycle HOOKS 이미지에 대한 내용에 대해 공부해보자. Nuxt Lifecycle 여러분이 어떤 도구(tool)를 사용하든
1.Nuxt 프로젝트 디렉토리막 생성된 nuxt 프로젝트의 디렉토리는 아래와 같다. 디렉토리에 대한 정의를 잘 몰라도 이미 Vue.js를 사용했던 개발자라면 비슷한 구조이며 스캐폴딩이 이미 되어있다는 생각이 들것이다. 각 디렉토리의 역할에 대해 알아보자. staticThe static directory is directly mapped to the serv
1.Nuxt 프로젝트 디렉토리막 생성된 nuxt 프로젝트의 디렉토리는 아래와 같다. 디렉토리에 대한 정의를 잘 몰라도 이미 Vue.js를 사용했던 개발자라면 비슷한 구조이며 스캐폴딩이 이미 되어있다는 생각이 들것이다. 각 디렉토리의 역할에 대해 알아보자. modules Nuxt Module은 Nuxt 프레임워크의 핵심 기능을 확장하고 통합 및 추가할 수 있
1.Nuxt 프로젝트 디렉토리막 생성된 nuxt 프로젝트의 디렉토리는 아래와 같다. 디렉토리에 대한 정의를 잘 몰라도 이미 Vue.js를 사용했던 개발자라면 비슷한 구조이며 스캐폴딩이 이미 되어있다는 생각이 들것이다. 각 디렉토리의 역할에 대해 알아보자. .nuxt .directory를 빌드 디렉토리라고 부르며 기본적으로 숨겨져 있고 동적으로 생성됩니다.
포트폴리오용 nuxt 앱이 필요했던 참에 신규 프로젝트에서 nuxt로 어플리케이션을 제작해야해서 정리 및 공부겸 포스팅을 하기로 했다. 1.Nuxt란?Nuxt란 NuxtJS를 사용하여 신뢰 있는 Vue.js 애플리케이션을 구축하세요. 웹 개발을 간단하고 강력하게 만드는 오픈 소스 프레임워크로 서버 사이드 렌더링 (SSR)과 정적 사이트 생성을 지원해준다.
이번 포스팅은 Vue.js & Nuxt.js를 하기 전에 서버사이드 렌더링과 클라이언트 사이트 렌더링에 대해 짧게나마 정리해보는 것이 필요하다고 생각되서 쓰게 되었다. 1. SSR과 CSR의 MVC 패턴SSR과 CSR은 HTLM 페이지 렌더링 방식으로 아래의 이미지처럼 Rendering을 어디서 하냐에 따라 Server-Side 또는 Client-