📋 관리자 사이트 개발 - 대량 문자 서비스 | 김병익

📌 프로젝트 개요

마스터, 일반 사용자, 시스템 3단계 권한에 따라 접근 메뉴와 조회 범위를 분기하였습니다.
일반 사용자는 자사 데이터만, 마스터는 고객사를 선택해 조회합니다.
포인트 조회, 충전 이력, 충전 페이지를 구현하였습니다.
충전과 환불은 마스터 권한에서만 가능하도록 제한하였습니다.

로그인 후 화면을 새로고침하면 로그인이 풀리는 문제가 있었습니다.
로그인 응답으로 받은 사용자 정보(권한 등급, 조회 가능한 고객사 목록 등)가 메모리에만 있었기 때문입니다.

사용자 정보를 브라우저에 그대로 저장하면 새로고침 문제는 해결되지만,
권한 정보가 클라이언트에 노출되어 임의로 수정될 수 있다고 판단했습니다.
대신 세션 값만 저장하고, 새로고침 시 그 값으로 사용자 정보를 다시 받아오는 방식을 제안했습니다.
클라이언트에는 검증 가능한 값 하나만 남고, 권한 판단은 서버가 담당합니다.
이를 위한 API가 없었기에 요청 및 응답 형태를 정리해 전달하였고, 백엔드에서 인증 갱신 엔드포인트를 신설하였습니다.
이후 해당 요청이 들어올 때마다 세션 만료 시간도 함께 갱신되도록 협의하였습니다.
받아온 사용자 정보는 Redux로 전역 관리하여,
헤더의 포인트 표시, 메뉴 분기, 조회 조건 등 여러 화면에서 함께 사용하도록 하였습니다.

로그인 요청이 서버에 도달조차 하지 못하는 문제가 있었습니다.
서버가 Access-Control-Allow-Origin을 와일드카드("*")로 응답하고 있었는데,
자격 증명을 포함한 요청에는 와일드카드를 쓸 수 없어 브라우저가 차단하고 있었습니다.
허용 출처를 명시하도록 바꾸자 이번에는 preflight OPTIONS 요청이 정상 응답을 받지 못하는 문제가 이어졌습니다.
본 요청 이전 단계에서 막히다 보니 body 데이터 자체가 서버에 전달되지 않았습니다.
proxy 설정 유무에 따라 증상이 달라지는 점을 이용해,
클라이언트 원인과 서버 원인을 분리해 정리한 뒤 백엔드에 전달했습니다.
- proxy 미적용 시: CORS 차단 발생
- proxy 적용 시: CORS는 통과하나 응답 이상
최종적으로 서버에서 요청 Origin을 그대로 반환하고 OPTIONS 요청에 정상 응답하도록 조정하여 해결하였습니다.
당시에는 개인 프로젝트에서 와일드카드로 모두 허용하면 대부분 동작했기에 원인 파악에 시간이 걸렸습니다.
이 과정에서 자격 증명이 포함된 요청에는 출처를 명시해야 하는 이유를 이해하게 되었습니다.