TIL 91

[Spring Boot/React] AI 맞춤형 오답노트 기능 구현 및 트러블슈팅 🚀

이번 포스팅에서는 현재 진행 중인 'Study-Flow AI (AI 기반 학습 보조 서비스)' 프로젝트에 맞춤형 오답노트 기능을 추가하면서 겪은 트러블슈팅 과정과 기능 고도화(다시 풀기 및 상태 업데이트) 경험을 공유하고자 합니다.프론트엔드(React)와 백엔드(Spring Boot)를 오가며 데이터의 생명주기와 인증 처리를 어떻게 맞췄는지 정리해 보았습니다.💡 1. 어떤 기능을 만들었나요?AI가 이미지를 분석해 만들어준 퀴즈를 풀고 나면, 틀린 문제들만 따로 모아서 볼 수 있는 '오답노트' 페이지를 기획했습니다. 단순히 틀린 목록만 보여주는 것을 넘어, 아래의 목표를 가지고 개발을 진행했습니다.직관적인 UI: 내가 적은 오답과 실제 정답을 한눈에 비교할 수 있는 카드형 UI.다시 풀기 기능: 틀렸던 ..

TIL 2026.03.19

유지보수성을 높이는 백엔드 리팩토링 (FastAPI & Spring Boot)

1. 도입: 리팩토링을 결심한 이유이번 프로젝트에서는 기존에 동작하던 AI 백엔드 서버의 내부 구조를 개선하는 리팩토링을 진행했다.초기 버전의 코드는 빠른 기능 구현에 초점이 맞춰져 있었지만, 프로젝트가 확장되면서 다음과 같은 문제점들이 드러났다.유지보수의 어려움: 하나의 파일에 너무 많은 코드가 집중되어 있어, 수정이 필요할 때 전체 코드를 파악해야 했다.확장성 부족: 새로운 기능을 추가할 때 기존 코드를 수정하는 것에 부담이 있었고, 코드 간 의존성이 높아 테스트가 어려웠다.안정성 문제: 예외 처리가 포괄적이어서, 에러 발생 시 원인을 빠르게 파악하기 힘들었다.이러한 문제들을 해결하고, 더 안정적이고 유연한 백엔드 시스템을 만들기 위해 -Python AI 서버(FastAPI)-와 -Java 메인 서버..

TIL 2026.03.10

EC2 (nest.js) 서버 배포 2

이 전에 이어서 작성을 하겠다 .https://ohs020105.tistory.com/146 ec2 서버 배포 (nest.js)이번에 인턴 과제 때문에 오랜만에 ec2를 사용하게 되었는데 다 까먹은 상태라;;; 다시 공부에 들어갔다. 그래도 좋은게 전에 프로젝트를 할때는 다른 팀원이 하셔서 서버를 건들때가 없었지만ohs020105.tistory.commacOS에는 기본적으로 ssh가 기본 설치되어 있어서 명령어로 바로 접근이 가능하다. 여기서 ssh란?- SSH(Secure Shell)는 일반적으로 다른 컴퓨터에 연결할 때 사용되는 프로그램이다.다른 접속 방법 보다 보안이 뛰어나 서버 연결을 위해 일반적으로 사용된다.로컬 저장소에서 Github의 원격 저장소를 사용하기 위해 SSH key를 발급했던 것과..

TIL 2025.04.17

ec2 서버 배포 (nest.js)

이번에 인턴 과제 때문에 오랜만에 ec2를 사용하게 되었는데 다 까먹은 상태라;;; 다시 공부에 들어갔다. 그래도 좋은게 전에 프로젝트를 할때는 다른 팀원이 하셔서 서버를 건들때가 없었지만 이번기회로 좀 많게 알아가는것 같다. 1. AWS EC2 Instance 생성AWS EC2에서는 컴퓨터 하나의 단위를 Instance 라는 이름으로 부른다.그래서 EC2 Instance를 생성한다는건, 서버 컴퓨터를 하나 대여한다는 것과 같다! https://console.aws.amazon.com/console/home https://console.aws.amazon.com/console/home console.aws.amazon.comRegion선택- 여기선 지역을 선택하는데 현재 있는 지역하고 가까울수록 접속 속..

TIL 2025.04.17

위치 기반 흐름 정리

Geolocation API의 역할브라우저(클라이언트) 쪽에서 직접 GPS 등으로 위도·경도를 조회합니다.이 덕분에 서버(DB)로 매번 “이 사용자의 최신 위치가 어디냐?”를 묻지 않아도 되어서, 서버의 읽기(쿼리) 부하를 크게 줄일 수 있습니다.Valkey 캐싱의 역할서버가 WebSocket으로 받은 위치 정보를 일정 시간(예: 10초) 동안 메모리(Cache)에 저장해 두고,같은 사용자로부터 너무 짧은 시간 안에 중복된 위치 요청이 들어오면 DB나 다른 서비스 호출을 건너뛰도록 합니다.결과적으로 “위치 조회 → 처리 → 저장” 사이클의 빈도를 낮춰서 시스템 전체의 부하를 줄여 줍니다.WebSocket 풀링의 역할클라이언트가 매번 HTTP 요청을 날리는 대신, 한 번 연결한 WebSocket 위에서 주..

