로그인된 줄 알고 글을 썼는데 튕겨 나가는 '좀비 세션' 문제를 해결하고, 제목과 본문은 물론 댓글 내용까지 찾아내는 통합 검색 기능을 구현했습니다. 이 과정에서 발생한 React Query의 캐시 동기화 이슈와 백엔드 쿼리 누락 문제를 바로잡아 시스템의 안정성을 확보했습니다.인증 로직 강화 및 좀비 세션 해결액세스 토큰(Access Token)이 만료되었음에도 UI상으로는 로그인 상태가 유지되는, 이른바 '좀비 세션' 현상이 사용자 경험을 해치고 있었습니다. 사용자는 글쓰기나 좋아요를 누르는 시점에야 401 에러를 마주하고 강제 로그아웃 당하는 불편을 겪었습니다.이를 해결하기 위해 Axios Interceptor를 고도화했습니다. 401 에러가 감지되면 즉시 리프레시 토큰(Refresh Token)으로..

AWS 배포 환경에서 DELETE 요청이 차단되는 CORS 문제를 해결하고, 대댓글 시스템과 낙관적 업데이트를 구현했습니다. 데이터 무결성을 위해 Soft Delete 방식을 도입했으며, DTO 분리를 통해 네트워크 페이로드를 최적화했습니다.AWS API Gateway CORS 설정 및 DELETE 메서드 허용로컬 환경에서는 정상 작동하던 댓글 삭제 기능이 AWS Amplify 배포 환경에서 405 Method Not Allowed 및 CORS 에러를 일으켰습니다. 원인은 FastAPI의 설정과 무관하게, 요청을 가장 먼저 받는 AWS API Gateway가 DELETE 메서드를 차단하고 있었기 때문이었습니다.API Gateway의 CORS 설정 목록에 DELETE 메서드를 명시적으로 추가하고, Acce..

메인 페이지의 로딩 지연 문제를 해결하기 위해 데이터베이스 반정규화와 조회 로직 분리를 수행하여 LCP(Largest Contentful Paint)를 단축했다. 또한 비회원 유입을 위한 UX 패턴을 적용하고, 낙관적 업데이트(Optimistic Update)를 도입하여 사용자의 인터랙션 지연 시간을 제로(Zero Latency) 수준으로 최적화했다.DB 반정규화 및 N+1 문제 해결을 통한 로딩 속도 단축현상 및 원인서비스 초기 로딩 시간이 평균 2.8초로 측정되어 사용자 경험 저하가 우려되었다. 프로파일링 결과, 게시글 목록 조회 시 각 객체의 좋아요 및 댓글 수를 산출하기 위해 수백 개의 연관 객체를 메모리에 로드하는 N+1 문제가 발생하고 있었다.해결 과정단순 쿼리 최적화의 한계를 극복하기 위해 ..

Windows 환경 등에서 기기 잠금(PIN, 생체인증)이 설정되지 않았을 때 발생하는 WebAuthn 에러에 대한 예외 처리를 구현했다. 불명확한 에러 메시지를 구체적인 행동 가이드로 매핑하고, 플랫폼 인증 장치의 가용성을 사전에 감지하는 로직을 추가하여 사용자 경험을 개선했다.WebAuthn 에러 코드 매핑 및 가이드 메시지 구체화현상 및 원인 Windows 환경에서 OS 차원의 잠금 설정(PIN, 비밀번호, 생체인증)이 비활성화된 상태로 패스키 가입을 시도할 경우, NotAllowedError가 발생하며 프로세스가 중단되었다. 브라우저가 반환하는 기본 에러 메시지는 기술적인 내용에 국한되어 있어, 일반 사용자가 기기 잠금 설정이 원인임을 인지하고 해결하기 어려웠다.해결 과정AxiosError 핸들링..

배포된 AWS Serverless 백엔드 API에서 발생한 접속 장애와 데이터 불일치, Cold Start 지연 문제를 해결했다. API Gateway의 호환성 설정과 CORS 정책을 수립하고, 테스트 데이터를 구축하여 프론트엔드 연동 환경을 정상화했다. 또한 EventBridge를 활용한 Warmer 트리거를 설정하여 컨테이너 초기 구동 속도 문제를 개선했다.API Gateway 호환성 확보 및 CORS 정책 수립현상 및 원인 API 호출 시 404 및 500 에러가 발생했으며, 프론트엔드 연동 시 CORS 정책 위반으로 데이터 호출이 차단되었다. 원인 분석 결과, API Gateway HTTP API(v2)의 Payload 2.0 형식을 Python 어댑터(Mangum)가 해석하지 못하는 호환성 문제..

