$emit 사용 시 emits: [‘write’] 등록을 안했더니 계속 에러가 남..! (App.vue) <template> <div class="header"> <h1 class="logo"><a href="#" title="vue-stagram"></a></h1> ...

예전에는 서버가 있으면 업로드 한 사진을 서버에 일단 보내고 서버에서 저장한 후 서버에 저장된 URL을 다시 나에게 주면 보여주는 방식으로 작업을 했는데 요즘에는 브라우저에서 제공하는 이미지 다루는 함수를 사용하면 된다. 그러면 서버로 보내기 전에 바로 사진을 띄워줄 수 있다. 두가지 방법이 있다. FileReader() API를 사용하거...

동적인 UI 만드는 법 1. UI 현재 상태를 데이터로 만들기 export default { name:'App', data(){ return { tab: 0, } }, } 2. 상태에 따라 HTML이 어떻게 보일지 작성하기 <button @click="tab=0">버튼0</button>...

서버로 데이터를 요청하려면 (ajax를 요청하려면) axios 라이브러리를 사용하는 방법과, 기본 fetch 함수쓰는 방법이 있습니다. fetch 브라우저 기본 기능 비교적 최신 문법이기 때문에 최신 브라우저에서만 이용할 수 있다. 그래서 호환성 문제 때문에 보통은 axios 라이브러리를 사용한다. axios 라이브러리 설치 axios...

작업을 하다보면 :style=”” 안에 자바스크립트 데이터를 집어넣을 일이 많습니다. 그냥 콜론 붙이고 데이터 바인딩 해도 되는데, Object 형태로도 CSS 속성을 넣을 수 있습니다. <div :style="{ fontSize : '20px', marginTop : '10px' }"> <div :style="{ color : '...

vue.config.js 수정 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, publicPath: process.env.NODE_ENV === 'production' ? '/vue-sta...

vue로 작업한 사이트는 build용 파일을 생성 후 올려야 합니다. 왜냐면 . vue 파일은 브라우저가 해석할 수 없어서, HTML CSS JS 파일로 변환해줘야 하기 떄문입니다. 1. build npm run build // or yarn build Vue 프로젝트에서 터미널을 연 후 위의 명령어를 입력합니다. 개발 도중 심각한 에러가...

1. Hash mode vs HTML5 mode 우리가 맨 처음 셋팅해놨던 코드는 이렇습니다. (router.js) import { createRouter, createWebHistory } from 'vue-router' const router = []; const router = createRouter({ history: createWeb...

Nested routes /detail/0/author 로 접속하면 detail 내에 작가소개 란을 보여주고 /detail/0/comment 로 접속하면 detail 내에 댓글란을 보여주고 싶을 때 이런식으로 /detail/ 페이지 안에서 또 페이지를 쪼개고 싶을 때 쓸 수 있는것이 Nested routes 다. Nested routes를 사용...

/:anyting(.*) 404페이지 정규식 문법을 이용하여 아무 문자나 입력했을때는 404 페이지를 보여줄 수 있다. 이때 순서가 중요하다, 가장 하단에 배치하는 것이 좋다. (router.js) import { createWebHistory, createRouter } from "vue-router"; // vue-router 라이브러리의 함...