본문 바로가기

frontend

Vue.js 완벽가이드 : (8) HOC, Mixin 8. 리팩토링 : HOC, Mixin 8-1. Spinner 컴포넌트 구현 로딩바를 표현하는 Spinner 컴포너트를 작성하겠습니다. 그리고 각 페이지로 진힙할 때 로딩바가 출현하도록 코드를 작성합니다. 먼저 /componets/Spinner.vue 를 작성합니다. 그리고 ListItem.vue의 created()에 정의한 코드를 제거합니다. /store/action.js/에 response를 반환하도록 수정합니다. export default { FETCH_NEWS(context) { fetchNewsList() .then(response => { context.commit('SET_NEWS', response.data); return response; }) .catch(function (.. 더보기
Vue.js 완벽가이드 : (7) 리팩토링 7. 리팩토링 : Data Flow, Slot 사용자 정보를 표시하는 공통 컴포넌트를 만들어 보겠습니다. 7-1. 데이터 흐름 처리 1 기존에 사용자 페이지인 UserView.vue 에서 created() 가 호출될 때 사용자 정보를 store에 담아서 화면에 표현하는 작업을 하였습니다. 이 store 데이터를 이용하여 사용자 공통 컴포넌트를 작성하겠습니다. 사용자 공통 컴포넌트인 /components/UserProfile.vue를 생성합니다. computed를 통해 이미 store에 저장된 사용자 정보를 읽어 화면에 표기합니다. {{ userInfo.id }} {{ userInfo.created }} 그리고 기존의 정의된 UserView.vue에서 UserProfile를 호출합니다. 7-2. 데이터 흐.. 더보기
Vue.js 완벽가이드 : (6) 스타일링 & 고급 컴포넌트 6. 리팩토링 : 스타일링, 공통 컴포넌트 리스트 아이템 컨포넌트 공통화를 위한 리팩토링을 진행합니다. 6-1. 컴포넌트 공통화 리팩토링 소개 AskView 컴포넌트 하나에 모든 데이터를 출력하였지만, 각 항목을 Component로 구성하여 리스트화를 작업하려 합니다. 이를 위한 공통 Component를 생성합니다. 6-2. News 리스트 스타일링 NewsView.vue 스탕일링을 합니다. 각 항목을 리스트로 표기합니다. 그리고 스타일링이 필요한 Tag에 클래스명을 지정하여 개별적인 스타일링을 수행합니다. {{ item.points }} {{ item.title }} by {{ item.user }} App.vue에 공통적인 스타일링을 추가합니다. 6-3. Ask, Jobs 리스트 스타일링 Ask와 J.. 더보기
Vue.js 완벽가이드 : (5) 라우터 고급 5. 라우터 실전 5-1. User 상세 페이지 구현 사용자를 클릭했을 때 사용자 상세정보를 확인하는 기능을 추가하겠습니다. Dynamic Route Matching을 알아봅니다. 우선 api/index.js에 API를 추가합니다. 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'); // ES6 스타일 return axio.. 더보기
Vue.js 완벽가이드 : (4) Store 4. 스토어 & 중간정리 4-1. Vuex 설치 및 Vuex가 적용된 앱 구조 소개 지금까지 수행한 프로젝트는 API에서 바로 View로 데이터를 전달하였습니다. Vuex를 설치하여 API -> Vuex -> View 로 데이터 전달 과정을 알아보겠습니다. 터미널에서 npm i vuex를 입력하여 vuex를 설치합니다. 4-2. Vuex 모듈화 및 state 적용 컴포넌트가 많은 프로젝트의 경우 하나의 컴포넌트가 갖고 있는 data를 다른 컴포넌트에 공유할 일이 발생합니다. ./src/store/index.js 파일을 생성합니다. index.js에 다음과 같이 코드를 작성합니다. import Vue from 'vue'; import Vuex from 'vuex'; Vue.us.. 더보기
Vue.js 완벽가이드 : (3) API 구현 3. API 구현 3-1. axios를 이용한 API 호출 npm i axios --save 를 이용하여 axios를 설치하고 dependencies를 확인합니다. NewsView.vue 에서 axios를 이용하여 데이터를 수신하는 코드를 작성합니다. {{ user }} 3-2. API함수 구조화 방법 ./src/index.js파일을 생성하여 API를 작성합니다. import axios from 'axios'; // 1. HTTP Request & Response와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v0/', } // 2. API 함수들을 정리 function fetchNewsList() { // retu.. 더보기
Vue.js 완벽가이드 : (2) 라우터 기본 2. 라우터 기본 2-1. 라우터 설치 및 구현 터미널을 열어 npm i vue-router --save를 입력해봅시다. package.json에서 dependencies항목에 vue-router을 확인 할 수 있습니다. main.js 코드 내 router을 추가할 수 있습니다. import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') const router = new VueRouter({ routes: [ .. 더보기
Vue.js 완벽가이드 : (1) 소개 & 설치 1. 강의소개 & 설치 1-1. 강의 소개 Application을 직접 제작하며 Vue.js의 구조를 이해합니다. Application 제작을 위한 실무 학습을 수행합니다. Vue.js를 이용한 웹 서비스 구현 절차 실무 프로젝트 진행 방식 (컴포넌트, 라우터, API, 스토어) 컴포넌트 디자인 패턴과 자바스크립트 비동기 처리 Mixins과 HOC를 이용한 컴포넌트 재활용 방법 외부 라이브러리 모듈화 및 실무 프로젝트 구성 방법 사용자 경험을 높이는 라우터 설계 방법과 고급 라우터 패턴 뉴스정보를 읽어와서 화면에 표기하는 Application을 제작합니다. 각 페이지를 클릭하여 라우터 처리를 수행하도록 합니다. 각 항목을 클릭할 때 상세 내용을 읽어와 화면에 표기합니다. 1-2. 개발 환경 개발환경은 다.. 더보기