AWS Lambda(Container) 기반의 FastAPI 서버를 배포하는 과정에서 발생한 접속 장애와 500 에러를 해결했다. API Gateway의 라우팅 설정 미비, Docker 컨테이너의 Cold Start 지연, Mangum 어댑터의 Payload 버전 불일치, 그리고 FastAPI 경로 매핑 문제를 단계적으로 수정하여 안정적인 배포 환경을 구축했다.인프라 설정 및 런타임 타임아웃 조정CI/CD 파이프라인을 통해 이미지는 정상적으로 배포되었으나, API Gateway 엔드포인트 접속 시 요청이 Lambda로 전달되지 않았다. 초기 설정 시 스테이지와 라우트가 정의되지 않은 것이 원인이었다. 명시적인 default 스테이지와 $default 라우트를 생성하여 Lambda와 통합을 완료했다.이후 ..

백엔드 인증 로직 구현 및 DB 모델링이메일 및 패스키 인증 시스템 Google SMTP를 활용한 인증번호 발송 로직과 WebAuthn 표준을 따르는 패스키 회원가입 API(/signup/options, /verify)를 구현했다. 보안 강화를 위해 python-dotenv를 도입하여 민감 정보를 환경변수로 분리했다. 데이터베이스는 User와 Passkey 테이블을 1:N 관계로 정의하고, credential_id 및 public_key 등 필수 필드에 대한 인덱싱을 완료했다.보안 모듈 리팩토링 기존 create_access_token 함수가 단일 문자열 인자만 허용하여 확장이 불가능한 문제가 있었다. 이를 딕셔너리(data: dict) 전체를 인자로 받도록 리팩토링하여, 향후 토큰 내에 역할(Role)..

프론트엔드 렌더링 중단 오류를 수정하고, 메인 페이지의 실제 로딩 속도를 측정하기 위해 모니터링 도구를 구현했다. 측정된 정량적 지표를 바탕으로 로딩 시간을 단축하기 위해 ORM 튜닝, DB 반정규화, API 통합 등 다양한 최적화를 시도했으나, 성능 저하 및 복잡도 증가 문제가 발생하여 기존 아키텍처로 롤백을 결정했다.useQuery 구조 분해 수정 및 로딩 시간 측정현상게시글 상세 페이지(PostDetail.tsx) 진입 시 'isFetching' is not defined 에러가 발생하며 렌더링이 중단되었다. useQuery 훅의 반환 객체에서 isFetching을 구조 분해 할당하지 않은 상태에서 변수로 참조하려 한 것이 원인이었다. 또한 메인 페이지와 달리 상세 페이지의 API 응답 속도에 대한..

커뮤니티의 정보 밀도를 높이기 위해 메인 페이지 UI를 리스트형으로 개편하고 컴포넌트 구조를 재사용 가능한 형태로 최적화했다. 백엔드에서는 연관 데이터 조회 시 발생하는 세션 에러와 N+1 문제를 해결하고, 사용자 반응 가중치를 적용한 인기글 정렬 알고리즘을 도입했다. 또한 프론트엔드와 백엔드 간 페이지네이션 및 라우팅 규격 불일치 문제를 해결하여 서비스 안정성을 확보했다. 메인 페이지 UI 구조화 및 렌더링 최적화현상 및 원인기존 카드형 UI는 정보 밀도가 낮아 '베스트', '최신', '카테고리' 섹션을 한눈에 파악하기 어려웠다. 또한 카테고리 변경 시 상태 초기화를 위해 useEffect를 사용하여 불필요한 렌더링과 코드 복잡도가 증가했다. 해결 과정공통 UI와 데이터 호출 로직을 PostSectio..

회원가입 및 로그인 과정에서 발생한 500 에러와 라이브러리 의존성 충돌 문제를 해결하고, 기획 변경에 따라 인증 방식을 이메일에서 아이디(Username) 기반으로 전환했다. 또한 프론트엔드와 백엔드 간 데이터 구조 불일치로 인한 렌더링 오류를 수정하고, Git 저장소의 불필요한 추적 파일을 정리하여 개발 환경을 최적화했다.의존성 호환성 문제 및 DB 스키마 동기화회원가입 API 호출 시 MissingBackendError: bcrypt가 발생하며 서버가 중단되는 현상이 확인되었다. 원인 분석 결과, 암호화 라이브러리인 passlib이 최신 버전의 bcrypt(4.0.1)와 호환되지 않아 발생한 문제였다. backend/requirements.txt 내의 bcrypt 버전을 호환성이 검증된 3.2.2로..

