vue.js – vuetify, axios를 이용한 파일 업로드 예제
프로젝트 생성 vue create my-app cd my-app vue add vuetify npm install --save axios my-app 프로젝트 디렉토리를 생성하고 vuetify를 추가한다. 프로젝트 실행 npm run serve 웹페이지 접속 DONE Compiled successfully…
0 Comments
July 23, 2020
nuxt document is not defined
Nuxt에서 component를 표시할 때 생기는 문제다. 처음 로딩 했을 때는 정상적으로 컴포넌트가 정상적으로 보이는데 새로고침을 하는 경우 "document is not defined" 라는 에러 메시지가 출력되고 정상적으로 페이지가 표시되지 않는다. 구글링한…
July 13, 2020
vue.js – vuex 예제
vuex에 대해 잘 정리된 예제가 있어 정리한다. Vue 프로젝트 생성 vue 명령을 이용해 Manual 설정으로 프로젝트를 생성한다. 추가 패키지로 Babel, Router, Vuex, CSS Pre-processors, Linter를 선택했다. $ vue create vuex_example…
June 30, 2020
vue.js – axios로 데이터 request 시 CORS 오류 발생하는 경우
vue.js에서 backend 데이터를 얻기 위해 axios를 사용했다. backend는 FastAPI를 사용했는데 아래와 같은 오류가 나타났다. Access to XMLHttpRequest at 'http://localhost:8000/translation' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to…
June 15, 2020
vue.js – GraphQL 인자 값 넣어서 데이터 받기
vue.js 에서 입력값을 받아 해당 입력 값을 GraphQL 쿼리 인자로 넣어서 데이터를 가져오고 싶을 때가 있다. 예를들면, 영어 사전 검색을 하는데 smart, login과 같은 단어가 포함된 결과물을 얻고 싶을 때…
June 11, 2020
vue.js – express로 frontend, backend 연동하기 예제
작업 디렉토리 생성 $ mkdir example 프론트엔드와 백엔드 작업을 하게 될 작업디렉토리를 생성한다. Frontend 작업디렉토리 생성 및 front 서버 실행 $ npm install -g yarn $ npm install -g @vue/cli…
March 29, 2020
vue.js – 개발 관련 자료 모음
Vue.js 개념 정리를 위한 글들 vue.js 공식 가이드왜 43%의 프론트엔드 개발자들은 Vue.js를 배우고 싶어하나?Vue.js 입문서 - 프론트엔드 개발자를 위한Vue 인스턴스템플릿문법1[Vue.JS 2.0] 소개 및 시작하기[To-Do 앱]Vue.js 와 Node.js를 이용해 웹 앱…
March 26, 2020