Today I Learned
날짜
2023년 12월 14일 목요일
내용
테스트 서버에 데모버전 어드민 페이지 기능이 배포되었다.
환경변수
이전 TIL에서도 언급했듯, 유저에게 체험할 기회를 줄 데모 쇼핑몰과 데모 어드민 사이트는 우리가 환경변수로 계정 정보를 설정해야 했다. 이 계정 정보가 Shopify인지, 알파리뷰인지가 헷갈렸다. local에서 입력했던 정보로 알파리뷰와 Shopify 에서 각각 로그인했을 때, Shopify에서만 로그인이 되길래 Shopify 계정 정보라고 생각했다.
그런데, “우리가 Shopify 계정을 검증할 수 없는데 왜 받아야 하는가?”에 대해 대답할 수 없었다. 관련 코드를 열심히 찾다가 내가 간과했던 사실을 깨달았다. 데모버전 로그인에서는 비밀번호에 대한 검증 로직을 지웠다! 계정 정보를 우리가 설정한다는 이유로 지웠던 기억이 이제야 났다. 내가 테스트 했던 계정은 같은 ID로 알파리뷰와 Shopify에 모두 가입되어있다보니 헷갈렸던 문제였다.
로딩 페이지
테스트 서버에서 QA를 하던 중, 로컬에서는 확인하지 못했던 곳이 있었다. 데모버전 로그인을 위한 URL로 접속하면, 로그인 컴포넌트로 연결된다. 이때, data에 demo버전임을 알리는 값이 담기는데, 컴포넌트가 초기화될 때 이 값을 확인하면서 데모버전 로그인 로직이 진행된다. 이 과정에서 짧게 1초 정도 로그인 화면이 출력된다. local에서는 빠르게 로딩되다보니 놓친 부분이었다.
이 의미없는 로그인 화면 대신 로딩임을 알릴 수 있는 페이지로 대체해야 했는데, 방법이 잘 떠오르지 않았다. 새로운 컴포넌트를 만들어서 데모 로그인을 다른 곳으로 이뤄지게 해야하나..? 2개의 힌트를 받았다.
- 비동기화 함수
- ngIf로 HTML에서 출력할 구성들을 조절할 수 있음.
나는 데모버전일 때는, 로그인 컴포넌트의 특정 변수에 boolean 값으로 기록되도록 했다. 이 값에 따라 로그인 컴포넌트의 html이 아예 다르게 출력되도록. demo가 아니라면 기존대로 로그인을 위한 입력 박스를 출력해주면 되고, 아닐 땐 로딩중인 애니메이션을 출력하면 됐다.
회고
괜히 쫄아서 SOS쳤다. 더 고민해봤어야 했고, 쉬운 방법이 있었는데..