기술 스택 및 아키텍처비용 효율과 유지보수 편의성을 최우선으로 고려해 아키텍처를 구상했다. 트래픽이 없을 때도 서버 비용이 나가는 것을 방지하고자 AWS Lambda 기반의 서버리스 구조를 택했고, 백엔드 프레임워크로는 비동기 처리에 강하고 Python의 생산성을 그대로 가져갈 수 있는 FastAPI를 도입했다. 데이터베이스 역시 관리 부담을 최소화하기 위해 완전 관리형 서비스인 Supabase(PostgreSQL)를 연동했다.인증 시스템 (Authentication) 구현기존 개발 단계에서 user_id=1로 하드코딩해두었던 임시 코드를 걷어내고, 보안성을 갖춘 인증 시스템을 구축했다.서버가 상태를 저장하지 않는(Stateless) Lambda 환경의 특성상, 세션 방식보다는 토큰 기반 인증이 적합하다..

Django에서 FastAPI로 백엔드 프레임워크를 전환하고, AWS Lambda 환경에 Serverless Framework로 배포하는 과정에서 겪은 문제들과 해결 과정을 기록한다. 로컬 개발 환경과 실제 배포 환경(Linux/Serverless)의 차이에서 오는 의존성 관리 문제가 주된 이슈였다.Alembic 마이그레이션과 설정 파일 파싱 문제데이터베이스 마이그레이션을 위해 Alembic을 설정하는 과정에서 초기 연결 에러가 발생했다. alembic.ini 파일이 데이터베이스 URL 내의 특수문자(특히 비밀번호의 %)를 파이썬의 ConfigParser 보간(interpolation) 문법으로 오인하여 ValueError: invalid interpolation syntax 에러를 일으켰다.이를 해결하..

날짜: 2025. 12. 25.주제: Global Navigation, Recursive Comments, MyPage, Strict Typing, Axios Interceptor프론트엔드 아키텍처 및 UI/UX사용자의 동선을 최적화하고(Global Nav), 데이터의 깊이를 표현하며(Recursive Tree), 개인화된 경험(MyPage)을 제공하는 데 집중했다.글로벌 내비게이션 바 (Navbar) 통합:src/components/layout/Navbar.tsx를 신규 구현하여 로그인 상태(userAtom)에 따라 [로그인/회원가입] 또는 [글쓰기/프로필] 버튼이 조건부로 렌더링되도록 설계했다.src/app/layout.tsx의 RootLayout에 Navbar를 배치하여, 애플리케이션의 어느 페이지..

[MATE] 개발일지 #4 - 인증 메커니즘 고도화 및 시스템 안정성 확보날짜: 2025. 12. 24.주제: JWT Silent Refresh, Axios Interceptors, CORS Policy, DRF Annotation프론트엔드 아키텍처 및 디자인 시스템게시글 상세 페이지의 완성도를 높이고, 하드코딩된 스타일과 설정 파일의 기술 부채를 정리했다.디자인 시스템 동기화 (Indigo to Primary):특정 색상 코드(indigo)에 의존하던 기존 방식을 테마 변수(primary) 기반으로 전면 교체했다. 브랜딩 변경 시 대응력을 높이기 위해 Tailwind의 투명도 모디파이어(bg-primary/10)를 활용하여 시스템 색상 체계를 일관성 있게 유지했다.웹 접근성 및 가독성 개선:스크린 리더..

날짜: 2025. 12. 22.주제: Jotai Persistence, JWT Customization, TypeScript Refactoring, Django DRF환경 설정 및 아키텍처프로젝트 루트와 프론트엔드 디렉터리에 각각 존재하는 .gitignore 파일을 정리하고, TypeScript 설정을 최신 표준에 맞게 수정했다..gitignore 계층화 전략:루트의 설정 파일과 프론트엔드 전용 설정 파일을 병합하지 않고 유지했다. 모듈화 된 구조를 통해 추후 프론트엔드 디렉터리의 이동이나 분리 배포 시 설정 종속성을 최소화하기 위해서였다.루트에는 IDE 및 OS 설정, 프론트엔드에는 Next.js 빌드 및 의존성 관련 설정을 분리하여 관리 효율성을 증대했다.tsconfig.json 최신화:TypeScr..

