MERN todo 프로젝트에서 Google OAuth 2.0을 활용한 로그인 기능을 구현했습니다.@react-oauth/google 라이브러리를 활용하여 클라이언트에서 Google 로그인 버튼을 만들고, 서버에서는 Google API를 이용해 사용자 정보를 받아와 JWT를 발급하는 방식으로 처리했습니다.1. Google OAuth 로그인 흐름클라이언트에서 useGoogleLogin 훅을 이용해 Google 로그인 요청@react-oauth/google 라이브러리에서 제공하는 useGoogleLogin 훅을 사용했습니다.이 훅을 이용하면 Google 로그인 창을 띄우고, 로그인 성공 시 code를 반환받을 수 있습니다.Google에서 code를 반환하면 이를 서버로 전송code는 Google OAuth 서..

프론트엔드에서 회원가입과 로그인 기능을 구현하면서 zustand 상태 관리와 axios 인스턴스를 활용하여 API 요청을 효율적으로 처리했습니다. 아래는 그 전체적인 흐름입니다.1. Axios 인스턴스 설정먼저 API 요청에 사용할 axios 인스턴스를 생성합니다. 개발/배포 환경에 따라 baseURL을 다르게 설정하고, 쿠키를 함께 전송할 수 있도록 withCredentials: true 옵션도 추가합니다.import axios from 'axios';export const axiosInstance = axios.create({ baseURL: import.meta.env.MODE === 'development' ? 'http://localhost:3000/api' : '/ap..

이번 글에서는 Todo CRUD 기능을 구현한 내용을 정리했습니다.사용자의 할 일 목록을 추가, 조회, 수정, 삭제할 수 있도록 API를 만들었습니다.1. 전체 목록 조회 (GET /todo)export const getAllTodos = async (req, res) => { try { const todos = await Todo.find({ userId: req.user._id }); if (!todos || todos.length === 0) { return res.status(404).json({ message: '등록된 할 일이 없습니다.', }); } res.status(2..

기존에는 JWT를 이용해 Access Token을 생성한 후 쿠키에 저장하여 인증하는 방식으로 로그인 및 Todo 관련 API를 Protected Route 로 처리하였습니다.하지만 정보를 찾아본 결과 쿠키 기반 인증 방식에는 보안 취약점이 있기 때문에 이를 개선하고자 토큰 기반 인증 방식으로 변경하였습니다.쿠키 기반 인증의 보안 문제쿠키는 오랜 시간 유지될 수 있음 → 토큰이 탈취되면 장기간 악용될 가능성이 있음자바스크립트로 쿠키 접근 가능 → XSS(Cross-Site Scripting) 공격에 취약함CSRF(Cross-Site Request Forgery) 공격 가능 → 악성 사이트에서 사용자의 인증된 요청을 위장할 수 있음이러한 이유로 보안상 쿠키 기반 인증은 많이 사용되지 않는 방식이라고 합니다..

이번 글에서는 Mongoose를 이용해 데이터베이스 모델을 정의하고, 회원가입 API를 작성 한 내용을 정리하겠습니다.1.MongoDB 스키마 정의먼저, MongoDB에서 사용할 데이터 모델(스키마)을 정의합니다.데이터는 MongoDB에 저장되며, 이를 Mongoose의 Schema를 통해 관리합니다.1-1.models/user.model.jsimport mongoose from 'mongoose';const userSchema = new mongoose.Schema({ googleId: { type: String, unique: true, sparse: true, }, email: { type: String, required..

MERN 스택을 활용하여 간단한 Todo 앱을 만들려고 합니다.이번 포스팅에서는 Node.js 초기 프로젝트 설정과 Auth 및 Todo 라우팅 구성, 그리고 controllers 폴더까지 구현하는 과정을 정리합니다.1. 프로젝트 초기화먼저 프로젝트를 초기화하기 위해 npm init -y 명령을 실행하여 package.json을 생성합니다.{ "name": "todo", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "nodemon src/index.js", }, "keywords": [], "author": "", "license": "ISC", "description": ""}nodemon 설치 후 scripts에 "d..