Hi! 160

원노트와 노션

현재 메모와 정리, 문서화를 목적으로 원노트와 노션을 사용하고 있다.기억력이 좋지 않기도 해서 가능하면 항상 메모를 하고 나중에 다시 찾아보는 데 시간을 줄이기 위해서 사용하기 시작한 게 어느덧 5년이 넘는 시간을 사용했다.현재 원노트는 17년도부터 사용했고, 작년 말부터는 노션을 추가로 사용하기 시작했다. 원노트처음 회사에 입사했을 때 회사에서 에버노트를 사용했어서 나도 에버노트를 써봤었는데개인적인 이유로 마음에 들진 않았다.지금도 그런진 모르겠지만 내가 사용할 당시를 기준으로 무료 버전은 기기 연동 수 제한, 용량 제한도 있고, 메모하는 데 있어 뭔가 내가 생각할 때 좋다는 느낌은 없었다.그래서 에버노트 말고 다른게 뭐가 있을까 하고 찾아보다 원노트를 알게 되었다.마이크로소프트 계정 1개로 핸드폰, ..

ETC 2022.07.27

[토이프로젝트] NuxtJS로 채팅 사이트 만들기

작업한 깃 주소 https://github.com/smw0807/nuxt_chatting_room GitHub - smw0807/nuxt_chatting_room: vue2 기반 nuxt와 socket.io nuxt-socket-io를 이용한 채팅방 vue2 기반 nuxt와 socket.io nuxt-socket-io를 이용한 채팅방. Contribute to smw0807/nuxt_chatting_room development by creating an account on GitHub. github.com 개인적으로 모르는거나 새로운걸 습득하기 위해 보다보면 한 번에 이해가 되는 것들이 있고, 한 번에 안돼서 몇 번 더 보면 이해가 되는 것들도 있는 데 종종 이상하게 아무리 몇 번을 봐도 이해가 안 되..

ETC 2022.07.22

[VueJS] Veutify v-card에 scrollTo 적용방법

vuetify를 이용해 채팅창을 구현 중에 필요해서 찾았는 데 찾는 데 생각보다 시간이 걸린 김에 블로그에 작성... 정확한 이유를 모르겠는데. vuetify 컴포넌트에 ref 값을 주고 this.$refs.로 scrollHeight를 가져오는 게 안 된다. 다른 컴포넌트들 모두 테스트를 해보진 않았지만... 일단 v-card에서는 안됐다. 처음엔 ref를 사용하면 될 것 같아서 v-card에 ref="msgCard"를 넣고, watch 에서 메세지 데이터를 받을 때마다 스크롤 높이를 체크하면서 처리하려고 했었다. 하지만 계속 undefined가 떠서 찾아보니 id 값을 주고 처리해야 됐다. 이렇게 id 값을 넣어주고, 아래와 같이 작성하면 된다. vuetify 컴포넌트 말고 기본적으로 제공되는 html..

VueJS 2022.07.18

[NodeJS] Error : Cannot overwrite users model once compiled

