개발/Nuxt.js
Nuxt.js - nuxt.js의 장점인 server side rendering SSR(서버 사이드 렌더링)
서론 요새 vue.js를 하면서 CSR(클라이언트 사이드 렌더링), SPA(싱글 페이지 어플리케이션) 등등 이야기를 많이 듣는다. CSR - 서버는 단지 JSON파일만 보내주고 HTML을 그리는 역할은 클라이언트 측에서 자바스크립트가 수행하는 방식 SPA - 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션 예전 개발할때 backEnd 위주 front는 backEnd에서 전달해주는 데이터를 HTML 로 노출하는 SSR(서버 사이드 렌더링) 으로 개발을 하였다. 그런데 이런 방식은 HTML를 만들기 위해 서버 자원을 사용하게 되고 이것이 성능 문제를 야기하게 되었다. 그렇게 해서 나온게 SPA 이다. CSR(클라이언트 사이드 렌더링) 소스 CSR id : {{ item.i..
nuxt.js - event와 eventBus 예제 및 사용법
서론 이번 프로젝트를 하면서 페이지가 너무 길어서 부모/자식 컴포넌트로 적용했다가 자식 컴포넌트에서 또 자식 컴포넌트를 만들고..그렇게 점점 분리하다보니 데이터 이동이 점점 복잡해지고 힘들어서 정리를 하기로 하면서 event와 eventBus에 대해 작성하게 되었다. 부모 자식 간의 데이터 양반향 이동(바인딩) - props & emit vue.js를 하다보면 가장 기본적으로 하게되는 방식입니다. 부모 → 자식 데이터 이동 위의 방법은 간단하게 부모 데이터를 자식에게 전달해주고 자식 컴포넌트에서 props로 받으면 됩니다. parent.vue - isAlive 라는 data를 선언하고 child.vue에 데이터를 넘긴다. parent isAlive : {{ isAlive }} child.vue - 부모 ..
Nuxt.js 시작 - 설치 및 프로젝트 생성
Nuxt.js 시작한 이유 새로운 프로젝트를 들어갔는데 Nuxt.js로 진행한다고 해서 공부할겸 정리를 하기위해 시작하게 되었다. Nuxt.js 란 직관적인 Vue 프레임워크 NuxtJS를 사용하여 신뢰 있는 Vus.js 애플리케이션을 구축하세요. 웹 개발을 간단하고 강력하게 만드는 오픈 소스 프레임워크입니다. 이라고 공식 사이트 메인에 써있습니다. 위 말 그대로 Vue를 front-end 도구로 사용하기 쉽게끔 만들어진 framework입니다. 공식 홈페이지가 한글로 이미 번역이 되어있어서 자세한 설명은 공식 홈페이지를 참조하는게 가장 적합합니다. 공식 홈페이지 : ko.nuxtjs.org/ Nuxt.js - Vue.js 프레임워크 Nuxt.js는 Vue.js 애플리케이션 개발을 즐겁게 하는 데 필요한..