본문 바로가기

JavaScript

(46)
[NestJS] 스케줄러로 반복 작업 설정하기 배경 웹 서비스를 만들 때 특정 시간에 특정 작업 반복이 필요한 경우가 있습니다. 예를 들어, 쇼핑몰을 만든다고 할 때 배송이 완료된 후 일정 시간 뒤 자동으로 구매 확정으로 상태를 변경해준다든지의 작업이 예입니다. NestJS에서는 이러한 반복적 배치 작업을 스케줄러로 구현할 수 있습니다. 또한 특정 이벤트가 발생했을 때 작업을 실행하게 해주는 커스텀 프로바이더라는 것도 존재합니다. 이 글에선 반복적 작업이 목적이기 때문에 스케줄러를 사용해서 구현하려고 합니다. 1. 패키지 설치 필요한 패키지를 설치합니다. npm install --save @nestjs/schedule npm install --save-dev @types/cron 2. app.module.ts 앱에 스케줄 모듈을 import 해줍니다..
NextJS - FFmpeg.wasm으로 영상 용량 줄이기 배경 웹 서비스에서 영상 업로드 기능이 있을 때, 서비스 컨셉에 따라 용량이 큰 영상을 업로드하는 경우가 있는데 이것을 그대로 서버에 저장하는 것은 비용적으로 부담이 될 수 있습니다. 그래서 영상 용량을 줄여서 저장하는 것이 좋은데, 백엔드에서 영상을 직접 처리한다면 서버 자원(메모리, CPU)에 무리가 가서 서버가 다운되거나 문제가 발생할 수 있습니다. 따라서 클라이언트 측에서 영상 용량을 줄여서 업로드 한다면 서버의 부담을 덜 수 있을 것입니다. 물론 이런 방법을 사용하면, 영상 변환이 오래 걸릴 경우, 사용자 경험이 저하된다는 단점이 있으므로 주의해야 합니다. 이 글의 목표는
next/image 사용하는 이유와 방법 Background next.js에서 태그를 사용하다 보면 next/image를 사용하라는 권고사항이 뜹니다. 이미지 최적화가 되고, 캐싱이 된다는 것에 next/image를 사용하기는 했지만, 개발하다보니 이미지 리사이징에 대한 이슈가 생겼고 어떻게 최적화가 이루어지는지에 대한 정확한 이해가 필요했습니다. What is next/image? 간략히 설명하면 next.js 내에서 태그 대신에 사용할 수 있는 내장 모듈입니다. 간단한 사용법은 아래와 같습니다. import Image from 'next/image' const MyImage = (props) => { return ( ) } Why use next/image? 기본적으로 이미지를 최적화하려면 많은 노력이 필요한데요, next/image를 사용..
모바일에서 input.focus()로 키보드 띄우기 .focus()를 사용하면 타깃 input에 focus 이벤트를 강제로 트리거 할 수 있습니다. const input = document.querySelector('[name=my-input]') (input as HTMLInputElement).focus(); 위 코드는 데스크톱과 모바일 둘 다 문제없이 동작하지만, 모바일에선 focus() 함수가 실행된 후 키보드가 자동으로 띄워지지 않습니다. 이는 모바일 브라우저 설계자가 의도적으로 만든 프로세스로써, 사용자가 의도하지 않은 액션을 차단해서 UX를 개선한 것이죠. 그래서 원칙적으로는 사용자가 input을 탭 해야지만 키보드가 올라옵니다. 하지만 사용자의 편의성을 고려해 강제로 키보드를 띄워주고 싶은 경우엔 아래와 같은 트릭들을 사용할 수 있습니다. ..
HttpOnly 쿠키를 활용한 JWT 로그인 구현 배경 JWT를 구현하는 방법은 요청 헤더에 토큰을 포함해서 전송하는 방법이 있지만, 어차피 쿠키나 localstorage에 토큰을 저장해야 하므로, 좀 더 안전한 방법인 httponly가 적용된 쿠키를 활용해 구현해보려 합니다. 또한, Safari에선 HttpOnly 옵션을 적용하지 않으면 쿠키를 사용할 수 없었기 때문에 반 강제(?)로 이 방법을 사용하게 되었습니다. HttpOnly? 쿠키에 javascript로 직접 접근할 수 없도록 하는 옵션입니다. 따라서 XSS(Cross Site Script) 공격에 대한 방어 수단이 될 수 있습니다. 이 옵션을 쿠키에 적용하려면 백엔드에서 응답할 때 이 옵션을 적용한 쿠키를 만들어서 응답해야 합니다. 이 쿠키에는 개발자도 접근할 수 없으므로, 백엔드 서버로 전..
GCS에 파일 업로드(NestJS) 배경 이미지나 비디오 같은 정적 파일 로딩 레이턴시를 줄이기 위해 Cloud CDN 서비스를 사용해야 했고, GCP에서 백엔드로 운영 중인 NestJS에서 이미지를 저장할 때 이를 적용해야 해서 나중에 참고할 수 있도록 글로 정리하게 되었습니다. 버킷 생성 GCS에 업로드 하기 전에 먼저 저장소를 생성해야 합니다. GCP 메뉴 중 Cloud Storage로 이동해서 버킷을 생성해 줍니다. 다음으로 백엔드가 GCS에 접근할 수 있도록 키를 발급해야 합니다. 'IAM > 서비스 계정'으로 이동해서 저장소 관리자 권한을 부여한 서비스 계정을 만들고 키를 생성해 줍니다. 생성한 서비스 계정으로 이동해서 json 키를 생성합니다. 다운받은 키 내용 모두를 환경설정 파일로 만들어서 프로젝트 내에 저장합니다. 깃에 ..
Express CORS 설정 cors 미들웨어를 사용해 설정하는 방법을 다룹니다. npm i cors 1. 출처 전체 허용 const express = require('express') const cors = require('cors'); const app = express(); app.use(cors({ origin: '*', })); 2. 화이트 리스트로 일부만 허용 const express = require('express') const app = express() const cors = require('cors'); const port = 8080 const whitelist = ['http://localhost:3000']; const corsOptions = { origin: function (origin, callbac..
NextJS 백그라운드 서버 시작 npm install -g pm2 pm2 --name HelloWorld start npm -- start pm2 stop pm2 restart pm2 delete pm2 show