Song Minu

전에 작성했었던 NuxtJS 웹팩을 받은 후 따로 VuetifyJS를 적용한 글이 있는데(minu0807.tistory.com/71) 버전이 낮은 웹팩에다 적용하다 보니 불편한 점이 몇 있었다. 그래서 그냥 한방에 NuxtJS와 VuetifyJS가 적용된 프로젝트를 만드는 방법이다. 설치 시 나름 최신 버전으로 받아진다. 방법도 쉽다. npm init nuxt-app name 이거 한 줄 이면 시작이다. name 부분에 입력한 텍스트로 디렉터리가 생성되며, 그 안에 설치가 된다. 프로젝트명을 입력하면 모두 설치 완료 후 웹 title 명으로 지정된다. (nuxt.config.js에서 수정 가능) 자신이 원하는 방식 선택 이것도 자신이 원하는 방식 선택 보통은 Npm을 선택하지 않을까 싶다. Package..

처음엔 컴포넌트로 로딩 파일을 만들고 Vuex를 이용하여 공통적으로 사용할 수 있게 만들었었다. 만들고 나서 괜찮은 것 같은데? 하고 있었는데 NuxtJS 공식 홈페이지 Docs를 쭉 보다가 loading이라는 게 있어서 봤다. nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading The loading Property Nuxt.js uses its own component to show a progress bar between the routes. You can customize it, disable it or create your own component. nuxtjs.org nuxt.config.js에서 loading이라는 옵션을 사용하면..

비밀번호 같은 데이터는 보통 단방향 암호화 알고리즘을 사용해서 암호화한다. 단방향 암호화란 암호화된 문자열을 다시 원래 문자로 복호화를 할 수 없는 암호화다. 다시 복호화할 수 없어서 해시 함수라고 부르기도 한다. 해시 함수에 대해선 minu0807.tistory.com/45 해시 함수 (hash function) 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수. 소프트웨어의 성능과 보안을 책임지는 중요한 요소 중 하나이다. 해시 함수를 사용하면 데이터양이 많아져도 일괄된 성능을 보 minu0807.tistory.com 전문적으로 상세하게 작성한 글은 아니지만 해시함수에 대해 간략하게 작성은 해두었다. 사용방법은 간단하다. 노드에서 제공하는 crypto를 가져와 쓰면 된다. 사용 방식은 co..

v2.vuetifyjs.com/ko/components/forms/ Form component — Vuetify.js The form component provides a wrapper that makes it easy to process and control validation states of input components. v2.vuetifyjs.com 위 경로에서 제공해주는 정보를 확인해보면, vuetify 자체에서 제공해주는 form 유효성 검사 기능이 있고, npm 모듈을 사용해서 검사하는 2가지가 있다. (vuelidate, VeeValidate) 모듈 2가지는 한번 봤는데 설치하기도 귀찮고... 해서 그냥 자체 제공하는 걸로 사용해봤다. 사용 방법은 간단하다. 유효성 체크를 할 v-text..

return-object 속성을 주면 된다. 먼저 속성을 안 주고 사용했을 때의 값 예시 data() { return { authList: [ { name: '관리자', value: 'A'}, { name: '일반 사용자', value: 'M'} ], user_auth: '', user_auth_rule: [ v => !!v || '권한은 필수 선택 사항입니다.' ], } }, 이제 셀렉트 박스를 선택 후 버튼을 눌러서 this.user_auth를 console.log로 찍어보면 선택한 데이터의 value값만 가지고 온다. 보통의 경우에는 이렇게만 써도 상관은 없지만 종종 value값과 해당 text도 가지고 와야 할 때가 있는데 그럴 때 return_object를 사용하면 된다. 사용했을 때의 예시 r..

