BFF 구축 [SPA+BFF구축 시 생긴 이슈]
개요
프로젝트 요구 사항으로 팝업으로 다수의 페이지가 열릴 수 있어야 했습니다. 이를 해결하기 위해 각 페이지를 query문을 이용해서 부모창에서 데이터를 가지고 왔습니다.
처리 과정
시도 1. window.opener의 데이터를 활용하기
문제 1. 다수의 팝업창이 열리게 될 시 가장 마지막 팝업 창의 데이터를 사용하게 됩니다.
→ 해결 : 각 팝업 페이지마다 opener에 고유의 값을 가진 데이터값에 넣어주기
문제 2. 부모창이 닫힌 후 팝업을 새로고침 시 데이터값이 날아가는 현상
→ 다른 방법 필요
시도 2. postMessage를 사용하기
시도 1과 같이 부모창이 닫힌 후 팝업 새로고침 시 데이터값이 날아감
시도 3. Url Query 사용하기
다수의 팝업창, 부모창이 닫힌 후 데이터값이 날아가는 현상은 처리
문제 1. sn값이 8자리인데 1000명이상의 데이터를 한번에 처리할 경우 URL이 글자 제한을 넘쳐 페이지 터짐 현상 발생
→ 다른 방법 필요
해결
window.popup 호출 후 form post 요청을 통해 데이터값을 포함한 HTML 페이지 노출 시키는 방법을 통해 해결했습니다. 이를 위해서 form 요청을 처리해줄 NodeJs BFF 구축이 필요했습니다.
처리 과정
1.
부모창에서 page url에 form post 요청
2.
form 요청으로 온 body 데이터를 input tag에 넣어 HTML 구성
3.
HTML을 리턴
4.
frontend 코드에서 html 태그 속 데이터를 불러와 화면 구성
예상치 못한 문제 해결
SPA + React Router DOM을 사용한 최초 구성을 그대로 들고간 상태에서 Custom HTML만 사용하려고 구상했으나 새로 고침시 페이지의 최초 요청인 form post가 아닌 form get 요청을 날려 모든 페이지의 데이터가 비정상적으로 노출되는 현상이 있었습니다. 이는 React Router DOM에서 POST 페이지 요청들을 강제로 GET으로 변환해 생기는 문제로 React Router DOM을 걷어내고, 각 페이지마다 호출하는 root page를 다르게 설정해 문제를 해결했습니다.