Song Minu

alert도 컴포넌트로 만들어본 김에 confirm도 만들어봤다. https://minu0807.tistory.com/99 [VueJS] NuxtJS+Vuetify alert 컴포넌트 만들어보기 nuxt와 vuetify를 이용해 프로젝트를 만들면서 alert 창을 띄우다 보니 기본 alert 창이 보기가 너무 싫었다. vuetify에서 제공하는 컴포넌트를 이용해서 만들어보면 괜찮지 않을까? 하는 생각으로 만들 minu0807.tistory.com 사용 방식을 다르게 만들었는데, 이유는 confirm은 확인이냐 취소냐 누른 후에 다음 로직으로 진행해야 하기 때문에 alert처럼 vuex방식이 아니라 부모에서 자식 컴포넌트로 접근하는 방식으로 처리했다. https://minu0807.tistory.com/9..

일반적으로 인덱스를 생성할 때 맵핑 정보를 지정하고 사용하다 보면, 불편한 점이 있다. 이런 식으로 인덱스가 생성되었다고 할 때, 저기에 입력된 4개의 맵핑 정보를 제외하고 실수로 다른 정보를 입력하면 위에 보이는 user_addr처럼 저런 형식의 맵핑 정보가 생성된다. 저렇게 되면 search가 6.x.x 버전에선 안되던 걸로 기억하는데 7.x.x 버전에선 검색이 되긴 했다. 하지만 저런 식으로 지정되지 않은 맵핑 정보가 추가되면 해당 필드로는 어그리게이션이 안된다. 그래서 뒤늦게 맵핑 정보를 추가하려고 해도 이미 저렇게 생성이 되어버리면 인덱스를 다시 만들어야 한다. (이게 가장 큰 문제) index_template이라도 있으면 인덱스 템플릿을 수정하고 리인덱스를 하면 되지만, 없다면 인덱스를 지우고..

먼저 믹스인은 간단하게 설명하면 믹스인 파일 내에 있는 요소들을 컴포넌트에 합치는 개념이다. 그래서 믹스인 안에 요소와 컴포넌트 요소가 중첩될 수 있으니 주의해서 작성해야 한다. https://kr.vuejs.org/v2/guide/mixins.html 믹스인 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org nuxt와 vuetify를 이용한 프로젝트를 만드는 중에 컴포넌트 height를 유동적으로 변환해주어야 하는 부분이 있었다. vuetify에서 제공하는 grid 시스템 v-layout, v-row, v-col을 이용하여 위치를 잡아주면 브라우저 크기를 조절했을 때 width는 자동으로 조절이 된다. 하지만 height는 따로 height 속성을 줘서 고정값을..

회사에서 옛날에 만들어진 BackboneJS + Spring 기반 프로젝트의 대부분 기능을 NuxtJS + NodeJS (+VuetifyJS)로 새로 만들면서 디자인, 기능 등 새롭게 만들었다. 기존 기능들 중에 window.open을 이용해서 팝업을 통해 처리되는 기능들이 정말 많았는데. 레이아웃 구조를 완전히 바꾸거나 모달을 이용해 대부분 처리했다. (개인적으로 팝업을 사용하는 것을 선호하지 않음) 하지만, 특정 몇몇 기능의 경우 이건 무조건 팝업으로 해야 사용자가 편하다는 부분이 있어서 만들게 되었는데, 하는 과정에서 생각해야 할 부분도 좀 있고, 생각지도 못한 부분들도 몇 가지 발생했던 김에 블로그에 글을 작성하기로 했다. 1. 생각해야할 부분 2. 소스코드 3. store 문제 1. 생각해야할 ..

자식 컴포넌트가 부모 컴포넌트로부터 props를 전달받고 props 유효성 검사로 타입을 지정할 때 다른 타입에서는 못 봤던 것 같은데, Object 타입일 경우에는 기본 값을 반환해줘야 한다. 물론 공식 홈페이지에 나와있기는 하다. https://kr.vuejs.org/v2/guide/components-props.html#Prop-%EC%9C%A0%ED%9A%A8%EC%84%B1-%EA%B2%80%EC%82%AC Props — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 하지만... 마지막으로 본지도 오래됐고, 평소에 잘 안 쓰다 보니... 다른 타입들처럼 작성해서 계속 undefined가 출력되어 삽질하다 뒤늦게 알아낸 김에 블로그에도 작성하기로 했다. (..

