📆 5월 30일 마이페이지 데이터 연동 (내 글/댓글/좋아요/정보)내 게시글 가져오기 (/users/:username/posts)const posts = await Post.find({ author: username }).sort({ createdAt: -1 });유저별로 author 기준 필터링최신순 정렬(sort({ createdAt: -1 }))프론트에선 리스트로 출력내 댓글 가져오기 (/users/:username/comments)const comments = await Comment.find({ username }).sort({ createdAt: -1 });작성자 기준으로 댓글 조회마찬가지로 최신순 정렬좋아요한 글 목록 (/users/:username/likes)const likedPosts..

사용자 정보 수정 기능 추가 작업 기록 (Express & React)1. 백엔드 (Express) – 사용자 정보 수정 API 구현API 엔드포인트:PUT /user/update동작 방식:클라이언트의 쿠키에서 JWT 토큰을 꺼내 인증토큰을 검증해서 로그인한 사용자 ID를 파악전달받은 정보로 사용자 데이터 수정(비밀번호 변경이 요청되면 bcrypt로 해싱)업데이트 결과 반환app.put('/user/update', async (req, res) => { try { const { token } = req.cookies; if (!token) { return res.status(401).json({ error: '로그인 필요' }); } const userInfo = jwt...

댓글 기능, 좋아요 기능, 글 수정 및 상세보기, UX 개선까지 포함된 의미 있는 날🔥댓글 기능 전반 구현1. 백엔드: comments 컬렉션 설계MongoDB에 comments 컬렉션을 새로 만들고, Post와 User를 참조하는 구조로 설계했다.// models/Comment.jsconst commentSchema = new mongoose.Schema({ postId: { type: mongoose.Schema.Types.ObjectId, ref: 'Post', required: true }, userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true }, content: { ..

📆 2025년 5월 26일 작업물 요약axios.defaults.withCredentials = true 전역 설정.env에서 VITE_BACK_URL 사용로그인/로그아웃/회원가입 요청 함수 작성인증 상태 확인용 getUserProfile() 함수 작성요청 전 console.log로 디버깅 로깅 추가쿠키 기반 인증 처리를 고려한 백엔드 통신 설계1. axios.defaults.withCredentials = true의 중요성설정 위치: axios.js 또는 API 모듈 초기화 파일에서 설정의미: 모든 HTTP 요청에 대해 자동으로 쿠키 포함실전 효과:JWT 토큰을 쿠키에 저장한 백엔드와 세션 유지 가능로그인 이후 새로고침에도 사용자 상태가 유지됨axios.defaults.withCredentials =..

MERN Stack이란?MERN Stack은 웹 애플리케이션을 개발할 때 자주 사용되는 JavaScript 기반의 풀스택 기술 조합이다.MERN은 각 기술의 앞 글자를 따서 만든 이름이다.구성요소MongoDBNoSQL 기반의 문서형 데이터베이스데이터를 JSON 형식으로 저장해 유연한 구조 설계가 가능하다빠르게 데이터를 읽고 쓸 수 있어 애자일 개발에 적합하다Express.jsNode.js 기반 웹 프레임워크라우팅, 미들웨어 처리, REST API 구축 등을 간단하게 처리할 수 있다서버 로직을 깔끔하게 구성할 수 있도록 도와준다React사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리SPA(Single Page Application) 개발에 최적화되어 있다컴포넌트 기반 구조로 코드의 재..