앙큼한 개발기록

정규식을 이용한 점 찍기 소수점 3자리 마다 점 찍기 function addCommaToNumber(number) { if (!number) { return '0' } let result = number.toString() return result.replace(/\B(?=(\d{3})+(?!\d))/g, ',').toString() }

javascript에서는 두 객체 배열을 합치고, 비교하고 중복 체크하는 경우가 많은데 이번 기회에 정리를 한번 해 보고자 한다. 조건 객체 let arr1 = [ { uid: 1, name: "사과" }, { uid: 2, name: "배" }, { uid: 3, name: "귤" }, { uid: 4, name: "감" } ] let arr2 = [ { uid: 2, name: "배" }, { uid: 3, name: "귤" }, { uid: 5, name: "포도" } ] 라는 객체가 있다고 했을 때 1. 두 객체 배열에서 중복 제거 (arr1에서 arr2와 중복되는 애들 제거) let list = arr1.filter(e => { return !arr2.some(el => el.uid === e...

mixin에 선언되어 있는 공통 컴포넌트를 page에서 보여주려고 하니 위에 에러가 발생했다. 선언되어 있는 공통 화면을 별로도 호출 하면서 생기는 문제 였는데 mixin에 호출 되어 있으면 자기 자신이 자기 자신을 호출하게 되는 문제가 발생하였다. vue를 사용함에 있어 혹은 다른 프레임워크를 사용함에 있어서 컴포넌트의 재사용성은 굉장히 중요하다. 공통 컴포넌트를 만들어 놓고 해당 컴포넌트를 호출만 한다면 개발의 시간을 단축 함과 동시에 기능, 유닛 테스트도 편리 하여 공통 컴포넌트화 시켜서 여러 곳에서 사용하도록 개발하는 경우가 많이 생긴다. 이런 경우에 modal 창이나 confirm 창, alert 창을 공통 컴포넌트고 만들고 . 공통 컴포넌트가 동일한 부모, 혹은 자기 자신에서 호출 되는 경우에..

자바스크립트 함수에서 전달 받는 파라미터는 초기 값을 설정해주는 것도 가능하고, 배열로도 받을 수 있고, 객체로도 전달이 가능하다. 주로 객체나 배열로 전달하면 통체로 전달하지만 각각의 객체에 대한 프로퍼티를 보여주거나 배열의 각 항목별 선언된 내용이 필요한 경우 해당 항목을 바로 사용할 수 있다. - 예시 // 이런 객체가 존재할때 let student = { name: "name" age: 15 } // 이름을 가지고 오고 싶은 함수라면 function getName (obj) { return obj.name } // 이런 방식도 가능하다 function getNameByParam({name}) { return name } 아래처럼 썼을 때 장점은 함수에서 전달받은 프로퍼티가 뭔지 알 수 있다는 점이..

클라이언트에서 서버로 데이터를 전달하여 저장하는 과정에서 위에 에러가 발생했다면 들어가는 데이터의 길이, 타입을 확인 해봐야 된다. 나 같은 경우 char(4)로 4글자 code로만 들어가게 만들었는데 4글자를 초과 한다거나 integer로 선언해 놓고 "10,000", "10000" 처럼 들어가는 경우에도 에러가 발생한다. 들어가는 데이터 값을 확인 해 보자.

javascript 에서 Object를 복사하는 방법은 여러가지가 있다. 1. lodash 2. json 3. separator ... 위에 언급한거 외에도 다른 라이브러리를 사용해도 된다. object를 복사해서 사용하는 이유는 Object 가 참조 하고 있는 주소 값때문에 단순하게 let이나 var로 선언해서 사용할 경우 해당 참조값 모두가 바뀔수 있기 때문에 동일한 데이터를 가지고 가공해서 사용하고 싶을 때 많이 사용 된다. 나는 위에 중에서 json 방식을 공통 함수로 만들어서 사용 하고 있다. 내가 사용한 함수는 다음과 같다. cloneObject(value) { return JSON.parse(JSON.stringify(value)) } 심플하고, 라이브러리 안써도 되고, 함수로 써서 알기 쉽..

sequelize 를 사용하면서 가장 많이 고민하는 부분인 데이터 베이스 구조와 api 의 속도 개선을 위해서 어떤식으로 진행했는지에 대해 간단하게 적어 보고자 한다. 다른 직원분들이나 회사 동료들에게 데이터 다이어트를 하라고 하거나 속도 개선을 하자고 하면 어디서 부터 시작해야 될지 모르는 분들이 많은것 같다. 나또한 예전에 작업하면서 아무리 해도 안되는 부분이 있었지만 그래도 어느정도 내가 여태까지 해왔던 아주 심플한 방법으로 개선했던 점들을 공유 한다. 1. 데이터 미리 받아오기 sequelize에서 include를 거는걸 최소화 하고 배열에서 가져올때에는 관계 되어 있는 데이터를 미리 가져와서 공유 데이터에 넣어 놓고 (vuex, redux등등..) 사용한다면 api 속도가 미친듯이 빨라지는 효과..

컴퓨터에서 nuxt 프로젝트를 새로 시작하기 위해 nuxt 커맨드를 쳐봤다. npx - npx create-nuxt-app yarn - yarn create nuxt-app npm - npm init nuxt-app 다 해봤는데 위에 에러가 나오면서 안된다면 vue cli가 설치되지 않아서 발생하는 에러이다. 아래의 커맨드를 실행하고 하면 해결 된다. npm i -g @vue/cli npm i -g @vue/cli-init

기본적으로 핸드 스캐너는 입력 장치 이기 때문에 입력 장치로 들어오는 이벤트 listener로 들어온다. (keyup, keydown...) javascript 에서는 document.addEventListener를 통해서 핸드 스캐너 값을 읽을 수 있으나 다른 이벤트 들과 같이 일반 키보드 이벤트와 동일하게 작동돼 공통 함수에 조건을 주어 맞추어야 한다. 핸드 스캐너 값은 30 millisecond 안에 다 들어온다는 점을 이용하여 들어온 이벤트들을 모아서 한꺼번에 처리 하는 로직을 구현하였다. // keyup, keydown 상관 없다 document.addEventListener('keyup', keyboardEvent) // scan 값을 저장할 변수 선언 // window.scan = [] va..

일렉트론을 개발하면서 시리얼포트, 듀얼모니터 등 내부 프로그램과 브라우저간의 데이터 통신이 필요한 경우가 있다. 해당 경우에 대해서 간략하게 정리해 보고자 한다. 우선 windowHandler ipcMain을 통해서 통신을 하기 위해 정의하고 import { app, ipcMain, BrowserWindow } from 'electron' browser window가 생성되고 나서 혹은 constructor에 eventListener를 정의한다. ipcMain.on('event-name', (e, args) => { }) 이러면 데이터 수신 받을 준비 끝. javascript에서는 정의한 이벤트를 트리거 시켜주면 된다. import electron from "electron" ... electron.ip..