날짜: 2025. 12. 20.주제: Next.js(App Router), DRF, Design System, TypeScript백엔드 안정화 및 환경 정비개발 서버 구동 시 발생하는 경고를 제거하고, 데이터베이스 스키마와 애플리케이션 설정을 동기화했다.PK 모델 경고 해결 및 마이그레이션 (Django Settings):장고 3.2 버전 이후 권장되는 BigAutoField를 명시하여 잠재적인 ID 정수 오버플로우를 방지하고, 시스템 체크 경고를 제거하여 터미널 로그의 가독성을 확보했다.DEFAULT_AUTO_FIELD 설정 및 마이그레이션 적용을 통해 데이터베이스와 모델 구조를 일치시켰다.프론트엔드 컴포넌트 설계 및 상태 관리페이지 중심의 코드에서 컴포넌트 기반 아키텍처로 전환하여 유지보수성과 재사용..

날짜: 2025. 12. 19.주제: DRF 필터링 전략 수립, 이미지 처리 로직, 마이페이지 쿼리셋 최적화게시판 기능 고도화 (Community App Enhancement)CRUD 구현 이후 확장성과 유지보수성을 고려한 기술 스택을 도입하여 기능을 고도화했다.검색 및 필터링 전략 (Search & Filter Strategy):기술적 의사결정: 기존의 request.query_params를 하나씩 받아 if문으로 분기 처리하는 방식(Imperative)은 필드 수가 늘어날수록 뷰 로직이 비대해지는 문제가 있었다. 이를 해결하기 위해 선언적(Declarative) 방식인 django-filter와 DRF의 FilterBackend를 도입했다.구현:DjangoFilterBackend: 카테고리(categ..

작성일: 2025. 12. 17.주제: 이메일 인증 트러블 슈팅, 게시판 CRUD 구현, 그리고 커스텀 권한(Permission) 관리학교 이메일 인증 구현과 403 에러 해결지난번에 이어 simplejwt를 활용한 로그인 시스템을 구축하고, 실제 학교 이메일로 인증 코드를 발송하는 테스트를 진행했다.Google SMTP를 연동하여 메일 발송을 시도했는데, 예상치 못한 403 Forbidden (CSRF verification failed) 에러를 마주했다.문제 상황: Postman으로 이메일 전송 요청 시 CSRF 토큰이 없다며 거부당함.원인 분석: 요청을 보낸 URL이 API 엔드포인트가 아닌, Django 관리자 페이지(admin/) 주소였다. 브라우저 기반의 관리자 페이지는 CSRF 토큰 검증이 ..

날짜: 2025. 12. 16.주제: JWT 인증 시스템 구축, 개발 환경 트러블 슈팅, 게시판 데이터베이스 모델링1. JWT 로그인 시스템 구축 (Authentication)회원가입 이후 실질적인 유저 식별을 위해 로그인 시스템을 구현했다.djangorestframework-simplejwt 라이브러리를 사용하여 JWT(JSON Web Token) 발급 구조를 잡았다. 세션 대신 JWT를 선택한 이유: 추후 AWS Lambda(Serverless) 배포 환경을 고려했을 때, 서버가 상태를 저장하지 않는 Stateless 구조가 필수적이었다. React 프론트엔드 및 향후 모바일 앱 확장을 고려하여 쿠키/세션 방식보다는 헤더 기반의 토큰 방식이 CORS 및 호환성 면에서 유리하다고 판단했..

날짜: 2025. 12. 09.주제: 이메일 인증 시스템 코드 구현, URL 연결, 회원가입 API 연동이메일 인증 시스템 로직 구현회원가입 후 수행할 '학교 이메일 인증' 기능을 위한 핵심 코드를 작성했다. 아직 실제 발송 테스트 전 단계다. Serializer (users/serializers.py 생성): 기본 UserSerializer 외에 인증 데이터 검증을 위한 EmailVerificationSerializer, CheckCodeSerializer를 새로 작성했다. View (users/views.py): SendEmailVerificationView: 도메인 파싱 및 인증 코드 생성, 메일 발송 로직 작성. VerifyCodeView: 입력된 코드 검증 및 유저 권한(is_stu..

날짜: 2025. 12. 08.주제: 기술 스택 선정, 보안 설정, 회원가입 API 구현프로젝트 시작 및 스택 변경대학생 익명 커뮤니티 '메이트(Mate)' 개발을 시작했다. 핵심은 '학교 인증'을 통한 신뢰성 확보다.기술 스택은 고민 끝에 FastAPI에서 Django로 변경했다. 변경 이유: 생산성: 1인 개발이라 리소스가 부족하다. Django의 Admin 기능과 내장 Auth 시스템을 활용해 개발 속도를 확보하기 위함이다. 보안: 커뮤니티 필수인 SQL Injection, XSS 방지 처리가 기본적으로 되어 있어 안전하다. 배포: 추후 AWS Lambda(Zappa)로 서버리스 배포가 가능하므로 비용 효율성도 챙길 수 있다. 개발 환경 구축 (Monorepo)GitH..

📂파일구조 ├─📂assets - 사용할 이미지들 │ └─📂icons │ └─🖼️images(svg) │ ├─📂styles - 적용한 스타일 │ └─🖌️main.css │ └─🖌️general.css │ └─🖌️header.css │ └─🗒️index.html └─🚀app.js 기대 결과 최종 결과 주요 기능 editTodo(할 일 수정) 함수 function editTodo(index) { const $todoText = $todoList.children[index].querySelector('.todo'); const $paragraph = $todoText.querySelector('p'); const $input = document.createElement('input'); $input.type =..

📂 파일 구조 🗂️project ├─📂assets - 사용할 이미지들 │ └─🖼️images │ ├─📂styles - 적용한 스타일 │ └─🖌️bottom.css │ └─🖌️general.css │ └─🖌️header.css │ └─🗒️index.html 기대 결과 최종 결과 주요기능 transition & transform 사용하여 이미지에 마우스 호버 시 점차 확대 .main-bottom img { transition: transform 1s ease-out; } .main-bottom img:hover { transform: scale(1.4); linear-gradient를 주어 검정색 opacity를 조절하여 배경과 작품 목록 컨테이너 사이의 경계를 부드럽게 표시 background: linea..

개요 혼밥러 탈출을 위한 매칭 & 키오스크 서비스, 4인 프로젝트 프로젝트 목표 기존에 모바일에서 사용되던 학식당 주문 어플리케이션의 단점을 보완 학식당의 환경에 맞추어 학생들이 원하는 메뉴 의견 취합, 학생들이 주로 먹는 메뉴등의 서비스를 제공 추가로 학생들의 혼밥 방지를 위한 같이 식사할 학우를 매칭해주는 혼밥 방지 서비스를 제공 서비스 개발 배경 및 목적 코로나 이후 학우들간 교류가 감소하여 혼자 밥을 먹는 학우들이 증가하였습니다. 저희 팀은 이러한 문제점을 개선하고 기존 불편했던 학식당 어플을 보완하여 학우들간 가볍게 밥 한끼를 먹을 수 있도록 하는 프로젝트 입니다. 서버 백엔드에 사용된 기술은 스프링을 기반으로 스프링 데이터 JPA, QueryDSL 등이 사용되었고 MYSQL DB, 사용자 인증..

🌟 Java swing kiosk project 프로젝트 개요 소프트웨어 개발 목표 토스트 주문 시 선택할 수 있는 품목들과 추가할 수 있는 옵션들을 포함하여 고르고 총합 금액 확인과 결제까지 할 수 있는 키오스크 형태의 프로젝트를 개발할 것이다. 유사 소프트웨어 분석 버거킹 키오스크, 맥도날드 키오스크, KFC 키오스크, 메가커피 키오스크 등 첫 화면에는 이벤트 중인 상품이나 가장 대표적인 상품, 또는 신상품이 띄워져 있는 경우가 많았다. 버거킹의 경우 상단 바에 콘텐츠를 보면 스페셜 세트, 일반 세트, 햄버거류 단품, 사이드 품목, 음료 순으로 배치되어 있었다. 하단에는 주문 내역을 확인할 수 있고 개수, 금액 등 정보가 표시되어 있었다. 전체 취소 버튼과 쿠폰 사용 버튼, 결제 진행 버튼이 오른편 ..

⭐ Code [Bricks Run] //!주의!레거시 콘솔 사용 필수 //Bricks Run #include #include #include #include #define WIDTH 30 #define HEIGHT 20 #define GREEN12 #define RED14 const float AddSpeed = 0.5f; typedef struct { int x; int y; int act; }Bricks; typedef struct { int x; }Player; typedef struct { int x; } Coin; typedef struct { char name[64]; int score; }PlayerData; Bricks bricks[WIDTH]; Player player; Player pl..