Nest.js에서 dev모드로 서버를 실행시키면 hot reload가 동작하는데, 코드가 수정되면 서버를 새로 실행시킨다. 이러한 방법은 서버가 커질수록, 초기 실행시 실행되는 함수가 많을수록 점점 느려지기 마련이다. Nest 공식 문서에서는 이러한 점을 보완하기 위하여 변경사항만 업데이트 되는 방법을 설명해놓고 있다. 설정 방법은 Nest CLI로 생성한 프로젝트와 그렇지 않은 프로젝트 두가지로 나뉘는데, 나는 Nest CLI를 사용을 하기 때문에 Nest CLI의 경우에만 설명하겠다. Installation 어차피 개발할때만 사용할것이기 때문에 dev로 설치한다. yarn add -D webpack-node-externals run-script-webpack-plugin webpack webpack-..

Proxy와 Reflect | 기원's Study(ing) Proxy와 Reflect 개인적으로 조그만한 프로젝트를 하고 있는데, api를 이용해 외부에서 데이터를 가져오는 작업을 했었다. 그런데 response가 Proxy라는 객체로 들어오고 [[target]]이라는 프로퍼티 내부에 giwonn.github.io (이 글은 위의 링크에서 작성한 글을 티스토리로 옮긴 글입니다.) 개인적으로 조그만한 프로젝트를 하고 있는데, api를 이용해 외부에서 데이터를 가져오는 작업을 했었다. 그런데 response가 Proxy라는 객체로 들어오고 [[target]]이라는 프로퍼티 내부에 원하는 데이터가 들어있었다. 그 당시에는 변수 뒤에 target을 붙여서 데이터를 가져와서 사용했었는데 궁금증은 해결하는게 맞기에..

깃허브 블로그에 댓글 기능 추가하기 | 기원's Study(ing) 깃허브 블로그에 댓글 기능 추가하기 깃허브 블로그에 댓글 기능을 추가할 수 있다. giscus라는 댓글 플랫폼에 관해 글을 작성할 예정인데, 방법은 여러가지가 있는데 대표적인 몇 가지를 일단 소 giwonn.github.io (위의 사이트에서 보시면 더 쾌적하게 보실 수 있습니다.) 깃허브 블로그와 같은 개인 블로그를 사용하시는 분들은 utterances나 disqus를 많이 사용할 것입니다. 이번엔 Github Discussions 기반으로 작동하는 giscus라는 댓글 플랫폼에 대해 작성하려고 합니다. Utterances vs Disqus vs Giscus Disqus 구글링을 하며 블로그나 여러 사이트들을 들어가보면 위와 같은 댓글..

원래는 도커를 제대로 공부해보고 그 다음에 사용해보려 했었다. 근데 노트북 데탑을 왔다갔다하면서 개발할때마다 자꾸 에러를 뿜는다.... 홧김에 세팅해보았다. 일단 미리 말하자면 나는 도커이미지로 개발환경 세팅만 해놓고 이미지 내부에 구현코드는 존재하지 않게 만들었다. 준비된 개발환경은 다음과 같다. node + vite + vue 이번에 할 것은 1. Dockerfile 작성 2. docker compose 파일 작성 3. 핫 리로딩 개선 이 정도를 해보려고 한다. 배포환경 세팅은 다음에 따로 글을 작성해야겠다. 1. Dockerfile 작성 프로젝트 경로 최상단에 Dockerfile을 작성해준다. # 만들려고 하는 image의 베이스가 되는 image FROM node:lts-alpine # base ..

@keyup.enter를 사용하면 새로고침이 된다. .prevent를 뒤에 붙여봐도 소용이 없다. 그럴 때는 keydown.enter.prevent를 사용해보자. 새로고침 없이 잘 된다.

