티스토리

Song Minu

검색하기

블로그 홈

Song Minu

minu0807.tistory.com/m

공부 그리고 메모

구독자: 13

방명록 방문하기

주요 글 목록

[Nuxt3] GraphQL 사용하기(nuxt-graphql-client) Nuxt3에는 GraphQL을 사용해 본 적이 없어서 찾아봤다.npx nuxi@latest module add graphql-client이걸 입력해 nuxt 모듈을 추가한다.그리고 nuxt.config.ts에 modules 안에다 nuxt-graqph-client를 추가하고, runtimeConfig에 graphql 이 적용된 백엔드 주소를 넣어주면 된다.내가 작성한 GQL_HOST 값은 http://localhost:5001/graphql임이것만 해주면 끝.그리고 queries 디렉터리를 만들고 .gql 파일을 만들면 된다.이건 테스트를 위해 현재 백엔드에 작성한 쿼리다.이걸 실행하기 위해 nuxt에서 queries 디렉터리 안에 test.gql 파일을 생성 후 아래와 같이 쿼리를 작성했다.추가적으로 .. 공감수 0 댓글수 1 2024. 10. 27.
[Docker] docker 커맨드 컨테이너 환경 표시커맨드 실행 설명docker version도커 클라이언트와 서버 버전 표시docker info구체적인 환경 정보 표시컨테이너의 3대 기능컨테이너 이미지 빌드커맨드 실행 예 설명docker build -t 리포지터리:태그 . docker image build -t 리포:태그 .현 디렉터리에 있는 Dockerfile을 바탕으로 이미지를 빌드docker images docker image ls로컬 이미지 목록docker rmi 이미지 docker image rm 이미지로컬 이미지 삭제docker rmi -f ‘docker images -aq’ docker image prune -a로컬 이미지 일괄 삭제이미지의 이동과 공유커맨드 실행 예 설명docker pull 원격_리포지토리[:태그]원격 리.. 공감수 6 댓글수 5 2024. 10. 1.
[K8s] kubectl 커맨드 kubectl 커맨드의 기본kubectl 커맨드의 기본 구조는 다음과 같이 세 부분으로 구성된다.커맨드로 동작을 지정리소스 타입과 이름으로 대상이 되는 오브젝트를 지정옵션kubectl [name] [option]커맨드커맨드 사용 예 개요getkubectl get -f get은 지정한 오브젝트의 목록을 한 줄에 하나씩 출력kubectl get kubectl get kubectl get describekubectl discribe -f get보다 더 자세한 정보를 출력kubectl discribe kubectl discribe kubectl discribe applykubectl apply -f 매니페스트에 기술된 오브젝트가 존재하지 않으면 생성하고, 존재하면 변경createkubectl cr.. 공감수 2 댓글수 2 2024. 10. 1.
디스코드 봇을 만들기 위한 애플리케이션 생성 https://discord.com/developers/applications Discord Developer Portal — API Docs for Bots and DevelopersIntegrate your service with Discord — whether it's a bot or a game or whatever your wildest imagination can come up with.discord.com여기로 접속 한다. 우측 상단에 있는 저 버튼을 누른다. 애플리케이션 이름을 입력 후 Create 클릭 생성하면 이 페이지로 이동된다.여기서 애플리케이션의 아이콘, 설명, 태그 등 정보를 입력할 수 있고 약관 링크, 개인정보보호링크 같은 것도 추가할 수 있다.필요에 따라 입력하면 된다.그리.. 공감수 0 댓글수 4 2024. 3. 23.
[NestJS] winston을 이용한 커스텀로거 nest에서 제공하는 내장 로거를 사용하면 이러한 형식 로그가 출력이 된다. 내장 로거를 커스텀할 수도 있긴 한데, 위 포맷이 마음에 들었고, 맨 앞의 [Nest]만 내 프로젝트 이름을 넣고 싶었다. 하지만 내장 로거로는 할 수 없고 winston 패키지를 이용해야 한다. 설치 npm i nest-winston winston 적용 커스텀 로거를 만들어서 내장 로거를 대체할 생각이다. 내장로거로 대체하지 않고 따로 사용한다고 하면 이런 식으로 사용해야하는데...가져오는 것도 많고 손이 가지 않는 방식이라 내장로거를 바꾸는걸 택했다. src 안에 logger 디렉터리 생성 후 그 안에 winston.logger.ts 파일 생성 후 아래와 같이 작성 import { WinstonModule, utilities.. 공감수 0 댓글수 0 2024. 3. 19.
[NestJS] 환경변수 설정(env) NestJS 공식홈페이지를 보면 환경변수 설정에 대해서 다양한 방법들을 확인할 수 있다. 그중 난 Joi를 이용한 방법이 가장 좋은 방법 같아서 이 방법을 사용하고 있다. 패키지 설치 npm i @nestjs/config joi 적용 공식 문서에선 app.module.ts의 imports 안에 선언에서 작성하는 예시를 보여준다. 난 app.module.ts에는 만들어진 모듈이나 프로바이더를 가져와서 딱 넣기만 하는 방식으로 만들고 싶어서 좀 수정했다. 먼저 src 밑에 config 디렉터리를 생성 후 config.module.ts 생성 후 아래와 같이 작성한다. import { Module } from '@nestjs/common'; import { ConfigModule as NestConfigModu.. 공감수 0 댓글수 0 2024. 3. 18.
[VueJS] vite로 만든 vue프로젝트 GitHub Pages에 올리기 https://minu0807.tistory.com/154 [토이프로젝트] PUBG your.stat 길고 긴 작업 끝에 드디어 끝났다. 완벽하게 끝낸 건 아니지만 너무 오랜 시간 작업을 했고, 다른 하고 싶은 것들을 계속 못하고 있어서 이 정도로 마무리하기로 했다. 해결할 수 없어 포기한 부 minu0807.tistory.com 여기서 만들었던 토이 프로젝트를 다른 곳에서 무료로 배포한 상태에서 방치를 하고 있었다. 최근 확인할 게 있어서 접속을 해보니 꺼져있길래 다시 배포하려고 하니 안 되는 상황이 발생했다. 처음 저 프로젝트를 마무리하고 깃허브에서 제공하는 pages에 배포를 해보려다가 봐도 이해가 잘 안 돼서 안 하고 있다가 오늘 적용시켰다. 1. 배포종류 먼저 레파지토리의 프로젝트를 pages .. 공감수 0 댓글수 2 2023. 12. 31.
[NestJS] 설치 및 Prisma, GraphQL 적용하기(+MySQL) 예전부터 NestJS가 자바스크립트로 스프링을 경험해 볼 수 있다고 해서 사용해보고 싶은 프레임워크 중 하나였다.하지만 나중에 공부해봐야지....하면서 계속 미루고 미루고 있었다.그러던 중에 최근 NestJS를 사용해서 백엔드 개발 일을 할 수 있는 좋은 기회가 생겨 하게되었다.일로 접한다면 미룰 수 없다는 생각이 들었고 이때 아니면 또 계속 미룰 것 같다는 생각에 바로 한다고 했다.프로젝트는 NestJS에 ORM으로 Prisma를 사용하고 있었고, 클라이언트와 서버 간의 데이터 요청과 전달을 해주는 쿼리 언어 및 런타임으로 GraphQL을 사용하고 있었다.3개다 들어보기만 하고 처음 만져보는 거라 집에 와서 설치부터 세팅을 직접 해봤다.NestJS설치 및 프로젝트 생성# NestJS cli 설치npm .. 공감수 0 댓글수 0 2023. 12. 2.
[VueJS] Nuxt3에 pinia(피니아) 적용하기 패키지 설치 yarn, npm 중 본인의 환경에 맞는 걸로 설치한다. yarn add pinia @pinia/nuxt npm install pinia @pinia/nuxt nuxt.config.ts 수정 modules에 설치한 nuxt용 피니아를 적용시킨다. export default defineNuxtConfig({ modules: ['@pinia/nuxt'], }); 이러면 끝이다. nuxt 모듈 패키지라 적용방법이 쉽다. store 디렉터리 및 파일 추가 프로젝트 내부에 store 디렉터리를 추가한다. 그리고 그 안에 테스트를 위해 myStore.ts를 만들고 아래와 같이 소스코드를 작성한다. import { defineStore } from 'pinia'; export const useMyStor.. 공감수 0 댓글수 2 2023. 9. 8.
[VueJS] Nuxt3에서 파이어베이스 사용해보기(+TS) 전에 vite, vue3, typescript와 파이어베이스를 이용해 프로젝트를 만들었었다.(https://minu0807.tistory.com/154) 최근 시간 날 때 nuxt3를 공식문서를 보면서 조금씩 이용해 보다가 vuefire라는 걸 이용해 파이어베이스를 쉽게 사용할 수 있는 것 같아 한 번 사용해보려고 했으나.... 생각보다 불편해서 그냥 firebase 패키지만 사용했다. 정확한 이유는 본문 맨 마지막에 작성... 이 글에서는 파이어베이스-파이어스토어에 있는 데이터를 가져오는 것까지만 작성했다. 본문에서 작업한 프로젝트는 https://minu0807.tistory.com/157 https://minu0807.tistory.com/158 [VueJS] Nuxt3 설치 및 layouts, p.. 공감수 0 댓글수 0 2023. 7. 2.
[VueJS] Nuxt3에 quasar 설치 및 적용(+sass, icon) 넉스트3를 하나하나 알아보기 위해 최근 설치했다. 알아보기 위해 설치했는데 컴포넌트나 디자인 같은 것들을 하나하나 만들기엔 너무 많은 시간이 소요될 것 같아 디자인 프레임워크를 찾아봤다. https://nuxt.com/modules?category=UI Modules · Nuxt Comprehensive UI toolkit for Vue.js and Nuxt.js that empowers you to build amazing user interfaces with ease. With Vunix, you can leverage the power of popular utility-first CSS frameworks like Tailwind CSS, Unocss, WindiCss, or use your own.. 공감수 1 댓글수 0 2023. 6. 6.
[VueJS] Nuxt3 설치 및 layouts, pages 적용(compositionAPI) 프로젝트 설치 npx nuxi init 공식문서에 나와 있는 설치 방법으로 설치를 하면 이렇게 생성이 된다. nuxt2에서는 설치 시 기본적인 디렉터리들을 생성해줬었는데 nuxt3는 없다. 처음 설치하고 봤을 때 조금 당황... 공식문서를 봐보면 layouts 규칙 적용 방법이 여러가지로 보이는데 nuxt2와 같은 형식으로 빠르게 적용 방법만 작성 layouts, pages 디렉터리 생성 먼저 app.vue는 삭제해버린 후 layouts, pages 디렉터리를 추가한다. layouts layouts 디렉터리 안에 기본 레이아웃 용 파일로 default.vue와 테스트를 위해 sub.vue 파일을 생성 후 아래와 같이 소스코드 작성 //default.vue default.vue //sub.vue sub.v.. 공감수 0 댓글수 0 2023. 6. 4.
[TS] 타입 정의된 자바스크립트 라이브러리 찾기 요즘 대부분의 라이브러리들은 타입스크립트를 기반으로 많이 만들어져 공유되고 있다. 그래서 타입스크립트 환경에서 해당 라이브러리들을 사용할 때는 별문제 없이 사용한다. 하지만, 자바스크립트로만 만들어져 있는 라이브러리들의 경우 타입스크립트 환경에서 사용할 때 애먹는 경우도 생각보다 있다. 타입스크립트 환경의 프로젝트에서 타입 정의가 되어 있지 않은 라이브러리를 사용할 경우 볼 수 있는 에러 중 하나이다. 위 설명 처럼 @types를 통해 설치하면 되는 경우도 있지만 없는 경우도 있다. 없을 경우 본인이 스스로 타입 정의를 해줘야 한다. 몇 번 겪고서 상당히 불편함을 느꼈었는데, 오늘 강의를 듣던 중 알게 된 사이트가 있어서 공유할 겸 블로그 글을 작성하게 되었다. https://www.typescriptl.. 공감수 0 댓글수 0 2023. 5. 15.
[NodeJS] nodemailer로 이메일 보내기 옛날에 개발을 시작한지 얼마 안 됐을 때, 회사 내부에 자바로 만들어진 이메일 관련된 기능을 수정을 해본 적이 있었는데 참 어려웠었다. 최근 npm 이것저것을 둘러보다가 문득 그때 생각이 나서 노드로 이메일을 보낼 수 있는 npm이 있지 않을까 하고 찾아봤는데 역시나 있었다. 사용법도 매우 간단하다. 작업할 프로젝트 생성(생략해도 됨) npm init CommonJS 모듈 방식이 아니라 ECMAScript 모듈 방식으로 작업하고 싶어서 프로젝트를 생성 후 작업했습니다. 꼭 이렇게 할 필요는 없습니다. package.json에 "type": "module" 추가 패키지 설치 npm install nodemailer dotenv dotenv는 코드 작성 내용 중에 커밋하면 안 되는 항목이 있어서 설치 .en.. 공감수 1 댓글수 0 2023. 4. 19.
[토이프로젝트] PUBG your.stat 길고 긴 작업 끝에 드디어 끝났다. 완벽하게 끝낸 건 아니지만 너무 오랜 시간 작업을 했고, 다른 하고 싶은 것들을 계속 못하고 있어서 이 정도로 마무리하기로 했다. 해결할 수 없어 포기한 부분도 있고, 해결하는 데 애먹은 부분들도 있고, 처음 사용해 보는 타입스크립트와 정보가 부족해 공식문서에 최대한 의지한 파이어베이스, PUBG API 그리고 vue3 플러그 인들을 쓰면서 많은 경험을 한 것 같아 만들면서 많은 도움이 된 것 같다. 이 프로젝트를 만든 이유와, 개발환경, 기술 스택, 구현된 화면 캡쳐 및 설명, 배포된 사이트 주소 등의 내용은 아래 깃허브 README에 모두 작성해 두었다. https://github.com/smw0807/pubg_your.stat GitHub - smw0807/pub.. 공감수 0 댓글수 2 2023. 3. 24.
[VueJS] Vue3 CompositionAPI에서 Props 사용(+TypeScript) vue3에서 compositionAPI 방식으로 props를 사용하는 방법이 좀 다양하다. 사용할 때마다 자꾸 헷갈려서 작성하게 됐다... 자세한 설명은 공식문서에 있으니 본문 하단에 링크를 첨부하고 종류와 소스로만 간단하게 작성할 생각이다. 첫 번째로 optionsAPI방식과 유사한 방식으로 이런 방법이 있다. defineProps의 경우 defineEmits와 같이 별도로 Import 할 필요 없고 바로 사용이 가능하다. 두 번째 방법으로는 순수 타입으로 props를 정의하는 방법으로 좀 더 간결하게 작성이 가능하다. 세 번째로는 interface를 이용한 props 정의하는 방법이다. 하지만 첫 번째 방법을 쓰기엔 compositionsAPI를 쓰는 것 같지도 않고, 타입스크립트를 쓰는 것 같지 않.. 공감수 0 댓글수 0 2023. 3. 2.
[VueJS] Vite에 NuxtJS의 layouts, pages 규칙 적용해보기 Nuxt를 사용하면서 제공되는 기능들 중에 마음에 들었던 기능은 layouts와 pages 디렉터리의 기능이었다. pages안에 생성된 디렉터리와 파일명에 맞춰 자동으로 라우트 경로를 만들어 줘서 편리했고, 각 페이지 파일마다 보여줄 레이아웃을 지정해 줘서 기본 화면들에선 메뉴가 보이다 특정화면에선 메뉴가 없는 다른 레이아웃을 보여줄 수 있어 편리했다. pages의 자동 라우트 경로 생성 기능은 사람마다 호불호는 좀 있는 것 같았다. 위 예시로 pages/vuetify/vuetify1.vue가 http://localhost:5000/vuetify/vuetify1로 자동으로 페이지 경로가 생성된다. 그리고 pages/login.vue의 경우는 layouts의 login.vue 파일로 레이아웃을 잡아놔서 로.. 공감수 7 댓글수 0 2023. 2. 6.
[VueJS] Firebase 구글 로그인(Vite, Vue3, TS) 1. 파이어베이스 프로젝트 생성 https://console.firebase.google.com/u/0/?hl=ko 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 여기에 접속해서 사용할 프로젝트를 추가한다. 여기까지 다 되면 사용준비는 거의 다 끝이다. 2. 파이어베이스 프로젝트 설정 위 생성이 끝나면 메인화면에 아래와 같이 5개의 아이콘이 있다. 우선 웹만 사용할거라 아이콘 5개 중 3번째 아이콘 웹을 선택한다. 앱 닉네임을 입력한다. 난 그냥 프로젝트와 동일한 이름으로 입력했고, 호스팅 설정은 체크하지 않았다. 앱 등록 버튼을 클릭하면 아래와 같이 출력된다. npm과 script로 사용할 때 사용할 수 있는 방법을 알려준다. 여기선 npm으로 사용해서 만들 예정.. 공감수 1 댓글수 0 2023. 1. 24.
2022년을 마치며 작년보다 1년이 더 빠르게 지나간 느낌이고, 올해 나에게 있어 큰 이슈가 있다면 퇴사인 것 같다. 첫 회사에서 5년 7개월이라는 시간을 보냈다. 회사 사람들이 좋아서 오래다닐 수 있었던 것 같고, 첫 회사이기도 해서 새로운 회사와 새로운 동료들과 일을 해보고 싶어 퇴사를 결심하게 됐다. 특히 회사에서 vue.js를 쓰게 되면서 재미도 있었고 여기서 한 것과 vue.js를 쓰는 다른 회사에 가서도 내가 얼마나 할 수 있었는지도 궁금했다 그리고 다른 곳은 어떻게 사용하는지 알고 싶었다. 이직 준비하며서 여러 일도 있었고, 올해를 보내면서 내 깃허브 레파지토리 중에 포크가 조금 생긴 신기한 경험도 했다. 1. 이직 이직에 관해선 https://minu0807.tistory.com/143 이 글의 마지막 부분에.. 공감수 0 댓글수 4 2022. 12. 31.
[VueJS] vue-timeago3 typescript 환경에서 사용하기 vue-timeago3는 현재 타입스크립트를 사용할 수 있도록 처리되어 있지 않다. 이전 글에서 작성한 방법대로 import 후 사용해도 아마 되긴 할 텐데, 선언한 곳에 빨간 줄이 생기고 확인해보면 아래 사진과 같은 문구를 확인할 수 있을 것이다. 그래서 npm run dev로 실행은 되지만 빌드는 되지 않는다. 해결 방법은 위 문구에서 마지막 문장을 해주면 된다. declare module 'vue-timeago3'; 을(를) 포함하는 새 선언 (.d.ts) 파일 추가 먼저 프로젝트 최상위 위치에 @types 디렉터리를 생성한다. 그리고 그 안에 선언 파일을 추가할 모듈명과 똑같은 디렉터리를 생성하고 index.d.ts 파일을 생성한다. 모듈명이 vue-timeago3 였기 때문에 똑같이 만들어 준다.. 공감수 0 댓글수 2 2022. 12. 25.
[VueJS] Vue3 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으로 그냥 타이핑해도 된다... 공감수 1 댓글수 2 2022. 12. 24.
NHN FORWARD 22 후기 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 트랙이 있고, 각 트랙별로.. 공감수 0 댓글수 2 2022. 11. 24.
PUBG API 사용기 현재 친구들과 저녁 즈음엔 배틀그라운드를 많이 하고 있다. 그러다 보니 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.. 공감수 0 댓글수 0 2022. 11. 7.
[NodeJS] 빌더 패턴(Builder Pattern) 빌더 패턴이란? 복잡한 객체의 생성을 단순화하는 생성 디자인 패턴으로, 단계별로 객체를 만들 수 있다. 복잡한 객체를 만들 때 가독성과 일반적인 개발자 사용성이 크게 향상된다. 어떨 때 사용하면 좋은가? 빌더 패턴의 장점을 살릴 수 있는 가장 명확한 상황은 인자의 목록이 길거나, 많은 복잡한 매개변수를 입력으로 사용하는 생성자가 있는 클래스이다. 일반적으로 이러한 종류의 클래스들은 모두 완전하고 일관된 상태의 인스턴스를 만들기 위해, 너무 많은 매개변수들을 필요로 하기 때문에 고려해볼 필요가 있다. 문제의 클래스 예시 class Boat { constructor( hasMotor, motorCount, motorBrand, motorModel, hasSails, sailsCount, sailsMateri.. 공감수 0 댓글수 0 2022. 11. 1.
[VueJS] Vue3 CompositionAPI에서 emit 사용 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 공감수 0 댓글수 0 2022. 10. 31.
주절주절... 나는 코딩이 재밌다. 아니 재미있었다. 5년이 넘는 기간 동안 코딩을 하면서 재미있다와 재미없다의 수많은 반복이 있었고, 지금은 살짝 다시 “재미없다”가 찾아온 것 같다. 보통 재밌을 때는 생각한걸 코딩을 했을 때 막힘없이 또는 막혀도 금방 해결해서 얻는 성취감으로 인해 재미있다. 특히 이게 될까? 하는 막연한 생각으로 시작해서 이게 되네?가 되면 정말 재밌다. 재미없을 때는 막힌 게 내가 해결하기엔 너무 큰 벽이 느껴지고 아무리 방법을 고민하고, 구글링을 해도 해법을 못찾는게 하루이틀이 넘어가기 시작하면 점점 재미가 없어지는 이유 중 하나였다. 물론 이러다 갑자기 또 무슨 아이디어가 떠올라서 해보니 돼서 해결되면 마냥 재밌다. 하지만 지금 재미가 없는건 그리고 최근 이런 저런 일들을 겪다 보니 현타가 .. 공감수 1 댓글수 2 2022. 10. 18.
[VueJS] 쉬워진? vue2기반 vue-cli 설치 후 Vuetify 적용 최근 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로 .. 공감수 0 댓글수 0 2022. 10. 3.
[NodeJS] process.nextTick()과 setImmediate(), setTimeout() process.nextTick() 현재 진행 중인 작업의 완료 시점 뒤로 함수의 실행을 지연시킨다. 콜백을 인수로 취하여 대기 중인 I/O 이벤트 대기열의 앞으로 밀어 넣고 즉시 반환한다. 현재 진행중인 작업이 제어를 이벤트 루프로 넘기는 즉시 콜백이 실행된다. process.nextTick()으로 지연된 콜백은 마이크로태스크라 불리며, 현재의 작업이 완료된 후에 바로 실행되며 다른 I/O 이벤트가 발생하기 전에 실행된다. 이미 예정된 I/O 보다 먼저 실행되기 때문에 재귀 호출과 같은 특정 상황에서 I/O 기아(starvation)을 발생시킬 수 있다. setImmediate()와 setTimeout() process.nextTick()과 목적은 유사하지만 그 의미는 다르다. 이미 큐에 있는 I/O 이.. 공감수 0 댓글수 0 2022. 9. 2.
[NodeJS] 이벤트 디멀티플렉싱과 리액터패턴 이벤트 디멀티플렉싱 대부분의 운영체제는 논 블로킹 리소스를 효율적인 방법으로 처리하기 위한 기본적인 메커니즘인 동기 이벤트 디멀티플렉서, 이벤트 통지 인터페이스를 제공한다. 멀티플렉싱은 전기통신 용어로 여러 신호들을 하나로 합성하여 제한된 수용범위 내에서 매개체를 통하여 쉽게 전달하는 방법을 나타낸다. 디멀티플렉싱은 신호가 원래의 구성요소로 다시 분할되는 작업이다. 동기 이벤트 디멀티플렉서는 여러 리소스를 관찰하고 이 리소스들 중에 읽기 또는 쓰기 연산의 실행이 완료되었을 때 새로운 이벤트를 반환한다. 그리고 이점은 동기 이벤트 디멀티플렉서가 처리하기 위한 새로운 이벤트가 있을 때까지 블로킹된다는 점이다. watchedList.add(docketA, FOR_READ); // (1) watchedList... 공감수 0 댓글수 0 2022. 8. 15.
[책] 리팩터링 2판 후기 작년인가 친한 동생에게 추천을 받아서 샀었다. 읽기 시작한건 아마 12월말 쯤부터 읽기 시작한 것 같다. 1판은 예제 소스가 자바고 2판은 자바스크립트라는 데 개인적으로 자바스크립트를 더 선호하는 편이라 2판으로 구매를 했다. 어제 시점으로 다 읽었고, 책이 그렇게 두껍진 않은데 다 읽는데 참 오래 걸렸다. 띄엄띄엄 보기도 했고, 야근했다고 안보기도 했고, 주말에 그냥 쉬거나 다른 거 한다고 안보기도 했고, 그냥 안 보던 날도 있고... 이러다간 읽어야할 다른 책들도 있는 데 이것부터 다 못볼것 같아서 늦게 일어나는 게 아니라면 평일엔 출근 전 30~40분씩 읽고, 주말에도 따로 무슨 일이 있는 게 아니라면 일정 시간 정해서 무조건 봤다. 아마 그냥 읽기만 하면 더 빨리 봤을 것 같긴했지만, 예제 코드도.. 공감수 0 댓글수 0 2022. 8. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.