Nuxt는 Vue.js의 서버사이드 렌더링을 지원하기 위한 프레임워크로써, Vue.js SPA에서 데이터를 호출하는 방식과 다르게 비동기 데이터 호출을 위한 Hook이 따로 존재합니다. 이번 포스트에서는 그 Hook인 fetch와 asyncData Hook에 대해 살펴보겠습니다. fetch & asyncData일단 공식문서의 간략한 설명을 번역하면
오늘의 포스트는 Nuxt와 Bootstrap4 기반의 Dashboard 만들기 의 여섯번째 포스트로 Page & UI 개발에 대해 작성해보겠습니다. 지난 포스트에서는 Bootstrap & Bootstrap-vue 환경구성에 대해 작업해봤습니다. 본 포스트에서는 Page & UI 개발에 대해 다뤄보겠습니다. 개발 순서 프로젝트 생성 및
오늘의 포스트는 Nuxt와 Bootstrap4 기반의 Dashboard 만들기 의 다섯번째 포스트로 Bootstrap & Bootstrap-vue 환경구성에 대해 작성해보겠습니다. 지난 포스트에서는 Axios 환경구성에 대해 작업해봤습니다. 본 포스트에서는 Bootstrap 설치와 환경세팅에 대해 다뤄보겠습니다. 개발 순서 프로젝트 생성 및 Git
오늘의 포스트는 Nuxt와 Bootstrap4 기반의 Dashboard 만들기 의 네번째 포스트로 Axios에 대해 작성해보겠습니다. 지난 포스트에서는 Nuxt & Express API 환경구성에 대해 작업해봤습니다. 본 포스트에서는 Nuxt에서 Axios를 사용하기 위한 환경세팅과 사용예제까지 다뤄보겠습니다. 개발 순서 프로젝트 생성 및 Gith
오늘의 포스트는 Nuxt와 Bootstrap4 기반의 Dashboard 만들기 의 세번째 포스트로 Nuxt & Express API 환경구성에 대해 작성해보겠습니다. 지난 포스트에서는 Heroku에 Nuxt SSR 앱을 배포하기 위한 환경설정과 배포가 되는 과정에 대해 작업해봤습니다. 본 포스트에서는 Nuxt 앱에 Express 기반의 API 생성
오늘의 포스트는 Nuxt와 Bootstrap4 기반의 Dashboard 만들기의 두번째 포스트로 Heroku 배포 환경구성 에 대해 작성해보겠습니다. 지난 포스트에서 Nuxt 프로젝트 생성과 Github Repository 환경구성을 해보았습니다. Nuxt 앱을 생성하기 위한 첫 시작부터 생성과정 그리고 버전관리를 위한 Github Repository를
오늘의 포스트는 Nuxt와 Bootstrap4 기반의 Dashboard 만들기의 첫 시작으로 프로젝트 생성 및 Github 환경구성 에 대해 작성해보겠습니다. 지난 포스트에서 Dashboard 개발에 관한 전반적인 사항들을 설계해봤습니다. 그럼 개발을 시작하기 전에 Nuxt 프로젝트 생성과 Github Repository 환경구성을 해보겠습니다. 개발 순
최근들어 공부하고 블로그 쓰고, 공부하고 블로그 쓰는 코드를 잘 안 쓰는 나날들이 계속되다 보니깐 손가락이 굳어가는 느낌과 살짝 지루하다는 생각이 들어서 공부한걸 써보면서 실습해보는 기회로 Nuxt 기반의 Bootstrap4를 사용한 Dashboard를 만들어보려고 합니다. 왜 Dashboard를 만드나? 일반 사이트가 아닌 Dashboard를 선택한 이
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)과 정적 사이트 생성을 지원해준다.