익명의 개발노트

개발자에게 맥북은 사는게 아니고 받는거라고 했는데.. 회사생활 하면서 1년간 맥북을 잘 사용했다. 그리고... 퇴사를 하면서 회사에서 받았던 15인치 맥북은 반납하고, 당분간 휴식을 취하기로 마음먹었기에, 새로운 맥북이 필요했다. 13인치를 살까하다가 13인치 고급형 살바엔 돈 더 주고 16인치로 가기로 마음먹었다 (주변 개발자 들에게 물어보니, 전부 16인치를 추천하더라) 금액은 16인치 기본형이 3... 너무 비싸지만.. 다행히도 오픈마켓에서 삼x카, 국x카로 24개월 무이자 할부가 진행되고 있어서 약 월12만6천원으로 저렴하게 사용할 수 있다는 사실!! 뭐 쓰다가 맘에 안들면 중고로 팔고 판 금액으로 할부금 막으면 되니깐 부담 없이 질렀다. 로켓와우라서 그런지 하루만에 아래와 같이 날아옴. 참 크다..

Production mode에서 콘솔로그 제거 하기 terser-webpack-plugin를 이용하여 진행한다. npm에서 1400만회 이상 다운로드와 최근 업데이트 기록으로 인해 terser 라이브러리를 사용하기로 했다. 사용법은 간단함. npm install terser-webpack-plugin vue.config.js 에 아래와 같이 설정한다. const TerserPlugin = require('terser-webpack-plugin'); module.exports = { configureWebpack: config => { config.optimization = { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { ecma: 6..

위 그림과 같이 보는대로 검색에 따른 내용물이 보이는 기능을 구현하려할때, 자바스크립트에서 디바운싱 기능을 이용하면 수월하게 작업할 수 있다. debounce 란? 특정시간이 지난 시점에서 이벤트가 하나만 발생하도록 제어하는 기술 연속적으로 호출되는 함수들 중 마지막 함수 또는 제일 처음만 호출하도록 하는 것 검색창 input에 search라는 data를 바인딩 시킨 후 input 이벤트를 작성한다. handleSearchInput(e) { this.search = e.target.value; if(this.search.length !== 0){ clearTimeout(this.debounce); this.debounce = setTimeout(() => { const filteredList = this..

위 그림처럼 메뉴 클릭시 해당 화면으로 이동하는 방법에는 2가지가 있다. ID를 이용한 방법과 scrollTo 를 사용하는 방법이다. ID는 원하는 위치로 이동하고자 하는 곳에 id 값을 지정하고, 사이드 메뉴 클릭이벤트에 해당 id 를 부여하면 된다. window.location.href = '#id명' 두번째는 사이드 메뉴 클릭시 보여주고자 하는 값의 TOP위치를 계산해서 아래와 같이 설정해준다. window.scrollTo({top:'위치값', behavior:'smooth'}); 화면의 전체 스크롤 크기를 알고 싶을때 파이어폭스에서는 scrollMaxY가 있는데, 크롬이나 다른 브라우져에는 없다, 이런 경우 아래와 같이 작성해주면 scrollMaxY와 똑같은 기능을 구현 할 수 있다. const ..

1. 설치하기 다운로드 링크 : https://docs.docker.com/docker-for-mac/install/ Install Docker Desktop on Mac Docker Desktop for Mac is the Community version of Docker for Mac. You can download Docker Desktop for Mac from Docker Hub. Download from Docker Hub By downloading Docker Desktop,... docs.docker.com 설치되었으면 도커 명령어로 확인한다. docker version 설치가 되면 위와 같이 client, server 에 대한 정보가 출력된다. 도커는 클라이언트와 서버로 버전정보가 나뉘어..

서버 쪽 공부를 위해 맥환경에 mysql을 설치하는 도중 path문제가 일어나서, 잠시 중단을 했다. 그리고 로컬에 설치하기 보다는 docker 환경에다가 설치하면, 설정이 꼬이거나 할 일이 없고, 관리하기 수월해서 도커에다가 설치하기로 했다. 도커와 VM의 가장 큰 차이점은 VM은 OS위에 게스트 OS 전체를 가상화하여 사용하는 방식이기 때문에 사용하는 컴퓨터의 리소스를 분할하여 사용하여, 속도 저하 , 주변 장치와 완벽한 호환이 어렵다. 이러한 단점을 보완하기위해 프로세스를 격리하는 방식이 등장한다. 리눅스에서는 프로세스를 격리하는 방식을 리눅스 컨테이너라고 하며, 격리시키기 때문에 가볍고 빠르게 동작한다. 도커는 게스트 OS가 필요하긴 하지만, VM처럼 전체 OS를 가상화하는 방식이 아니기 때문에,..

오디오 tag 업로드 구현하기 기본적으로 오디오 태그는 controls 이용하면, 위 그림과 같이 내장된 툴이 생성된다. 기본적으로 파일 업로드를 위해서는 Input Tag를 이용하여 업로드를 구현해야한다. 위와 같이 input tag 를 작성했으면, 업로드를 위해서 change 이벤트를 이용해 구현하자. onAudioSelected(e){ const uploadSound = event.target.files[0]; const audioSrc = window.URL.createObjectURL(uploadSound); this.$refs.source.src = audioSrc; this.$refs.player.load(); //업로드완료 후 파일로딩 event.target.value =''; //다른거 ..

패키지를 npm에 배포하기 위해서는 npm 계정이 필요하다. 아래의 명령어를 터미널에 입력하면, npm adduser Username, Password, Email을 npm에 가입한 정보를 그대로 입력하도록 한다. 실제로 임시 파일을 만들어서 배포해보자. 아래와 같이 package.json에서 진입점을 위해서 index.js 파일을 만들어주고, 패키지명을 작성한다. { "name": "calculator-11024", //배포할 패키지명 "version": "1.0.0", "description": "", "main": "index.js", //진입점 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "l..

이미지 있을때 파란 화살표가 옆으로 한칸씩 밀리는 기능 구현하기?? 기본적으로 회색, 파란색 + 버튼은 전부 이미지이다. 이미지가 3개 이므로, 조건을 걸어주고 다르게 보여주기로 생각했다. 기본적으로 9개는 html단에서 for문으로 돌려서 생성했고, 그 안에 이미지의 조건은 따로 만든 flag 배열의 인덱스 값으로 걸어주었다. 맨 처음부터 파란색 + 버튼으로 시작하기때문에 flag 배열의 값은 아래와 같이 할당했다. data(){ return { imageListFlag:[1, 0, 0, 0, 0, 0, 0, 0, 0], } }, 플래그 값은 파란색 플러스 버튼은 1, 이미지가 들어오면 2, 아무것도 없으면 0으로 조건을 주었다. 디자이너의 의견으로 회색버튼은 클릭이 안되게 동작해야한다. 그리고 파란 ..

vue tooltip 라이브러리 중에 vuetify를 제외하고 쓸만한 라이브러리가 v-tooltip 밖에 없는 듯... 1. 설치 npm install --save v-tooltip 2. 글로벌 등록 //main.js import Vue from 'vue' import VTooltip from 'v-tooltip' //추가 Vue.use(VTooltip); //추가 new Vue({ router, store, render: h => h(App) }).$mount('#app') 3. 스타일 적용하기 공식문서에 일반 css 와 pre-processor 방식인 sass, less 방식이 있다. 공식문서에는 자세히 안나와 있어서, 전역 스타일 안에다가 아래 코드를 넣었는데 작동하지 않았고, 개발자 도구를 열고 ..