맥에서 크롬 비밀번호 자동완성 문제 해결하기

맥에서 크롬의 비밀번호 자동완성 기능을 사용할 때 생체 인증이나 맥의 패스워드를 입력해야 하는 문제를 해결하는 방법에 대해 안내하겠습니다. 문제 발생 원인최근 크롬 브라우저에서 비밀번호를 자동으로 입력할 때, 매번 생체 인증이나 맥의 비밀번호를 입력해야하는 문제가 갑자기 발생했습니다. 이는 보안 설정이 강화되면서 생긴 문제로 보입니다. 하지만 이 기능이 불

구글 로그인에서 여러 계정 선택하기 (select_account 활용법)

구글 로그인 기능은 편리한데, 여러 계정을 사용하는 사용자에게는 불편할 수 있습니다. 어떤 사이트에서는 한 계정으로 로그인한 후에는 로그아웃 전까지 다른계정으로 전환되지 않고 자동로그인 되어 불편할 수 있습니다. 이럴때 select_account를 사용하면 로그인시 계정을 선택할 수 있게 됩니다. 1. 구글 로그인에서의 계정 전환 문제구글에 로그인할 때,

MongoDB populate vs aggregate 성능 비교 테스트

MongoDB populate vs aggregate 성능 비교 테스트MongoDB를 사용할 때 populate와 aggregate는 자주 사용하는 두 가지 방식입니다. 이 글에서는 이 두 방법의 성능을 비교해 보겠습니다. 작은 데이터셋과 큰 데이터셋에서 각각의 성능을 테스트해 보았습니다. 테스트 환경 MongoDB 6.x.x Node.js: 20.x.x

MongoDB에서 ObjectId로 Document 연결 해야만 하는 이유

MongoDB에서 ObjectId로 Document 연결 해야만 하는 이유MongoDB에서 Document를 연결할 때, 참조(Ref)를 위해 ObjectId를 사용하는 것이 좋은 이유에 대해 알아보겠습니다. MongoDB에서 Document 연결MongoDB에서 Document 간의 관계를 표현하는 방법은 크게 2가지가 있습니다. 내장된 문서 (Embe

Docker Compose를 사용한 멀티 컨테이너 관리

Docker Compose를 사용한 멀티 컨테이너 관리Docker Compose는 멀티 컨테이너를 한번에 관리할 수 있는 도구입니다. docker-compose.yml 파일을 작성하여 Nginx, MongoDB 그리고 백엔드 서버로 된 멀티 컨테이너 애플리케이션을 설정하는 방법 및 명령어를 알아보겠습니다. Docker Compose 파일 구조Docker C

Custom Hook을 이용한 무한 스크롤 구현하기

Custom Hook을 이용한 무한 스크롤 구현하기리엑트 프로젝트에서 종종 무한 스크롤 기능을 구현할 때가 있습니다. 이를 구현하기 위해 useEffect 훅을 여러 컴포넌트에서 반복해서 사용하게 되는데, 이런 중복 코드를 제거하고 재사용성을 높이기 위해 custom hook을 만드는 방법을 안내하겠습니다. Custom Hook 정의하기useInfinite

MongoDB ID 변환 및 검증 커스텀 데코레이터 작성 방법 (NestJS, class-validator)

소개MongoDB는 기본적으로 ObjectID를 사용하는데, _id 필드로, 각 문서의 고유 식별자 역할을 합니다. Ref를 사용하거나, populate를 사용할 때, _id를 사용하게 되는데, 이 때, ObjectId를 사용하게 됩니다. 프론트엔드에서 string 타입이나, object 타입으로 받아서 사용할 때, ObjectId로 변환해주는 작업이 필요

React Axios에서 withCredentials를 사용하여 쿠키를 설정하는 방법

소개웹 애플리케이션에서 인증 및 세션 관리는 매우 중요합니다. 이를 위해 쿠키를 사용하는 경우가 많습니다. 이번 포스팅에서는 React에서 Axios를 사용하여 서버로 요청을 보낼 때 쿠키를 설정하는 방법에 대해 알아보겠습니다. 특히 withCredentials 옵션이 왜 필요한지, 어떻게 사용하는지에 대해 자세히 설명하겠습니다. AxiosAxios는 브라

React-Toastify (React 앱에 세련된 알림 기능 추가하기)

React-Toastify란?react-toastify는 React 앱에 알림 기능을 추가할 수 있는 라이브러리입니다. 사용자에게 알림을 보여주는데 사용되며, 사용자 경험을 향상시키는데 도움이 됩니다. 또한 전역에서 일관된 디자인으로 알림을 보여 줄 수 있습니다. React-Toastify 설치react-toastify를 사용하려면 먼저 라이브러리를 설치해

Github와 AWS CodeBuild, ECR을 이용한 docker 이미지 빌드 자동화

배포 자동화란 무엇인가?배포 자동화(Deployment Automation)는 소프트웨어를 개발 환경에서 프로덕션 환경으로 배포하는 과정을 자동화하는 것을 의미합니다. 이는 코드 변경 사항이 저장소에 반영될 때마다 자동으로 빌드, 테스트, 배포하는 일련의 프로세스를 설정하여 수동 개입 없이 신속하고 일관된 배포를 가능하게 합니다. 사전 준비Github 저