Song Minu

vue-timeago3는 현재 타입스크립트를 사용할 수 있도록 처리되어 있지 않다. 이전 글에서 작성한 방법대로 import 후 사용해도 아마 되긴 할 텐데, 선언한 곳에 빨간 줄이 생기고 확인해보면 아래 사진과 같은 문구를 확인할 수 있을 것이다. 그래서 npm run dev로 실행은 되지만 빌드는 되지 않는다. 해결 방법은 위 문구에서 마지막 문장을 해주면 된다. declare module 'vue-timeago3'; 을(를) 포함하는 새 선언 (.d.ts) 파일 추가 먼저 프로젝트 최상위 위치에 @types 디렉터리를 생성한다. 그리고 그 안에 선언 파일을 추가할 모듈명과 똑같은 디렉터리를 생성하고 index.d.ts 파일을 생성한다. 모듈명이 vue-timeago3 였기 때문에 똑같이 만들어 준다..

글 예시로 작성한 소스 및 프로젝트는 Vite, Vue3와 디자인 프레임워크 퀘이사를 사용하였습니다. 먼저 예제 화면 각 이미지 하단 캡션 글자가 vue-timeago3를 이용해 보여주었다. 사용방법은 매우 간단하다. # 모듈 설치 npm i vue-timeago # 한글 표시를 위한 모듈 설치 npm i date-fns 먼저 이렇게 2개를 설치. main.js를 열어서 아래 소스를 추가한다. import timeago from 'vue-timeago3'; app.use(timeago); 이러면 준비가 끝난다. 사용하고자 하는 컴포넌트를 열어서 코드를 작성 이게 끝이다. 데이터의 날짜도 new Date()를 이용해 값을 셋팅해도 되고, 위 소스에서 aDay2~6처럼 string으로 그냥 타이핑해도 된다...

10월 말쯤, 어디서 보고 신청을 했었는지 기억이 안 나는데 아마 핸드폰으로 인터넷 돌아다니다 광고가 뜬 걸 보고 신청했던 것 같다. 이런 기술 컨퍼런스를 한 번도 안 가봐서 경험해보고 싶어 신청을 했었다. 신청하면 추첨을 통해 당첨된 사람만 참가할 수 있다는데 신청해놓고 까먹고 있다가 11월 15일에 참가가 확정되었다는 이메일을 받고 생각이 났었다. 일정은 09:00 ~ 10:00 등록 10:00 ~ 10:40 키노트 11:00 ~ 11:40 세션1 11:40 ~ 13:00 점심시간 13:00 ~ 13:40 세션2 14:00 ~ 14:40 세션3 15:00 ~ 15:40 세션4 16:00 ~ 16:40 세션5 17:00 ~ 17:40 세션6 11시부턴 강연장 같은 곳이 총 7 트랙이 있고, 각 트랙별로..

현재 친구들과 저녁 즈음엔 배틀그라운드를 많이 하고 있다. 그러다 보니 dak.gg와 op.gg를 자주 사용하고 있다. 양쪽 다 사용해보니 "이런 정보도 보여줬으면 좋겠는데...", "여긴 이게 없네?", "오 여긴 이것도 있네?" 등등의 생각이 들었었다. 그래서 아 그럼 내가 한 번 내 입맛에 맞게 만들어보면 어떨까? 하는 생각으로 시작했다. 기술 스택은 Vite, Vue3(compositionAPI), TypeScript, Pinia, Element+ 로 시작했고 https://developer.pubg.com/ Official PUBG API Start building your own website today using official PUBG data. developer.pubg.com 여기서 A..

