본문 바로가기

분류 전체보기156

NextJS : LocalStorage 에러 (ReferenceError: localStorage is not defined) 해결방법 오늘을 NextJS에서 LocalStorage 사용시 발생하는 에러에 대한 해결법을 간단히 공유해보도록 하겠습니다. 문제 상황 LocalStorage에서 값을 불러오고 저장하기 위해 아래와 같은 Util 함수를 만들어서 사용하고 있었는데요, next build 시에 아래와 같은 에러가 발생하였습니다.  문제 원인 문제 원인은 클라이언트 사이드가 아닌 서버사이드 렌더링 시에 브라우저의 전역객체를 사용할수 없기 때문에 발생하였습니다.  저는 빌드 타임에 에러가 발생했는데요, 실제로 런타임중이 아니더라도 빌드 타임에 NextJS는 Node 환경에서 코드를 실행하기 때문에 브라우저 전역객체를 사용할 수 없다고 합니다. 해결 방법  해결방법은 위와 같이 window 객체가 참조 되지 않을 경우에는 해당 코드를 실.. 2024. 5. 21.
Vite : 라이브러리 wasm 에러 발생시 해결방법 (both async and sync fetching of the wasm failed) Vite를 통해 React를 개발하던 중 npm 라이브러리에서 `both async and sync fetching of the wasm failed` 에러가 발생할 때가 있습니다. 위와 같은 에러 발생 시 해결방법을 공유해 보도록 하겠습니다.   문제 발생 상황 모바일 애플리케이션을 만들던 중 비디오 녹화를 통해 `mp4-wasm` 이라는 패키지를 사용해야 할 상황이 발생하였습니다.(참고 : https://www.npmjs.com/package/mp4-wasm)  위 라이브러리의 사용법은 간단한데요  import loadMP4Module, { isWebCodecsSupported } from 'https://unpkg.com/mp4-wasm@1.0.6' 이런 식으로 mp4Module 이라는 객체를 호출.. 2024. 4. 30.
React : 모바일 사파리 focus, blur 이벤트 감지 훅 만들어보기 (useWindowFocus) IOS Safari 브라우저에서 window.focus 및 window.blur가 제대로 동작하지 않는 문제 `Focus` 이벤트는 브라우저 창, 탭, 팝업이 사용자로부터 포커스를 받았을대 호출되는 이벤트로, 사용자가 브라우저창을 클릭하거나 다른 애플리케이션에서 현재 창으로 들어왔을때 쓰이는 등 여러 상황에서 자주 사용이 되는 이벤트입니다. `Blur` 이벤트는 반대로 사용자가 페이지를 떠나거나 다른 탭으로 이동했을때 발생되는 이벤트입니다. 하지만 IOS Safari 브라우저를 개발하다보면 Window의 Focus, Blur 이벤트를 등록을 했는데도 제대로 동작하지 않을때가 있습니다.  (IOS에서는 탭 간 전환시 비활성화/ 활성화가 브라우저처럼 제대로 구분되어 있지 않은것 같다고 합니다.).. 2024. 4. 24.
Nginx : autoindex 를 통한 파일 목록 출력하기 오늘은 간단하게 Nginx에서 autoindex 기능을 통해 파일 목록을 출력하는 방법에 대해 알아보겠습니다. autoindex가 false일때 nginx 동작 기본적으로 nginx에서는 autoindex가 꺼져있는데요 이때 nginx에서 호스팅하고 있는 webroot를 기준으로 존재하는 폴더로 이동했을때에는 아래와 같이 404 not found가 출력됩니다. autoindex가 true일때 nginx 동작 하지만 요구사항에 따라 디렉토리 내의 파일을 목록화해서 파일을 다운로드 할 수 있는 디렉토리 리스팅 기능을 켜고 싶을때가 있는데요, 즉 파일리스트를 출력하고 싶을때 autoindex 기능을 사용합니다. 설정은 아래와 같습니다. 단순히 서버 block 안에서 `autoindex on;` 이라고 명시해.. 2024. 3. 11.
AWS : SES 에서 554 message reject 에러 발생 원인 및 해결방법 (sandbox 환경 Production으로 전환하기) NodeJS 환경에서 고객 회원가입 메일 전송 기능을 테스트하던중 에러가 발생하였습니다. SMTP 메일서버는 AWS 의 SES(Send Email Service) 를 사용하고 있었는데요, 실제 로그를 찍어보니 아래와 같은 메세지가 발생하였습니다. `Message failed: 554 Message rejected: Email address is not verified. The following identities failed the check in region AP-NORTHEAST-2` 에러 발생 원인 에러발생 원인은 현재 SES 메일 계정이 Sandbox용으로 되어 있기 때문에 발생한것이었습니다. 공식문서에서 확인해보면 `메일박스 시뮬레이터(즉 sandbox)` 에서 제공하는 수신자를 제외한 메일에서.. 2024. 2. 27.
Github : SSH 키 등록을 통해 여러개의 깃헙 저장소 등록하여 관리하기 보통 github를 통해 개발을 진행할 때 SSH Key를 생성하고 공개키를 github 서버에 등록한 뒤 개발을 하게 됩니다. 단순히 github 계정이 한개라면 문제가 없지만 2개 이상의 github 저장소를 등록을 하고 개발을 진행해야 할 때 어떻게 해야 하는지 한번 알아보도록 하겠습니다. 회사용 및 개인용 Repository를 연결한다고 생각하고 설명드리겠습니다. SSH Key 생성하기 맨 먼저 SSH Key를 생성하여야 합니다. 이때 회사 Repository를 사용할 ssh-key 와 개인 Repository를 사용할 ssh-key를 생성하여 줍니다. ssh-keygen -f ~/.ssh/id_rsa # 회사용 ssh-keygen -f ~/.ssh/id_personal # 개인용 SSH key .. 2024. 2. 21.
NestJS : mongoose virtual field를 사용해서 원하는 값만 반환하기 NestJS에서 Mongoose를 사용해서 백엔드 개발을 진행하고 있습니다. 이때 return으로 모델을 반환하면 response로 반환하고 싶지 않은 정보들도 같이 반환될때가 있습니다. 이럴때 mongoose 에서 제공하는 virtual 속성을 통해 반환을 위한 값들을 제거하고 원하는 필드만 반환하도록 설정할 수 있습니다. Mongoose v8.1.1: Mongoose Tutorials: Mongoose Virtuals Mongoose Virtuals In Mongoose, a virtual is a property that is not stored in MongoDB. Virtuals are typically used for computed properties on documents. Your Fir.. 2024. 2. 9.
리눅스 : 시스템 로그(journal) 사이즈 줄여서 용량 확보하기 EC2의 용량을 줄이려고 찾아보던 중에, 리눅스의 로그가 차지하는 용량이 대해서 알게 되었고, 리눅스의 시스템에서 발생하는 로그의 용량을 어떻게 줄일 수 있는지 한번 알아보았습니다. 로그 용량 확인하기 기본적으로 리눅스에서는 시스템/서비스를 관리하기 위한 systemd 라는 프로세스 매니저가 동작하는데요, systemd에는 전체 시스템 로깅을 담당하는 systemd journal 이라는 서비스가 돌고 있습니다. 해당 서비스에서는 시스템에서 발생한 로그데이터를 journal 이라는 바이너리 형식으로 저장하게 됩니다. 이러한 시스템에서 발생한 로그파일은 journalctl 명령어 도구를 통해 확인할 수 있습니다. journalctl 만약 journal 파일을 전체 크기를 알아보고 싶으면 아래와 같이 명령어를.. 2024. 1. 14.
PM2 : logrotate 모듈을 이용하여 PM2 로그 용량 줄이기 문제점 AWS의 EC2를 사용하고 있는데 용량이 늘어나는 문제를 발견하게 되었습니다. 용량을 차지하는 파일을 찾던중 NodeJS 프로세스를 관리하는 PM2 에서 적재되고 있는 로그가 용량을 많이 차지한다는것을 알게 되었습니다. 이에 대해서 해결하는 방법에 대해 한번 알아보겠습니다. PM2 로그 파일 기본적으로 pm2는 로그를 `/home/ubuntu/.pm2/logs` 에 적재하고 있는데요 (우분투 기준), pm2로 시작한 애플리케이션의 이름별로 로그파일이 적재되게 됩니다. 현재 platform-api-nodejs 라는 애플리케이션의 로그가 2.8G 이상 차지하는것을 확인할 수가 있습니다. PM2 logrotate 모듈 위에서 알아본 로그들은 서비스가 운용될수록 점점 쌓이면서 커지게 될 텐데요, 계속 쌓.. 2024. 1. 8.
Vite : vite-plugin-static-copy를 통해 정적 파일 복사하기 개요 이번 시간에는 Vite를 통해 프로젝트를 진행하던중에 정적파일 복사를 위해 사용한 패키지에 대해 한번 소개해보도록 하겠습니다. vite-plugin-static-copy 패키지 Vite에서 복사를 위해 vite-plugin-static-copy 라는 패키지를 사용하였는데요, 해당 플러그인을 통해 Vite 프로젝트에서 정적파일을 복사하거나 프로젝트에 추가할 수 있습니다. vite-plugin-static-copy rollup-plugin-copy for vite with dev server support.. Latest version: 1.0.0, last published: a month ago. Start using vite-plugin-static-copy in your project by ru.. 2023. 12. 22.