SPA/Vue19 내가 느끼는 Vue2에서 Vue3로 마이그레이션 하면서 눈에 띄게 변화된 것 1. Options > Composition API - Composable 함수 형태로 효율적인 로직 재사용이 가능해졌다.- 그렇기 때문에 Vue2에서 사용하던 Mixin은 Vue3에서 권장하지 않는다.- - Component가 생성되기 전에 setup이 먼저 생성 되어서 this를 통해 데이터에 접근할 수 없다. 그 외에 hook 네이밍 변경된 것과 반응형 데이터 정의하는 법 등이 달라졌는데.. Composition API 사용하면서 가장 달라졌다고 생각하는 것만 적어봤다. 디테일 하게 변화된 내용이 궁금하다면 아래 링크 참고. https://ko.vuejs.org/guide/extras/composition-api-faq Vue.jsVue.js - The Progressive JavaScript Fr.. 2024. 9. 30. 라우터 params를 이용한 user 상세페이지 구현 (예시O) 현재 상황 : api 데이터를 axios로 불러와 각 component들에 뿌려줌 구현하고 싶은 것 : news, ask 카테고리안에 있는 데이터들 중에 title 옆 작성자를 클릭하면 작성자 정보가 나오는 페이지 구현 1. UserView.vue 컴포넌트 생성 2. NewView.vue에 출력한 작성자 클릭 시 작성자 정보가 넘어갈 수 있게끔 router-link를 통해 userId를 router에 보내줌 {{ item.title }} {{item.time_ago}} by {{item.user}} Q. a 태그 안에 href로 잡아주는것과 router-link를 사용하는것과는 어떠한 차이가 있나요? A. 뷰 라우터를 사용하실 때 a 태그가 아닌 router-link 태그를 사용하셔야 라우터에서 제공하는.. 2021. 5. 12. axios를 이용한 api호출 vuex로 모듈화 하기 (예시O) Before 보러 가기 ▼ solm-blog.tistory.com/18?category=858024 axios의 api 함수 구조화 방법 [예시O] 1. api 폴더 생성 후 index 파일 생성 : 많은 api 관리 및 axios를 한 번만 호출하기 위함 import axios from 'axios'; //1. HTTP Request & Response와 관련된 기본 설정 const config = { baseURL : 'https://a.. solm-blog.tistory.com NewsView component에서 API에 있는 함수를 바로 불러 사용하는게 아닌 Vuex에 있는 state에 데이터를 담아서 화면에 출력해보도록 하자. 1. vuex 설치 npm i vuex 2. store 폴더를 만들.. 2021. 5. 11. axios의 api 함수 구조화 방법 [예시O] 1. api 폴더 생성 후 index 파일 생성 : 많은 api 관리 및 axios를 한 번만 호출하기 위함 import axios from 'axios'; //1. HTTP Request & Response와 관련된 기본 설정 const config = { baseURL : 'https://api.hnpwa.com/v0/' }; // 2. API 함수들을 정리 function fetchNewsList(){ return axios.get(config.baseURL + 'news/1.json'); // return해주는게 중요! // return axios.get(`${config.baseURL}news/1.json`); ES6이용해서 이런 코드 작성도 가능 } function fetchJobsList().. 2021. 5. 11. vue.js axios 설치 및 간단한 API 등록 1. axios 설치 npm i axios --save 2. views 폴더 NewsView.vue파일에 axios 등록 및 API 사용 [api 구현하고자 하는 components 파일에 axios 등록하면 됨] {{ user.title }} But, component마다 api를 호출해서 쓰는게 아닌 일괄적으로 api 폴더를 만들어서 관리! src에다가 api 폴더 만들고 실습하는건 커밍순 ,, 2021. 5. 10. vuejs 라우터 설치 및 구현 1. 라우터 설치 npm i vue-router --save 2. package.json 안에 dependencies에 "vue-router": "^3.5.1" 확인 3. routes 폴더 생성 index 파일 생성 -> index 파일에 vueRouter 등록 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export const router = new VueRouter ({ mode : 'history', //url # 없애는 코드 routes : [ { //path : ' ' //component : } ] )}; 4. main.js에 router 등록 import Vue from 'vue'; impo.. 2021. 5. 10. 이전 1 2 3 4 다음