조건이 많아지면 많아질수록 if문과 switch문은 보기 더러워진다. 조건이 값식문같은 명확한 조건이면, if문이나 switch문을 쓰지 않고도 구현이 가능하다. 코드가 클린해지게 리팩토링해보자. if문 코드를 보기만 해도 머리 아프다. 내부로직을 생략해서 그렇지 아찔하다. if (category === 'total') { // ... } else if (category === 'a') { // ... } else if (category === 'b') { // ... } else if (category === 'c') { // ... } else if (category === 'd') { // ... } else if (category === 'e') { // ... } else { // ... } S..

Vite를 사용할 때 '@/components/Helloworld.vue' 이런 식으로 경로를 설정하고 싶을때 사용하는 방법입니다. javascript는 vite.config.ts만 설정해줘서 손쉽게 가능합니다. 이 방법은 vite를 사용하는 react, vue, svelte 등 모든 프레임워크에서 사용가능합니다. Javascript vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src') } } }) Typ..

Vite는 Vue 3 를 기반으로 작동합니다. 그러므로 Vue 3를 사용하면 별다른 설정 없이 사용할 수 있습니다만... Vue 2는 설정을 좀 만져줘야 합니다. 저와 같이 Vue 2에서 Vite를 사용하고 싶은 분들을 위해 이 글을 바칩니다... Vite 프로젝트를 생성해보신분들은 프로젝트 생성 부분은 건너뛰시면 됩니다. Vite 프로젝트 생성 방법 방법은 아주 간단합니다. 일단 Vite 설치부터 진행하겠습니다. 프로젝트 폴더를 만들 경로에서 아래 명령어를 입력하면 됩니다. ex) abc 라는 폴더 내부에 프로젝트 폴더를 생성할 경우 abc 폴더에서 아래 명령어를 실행하면 됩니다. npm npm init vite@latest Yarn yarn create vite 이후에는 프롬프트 창에 출력된 메시지를..

나의 경우에는 서버는 express 테스트 라이브러리는 mocha, supertest를 사용했다. mocha로 테스트코드를 실행시키는데 명령어 끝에 -exit를 붙이니 잘 종료가 된다. mocha index.spec.js -exit package.json에 실행 명령어를 작성해놓았다면 한번 수정해보자

회사에서 사용할 키보드를 하나 구입하게 되었습니다. 키보드를 사기 전에는 외부모니터 아래에 맥북을 두고 직접 맥북 키보드를 사용하고 있었는데요. 아래와 같은 느낌입니다. (아이패드를 맥북이라고 생각해주시면 됩니다.) 아이패드 위치에 맥북을 놓고 맥북을 직접 타건했었는데... 사용감은 정말 괜찮았습니다. (13인치 맥북이라 모니터를 가리지 않았습니다) 하지만 노트북 키보드는 키캡이 얇아서, 타건하다보면 손가락에 피로감이 오더라고요. 회사에서 제공된 키보드가 있기는 하지만, 기계식 키보드를 사용하고 싶어서 지르고 말았습니다 ㅋㅋㅋㅠ 개봉했을 당시의 사진입니다. CapsLock, ScrollLock 버튼을 하나 더 제공하는데요. 버튼 옆으로 LED 불빛을 비춰주는 여분의 키캡이 있습니다. 취향에 따라 교체하라..

1. 학습의 주도권을 가져오자. 공부할 때 목적을 정하고 하자. (= 키워드를 정하고 하자) 공부할 때 책 한권을 끝낼 필요는 없다. 호이스팅을 공부한다고 예를 든다면, 책 10권을 가져와서 호이스팅 부분만 골라서 공부하는것이 오히려 확실하게 이해하고 넘어가는 방법일 수도 있다. 호이스팅을 공부했다면 스스로 의문을 가지며 직접 사용해보며 이해가 될 때 까지 끝까지 파본다. 책을 보고 정리하는것에서 그치지 않고, 내가 책을 쓰는 것처럼 정리해보자. 2. input과 output을 같이 하자. 책만 읽고 문제를 안풀면 무슨 소용일까? 공부를 했으면 서비스 코드에 적용시켜보자. 3. 자기객관화를 하자. 스터디, 동아리, 해커톤 들어가는것도 좋은 방법! 프론트엔드 개발자의 본질은 개발자다. javascript,..

[원글] 1. Node의 핵심 개념 | 기원's Study(ing) 1. Node의 핵심 개념 노드는 브라우저가 아닌 다른 환경에서 Javascript를 사용할 수 있게 해주는 런타임이다. 크롬의 V8엔진에 libuv(비동기 I/O 라이브러리)를 추가해 만들어졌다. Node의 특징은 다음과 giwonn.github.io 1. Node의 핵심 개념 노드는 브라우저가 아닌 다른 환경에서 Javascript를 사용할 수 있게 해주는 런타임이다. 크롬의 V8엔진에 libuv(비동기 I/O 라이브러리)를 추가해 만들어졌다. Node의 특징은 다음과 같다. 싱글 스레드이며 이벤트 루프 기반 논 블로킹(Non-blocking) 방식으로 동작 Javascript를 사용함 V8 엔진이란 V8 엔진은 크롬에서 자바스크립트..