[Mate] 개발일지 #20 - AWS CORS 해결 및 대댓글 시스템 구현

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 메서드를 명시적으로 추가하고, Access-Control-Allow-Origin에 배포 도메인을 등록하여 차단을 해제했습니다. 설정 변경 후에도 에러가 지속되는 현상은 브라우저의 Preflight 요청 캐싱(Max-Age) 때문임을 확인하고, 캐시 초기화 및 시크릿 모드 테스트를 통해 해결을 검증했습니다.

대댓글 시스템과 낙관적 업데이트 예외 처리

원댓글 하위에 1단 뎁스로 답글이 달리는 구조를 개발하고, React Query의 onMutate를 활용해 지연 시간 없는(Zero Latency) 낙관적 업데이트를 적용했습니다.

구현 과정에서 Date.now()로 생성한 프론트엔드 임시 ID가 PostgreSQL의 Integer 범위를 초과하여 500 에러가 발생하는 이슈가 있었습니다. 서버에 데이터가 저장되어 정식 ID가 발급되기 전까지는 답글 작성을 제한하는 방어 로직을 추가하여 해결했습니다. 또한 한글 입력 시 Enter 키 이벤트가 중복 발생하여 댓글이 두 번 전송되는 IME 문제는 isComposing 속성을 체크하여 방지했습니다.

Soft Delete(논리적 삭제) 도입

대댓글이 존재하는 원댓글을 물리적으로 삭제(Hard Delete)할 경우, 하위 댓글들이 고립되거나 함께 사라지는 문제가 발생했습니다.

이를 해결하기 위해 DB 스키마에 is_deleted 플래그를 추가하여 논리적 삭제(Soft Delete) 방식을 적용했습니다. 삭제 요청 시 자식 댓글이 남아있다면 해당 플래그를 True로 변경하고 내용을 "삭제된 댓글입니다"로 갱신하여 트리 구조를 유지했습니다. 자식 댓글이 없는 경우에만 DB에서 영구 삭제하도록 로직을 분기했습니다.

DTO 분리 및 타입 안전성 확보

게시글 목록 조회 시 본문이나 이미지 등 불필요한 데이터가 포함되어 네트워크 리소스를 낭비하고 있었습니다. 이를 개선하기 위해 Pydantic 스키마와 TypeScript 타입을 목록용(Summary)과 상세용(Detail)으로 철저히 분리했습니다.

이 과정에서 목록용 타입에서 제거된 필드(comment_count)를 UI 컴포넌트가 여전히 참조하고 있어 AWS 배포 빌드가 실패하는 상황이 발생했습니다. 타입 정의 변경에 맞춰 관련 UI 코드를 수정하고, TypeScript 컴파일러가 잡아낸 에러를 수정하여 배포를 완료했습니다.

Insight

로컬과 클라우드 환경(Gateway)의 보안 정책 차이는 배포 단계에서만 발견할 수 있는 맹점임을 확인했습니다. 또한 트리 구조의 데이터를 다룰 때는 Soft Delete가 데이터 무결성과 사용자 경험을 동시에 보호하는 표준적인 해결책임을 체감했습니다. 스키마 변경 시 런타임 진입 전에 에러를 사전에 차단해 주는 TypeScript의 효용성 또한 다시 한번 확인했습니다.