앙큼한 개발기록

정규식을 이용한 점 찍기 소수점 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 } 아래처럼 썼을 때 장점은 함수에서 전달받은 프로퍼티가 뭔지 알 수 있다는 점이..

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 속도가 미친듯이 빨라지는 효과..

프로젝트를 진행하면서 vue-select를 많이 사용하였는데 매번 쓸 때마다 공식문서 찾아가며 이리저리 검색하며 사용한 내용들을 정리하고자 글을 작성한다. 우선 , 나는 nuxt framework를 사용하였고 vue select는 plugin directory안에 library.js를 만들어 공통 컴포넌트로 만들고 그냥 호출해서 쓴다. (대부분의 외부 라이브러리는 해당 파일 안에 때려 박는다.) library.js import Vue from 'vue' import vSelect from 'vue-select' Vue.component('v-select', vSelect) nuxt.config.js ... plugins: [ {ssr: false, src: '@/plugins/mixins.js'}, {s..

자바스크립트 배열 묶기 배열을 전달받은 parameter 개수로 묶어서 새로운 배열 리턴 function arrayBundle(list, bundleCount) { let resultList = [] for (let i = 0; i < list.length; i += bundleCount) { resultList.push(list.slice(i, i + 100)) } return resultList }

구글에서 인터넷 연결 관련 문서를 찾아보면 제일 우선 navigator.isOnline 이 나온다. 근데 와이파이를 끊어봐도, 인터넷 연결을 끊어도 프로젝트에서 인터넷 연결은 항상 true를 반환한다. 브라우저의 인터넷 연결 속성이라는데 재대로 작동하지 않는다. node에서 사용한 dns 방법을 이용해 javascript에도 유사한 방법으로 접근해 인터넷 연결을 확인하고자 한다. async isNetworkConnection() { console.log('check network connection') if (!window.navigator.onLine) return false const url = new URL("https://www.google.com") try { const response = aw..

출처 : https://ko.nuxtjs.org/guides/get-started/installation Installation Here, you will find information on setting up and running a Nuxt.js project in 4 steps. ko.nuxtjs.org 매번 프로젝트를 만들 때 마다 햇갈려서 정리 합니다. 기본적으로 노드는 설치 되어 있어야 합니다. 설치는 아래로 이동하시면 됩니다. node - at least v8.9.0 Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 터미널 혹은 cmd를 사용하실 수 있어야 합..