몽땅뚝딱 개발자

API가 다 만들어지기 전, 응답값 명세만 나온 상태에서 사용해보는 목업 API! 내가 직접 DB를 건드릴 수 없고 data 옵션에 하드코딩으로 넣어놓고 테스트하기에는 나중에 바꿀게 너무 많기때문에, 실제 api를 호출하면 목업 api에서 intercept하여 내가 원하는 데이터를 넣어 테스트 할 수 있어야했다. 팀장님이 이렇게 하라고 했지만 들을 당시에는 못 알아듣고..^^ 나중에 다시 얘기하다가 모킹 모듈을 추천받고 사용해보게 되었다. 결론적으로는 덕분에 너무 편하게 개발했고 간과했던 문제점들을 매우 많이 찾을 수 있어서 시간을 아꼈다. axios-mock-adapter-path-params Axios adapter that allows to easily mock requests. Latest ver..

맥북 재설정 중 정리해보는 node 버전 변경하는 방법 😎 1. node 설치 $ brew install node 2. node 버전을 변경하기 위한 nvm 설치 $ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 3. nvm 설정하기 $ vi ~/.bash_profile // => terminal이 bash인 경우 $ vi ~/.zshrc // => terminal이 zsh인 경우 3-1. 아래 입력 후 ESC 누르고 :qw export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/n..

◽ 배열 끝에 항목 추가하기 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..

◽ 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와 달..

📄 HTML 📄 CSS .box { width: 200px; height: 100px; background: linear-gradient(to right, black 4px, transparent 4px) 0 0, linear-gradient(to right, black 4px, transparent 4px) 0 100%, linear-gradient(to left, black 4px, transparent 4px) 100% 0, linear-gradient(to left, black 4px, transparent 4px) 100% 100%, linear-gradient(to bottom, black 4px, transparent 4px) 0 0, linear-gradient(to bottom, blac..