SPA/Vue18 라우터 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. Vue CLI 2.x / CLI 3.x 비교 CLI 2.x vs CLI 3.x -명령어 -2.x : vue init '프로젝트 템플릿 이름', '파일 위치' -3.x L vue create '프로젝트 이름' -웹팩 설정 파일 -2.x : 노출 0 -3.x : 노출 X -프로젝트 구성 -2.x : 깃헙의 템플릿 다운로드 -3.x : 플러그인 기반으로 기능 추가 -ES6 이해도 -2.x : 필요 X -3.x : 필요 O 2021. 5. 10. 이전 1 2 3 다음
