Nuxtjs에는 정해진 디렉터리 별 목적이 있습니다. 그 목적을 알고 사용해야 원하는 결과물 얻을 수 있습니다. aseets컴파일되지 않아야 하는 css, sass, image, fonts를 넣는 디렉터리입니다. static서버 루트에 직접 매핑되어 바뀌지 않을 파일을 넣는 디렉터리입니다. 대표적으로 파비콘(favicon) 있습니다.static 폴더 아래 파비콘이 존재하면 http://localhost:3000/favicon.ico 형태로 접근 가능합니다. pages애플리케이션의 view와 routes와 관련 있는 중요한 디렉터리입니다.언더바(_)로 파일명이 시작할 경우 동적으로 라우팅 됩니다.예를 들어 pages/todo/create.vue 형태로 구성하면 localhost/todo/create로 접근..
이번 시간에는 이전 포스팅에서 이야기했듯 API(Application Programming Interface) 연동하는 방식으로 변경한다. API를 구성하기 위해서 json-server 모듈을 사용할 것이라 먼저 설치했다. npm install -g json-server db.json 파일을 만들고 데이터를 넣은 후 // db.json { "todos": [{ "id": "todo-1", "text": "API 연동하기", "completed": false }] } json-server를 실행하고 콘솔에 노출되는 URL로 접근하자. json-server --watch db.json nuxtjs/axios가 설치되어 있지 않다면 설치하자. 그리고 API 호출하는 코드를 작성했다. service 폴더 안에 ..
nuxt를 학습한 후 Todo App을 만들었다. 이전과 다르게 라우터를 사용하기 위해서 List와 Create 페이지를 분리했다. 가장 먼저 네비게이션 바 컴포넌트를 만들었다. 컴포넌트 옵션에 name 지정하지 않으면 그 컴포넌트를 가져오는 곳에 이름이 kebab-case 변환돼서 사용할 수 있다. // NavBar.vue List | Create // index.vue // kebab-case 그리고 기존에 store를 가져와서 약간만 수정했다. 모듈 방식으로 스토어를 사용하도록 아래와 같이 변경하였다. store 내부 구조를 파악해서 알아서 모듈 방식으로 변경해 준다. 특이한 점은 기존은 state를 JSON으로 반환했는데 함수를 반환한다. Singleton 으로 상태를 같은 값으로 반환해주기 위해..
Nuxt.js 공식 사이트에서 다음과 같이 소개하고 있다. Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt's goal is to make web development powerful and performant with a great developer experience in mind. 앞서 학습했던 vue, vue-router, vuex + webpack, babel ..