TIL 2025.04.13

80일차 TIL

오늘 진행한 업무: 핑크토피아 업적 시스템 개선오늘은 핑크토피아 프로젝트의 업적 시스템을 개선하는 작업을 진행했다. 주로 완료된 업적과 진행 중인 업적을 정확하게 구분하고, 서브업적의 완료 상태를 포함한 데이터를 제공하는 API를 구현했다.주요 개선 사항1. 서브업적 완료 상태를 포함한 새로운 API 엔드포인트 추가했다2. 프론트엔드에서 서브업적 완료 여부 로직 개선했다 3. 토큰 인증 방식 통일했다 🔍 문제 상황1. 업적 조회 기능 불일치서브업적 데이터를 가져올 때 완료 상태 정보가 포함되지 않아 사용자별 진행 상황을 알 수 없었다. 특히 "진행중인 업적" 탭에서 실제로 진행 중인 업적만 표시되어야 하는데, 이 구분이 제대로 되지 않았다.// 기존 코드 - 완료 상태 정보 없이 서브업적만 반환asyn..

TIL 2025.03.07

79일차 TIL (토스 구현 3일차)

오늘은 토스 환불관련 로직을 수정했다. 우선 흘러가는 흐름은 이렇게 된다.전체 환불 시스템 흐름클라이언트 -> 환불 요청 (결제 키, 취소 이유, 금액 포함)컨트롤러 -> 요청 수신, 사용자 인증 확인서비스 -> 기본 유효성 검사 ( 결제 존재, 중복 환불 아님 등)서비스 -> 다이아 사용량 화인 (FIFO 원칙)모든 결제 내역 조회 (미환불 건만)총 구매 다이아와 현재 다이아 비교시간순으로 (FIFO) 다이아 사용 여부 확인환불하려는 결제의 다이아가 사용됐는지 판단서비스 -> 테스트/실제 결제 구분 처리실제 결제는 토스 페이먼츠 API 호출사용자 서비스 -> 다이아 차감 실행저장소 -> 결제 상태 업데이트 (환불됨으로 표시)클라이언트 1.환불 요청 처리 메서드async refundPayment(paym..

TIL 2025.03.06

78일차 TIL (토스 결제 구현 2일차)

오늘은 어제의 로직을 이어서 이번엔 실제로 결제는 안되지만 결제가 된다는 느낌을 가지는 테스트로 결제를 하게 된다면 다이아를 추가되는 로직을 추가했다. 우선 사진으로 보자면 기본 아이템 상점에 다이아를 추가할 수 있게 추가했다. 구매하기 누르면 이렇게 자신의 상품내용하고 가격, 결제방법을 선택할 수 있다. 이렇게 각자 결제 방법에 맞게 입력을 해주고 다음으로 넘어가면  이런식으로 충전이 완료되었다는 메세지 하고 실제로 다이아가 추가가 된게 보인다.(사진찍겠다고 한번 넘어가버려서 다시 한번 더 한건 안비밀)# TIL (Today I Learned) - Toss 결제 연동과 다이아 충전 구현## 1. 구현 목표- Toss Payments를 이용한 결제 시스템 구축- 결제 완료 후 사용자의 다이아 수량 자동 ..

TIL 2025.03.04

77일차 TIL

채팅 웹소켓 관련 트러블 슈팅 1. 실시간 연결 인증 문제// 문제: 웹소켓 연결 시 인증 토큰 검증 실패// 원인: 클라이언트에서 토큰이 제대로 전달되지 않거나, 서버에서 토큰 검증 로직이 불완전// 해결:@WebSocketGateway({ namespace: 'chatting', cors: { origin: ['http://localhost:3000', 'http://127.0.0.1:5500'], credentials: true, allowedHeaders: ['Authorization'], },}) 2. 채팅 메세지 중복 전송// 문제: 같은 메시지가 여러 번 전송되는 현상// 원인: 이벤트 리스너가 중복 등록되거나, 서버에서 메시지를 여러 번 브로드캐스트// 해결: 메시지 ..

TIL 2025.03.03

76일차 TIL ( 면접 카타 9일차 )

17. 이진트리, 이진 검색트리, 힙이 각각 무엇인지 설명하고, 차이점을 설명해주세요 답: 1. 이진 트리 : 각 노드가 최대 두 개의 자식 노드를 가질 수 있는 트리 구조입니다. - 특별한 정렬 규칙이 없으며, 단순히 트리 형태를 유지하는 것이 특징입니다. - 대표적인 예로 이진 검색 트리, 힙, 완전 이진 트리 등이 있습니다. 예제로는 :  - 파싱 트리 -> 수식 계산을 위한 구문 분석 - 네트워크 구조 표현 -> 네트워크 토폴로지 2. 이진 검색 트리: 이진 트리의 한 종류로, 왼쪽 자식 노드는 부모보다 작고, 오른쪽 자식 노드는 부모보다 큰 값을 갖는 트리입니다. 특징으로는: - 평균적으로 탐색, 삽입, 삭제가 O(log n) - 중위 순회 시 오름차순 정렬된 결과 반환 - 군형이 깨질 경우 성..

TIL 2025.02.21