[수어 연구소] 웹 백엔드 디버딩 : DB 저장 안될때

안녕하세요 우당탕ㅌ아 개발일지 입니다. python, 앱 , 연구실 프로젝트만 하다가 처음으로 웹 프로젝트를 제대로 하게 되었습니다. 

이번에 카부캠 면접을 준비하고 보면서 평소에 프로젝트 할 때 고민들을 많이 정리해둬야한다고 느꼈습니다... 막상 개발하며 내가 뭐가 힘들었는지 쉽게 잊어버리더라구요..그래서 매번 개발할 떄 생긴 에러사항들을 정리하려고 합니다!! 웹 개발이 처음이라 제 주관 투성이 입니다. 개발 경험이 있으신 분이 있으면 댓글 많이 남겨주시면 그쪽 방향으로 많이 알아보겠습니다. 

 

 

1. 문제 상황

수어 단어 목록을 저장하는 기능을 구현했는데 분명 요청을 보냈는데 DB에 데이터가 저장되지 않는 문제가 발생했습니다. 

처음에는 단순히 “백엔드 문제인가?”라고 생각했습니다. 

 

해당 프로젝트는 일반 회원가입니 아니라 카카오 로그인 기반 인증 방식을 사용하고 있습니다! 사용자가 카카오 로그인을 완료하면 서버가 인증 정보를 바탕으로 토큰을 발급하고. 이후 프론트는 이 토큰에 담긴 쿠키를 사용해 학습 결과 저장 요청을 보내는 방식입니다. 

---

2. 전체 흐름 먼저 이해하기

이 기능은 다음과 같은 흐름으로 동작한다.

프론트 → (쿠키에서 토큰 읽기) → API 요청 → 백엔드 인증 → DB 저장

 

좀 더 자세히 보면:

1. 프론트에서 카카로 로그인 이후 발급된 access_token 쿠키를 읽어서 요청 헤더에 담는다.
2. 백엔드에서 JWT 검증 (get_current_user_id)
3. 검증 성공 시 DB에 저장 (SaveResultUseCase)

쿠키가 없으면 = 토큰 없음 = 인증 실패 = DB 저장 절대 안 됨

 

---

3. 왜 쿠키를 먼저 확인해야 할까?

“DB에 저장이 안 된다”는 문제의 가장 흔한 원인은 사실 DB가 아니라 인증입니다. 

• 쿠키 없음 → 토큰 없음
• 토큰 없음 → 401 에러
• 401 → 로직 자체가 실행 안 됨

백엔드 로직까지 도달하지도 못하고 끝나는 상황 그래서 가장 먼저 확인한 게 쿠키 존재 여부였습니다. 

 

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies

Using HTTP cookies - HTTP | MDN

 

 

쿠키 확인 방법 

1. 크롬에서 원하는 사이트 열기
2. Option + Cmd + I (개발자 도구 열기)  / F12
3. 상단 탭에서 Application 클릭
4. 왼쪽에서 Storage → Cookies 클릭
5. 해당 도메인 선택

<보이는 정보들> 

• access_token
• refresh_token

---

4. 상태코드 확인이 중요한 이유

쿠키가 있다면 다음으로 봐야 할 건 Network 탭의 상태코드 입니다.

상태 코드는 간단하게 '서버가 나한테 답장하는 메세지'입니다.

상태코드는 어디까지 실행했는지를 동시에 알 수 있어서 팀원한테 에러사항을 전달할때 이걸 꼭 같이 주는게 좋아요!

 

상태코드
200	정상	DB 조회 문제
401	인증 실패	쿠키 / 토큰
404	데이터 없음	lesson_id
422	요청 형식 오류	body
500	서버 에러	백엔드 코드

예를 들어:

• 401 → 아예 인증에서 컷
• 200 → 로직은 다 돌았음 → DB 문제

전체 코드를 뒤지지 않고 문제를 빠르게 좁힐 수 있다

전 상태코드는 정상이라 이렇게 전달했습니다. 이건 다른 사람 로그인 연결할때 이고 URL설정이 달라서 그랬습니다.

 

---

5. AJAX(fetch)를 사용한 이유 (해결)

이 프로젝트는  수어 학습이라 그래서 몇가지 특징이 있습니다 

• 사용자가 동작을 수행함
• 그 결과를 서버에 전송함
• 결과 또는 데이터(단어 목록 등)를 다시 받아옴

이때 AJAX(fetch)를 사용하지 않으면: 요청할 때마다 페이지가 새로고침됨 + 사용자 경험이 끊김 이 발생할 수 있습니다. 

 

전통 방식 (전체 페이지 새로고침)
요청 → 페이지 새로고침 → 전체 다시 렌더링

AJAX 방식
요청 → 데이터만 받음 → 필요한 부분만 업데이트

 

 

 

마찬가지로 개발자 모드 콘솔에서 실행하면 됩니다. 

fetch('/api/v1/learning/seed/fingerspell', { method: 'POST' })  // 서버한테 작업 시키는 명령
.then(r => r.json()) // 서버가 준 응답을 json으로 변환해줘
.then(console.log) //변환된 데이터를 콘솔에 출력해줘.

 

• fetch('/api/test') → 서버에 요청 보냄
• response.json() → 응답을 JSON 형태로 바꿈
• data → 실제 받은 데이터
• catch → 에러 처리

 

 

 

페이지 새로고침 없이 데이터 통신

: 사용자가 동작을 수행하면 즉시 결과를 보여줘야 한다.

비동기 처리

서버 응답을 기다리는 동안 화면은 멈추지 않는다.

 

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests

Making network requests with JavaScript - Learn web development | MDN

 

 

---

7. 내가 생각하는 디버깅 순서

앞으로는 이렇게 해볼것 같습니다.

1. 쿠키 있음?
2. 요청 나감?
3. 상태코드 뭐임?
4. 서버 로그 확인
5. DB 확인(필수)

잘 나오는 모습입니다.