몽땅뚝딱 개발자

에러 다른 파일은 다 핫스왑이 잘 되는데 이 파일만 그렇게 되지 않았다. 시도해본 것: 1. 인텔리제이 설정에서 Advanced Settings의 Compiler의 저 옵션에 체크박스를 설정한다. 2. 기타 핫스왑이 가능하게하는 모든 인텔리제이 설정을 찾아보고 설정한다. 하지만 다 안됨..! 원인 뭔가 이상해서 빌드해봤는데 경로어쩌구~ 에러가 노출됐다.알고보니 해당 vue 파일들을 import하는 부분에서 소문자 경로로 지정해야하는데 대문자로 적혀있었다. 어제 하루죙일 핫스왑없이 다시 run하면서 힘들게 개발했는데....그래도 해결돼서 다행이다...^^! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ FOUT vs FOIT FOUT(flash of unstyled text) 기본폰트 => 다운로드 된 시점에서 폰트를 적용하는 것 IE, Edge에서 사용 FOIT(flash of invisible text) 다운로드 전에는 해당 폰트가 적용된 텍스트를 보여주지 않음 Chrome, Safari에서 사용 => 우리는 폰트 최적화를 통해 이 두 현상을 해결 ◽ 폰트 최적화 방법 2가지 1. 폰트 적용 시점 컨트롤 하기: FOUT, FOIT 2. 폰트 사이즈 줄이기 ◽ 폰트 시점 컨트롤 속성 font-display 속성을 사용한다. - auto: 브라우저에서 설정한 기본 동작 - block: FOIT (timeout = 3s) - swap: FOUT - fallback: FOIT (timeout = 0.1..

토스트를 띄우려고 컴포넌트를 만들던 중, 메세지 하나 띄우는데 많은 작업이 필요없다고 판단하여 플러그인으로 만들었다. 실행되면 에 토스트용 가 추가되고 2초뒤에 사라지는 로직이다. 📄 plugins/toast.js import Vue from 'vue' const customToast = { install(Vue) { Vue.prototype.$_toast = function (msg) { removeToast() // 1. id가 'toast'인 div 생성 let toastDiv = document.createElement('div') toastDiv.setAttribute('id', 'toast') // 2. 태그안에 매개변수 msg를 append let textEl = document.create..

이 에디터를 적용하게 된 계기는 네이버 스마트에디터를 Vue에 적용하는 과정이 힘들었기 때문이다. html, css가 모인 폴더를 통째로 넣는 방식인데 일단 그렇게 구현하는게 spring에서는 익숙한 구성이지만 Vue는 아니다. 그리고 스마트에디터 git에서 Vue를 지원하는지에 대한 질문에 대답이 없었다. 직접 만들어야하나 고민을 하다가(재밌을 것 같음) 배보다 배꼽이 더 큰 상황이라 일단 킵하고 Vue2Editor를 찾았다. ◽ 설치하기 npm install vue2-editor ◽ 적용하기 에서 import로 VueEditor를 가져와서 components 옵션에 넣어준다. Toolbar에 필요없는 도구가 있어 커스텀해야하는 경우 아래와 같이 설정하면 된다. import { VueEditor } f..

어느샌가부터 라우터를 설정하며 component 선언을 이렇게 하고 있었다. // router/index.js component: () => import( "./components/Main.vue" ) component를 가져와서 import하는게 아니라 함수형으로 호출하는 방식이디. 캡틴판교님의 Vue.js 실무 강의에서 배우고나서부터 자연스럽게 이렇게 쓰고 있었는데 이유는 홀라당 까먹어버림.. 그리고 돌고돌아 다시 Vue를 하게되면서 이렇게 함수형으로 컴포넌트를 가져오는 이유가 lazy-loading 때문이라는 것을 알게되었다. ◽ lazy-loading이란? lazy-loading은 화면의 보이는 부분, 랜딩페이지 또는 동작에 필요한 소스를 먼저 로드하고 다른 소스는 필요한 시점에 로드하는 방식으로..

◽ v-if와 v-show의 차이 v-if v-show 렌더링 여부 디렉티브의 표현식이 true일 때만 렌더링된다. 항상 렌더링 되어 DOM에 남아있다. 단순히 엘리먼트의 CSS display 속성만 전환된다, 사용 런타임 시 조건이 변경되지 않는다면 v-if를 사용하는 것이 좋다. 무언가를 자주 전환해야한다면 v-show를 사용하는 것이 좋다. 출처 조건부 렌더링 | Vue.js 조건부 렌더링 v-if v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. Vue is awesome! 1 v-else와 함께 “else 블록”을 추 v3.ko.vuejs.org 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도..