이미 정의된 모델이 있는 상태에서 다시 또 모델을 정의하려는 경우 발생하는 에러다. 처음 이 에러 문구를 보고 내 로직상에서 이 상황 자체가 좀 이해가 안 됐었는 데 먼저 해결 방법부터 말하면 import mongoose from "mongoose"; const { Schema } = mongoose; const userSchema = new Schema({ email: { type: String, required: true, unique: true, }, password: { type: String, required: true, }, name: { type: String, required: true, }, nickName: { type: String, required: true, }, image: St..

Node.js 2022.06.24

[JS] for문과 파이프라인 처리 속도 테스트

리팩터링 2판을 읽다 궁금해서 해보고 싶은 것들이 있었다. 나중에 해봐야지 해봐야지 하다가 오늘 드디어 해봤고... 이 글이 도움이 될지.... 다른 사람들이 볼지... 는 모르겠지만, 혹시 나처럼 궁금한 사람들도 있을 수도 있지 않을까? 하는 생각으로 블로그에 작성하기로 했다. 확인해보고 싶었던 부분 1. 반복문을 분리해서 두 번 실행하는 방식으로 로직을 나눠도 성능에 큰 영향은 없다. 2. 반복문을 파이프라인 방식으로 변경하기 1번에서 궁금한건 그냥 진짜 한 번에 하는 거랑 분리해서 두 번 하는 거랑 큰 차이가 없나? 이 정도였고, 2번이 궁금한건 파이프라인 방식으로 filter와 map을 이어 붙이는 방식과 for문 방식의 처리 속도 차이를 직접 확인해보고 싶었다. 궁금한 건 또 직접 해서 눈으로 ..

JavaScript 2022.06.09

[ElasticSearch] dynamic strict 옵션

https://minu0807.tistory.com/106 [ElasticSearch]index 생성시 DynamicTemplate 사용 일반적으로 인덱스를 생성할 때 맵핑 정보를 지정하고 사용하다 보면, 불편한 점이 있다. 이런 식으로 인덱스가 생성되었다고 할 때, 저기에 입력된 4개의 맵핑 정보를 제외하고 실수로 다른 정 minu0807.tistory.com 이 글에서 잠깐 언급했던 옵션이다. 인덱스를 만들면서 맵핑 정보를 지정할 때 저 옵션을 넣고, 인덱스를 생성한 다음에 데이터를 넣을 때, 없는 맵핑 정보가 포함된 데이터가 들어오면 에러가 발생한다. displayName: 'BadRequest', path: '/user_test2/_doc', query: {}, body: { error: { ro..

ElasticSearch 2022.05.15

[Vue3] quasar input TextField 유효성 검사하기

지난번 글에서 Vite+Vue3 프로젝트에 jwt 로그인 기능 구현에 관한 글을 작성했었다. 디자인 프레임워크로 퀘이사를 사용해서 만들었었는데 기능을 구현하고 나중에 다시 봐보니 로그임 폼에 대한 유효성 검사 기능이 없어서 퀘이사에서 제공하는 유효성 검사 기능에 대해 한번 알아봤다. 유효성 기능 구현 자체는 Vuetify와 유사해서 크게 어려운 부분은 없었다. 1. form에 ref 추가 먼저 해야할 부분은 ref 추가이다. 공식 홈페이지에서 유효성 검사를 할 각 q-input에다가 ref를 추가해서 따로따로 하는 예시만 있어서 vuetify 처럼 한 번에 하는 건 안 되는 건가? 해서 해봤는데 잘 된다. 내가 작성한 방법은 이렇다. q-form에다가 ref값을 지정했고, 각 q-input에다가는 검증 ..

VueJS 2022.05.08

[VueJS] Vite+Vue3 JWT기능 구현하기

가장 기본적인 기능이면서 구현하기 까다로운 로그인 기능... vue2 기반의 vue-cli와 nuxt도 jwt 기능을 활용한 로그인 기능에 대한 글을 작성했었는데 솔직히 너무 초반에 공부하면서 만들어본 거라 내용 자체가 마음에 들지 않았다. (글을 다시 쓰고 싶지만 귀찮아서 못하고있다.) 최근 vite+vue3로 vue3에 대해 조금씩 접해보다 jwt를 이용한 로그인 기능을 구현해보자 해서 만들어봤다. 토큰을 발급, 검증하는 백엔드 부분은 다루지 않고 웹단만 작성했습니다. 우선 프로젝트에 axios, vue-router, vuex가 모두 세팅되었다는 가정하에 시작합니다. 그리고 디자인 프레임워크로 퀘이사를 사용했습니다. 추가적으로 설치가 필요한 건 vue3-cookies 이걸 설치해야 합니다. npm i..

VueJS/Vite 2022.04.25

[VueJS] nuxt-socket-io 모듈 사용해보기

웹소켓 관련해서 직접 제대로 해본 적이 없어서 ws를 이용해 express와 nuxt에 만들어서 해본 뒤 socket.io도 해봤었다. socket.io가 ws에 비해 제공되는 기능이 많다고 해서 해봤고, nuxt에서는 nuxt-socket-io라는 모듈을 이용해 socket.io를 사용할 수 있길래 사용해봤다. 테스트는 vue2 기반의 nuxt 프로젝트에서 진행했습니다. 우선 socket.io를 열어둔 서버단 소스는 소켓 쪽 소스만..(넷 상에 참고할 소스들이 많기에...) const SocketIO = require('socket.io'); module.exports = (server) => { const io = SocketIO(server, { path: '/socket.io', cors: { o..

VueJS/Nuxt 2022.04.22

[VueJS] Vue3 CompositionAPI로 자식 컴포넌트 접근

vue3 공부 중 template refs를 보다 보니 vue2 컴포넌트에서 자식 컴포넌트 안의 methods를 실행시키는 걸 사용했던 게 생각나서 vue3의 compositon API에서는 어떻게 하는지 궁금해서 찾아봤었다. 테스트는 vite+vue3에 디자인프레임워크로 퀘이사를 사용했습니다. vue2에서 사용하던 optionsAPI 방식에서는 this.$refs.ref이름 형식으로 자식 컴포넌트에 접근이 가능했다. vue3에서 제공하는 compositionAPI 방식은 this를 사용할 수 없고, 컴포넌트에 입력된 ref와 이름이 같은 변수를 만들고 ref(null)을 주면 된다. 간단하게 보면 아래와 같다. ... //vue2 optionsAPI 의 접근 방법 this.$refs.child.~~ /..

VueJS 2022.04.03