빌더 패턴이란? 복잡한 객체의 생성을 단순화하는 생성 디자인 패턴으로, 단계별로 객체를 만들 수 있다. 복잡한 객체를 만들 때 가독성과 일반적인 개발자 사용성이 크게 향상된다. 어떨 때 사용하면 좋은가? 빌더 패턴의 장점을 살릴 수 있는 가장 명확한 상황은 인자의 목록이 길거나, 많은 복잡한 매개변수를 입력으로 사용하는 생성자가 있는 클래스이다. 일반적으로 이러한 종류의 클래스들은 모두 완전하고 일관된 상태의 인스턴스를 만들기 위해, 너무 많은 매개변수들을 필요로 하기 때문에 고려해볼 필요가 있다. 문제의 클래스 예시 class Boat { constructor( hasMotor, motorCount, motorBrand, motorModel, hasSails, sailsCount, sailsMateri..

defineEmits를 따로 import 하지 않아도 된다. defineEmits에 사용할 이름?을 배열로 먼저 담아두고 필요한 부분에 사용하면 된다. https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits TypeScript with Composition API | Vue.js Join in-person 1-3 November 2022, Toronto, Canada Join the Vue community ONLINE at VueConf Toronto from 1-3 November 2022! Use the code VUEJS to get 25% off on tickets! vuejs.org

나는 코딩이 재밌다. 아니 재미있었다. 5년이 넘는 기간 동안 코딩을 하면서 재미있다와 재미없다의 수많은 반복이 있었고, 지금은 살짝 다시 “재미없다”가 찾아온 것 같다. 보통 재밌을 때는 생각한걸 코딩을 했을 때 막힘없이 또는 막혀도 금방 해결해서 얻는 성취감으로 인해 재미있다. 특히 이게 될까? 하는 막연한 생각으로 시작해서 이게 되네?가 되면 정말 재밌다. 재미없을 때는 막힌 게 내가 해결하기엔 너무 큰 벽이 느껴지고 아무리 방법을 고민하고, 구글링을 해도 해법을 못찾는게 하루이틀이 넘어가기 시작하면 점점 재미가 없어지는 이유 중 하나였다. 물론 이러다 갑자기 또 무슨 아이디어가 떠올라서 해보니 돼서 해결되면 마냥 재밌다. 하지만 지금 재미가 없는건 그리고 최근 이런 저런 일들을 겪다 보니 현타가 ..

최근 vue2 버전의 vue-cli와 vuetify를 이용해 프로젝트를 하나 만들어야 할 일이 생겼었다. 기존에 만들어 두었던 vue2의 vue-cli는 너무 오래전에 만들어 둔 거라 새로 만들고 싶었다. 그동안 vue2는 nuxt가 편해서 사용했었고 vue3는 vite를 이용해서 프로젝트를 만들었어서 별 생각 안 했었는데 오랜만에 vue-cli와 vuetify를 사용하려고 하니 생각이 나지않아 기록해둔 원노트와 노션을 봤지만, 옛 버전의 내용들이라 제대로 구현이 안 되는 상황이 발생해서 최신 날짜로 작성하고자 블로그에 글을 남기기로 했다. vue-cli 설치 먼저 @vue/cli를 설치한다. npm i -g @vue/cli 전에는 이 @vue/cli가 @붙은 건 vue3, @가 안 붙은 건 vue2로 ..

process.nextTick() 현재 진행 중인 작업의 완료 시점 뒤로 함수의 실행을 지연시킨다. 콜백을 인수로 취하여 대기 중인 I/O 이벤트 대기열의 앞으로 밀어 넣고 즉시 반환한다. 현재 진행중인 작업이 제어를 이벤트 루프로 넘기는 즉시 콜백이 실행된다. process.nextTick()으로 지연된 콜백은 마이크로태스크라 불리며, 현재의 작업이 완료된 후에 바로 실행되며 다른 I/O 이벤트가 발생하기 전에 실행된다. 이미 예정된 I/O 보다 먼저 실행되기 때문에 재귀 호출과 같은 특정 상황에서 I/O 기아(starvation)을 발생시킬 수 있다. setImmediate()와 setTimeout() process.nextTick()과 목적은 유사하지만 그 의미는 다르다. 이미 큐에 있는 I/O 이..

이벤트 디멀티플렉싱 대부분의 운영체제는 논 블로킹 리소스를 효율적인 방법으로 처리하기 위한 기본적인 메커니즘인 동기 이벤트 디멀티플렉서, 이벤트 통지 인터페이스를 제공한다. 멀티플렉싱은 전기통신 용어로 여러 신호들을 하나로 합성하여 제한된 수용범위 내에서 매개체를 통하여 쉽게 전달하는 방법을 나타낸다. 디멀티플렉싱은 신호가 원래의 구성요소로 다시 분할되는 작업이다. 동기 이벤트 디멀티플렉서는 여러 리소스를 관찰하고 이 리소스들 중에 읽기 또는 쓰기 연산의 실행이 완료되었을 때 새로운 이벤트를 반환한다. 그리고 이점은 동기 이벤트 디멀티플렉서가 처리하기 위한 새로운 이벤트가 있을 때까지 블로킹된다는 점이다. watchedList.add(docketA, FOR_READ); // (1) watchedList...