SPA/Vue19 공식 문서 파먹기 이전 회사에서 Vue2를 사용해서 프로젝트를 개발했다고 하면 Vue3와 비교했을 때 달라진 점에 대해서 많이 물어본다. 항상 사용 방법이 더 편리해졌다. 디버깅하기 쉽다. 라고 두루뭉술하게 답했었는데 구체적으로 내가 느꼈던 달라진 점에 대해서 정리해보고 싶다는 생각이 들어서 포스팅을 하게되었다. 1. 증가된 재활용성: 충돌성은 낮아지고 추적 가능성이 높아졌다. * vue2export default { mixins: [changeMenuMixin], data() { return { menu : 'image' } }, methods: { changeMenu() { this.menu = "all list"; } }, created() { this.changeMenu.. 2025. 10. 26. 라우터 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 다음
