Today I Learned
날짜
2023년 12월 12일 화요일
내용
Session
현재까지 데모버전으로 로그인을 한다는 것은 우리가 원하는 계정(데모 스토어를 위한 계정)에 자동으로 로그인 해주는 것 외에는 딱히 차이가 없었다. 해당 스토어를 체험을 위해 잘 구성하기만 하면 되겠다고 생각했다.
하지만 어드민 페이지에서 기타 store나 account에 대한 setting을 변경할 수 있다는 문제를 인지했다. 꼭 critical 하지 않은 정보들도 있겠지만, 쇼핑몰의 위젯이나 리뷰 관련된 컨텐츠들만 제공해야할 데모 버전이기 떄문에 불필요한 수정을 방지하는 것이 필요하다고 생각했다. 내가 탐색해본 결과, 알파리뷰 어드민 페이지에서 Settings에 들어가는 버튼은 2곳에 있다. 좌 하단과 우측 상단 user 아이콘을 클릭하면 나타나는 버튼. 데모버전에서는, 이 둘을 무력화해야했다.
어떻게 서버가 지금 데모버전임을 알 수 있게 할 것인지 고민이 많았다. DB에 특정 계정이 Demo를 위한 계정임을 추가로 저장하는 것은 바람직하지 않다고 생각했다. 기존 계정을 나타내는 table에 또 다른 schema를 추가하는 것은 가능은 하지만 후순위여야 한다고 생각했다. 꽤 오래 이 고민을 했는데, “버튼을 없애야 한다”는 것에 집중했다. 이는 프론트에서 발생하는 과제다. 엄밀히, 서버는 데모인지 알 필요가 없다고 생각했다. 프론트에서만 관리되도 문제가 없을 것이라고 생각했고, 이를 통해 Session을 사용하기로 계획했다.
기존에 Session에 여러 정보들이 담겨있는데, 데모 버전으로 로그인할 때는 현재 Demo 버전임을 나타내는 key와 value를 추가해주었다. Session과 관련된 서비스들이 필요한 곳에 종속성 주입이 되어있었기 떄문에 어렵지 않았다. Session에 해당 key가 존재한다면 버튼을 만들어내는 컴포넌트의 변수에 이를 저장하여 ngIf 를 이용하여 Setting을 위한 버튼이 출력되지 않도록 했다.
이전 Task에서 다룬 적이 있는데, 좌상단에 존재하는 select box는 로그인한 계정과 연결된 shop들을 나타내고 해당 어드민 페이지로 이동할 수 있는 기능이다. 데모 페이지에서는 다른 곳으로 이동할 일도 없고, 계정 상황에 따라 이동해서도 안된다고 생각하여 해당 기능도 제거했다. select box에 shop들을 아예 주입하지 않도록 하여 선택 목록에 나타나지 않도록 했는데, 추가적인 논의를 통해 아예 클릭조차 막아버렸다. settings와 다른 어드민 페이지로 이동하는 기능들은 모두 navigation-bar로 layout 디렉토리에 모여있었기 떄문에 다루기 편했다.
그럴 일은 없겠지만, 혹시 유저가 직접 URI를 입력하여 admin/settings 에 접속할 수도 있다. 그래서 guard에 코드를 추가하여 구현했다. 만약 session에서 demo 임이 표시되있지 않다면 home으로 되돌려 보내도록.
회고
Session이 대단한 기능은 아니지만, 생각나서 적용하여 해결한 것에 기분 좋다.
