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를 선택한 이
이번 포스트에서는 선형 자료구조 중 하나인 큐(Queue)에 대해서 다뤄보겠습니다. 큐 (Queue)선형 자료구조 중 하나인 큐(Queue)는 FIFO(First In First Out, 선입선출) 구조의 자료구조로 LIFO(Last In First Out, 후입선출) 구조의 스택(Stack)과는 반대되는 개념이다. 현실속에서의 큐는 프린터의 출력처리 방
이번 포스트에서는 선형 자료구조 중 하나인 링크드 리스트에 대해서 다뤄보겠습니다. 링크드 리스트링크드 리스트 또는 연결 리스트는 순서를 표현하는 노드들의 집합으로, Javascript의 배열(Array)와 유사한 구조이지만 메모리상의 연속적 위치요소를 갖지 않는다는 차이가 있다. 링크드 리스트에서 가장 중요한 것은 연결이 무엇인가를 파악하는 것 이다. 특
이전 포스트인 알고리즘 시리즈 - 시간 복잡도에서는 알고리즘의 성능을 파악하는 척도 중 하나인 시간복잡도와 big-O에 대해서 공부해봤습니다. 시간 복잡도란 문제를 해결하는데 걸리는 시간과 입력의 함수 관계 로 문제에 적합한 자료구조와 그에 따른 알고리즘에 영향을 받으며 알고리즘의 수행 시간은 동일 크기의 다양한 입력에 의해 달라질 수 있다. 자료
알고리즘 개요지난 포스트인 알고리즘 시리즈 - 시작에서는 우리는 알고리즘을 특정 문제를 해결하기 위한 일련의 계산과정으로 입력, 출력 그리고 계산과정 이 존재한다고 정의했었습니다. 또한 해결해야하는 문제의 특성에 따라 사용하기에 적합한 데이터 형태가 다르며 어떤 데이터 형태와 알고리즘 구조를 설계했느냐에 따라서 알고리즘 성능 분석 기준 중 시간복잡도와 공
지난 포스트인 Javascript와 객체 지향 프로그래밍 - 객체 지향 프로그래밍(OOP)에서는 객체 지향 프로그래밍의 기본적인 개념, 기본 구성요소, OOP의 기법 또는 특성으로 많이 언급되는 추상화, 캔슐화, 은닉화, 상속성, 다형성 그리고 OOP의 장단점에 대해 공부해보면서 객체 지향 프로그래밍에서 중요시하는 것은 무엇이며 프로그래밍 설계 및 구현시
알고리즘을 공부하기 위해 책과 자료들을 수집해 보고 공부하기만 해서 정리하는 느낌으로 알고리즘 시리즈를 연재해보려고 합니다. 알고리즘에 대한 갈증알고리즘에 대한 필요성은 클립플러를 개발하면서 강하게 느꼈다. 클립플러의 일부 기능 중 clip으로 만들 사이트의 메타태그를 긁어와 유효한 태그를 추천하는 기능을 설계하는데 가장 큰 문제에 봉착했었다. 바로 코딩
Vue.js를 사용해 웹 어플리케이션 개발할때 라이프사이클에 대한 공부를 제대로 시작하지 고생한 경험이 있는데 Nuxt는 그런 과정을 밟지 않기위해 라이프사이클부터 차근차근 공부해보자. 일단 공식문서 번역과 아래 Nuxt Lifecycle HOOKS 이미지에 대한 내용에 대해 공부해보자. Nuxt Lifecycle 여러분이 어떤 도구(tool)를 사용하든