똑같은 삽질은 2번 하지 말자

disabled 이용 何かしら処理する mixins/index.js export default { data() { return { processing: false } }, methods: { startProcessing: function () { this.processing = true }, endProcessing: function () { this.processing = false }, isProcessing: function () { return this.processing } } } 컴포넌트(적용하고 싶은).vue 何かしら処理する ※押すと2秒間ロックされます

vue/cli 로 프로젝트를 생성하고 이미 생성되어있는 main.js 파일을 들여다보면 있는 render:h => h(App) ...이게 뭐고? 라는 생각이 절로 들어서 검색했다.. // 제목 : ES6 기반 Vue.js 개발 프로젝트에서 마주치는 render: h => h(App) 해석 // 설명 : render:h => h(App)은 Vue.js의 기본적인 render function의 간소화 버전 // 변환과정 : #1 -> #2 -> #3 -> #4 // #1 render: function (createElement) { return createElement(App); } // #2 render (createElement) { return createElement(App); } // #3 rend..

Vuex 란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vuex 라이브러리의 등장 배경인 Flux패턴? Vuex가 왜 필요할까? 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다. Vuex로 해결할 수 있는 문제 1. MVC 패턴에서 발생하는 구조적 오류 2. 컴포넌트 간 데이터 전달 명시(각각의 컴포넌트에 따라 전달해오는 데이터를 한눈에 파악가능) 3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

Vue에서는 테스트가 어떻게 이루어 질까? 테스트 환경설정 처음에 Vue Cli 도구로 프로젝트를 생성할 때, javasscript testing을 jest로 설정해두었다. jest.config.js module.exports = { preset: '@vue/cli-plugin-unit-jest', testMatch: [ '/src/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)', ], }; 소스폴더 안에있는 테스팅 코드(*.spec.js)를 찾는 jest환경설정 파일 pakage.json "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "..

Filter 기본 필터 적용방법 컴포넌트 속성에 filters: { formatDate(value) { return new Date(value); }, }, 필터스 속성 추가한뒤(Date는 자바스크립트에서 기본 제공해주는 객체이다.) {{ postItem.createdAt | formatDate }} 이렇게 사용해 주면 된다. 커스텀한 필터를 전역으로 설정해주고 싶을땐? custom filter 함수 utils/filter.js export function formatDate(value) { const date = new Date(value); const year = date.getFullYear(); let month = date.getMonth() + 1; month = month > 9 ? mont..

1.로그인 /회원가입 2.게시글 조회 /게시글 작성 이 두가지로 API 모듈화를 해보려고 한다. 각각의 접근 URL도 다르고 게시글 같은 경우는 로그인 회원가입과 달리 headers에 authorized가 필요하므로 우선 api/index.js import axios from 'axios'; import { setInterceptors } from './common/interceptors'; export function createInstance() { // 정말 기본 URL만 셋팅 return axios.create({ baseURL: process.env.VUE_APP_API_URL, }); } // 인 export function createInstanceWithAuth(url) { // Token..

새로고침을 누르면 Vuex의 state는 비워지게 되고 Token의 정보도 없어지게되서 게시판을 계속 볼 수 없는 노인증상태가 되므로 그 정보를 cookie에 저장해야한다. utils/cookie.js function saveAuthToCookie(value) { // 토큰 값을 쿠키에 셋팅 document.cookie = `til_auth=${value}`; } function saveUserToCookie(value) { // username 값을 쿠키에 싯팅 document.cookie = `til_user=${value}`; } function getAuthFromCookie() { // 저장된 토큰값 가져오기 return document.cookie.replace( /(?:(?:^|.*;\s*)..

갑자기이지만, 올려두면 언제든지 볼 수 있기에 뷰의 라이브싸이클 그리고 Vuex의 구조 사진 Actions 에는 비동기 로직 Mutations 에는 동기로직을 통해 State에 저장하는 computed 같은 친구

/posts 신청시 Token이 필요하게 API가 설정되어있다. 서버에 로그인 했을때, 토큰값이 반환되는게 보일 것이다. 저 토큰 방식은 JSON Web 토큰 형식 https://jwt.io/ JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io 그러면 어떻게 저 토큰값을 서버에 넘기면서 문제없이 API를 이용할 수 있을까? HTTP 헤더에 실어서 보내는 방법이 있다. import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VUE_APP_A..

인프런의 캡틴판교님의 끝내기 강의를 들으면서 기록한 내용들 $router의 활용법(push, go, replace) Programmatic Navigation | Vue Router Programmatic Navigation Aside from using to create anchor tags for declarative navigation, we can do this programmatically using the router's instance methods. router.push(location, onComplete?, onAbort?) Note: Inside of a Vue instance, you have access to router.vuejs.org 위의 내용(router)에 덧붙여 정리하자..