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

axios create , env 파일 ? API를 사용할 때, 서버 End Point(localhost:8080)들은 공통인 부분인데, 그런 URL 공통화는 axios create 의 baseURL 설정으로 할 수 있다. import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:3000/', }); function registerUser(userData) { return instance.post('signup', userData); } export { registerUser }; axios create 공식 문서 https://github.com/axios/axios#axioscreateconfig axio..

views(Page Components)들은 드라이하게(비즈니스 로직이 많이 연계 안되도록) 비즈니스 로직이 연계되는 컴포넌트를 하나 만들어서 등록하는 방식으로 하는게 좋다. 예를 들어, 회원가입페이지가 있다고 하면, 파일구성이 SingupPage라는 페이지 컴포넌트가 있고 그 안에 Form 태그를 가진 SignupForm이 등록되어있다. 아 그리고, 이번에 Vscode snippets를 깔아서 사용해 보았다.(자동 코드 완성) // v-on directive를 이용해 폼의 submit 이벤트를 바인딩 // submit시 페이지 갱신을 막는 prevent // v-on:submit == @submit methods: { submitForm() { console.log('submit'); }, }, // ..

개요 인프런의 캡틴판교님의 Vue.js 끝내기 강의를 들으면서 VueRouter의 Default Page, history mode에 대해 정리 Default Page는 내가 Router에 등록하지 않은 URL에 접근하려 했을때 유저에게 존재하지 않는 페이지라는걸 알리기 위해 쓴다. (밑의 path: '*' 부분) // 외부에서 사용할 수 있게 모듈화 // default 는 하나만 내보내겠다 는 의미 export default new VueRouter({ routes: [ { path: '/', redirect: '/login', // 초기 진입 페이지 설정 }, { path: '/login', component: () => import('@/views/LoginPage.vue'), // login에 해당..

Vue Router 설치 $ npm install vue-router --save import Vue from 'vue'; import VueRouter from 'vue-router'; import LoginPage from '@/views/LoginPage.vue'; import SignupPage from '@/views/SignupPage.vue'; Vue.use(VueRouter); // plugin을 실행하기 위해 초기화하는 코드 // 외부에서 사용할 수 있게 모듈화 // default 는 하나만 내보내겠다 는 의미 export default new VueRouter({ routes: [ { path: '/login', component: LoginPage, }, { path: '/signup..

vue-cli (개발도구) 설치하시고 $ npm install -g @vue-cli $ vue-create 프로젝트 이름 프로젝트 설치 옵션 Manually select features Babel, Linter, Unit(space로 선택) Prettier Lint on Save Jest In dedicated config files n ESLint 에러를 화면에 표시하지 않게 하는 방법 (이러한 화면이 떠서 생산성이 낮아지는걸 막아보자) vue.config.js -> vue 설정파일을 만들고 module.exports = { devServer: { overlay: false } } ESLint JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구입니다. 즉, JavaScr..

이번 프로젝트는 API Server(Node)도 필요해서 Node.js 설정도 이것저것 했다. https://nodejs.org/ko/download/releases/ 이전 릴리스 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 그리고 여러 프로젝트를 할때 노드버젼이 다양할 때, 노드 version을 쉽게 바꿀수 있는 툴이있다. NVM(Node Version Management) https://github.com/nvm-sh/nvm#installing-and-updating nvm-sh/nvm Node Version Manager - POSIX-compliant bash script t..

Spring Boot 개념정리가 끝나고 배운기술들을 따로 적용해가면서 프로젝트를 하고있고, 동시에 Vue에 대한 강의도 일기마냥 기록해보려고 합니다. 이때까지 적당히 텍스트로 기록해뒀는데, 나중가서 보니 보기 어려워서 ㅎㅎ 여기다 작성하자~ 우선 강의에서 만들 예정인 화면 몇개 오늘 내가 배운 학습 내용들을 정리하는 간단한 CRUD 어플로 보이는데, 중간 중간 validation도 하고 있고, spinner transition 등등 사용해 봤던 친구들의 흔적이 보인다..(ㅎㅎ 머릿속이 하얗다) 무엇보다 로그인이 되게 궁금했던게, 저번에 vue와 내가 릴리스 해둔 node로 만든서버로 로그인 시스템을 구축하던중 node서버의 속도가 느려서인지? 내가 원하는 흐름대로 잘 되지 않아서 억지로 끼워맞췄었는데, ..

Vue에서 클래스 이름을 저장된 scope 값에 따라서 다이나믹(dynamic)하게 적용하는 방법을 알아보za Vue 역시 다른 프론트엔드 엔진처럼 클래스명을 값에 따라 그때그때 다르게 적용할 수 있습니다. 이때 v-bind:class를 사용합니다. v-bind:class="{ '적용될 클래스명': true 또는 false의 조건식 }" https://kr.vuejs.org/v2/guide/class-and-style.html 클래스와 스타일 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org

computed - 단순한 값에 대한 가벼운 계산에 사용됨 - validation(확인, 검증)에 사용됨 - 간단한 텍스트 처리에 사용됨 ​ watch - 매번 실행하기 부담스러운 무거운 로직들에 사용 됨 - 데이터 요청에 적합 ​ ​ https://vuejs.org/v2/guide/computed.html#ad Computed Properties and Watchers — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org

지금까지 우리는 {{ mustached }} 기호를 통해서 Vue 내의 값 혹은 함수를 불러왔습니다. 하지만 화면에 문자열을 출력해야하는 간단한 경우가 아니라 HTML 속성 내에서 Vue에 선언된 값을 사용하고 싶어진다면 어떻게 해야할까요? 예로 링크를 달 수 있는 a 태그의 href 속성 값에 Vue 내에 선언된 값을 넣고 싶은 경우가 있을 수 있습니다. ​ 링크 사용할 수 없음 HTML의 속성에는 {{ mustached }}를 사용할 수 없습니다. 위처럼 사용하고 싶으면 v-bind 디렉티브를 사용 해야 됩니다.​ ​ ​ ​ 디렉티브 Directive? ​ 디렉티브란, 이처럼 HTML 태그 안에 들어가는 속성의 역할을 하며, v-​라는 접두사가 붙는 것이 특징입니다. ​ ​ Example {{ new..