FE/Nuxt.js12 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. Nuxt.js 란? (feat. SSR, CSR) 이미 나도 이 프레임워크로 개발을 진행하고 있는 상태이기 때문에 다시 정리도 하고, 기본적인 내용들을 상기하고, 글로 남겨두기 위해 작성하였다. Nuxt.js 란? Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어 주는 프레임워크이다. 개발자들은 조금 더 빠른 개발 속도를 위해 Vue.js를 빠르게 적용하는 방법을 고안했고, 이를 프레임워크로 만들었다. Nuxt.js의 등장 배경 Nuxt.js 나 Next.js 같은 SSR Framework가 왜 등장했는가에 대해 짚고 넘어가기 위해서는 SPA와 CSR, SSR에 대한 차이를 명확히 짚고 넘어갈 필요가 있다. SPA (Single Page Application) SPA는 Web Application을 Single Page.. 2021. 4. 9. 이전 1 2 3 다음 728x90 반응형
