Song Minu

공부하기 위해 구매했던 Vue.js 책을 다 읽을 때쯤 회사에서 vue-cli 기반으로 jwt를 이용해서 로그인 기능과 게시판 리스트까지만 구현을 해보라 해서 만들어봤었다. 다른 부분은 다 쉬웠는데 axios발생이나 컴포넌트 전환 시 accessToken이 없을 경우 토큰을 재발급 하는 과정이 좀 오래 걸렸다. 구글링을 통해 많은 곳에서 참고했지만 원하는 결과가 잘 나오지 않아서 생각보다 많은 시간을 소비했다. 목표 1. vue-cli와 vuex 기반의 웹 애플리케이션에 JWT(Json Web Token)을 이용하여 로그인 기능 구현 2. 로그인시 토큰 값을 쿠키(Cookies)에 저장할 것 3. 토큰 저장시 유효기간이 1분인 accessToken과 1시간인 refreshToken 이렇게 2개의 토큰을 ..

먼저 elasticsearch 패키지가 없다면 설치 npm install elasticsearch 소스 const elasticsearch = require("elasticsearch"); const client = new elasticsearch.Client({ hosts: ["http://localhost:9200"] //프로토콜이 https이고 elasticsearch에 id, password가 있다면 //hosts: ["https://es_id:es_pass@localhost:9200"] }); async function test() { try { const rs = await client.search({ index: 'user_data', body: { "query": { "bool": { "m..

npm으로 vue, vue-cli, node, git 등 다 설치 되어 있는데 vue init 명령어 와 같은 명령어를 입력했을 때 아래와 같은 에러가 발생하면 vue 앞에 .cmd를 붙여서 해볼것 ex) vue.cmd init webpack petstore

필드 타입이 ip인 필드는 범위로 저장할 수 없고, 단일 ip만 저장이 가능하다. 필드 타입이 ip_range인 필드는 범위로 저장할 수 있고, 단일 ip로 저장할 수 없다. 구조는 저런 형식이다. 그리고 둘 다 데이터를 저장하는 방법도 다르다. type이 ip인 필드는 저장할 때 "GEAR_IP":"1.1.1.1" 이런 식으로 단일 데이터로 등록해야 한다. type이 ip_range인 필드는 저장할 때 gte와 lte를 사용해야한다. ip 타입에 ip_range 방식으로 등록을 시도하면 에러가 발생하고, ip_range도 ip 방식으로 등록을 시도하면 에러가 발생한다. 그런데 검색하는 방식은 둘 다 같은 방식으로 사용할 수 있다. ip 타입이어도 range를 써서 위 사진처럼 범위로 검색하면 해당되는 ..

엘라스틱서치로 데이터 검색 중에 종종 특정 필드가 없는 데이터만 뽑아오거나, 특정 필드가 있는 데이터만 뽑아야 하는 상황이 종종 있었는데 이럴 때 사용했다. { "query": { "bool": { "must": [ { "exists": { "field": "TW_CTR_GUARD_ID" } } ] } } } 위 쿼리는 TW_CTR_GUARD_ID 필드가 존재하는 데이터를 뽑는 쿼리이다. 반대로 저 필드가 존재하지 않는 데이터를 뽑고 싶으면 must말고 must_not으로 해서 검색하면 된다.

엘라스틱 서치에서 어그리게이션을 하면 기본적으로 나오는 순서는 doc_count가 높은 것부터(내림차순) 나온다. 여기서 doc_count가 아닌 key 값으로 오름차순 내림차순으로 뽑고 싶으면 { "order": { "_key" : "asc" } } , { "order": { "_key" : "desc" } }를 사용하면 된다. sort를 하고 싶으면 아래와 같이 사용하면 된다. doc_count를 오름차순으로 뽑고 싶으면 아래 처럼 하면 된다. order를 주지 않으면 기본 값으로 doc_count가 내림차순이다.

공부하는데 자꾸 까먹고 볼 때마다 헷갈려서 작성하면서 다시 외우려고 작성해둠 props는 전달 받을 속성 (위에선 txt1과 txt2가 전달받을 속성) template안에 {{txt1}}은 전달 받은 txt1의 값이 표기됨, {{txt2}}는 txt2의 값 여기서 txt1="asdf'는 입력한 값 그대로 txt1로 값을 전달함 v-bind:txt2="text1"은 부모 인스턴스에 있는 데이터 text1의 값을 가져와서 전달함 (:txt2="text1"로도 쓸 수 있음) v-bind:txt2="text1"말고 다른 값을 선언하면 부모 인스턴스에 선언된 게 text1 말곤 없기 때문에 에러 출력 그리고 이 리터럴 방식은 문자열로만 전달된다. text1="1111"로 넘기면 정수 값 1111로 오는 게 아니라..

"Component template requires a root element, rather than just text." 컴포넌트를 작성할 때 템플릿 안에 있는 문자에 태그로 감싸지 않으면 발생하는 에러. 이렇게 컴포넌트 template안에 태그 없이 작성하면 아래와 같은 에러가 발생한다. 렌더링이 되지 않는다. 아래 코드와 같이 태그를 넣어주면 된다. 난 예시로 p태그를 넣었고 본인이 사용 용도에 맞게 작성하면 된다. , 등등

v-for는 객체, 배열, 컴포넌트와 함께 사용할 수 있다. 기본 사용 방법으로는 v-for"item in items" 의 형태 items는 순환하려는 배열 데이터의 출처를 의미하고, item은 순환되는 요소의 별칭이다. {{item}} {{num}} ✔ 이런식으로도 사용할 수 있다. 이 외에 v-for="(value, index) in items" v-for="(value, name, index) in items" 이렇게도 사용할 수 있다. {{idx}} : {{val}} [{{idx}}] {{name}} : {{val}}

이것만 알아두고 조심하면 된다. v-if 이후에 v-else나 v-else-if를 사용할 거라면 v-if 이후에 바로 써야 한다. 중간에 다른 요소가 있으면 인식하지 못한다. 아래 코드는 잘못된 예이다. {{ count }}번 클릭!! 버튼 비활성화! add 현재 클릭 횟수 : {{ count }} 버튼을 클릭해보세요! 위 코드를 보면 지금 p태그에 v-if, v-else-if, v-else를 각각 사용했는데 v-if 다음에 바로 v-else-if가 아닌 button 태그가 들어가 있다. 그럼 다음과 같은 에러가 발생한다. 정상적인 방법으로 하면 에러 출력없이 잘 된다. {{ count }}번 클릭!! 버튼 비활성화! 현재 클릭 횟수 : {{ count }} 버튼을 클릭해보세요! add 정상 출력 후 각..