본문 바로가기

분류 전체보기159

React : react-webcam 을 이용하여 기기에서 지원하는 최대 해상도 비디오 스트림 얻어오기 모바일이나 데스크톱 웹 애플리케이션을 개발할때 현재 디바이스의 카메라 화면을 가져오고 싶을때가 있습니다.  React로 개발할때 이를 쉽게 구현해주는 `react-webcam` 이라는 패키지를 활용하면 쉽게 카메라 화면(Stream)을 가져와서 기능 구현에 활용할 수 있습니다.  react-webcam 사용법  react-webcamReact webcam component. Latest version: 7.2.0, last published: 8 months ago. Start using react-webcam in your project by running `npm i react-webcam`. There are 297 other projects in the npm registry using react.. 2024. 7. 4.
Nginx : X-Forwarded-For(XFF) 헤더를 통해 IP 로그 남기기 Nginx의 기본 로그 포맷  Nginx에서는 기본적으로 IP에 대한 아래와 같이  기본적으로 정의되어 있는 combined 로그 포맷으로 로그를 남겨줍니다.  127.0.0.1 - frank [10/Oct/2000:13:55:36 -0700] "GET /apache_pb.gif HTTP/1.0" 200 2326 "http://www.example.com/start.html" "Mozilla/4.08 [en] (Win98; I ;Nav)" 해당 로그 포맷은 보통 아래와 같은 규칙에 따라 표현됩니다. log_format combined '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_.. 2024. 6. 13.
Vite : React 웹서버 서브 디렉토리 배포 설정하기 React를 통해 빌드를 하고 웹서버에 배포하기 위해서는 웹서버 설정이 추가적으로 필요합니다. 예를 들어, react-router와 같은 브라우저 라우터를 사용하게 되면 모든 경로에 대해 Web Root의 index.html로 rewrite 해주는 명령어가 필요합니다. Nginx의 경우 try_files 옵션을 설정하여야 하고,  Apache의 경우 RewriteRule 옵션을 통해 설정할 수 있습니다. 위 설정을 해주지 않으면 새로고침시에 404 에러가 발생하는데, 이는 클라이언트에서 라우팅을 처리할때, 서버에 해당 자원이 없다고 인식하기 때문에 이러한 문제가 발생합니다. SPA에서는 모든 요청을 Base가 되는 index.html에서 처리하는데, 다른 경로로 접속하면 해당 경로에 일치하는 파일을 웹서.. 2024. 6. 11.
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.

티스토리툴바