마주봄 — 기술안건 (미들웨어 사용 관련)

[aahreum]

인증된 페이지 접근 제어 방식 논의

배경

로그인 이후 프로필 페이지 같은 인증이 필요한 페이지에 대한 접근 제어를 어떻게 구현할지 논의합니다.
아까 낮에 잠시 이야기했었을 때는 React Query만 사용하는 방식으로 마무리 되었던 것 같은데
찾아보니까 미들웨어를 사용하는게 UX 관점에서 좋을 것 같아서 안건 정리해보았습니다!

---

A) React Query만 사용

흐름

유저가 /profile URL 직접 입력
    ↓
페이지 렌더링 시작 (HTML, JS 로드)
    ↓
React Query가 /users/me 요청
    ↓
인증 실패 확인
    ↓
로그인 페이지로 리다이렉트

장점

• 별도 미들웨어 파일 없이 구현 가능해 코드가 단순하다
• React Query로 유저 상태 관리가 한 곳에서 이루어진다

단점

• 페이지가 일단 렌더링된 이후에 인증 확인이 일어난다
• 그 사이에 인증되지 않은 콘텐츠가 잠깐 노출되는 FOUC(Flash of Unauthenticated Content) 현상이 발생할 수 있다
• UX 측면에서 깜빡임이 생겨 사용성이 떨어진다

---

B) 미들웨어 + React Query 함께 사용

흐름

유저가 /profile URL 직접 입력
    ↓
미들웨어가 쿠키 확인 (렌더링 전에)
    ↓
쿠키 없으면 → 즉시 로그인 페이지로 이동
    ↓
페이지 렌더링 자체가 안 일어남

장점

• 렌더링 전에 접근을 차단하므로 FOUC 현상이 없다
• 미들웨어(접근 제어)와 React Query(UI에서 유저 정보 활용)의 역할이 명확하게 분리된다
• 보안 측면에서도 더 안전하다

단점

• 미들웨어 파일이 추가되어 관리 포인트가 늘어난다

---

역할 분리 정리

역할	담당
페이지 접근 제어	미들웨어
유저 정보 UI 활용	React Query

---

건의

저는 미들웨어와 React Query를 함께 사용하는 B안을 제안합니다.
React Query만으로도 구현은 가능하지만 FOUC 현상으로 인한 UX 저하가 우려되고,
미들웨어를 추가하면 렌더링 전에 접근을 차단할 수 있어 더 안정적이라고 생각합니다!!
그리고 두 도구의 역할이 겹치지 않고 명확히 분리되는 구조가 되어서 깔끔한 것 같아요

[aahreum]

아 그리고 내일 zustand 사용할 건지도 정하면 좋을 것 같아요! 뭔가 아까 딱 확정은 안했던 것 같아서요..!
아니면 다른 상태관리 라이브러리 jotai는 어떨지도 이야기해보면 좋을 것 같아요

[yujinimda]

상태관리를 일단 서버 상태는 리액트 쿼리로 담당을 하기로 했고 (유저 정보, 프로필)

그러면 남은 전역 라이브러리가 담당할껀 ui 밖에 없는데 그마저도 모달 하나만 있다고 생각하긴 합니다? (아직 필터가 없으니)

중첩모달조차 계획에 없다면 번들 사이즈를 생각해서라도 굳이 상태관리를 하나 더 넣을필요가 있을까 싶긴합니다

jotai은 알아보니 atom 단위로 쪼개는 구조라 모달같이 묶인 상태 + 액션패턴에는 오히려 번거롭다고 하긴하네용,,!

[chldntjr1321]

모달이 하나 정도면 그걸 위해서 라이브러리를 하나 더 하기에는 앞서서 번들 사이즈를 작게 가져가기 위한 노력이 아쉬워질 것 같아요...

[yujinimda]

미들웨어를 넣는다면 단순히 쿠키가 있냐 없냐만 확인을 할꺼죠?
만료 여부까지 미들웨어에서 확인하려면 매 요청마다 세션 저장소를 조회해야 해서 부담이 클것 같고
만약 만료된 쿠키를 가지고 온다면 미들웨어는 통과시키고 리액트 쿼리에서 401 처리를 하는좋겠죠?

=============

결과적으로 저는 좋은거 같아요~!
다만 미들웨어를 넣었을때 보안이 더 강력해지냐? 보다는 순수하게 ux 관점이 더 큰거같습니다!

[aahreum]

쿠키 여부만 확인하는게 좋을 것 같아요!! 만료여부까지 하면 1차 검증용으로 가볍게 쓰기에는 과한 것 같아요
보안은... 클로드와 적어주긴 했는데 저도 UX적으로 화면 깜빡임 막는 용도인 것 같아요

[chldntjr1321]

미들웨어 도입하면 말씀하신대로 쿠키가 있는지만 확인하고 그 뒤로는 React Query에서 검증하면 될 것 같아요!

[chldntjr1321]

보안은 RLS 정책? 낮에 말했던 그걸로 한다고 했던 것 같아서..