노드로 ping이나 traceroute 요청에 대해 전달 받은 ip로 결과 값을 전달해줘야 하는 API를 만드는 게 있었다. 노드에서 제공하는 cild_process의 execSync를 사용하면 되는 거라 만드는 거 자체는 어렵지 않았는데 문제는 한글이 깨지는 현상이었다. 기본 디코딩 자체가 utf8인데 euckr은 먹히지도 않아서 찾다 보니 iconv-lite를 사용하면 된다고 해서 적용해봤다. 먼저 iconv-lite를 사용하지 않고 그냥 했을 때 한글 깨지는 것부터 보면 이렇다. const exec = require('child_process').execSync; const cmd = 'ping -n 4 8.8.8.8'; let rs = exec(cmd); rs = rs.toString(); con..

종종 코딩을 하면서 배열 내에 중복되는 데이터가 있는지 확인해보고 싶었던 적이 있었는데 최근에 set()이라는 아주 좋은 게 있다는 걸 이제야 알았다.......... const arr = ['a', 'b', 'c', 'b']; const set = new Set(arr); console.log(arr.length); console.log(set.size); arr에 보면 b 값이 2개 있는데 set 변수를 만들어서 그 안에 배열 데이터를 넣어주면 알아서 걸러준다. 위 콘솔 결과를 확인해보면 arr.length는 4 set.size는 3이 나온다. 끝이다. 두 개 값이 일치하지 않으면 중복되는 값이 있는 걸로 판단하고 이후 로직을 작성하면 된다.

NuxtJS 프로젝트를 빌드할 때 회사 프로젝트는 이런 현상이 없었고 버전 차이도 거의 없던 것 같았는데 내 개인 프로젝트는 빌드할 때마다 이런 에러가 미친 듯이 찍혔다. 평소에 개발 모드로만 이런저런 테스트만 했지 배포 버전 빌드를 안 해본 지 오래되어 당황스러웠다. env 관련 테스트 중에 개발 모드, 배포 모드 테스트가 필요해서 빌드를 하다 발견했다. sass 종속성이 없어서 발생한다는 문제라는 것 같고, 우선 nuxt 2.15.7, @nuxtjs/vuetify 1.12.1 이 버전들 이후로는 수정되었다고 한다. 내 프로젝트는 nuxt 2.15.3, @nuxtjs/vuetify 1.11.3 이었다. package.json에 devDependencies 안에다 sass 추가와 버전 앞에 물결(~)을 ..

nuxt와 vuetify를 이용해 프로젝트를 만들면서 alert 창을 띄우다 보니 기본 alert 창이 보기가 너무 싫었다. vuetify에서 제공하는 컴포넌트를 이용해서 만들어보면 괜찮지 않을까? 하는 생각으로 만들어봤다. 기왕 만들 거면 alert 컴포넌트를 만들어서 alert을 띄울 때 pages나 components 디렉터리에서 쉽게 사용할 수 있고, store에서도 쉽게 사용할 수 있게 만들고 싶었다. 그래서 생각한 건 store를 사용해보기로 했다. store/index.js 소스 export const strict = false; export const state = () => { return { alert : false, alert_data: { type: 'primary', //type은..

이 둘의 차이를 정말 간단하게 생각한다면 화면상에 보여준다, 안 보여준다 정도이지만 차이가 조금 더 있다. v-if는 조건에 맞지 않으면 렌더링 자체가 안되거나, 조건을 충족해서 렌더링 되었다가 다시 바뀌면 엘리먼트가 삭제된다. v-show는 렌더링은 되지만 조건에 따라 style: display:none;으로 화면상에서만 안 보이게 하고, 바뀌면 다시 보이게 한다. 테스트 소스 AAA BBB CCC Button v-if is의 값이 true여서 v-card가 다 보이는 상태이고 버튼을 눌러 is 값을 false로 바꾸면? 화면에서도 사라졌고, 해당 v-card 엘리먼트도 사라졌다. 버튼을 다시 누르면 사라져서 로 표시되던 부분에 다시 렌더링 된 모습을 볼 수 있다. v-show 위 예제 소스에서 v-i..