Song Minu

회사에서 옛날에 만들어진 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가 출력되어 삽질하다 뒤늦게 알아낸 김에 블로그에도 작성하기로 했다. (..

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..

만들다 보면 시작일과 종료일을 선택하는 기능을 만들어야 하는 상황이 분명 생길 수 있다. 그리고 시작일이 종료일보다 높은 날짜가 선택되거나, 종료일이 시작일보다 낮은 날짜가 선택되는 등의 상황이 나오면 분명 이야기가 나올 수 있기 때문에 그걸 제한하는 기능을 추가적으로 작성해줘야 한다. vuetify에서 제공하는 v-datepicker 속성 중에 min, max를 쓰면 쉽게 구현이 가능하다. 우선 예제로 구현한 모습이고 템플릿 소스 Cancel OK Cancel OK

처음 화면이고 저 시작 버튼을 누르면 인터벌을 생성해서 일정 시간마다 데이터를 불러오는 함수를 실행시켜볼 생각이다. 먼저 data() 안에 사용할걸 추가 그리고 안에 버튼 추가 mdi-pause 정지 mdi-play 시작 (VuetifyJS를 사용한 버튼입니다.) auto_reload의 값에 따라 보이는 버튼을 다르게 만들었다. methods 쪽에 이제 함수를 추가 start_auto_reload() { console.log('start!!'); this.auto_reload = true; this.auto_reload_func = setInterval(() => { this.getData(true); }, this.auto_reload_delay) }, stop_auto_reload() { consol..

부모 컴포넌트에서 자식 컴포넌트의 props에 맞춰 데이터를 넘기다 부모에서 자식 컴포넌트 안에 있는 함수를 실행을 할 수는 없을까? 하고 찾아보았는 데 있었다... 아직 모르는 게 너무 많은 듯하다. (테스트는 NuxtJS에 VuetifyJS가 적용된 프로젝트에서 테스트했습니다.) 간단한 예제 부모 컴포넌트 소스 부모 컴포넌트에서 자식 컴포넌트 함수 실행 부모 컴포넌트 run1!! run2!! run3!! 컴포넌트에 ref 값을 넣어주면 된다. this.$refs.컴포넌트에 입력된 ref명.실행할 함수 이런 식으로 하면 된다. run()에 있는 console.log 정보를 봐보면 이렇다. 자식 컴포넌트에 적용되어 있는 많은 정보들을 확인할 수 있다. 노란색으로 칠해진 부분이 자식 컴포넌트에 있는 met..

NuxtJS로 만든 웹 사용 중 페이지가 변경될 때마다(URL이 변경될 때마다) 특정 이벤트를 발생시키고 싶어서 찾아봄. watch를 쓰면 될 것 같긴 했는데 마땅한 방법이 생각 안 나서 찾아봤었는데 방법이 정말 간단했었다. watch: { $route(route) { console.log('$route : ', route); } } 방법은 이렇고 페이지를 이동할 때마다 console.log를 찍히는 걸 보면 이렇다. 이걸 이용해 만들어 본건 vuetify의 v-app-bar 안에 v-breadcrumbs를 써서 페이지를 이동할 때마다 페이지의 제목을 표시하고 싶어서 사용해봤었다. 이런 식으로 사용이 가능하다. 소스 일부분은 이렇다. mdi-chevron-right 메뉴를 클릭할 때마다 watch를 통해..

피치 못할 사정으로 NuxtJS에서 jQuery 기반의 슬릭그리드를 대체할 플러그인을 찾지 못해서 jQuery를 적용시킨 후 슬릭그리드를 적용해보려고 했었다. 먼저 jQuery 적용은 https://minu0807.tistory.com/90 여기처럼 적용했고, 슬릭그리드 적용은 해당 vue파일에 할까 하다가 그냥 nuxt.config.js에다 적용했다. head: { title: 'AF_Manager', htmlAttrs: { lang: 'en' }, meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', c..