반응형 Framework43 Composition API: ref() vs reactive() ref는 primitive type을 받고, reactive는 object를 받는다 라고만 알고 있었다. 하지만 ref도 객체를 다룰 수 있고, reactive와의 차이점을 정리해서 사용할 줄 알아야 한다. //api const post = [{ ..... 여러개 데이터 있음}] export function getPostById(id) { const numberId = parseInt(id); return posts.find(item => item.id === numberId); } 데이터를 export해주는 함수를 생성 const id = route.params.id; const item = ref({}); const fetchData = () => { const data = getPostById(id.. 2023. 1. 2. Vue Router(1) 라우터란? (Router) vue에서 말하는 라우터는 URL에 따라 어떤 페이지를 보여줄지 매핑을 해주는 라이브러리이다. 설치 npm install vue-router 정의 [라우터/ router] 경로: src/router/index.js 해당 경로에 라우터 객체를 생성한다. [라우트/ route] 각 라우트들은 URL에 대한 컴포넌트를 매핑해줄 정보를 정의한다. 사용방법 1. routes 정의하기 각 route에 대한 매핑정보를 정의하고 routes 배열을 생성한다. // src/router/index.js import HomeView from '@/views/HomeView.vue'; import AboutView from '@/views/AboutView.vue'; const routes = [ .. 2023. 1. 2. vue VSCode Snippets extension https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets Vue VSCode Snippets - Visual Studio Marketplace Extension for Visual Studio Code - Snippets that will supercharge your Vue workflow marketplace.visualstudio.com vbase 단축키 사용 vscode extension 단축키도 되어있음 2023. 1. 2. Nuxt.js 입문하기 SSR(Server Side Rendering) 서버에서 페이지를 그려서 브라우저로 보낸 후 화면에 표시하는 방법이다. 전통적인 웹 화면을 그리는 표현 방식 중 하나이다. 예를 들어 메뉴를 클릭했을 때 해당 페이지를 서버측에서 HTML화면을 그린 후 브라우저에게 던져주게 된다. CSR(Client Side Rendering) spa방식은 브라우저에서 빈 html를 던저준 후 자바스크립트 라이브러리가 실행이 되면서 비어있는 태그의 내용들을 채워져 나가며 화면에 DOM또는 UI요소를 그려나간다. vue라우터를 이용해서 만든 페이지를 구성하는 방식이 vue cli를 활용한 SPA(Single Page Application)이다. instance mounting: vue instance를 생성되고 해당 인스턴스.. 2022. 12. 30. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음 728x90 반응형