에러가 발생한다거나 특정 상황에 이전 페이지로 돌아가는 방법으로 this.$router.go(-1); 이 방식을 사용했었다. 하지만, 이런 방식은 별로 선호하지 않아서 방법을 찾아봤었다. -1로 했을 때 분명 특수한 상황에 생각했던 페이지로 이동하지 않을 상황이 분명 나올 것이라 생각했다. 그래서 찾아본게 $nuxt를 사용하는 방법이다. methods: { back() { try { console.log(this.$nuxt.context); } catch (err) { console.log('back error', err); } } }, 위 소스는 뒤로가기 버튼을 눌렀을 때 실행되는 메소드이다. vue파일에서 위 코드를 입력 후 페이지 이동을 한 뒤 위 코드를 실행시키면 아래와 같은 정보들이 나온다. 다..

길벗 출판사의 Node.js 교과서 개정2판에서 설명해준 내용 중 일부입니다. 노드 7.6 버전부터 지원되는 기능이다. ES2017에서 추가되었으며, 알아두면 정말 편리한 기능이다. 특히 노드처럼 비동기 위주로 프로그래밍을 해야 할 때 도움이 많이 된다. 프로미스가 콜백 지옥을 해결했다지만, 여전히 then과 catch가 계속 반복되기는 한다. async/await 문법은 프로미스를 사용한 코드를 한 번 더 깔끔하게 해준다. 책도 읽고 소스도 따라 쳐보고, 구글링해서 설명과 소스를 봤었는데 처음에 이해하는데 좀 오래걸렸었다. const time = 1; function sleep (t) { //슬립용 return new Promise( (resolve, reject) => { const time = t ..

노드는 코드를 모듈로 만들 수 있다. 너무 어렵게 생각할 필요는 없고 그냥 "특정한 기능을 하는 함수", "변수들의 집합", "필요한 코드들을 모아서 만든" 파일 1개가 그냥 모듈이고, 이 자체가 한 개의 프로그램이고 다른 곳에서 이걸 재사용할 수 있다. 소스는 보통 이런식이다. const a = 'a'; const b = { bb: 'bb', cc: 'cc' } function c () { console.log('cc'); } function d (val) { console.log(val); } module.exports = { a, b, c, d } 변수나, 객체, 함수 등 필요한 소스 코드를 작성하고 마지막에 module.exports 사용하면 모듈화가 끝이다. 저 파일명이 md.js라고 치고 저 ..

이론적인 내용은 많은 사람들이 다룬 글들이 많기 때문에 간략하게 사용방법만 작성 쿼리에다가 sort를 주고 검색을 하면 결괏값 안에 각 hits 별로 sort 값이 출력이 된다. 이런 식으로 출력이 되는데 현재 사용한 쿼리는 따로 size를 주지 않아서 총 725개의 데이터 중에서 CC_MK_DT를 기준으로 오름차순 정렬 후 10개의 데이터만 출력이 됐다. 여기서 이제 다음 10개의 데이터를 조회하고 싶으면 마지막 데이터의 sort 값을 쿼리에다가 search_after와 값을 넣어주면 된다. 이런 식으로 search_after에다가 계속 결과 값의 맨 마지막 sort 값을 넣어서 조회하면 끝까지 조회할 수 있다. 만약 맨 끝에 도달하면 이렇게 아무것도 안 나온다.

사전 작업 (NPM 설치 및 nuxt.config.js 설정) express 설치 npm install express @nuxtjs/axios 설치 npm install @nuxtjs/axios nuxt.config.js에다 serverMiddleware 추가 axios baseURL은 필요하면 추가. 본인은 ElasticSearch 연결할 때 이건 따로 필요 없어서 사용하진 않음. 만약 proxy를 사용하고 싶으면 npm install @nuxtjs/proxy 로 설치 후 난 필요 없어서 주석처리 해놓긴 했는데 proxy를 true로 바꾼뒤 주석 제거해서 저런 식으로 작성해서 사용 가능. 프로젝트 내에 api 디렉터리 생성 후 index.js 파일 생성 이후에 index.js 에다가 다음과 같이 소스 ..