본문 바로가기

Programming

(36)
Vue.js + Nuxt.js로 동적 URL 페이지 만들기 Nuxt.js는 vue-router를 내장하고 있고, 매우 간편한 방식으로 라우팅을 할 수 있다.예를 들면 아래와 같은 URL 구조를 Nuxt.js에서 구현하는 방법은 간단하다.예시 URL 구조/article 글 목록/article/:id 글 보기index 메인페이지/user/:name 유저 정보 페이지 Nuxt.js에서 /pages 폴더 구조pages/article/index.vue_id.vueuser/_name.vueindex.vue폴더 구조만으로도 라우팅이 가능한 Nuxt.js의 장점이다.더 자세한 내용은 공식문서에 한국어로 잘 나타나 있다. https://ko.nuxtjs.org/guide/routing/
빈 배열 여부를 체크하는 함수 아래의 isEmptyArray 함수는 빈 배열이거나, Array가 아니면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.JavaScriptTypeScript
자바스크립트 배열 중복 제거 (JavaScript duplicate array) Jquery를 사용하지 않는 순수한 자바스크립트 코드입니다.원리array.reduce에서 기본 인자 값을 빈 배열을 넣어줍니다.그 다음 누적 배열에 현재 값이 있으면 누적 배열을 반환하고, 없으면 합쳐서 반환합니다.이때, 거꾸로 출력 됩니다. (예: [deduplicate([1, 2, 3, 1, 2, 3]) // [3, 2, 1])원래대로 출력하려면 .reverse()함수를 사용하세요.또한 ES6 이상에서만 사용 가능한 함수입니다.TypeScriptfunction deduplicate(array: Array): Array { return array.reduce((temp, now) => temp.includes(now) ? temp : [now, ...temp], []); }
mysql에서 pool query 후 release 하기 mysql 모듈에서 pool을 사용한 다음 release를 하지 않아도 된다.이슈(https://github.com/mysqljs/mysql/issues/1202)를 참고하면, yes. pool.query() is shortcut for pool.getConnection() + connection.query() + connection.release() - see https://github.com/felixge/node-mysql/blob/master/lib/Pool.js#L194-L207아래와 같이 답변이 있다.pool.query()는 getConnection()과 query, 커넥션 release가 포함되어있다는 내용이다.
firebase에서 nuxt.js dynamic routes 사용하기 Nuxt.js에서 Dynamic Routes를 사용하고 그대로 배포하면 404페이지가 뜨게 됩니다.이 경우에는 파이어 베이스의 설정을 변경하면 됩니다. hosting 폴더에 있는 firebase.json 파일을 아래와 같이 고쳐주세요."rewrites":[ { "source":"**/*", "destination": "/index.html" } ]일반 경로(예: /login 등)를 제외하고는 index.html로 연결됩니다. 그러면 이제 nuxt.js에서 라우팅 처리를 하게됩니다.
자바스크립트 날짜 한글로 표시 const zero = num => num < 10 && num >= 0 ? "0" + num : num; const dateKo = date => `${date.getFullYear()}년 ${zero(date.getMonth() + 1)}월 ${zero(date.getDate())}일 ${zero(date.getHours())}시 ${zero(date.getMinutes())}분 ${zero(date.getSeconds())}초`;자바스크립트 날짜(Date)를 한글로 표시하는 함수입니다.xxxx년 xx월 xx일 xx시 xx분 xx초로 나오게 합니다. 인자값의 타입은 Date입니다.
자바스크립트에서 0 이상 10 미만이면 0붙이기 const zero = num => num < 10 && num >= 0 ? "0" + num : num;0 이상 10 미만이면 숫자의 앞에다가 0을 붙여주는 함수 입니다.
Vue.js의 객체 감시는 만악의 근원 Vue.js에서 배열이나 오브젝트의 v-for은 정말 짜증나는 관계가 아닐 수가 없습니다. Vue.js 2를 기준으로, 배열이나 오브젝트는 감시가 불가능합니다.그리고 이는 매우 더러운 코드를 양산하게 되는 이유가 됩니다. 배열이나 오브젝트의 감시를 위해서는 Vue.set(vm.$set) 또는 array.splice를 반드시 써야합니다.안 쓰면 감시가 안됩니다. 한마디로, v-for을 사용할 때, v-for의 데이터를 바꾸는 일이 생긴다면, 반드시 주의해야할 부분입니다. 단순히 this.oldValue = newValue;로는 절대로 리 랜더링이 되지 않습니다. 다행이도 Vue.js 3.0에는 객체 감시 시스템을 바꿔서 된다고는 하니, Vue.js 3.0을 기다리는 수 밖에 없습니다.