FE14 Nuxt.js routing 알아보기 Nuxt.js routing 알아보기 Nuxt.js의 정적 페이지와 동적 페이지 예제를 통한 그 안의 여러가지 개념들을 함께 복습 및 공부하려고 합니다. 프로젝트를 진행하면서 많이 사용하는 개념이기도 해서 기록겸 복습겸 쓰고 있습니다. 예제는 주로 공식문서 예제를 사용할 예정이고 필요에 따라 예제를 생성해서 작성하려 합니다. 역시나 제가 알고 있는 부분과 다른 내용이 있거나 수정할 부분이 있다면 댓글로 남겨주세요! Routing 라우팅의 경우 기본적으로 Nuxt에선 와 같이 NuxtLink 태그로 라우팅을 합니다. 기존 Vue.js 라우팅은 아래와 같이 수동으로 설정해줘야 합니다. Hello App! Go to Foo Go to Bar // 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, V.. 2021. 4. 23. Nuxt.js asyncData vs Fetch asyncData vs Fetch Nuxt.js 를 사용하다 보면 페이지가 마운트되기 전에 백엔드에서 API 를 호출하여 데이터를 가져와야 할 때가 많이 있습니다. 이러한 경우 {{ post.title }} {{ post.description }} 이렇게 asyncData() 를 사용하거나 Fetching mountains... An error occurred :( Nuxt Mountains {{ mountain.title }} Refresh fetch() 를 사용하여 데이터를 가져오게 됩니다. Nuxt.js 로 개발을 진행하면서 asyncData() 와 Fetch() 의 차이점을모르겠다고 생각했습니다. (물론 저만 이해 못했을지도..ㅎㅎ) As far as page components are conce.. 2021. 4. 16. Nuxt.js 에서 Props 사용하기 Nuxt.js에서 Props 사용하기 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 사용자 지정 특성입니다. 자식 컴포넌트는 props 옵션을 사용하여 전달받을 것으로 기대되는 데이터를 명시적으로 선언해야합니다. Nuxt.js에서 Vue.js처럼 props를 사용할 시점이 있습니다. Nuxt.js에서 props 사용은 Vue.js와 크게 다른점이 없기 때문에 무리없이 사용이 가능합니다. Props 표기법 HTML 속성은 대소문자를 구별하지 않습니다. 모든 대문자를 소문자로 인식합니다. props를 사용할 때, HTML에서는kebab-case(article-data)를 사용하는 것을 권장합니다. Javascript에서는camelCase(articleData)를 사용하는 것을 권.. 2021. 4. 15. Nuxt.js 에서 Vuex Store 사용하기 원래는 이 블로그 용도를 개발 공부하면서 기록할 겸, 알고 있는 내용도 잊지 않게 기록의 용도로 사용하자 라고 생각을 했었는데, 조회수가 1이 생기는 것을 보고 다른 사람도 볼 수 있는데 반말을 쓰는 건 조금 아닌 것 같아 앞으로는 이 부분은 지양하면서 기록을 해보려고 합니다. 최근에는 Dart와 Flutter 공부를 집중적으로 하는 중이라 Nuxt는 알고 있거나 알아야 할 내용들에 조금 소홀하고 있긴 하지만 Nuxt는 몸으로 겪어본 만큼 계속 포스팅을 해야겠다 라는 생각이 드네요. Nuxt에서 Vuex를 사용하는 방법에 대해 작성하려고 합니다. 아마 Vue를 경험하신 분이면 크게 어려운 점은 없을거라 생각이 듭니다. Store 이 store 디렉토리에는 Vuex Store 파일들을 포함합니다. 또한 T.. 2021. 4. 15. 이전 1 2 3 4 다음 728x90 반응형
