몽땅뚝딱 개발자

◽ 툴바를 숨기는 경우 '#toolbar=0&navpanes=0&scrollbar=0'를 뒤에 추가한다. ◽ 출처 및 참조 Javascript - PDF 뷰어 처리하기(웹 페이지 pdf파일 읽기) 사실 단순한 pdf파일을 보이게만 하는건 몇몇 태그를 활용하여 쉽게 처리가 가능합니다. iframe IE를 제외하고 firefox, chrome, edge등 모두 정상적으로 뷰어 동작을 하는것을 볼 수 있습니다. IE에서는 myhappyman.tistory.com Hiding the toolbars surrounding an embedded pdf? Though I think the answer maybe in this other question's answer concerning the pdf specific..

◽ 배열 끝에 항목 추가하기 let arr = ['고구마', '감자', '옥수수'] arr.push('땅콩') // ['고구마', '감자', '옥수수', '땅콩'] ◽ 배열 앞에 항목 추가하기 let arr = ['고구마', '감자', '옥수수'] arr.unshift('땅콩') // ['땅콩', '고구마', '감자', '옥수수'] ◽ 배열 끝에서부터 항목 제거하기 let arr = ['고구마', '감자', '옥수수'] arr.pop() // ['고구마', '감자'] ◽ 배열 앞에서부터 항목 제거하기 let arr = ['고구마', '감자', '옥수수'] arr.shift() // ['감자', '옥수수'] ◽ 배열 안 항목의 인덱스 찾기 let arr = ['고구마', '감자', '옥수수'] arr.in..

각종 데이터의 포맷을 변경하기 위해 computed를 쓸 수도 있지만 한 번도 만들어보지 않은 filter를 사용하기로 했다. 날짜포맷 예제를 만들기 위해 Date 자료형을 simpleDateFormat을 사용하여 'yyyy-MM-dd' 형태로 바꾸려고했는데.. 자바스크립트는.. simpleDateFormat이 없네.. 그래서 다른 사람들은 어떻게 쓰나 찾아보니 moment.js를 많이 사용한다고 한다. 난... 어차피 예제용이라 그냥 하나씩 변경해주었다. ◽ 컴포넌트 옵션에서 사용하기 📄 HTML mustache 표현 안에 '|'(=파이프)를 사용하면 된다. {{ date | dateFormatFilter }} 📄 Script export default { data() { return { date: n..

토스트를 띄우려고 컴포넌트를 만들던 중, 메세지 하나 띄우는데 많은 작업이 필요없다고 판단하여 플러그인으로 만들었다. 실행되면 에 토스트용 가 추가되고 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..

조금 슬픈 마음으로 정리해보는,,,🥺 https://be-a-weapon.tistory.com/206 예전에 정리해놓고도 왜 기억을 못하니,, 당시에도 저렇게 적어놓고 이해를 제대로 못했을 가능성이 높다. 삭제하려다가 반성의 의미로 남겨두었다,, 새로운 정보라고 생각하고 포스팅하던 중에 이미 관련 글이 블로그에 있을 때 울적하다,,😮‍💨 ◽ call(), apply()을 왜 사용하는가? this를 명시적으로 바인딩하기 위해서 사용한다. 이렇게 콘솔을 찍는 경우 결과값이 '페퍼로니'가 나올 것 같지만, this는 window를 가리킨 상태가 아니기때문에 undefined이다. const name = '페퍼로니' function print() { console.log(this.name); } print() ..

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

있어야 할 것 같지만 없어도 되는 속성은 'width'이다. 'max-height' 속성의 경우 font-size의 2배나, line-height값이 있다면 해당 값의 2배로 주면 된다. '-webkit-line-clamp' 속성이 줄의 수로, 나는 2줄부터 말줄임이 필요했기때문에 값을 2로 적어주었다. .hidden-text-target { font-size: 15px; max-height: 40px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 이 2개의 값은 넣어봤지만 변화가 없어서 추가하지 않았다. 추후 문제가 생기면 추가하기! white-space: normal; text..

12월 말부터 남는 시간에 기능을 이것저것 만들어 추가하던 sample 페이지인데 어느덧 이렇게 채워져있었다. 목표는 최대한 '코드만 똑 떼면 다른 곳에도 바로 적용할 수 있도록 만드는 것'이었는데 달성률은 반 정도이다. 스크롤 생길만큼 채우고 싶지만,, 양보다는 질에 더 집착하면 좋겠다. 어차피 구현해봐야 할 것이 너무 너무 너무 많기때문에 양은 걱정되지 않는다... 아득하다....🥺 가장 최근에 만든 기능인 '파일업로드'이다. CSS에 많은 집착을 했는데 마음에 든다 (^_________^ ❗️) 뭐 하나 만들 때 마다 CSS가 제일 재밌음.. 업로드 버튼으로도, 파일을 직접 드래그하더라도 파일개수에 상관없이 업로드가 가능하도록 했다. 기존 file 타입의 input은 파일을 하나씩 가져올 땐 문제가..

한번도 직접 버전을 올려본적이 없고 누군가가 올려줬기 때문에 전혀 모르고 있었던 버전관리 방법... 정리해야지 생각만하고있었는데 드디어 정리하게 됐다. 버전관리 ◽ 버전 버전은 X.Y.Z 형태로, 예를 들어 1.9.0으로 표현할 수 있다. 각각의 위치는 주(主), 부(部), 수(修)이다. - 주(主, Major): 기존 버전과 호환되지 않게 API가 바뀌는 경우에 올린다. 주버전이 올라가면 부/수버전은 0으로 초기화 한다. - 부(部, Minor): 기존 버전과 호환되면서 새로운 기능을 추가하는 경우에 올린다. 기능 수정, 기능 추가 등이 해당된다. - 수(修, Patch): 잘못된 내부 기능을 고치거나 리팩토링 등의 수정 시에 올린다. 부버전이 올라가면 수버전은 반드시 0에서 시작해야 한다. ◽ 버전관..

◽ router.push(...) 히스토리 스택에 추가되어 사용자가 뒤로가기를 하는 경우 이전 URL로 이동한다. [방법 1.] router.push('/main/home') router.push({ path: '/main/home' }) router.push({ name: 'home', params: { username: 'vinch' } }) [방법 2.] let username = 'vinch' router.push(`/main/${username}`) router.push({ path: `/main/${username}` }) router.push({ name: 'home`, params: { username } }) ◽ router.replace() url을 새 항목으로 대체한다. push와 달..