2023-05-12

프리뷰모드 구현

배포된 데모 가 서버 다운되자마자 로그인도 안되어 구경하지 못하는 것이 안타까웠다. 그래서, 더미데이터로라도 돌아가는 모습을 구경할 수 있게 구현해 놓고 싶었다. 항상 프로젝트가 끝나면 discontinued 를 선언하면서 데모를 더이상 보지 못하게 되는 것이 안타까웠다. 그래서 wireframe이라도 돌아가는 모습을 보여줄 방법을 찾고 싶었다. 이번 기회에 그래서 방법을 생각해보았다.

서버가 없으면 프런트가 돌아가지 않는 부분을 처리하는 것이 중요했다. 서버 부재로 일어나는 빠진 이빨은 이렇다.

• 원하는 데이터가 날라오지 않아 보여줄 것이 없음.
• 데이터가 날라오지 않으니깐 그 다음 페이지로 넘어가는 것도 보여줄 수 없음.

구현한 방법 - 좋지 않음

첫번째는 더미데이터가 날라오는 것을 구현하면 된다. 두번째는 프리뷰모드일때만 적당한 데이터 없이도 바이패스하게 만들면 된다.

이번에 구현한 방법은 다음과 같다.

• "현재 서버가 응답하지 않아 프리뷰만 볼 수 있다"는 메시지를 최상단에 띄웠다.
• 회원가입은 가능하지 않으니 프리뷰에 사용할 가짜 계정을 메시지와 함께 명시해주었다.
• 특정 아이디로 로그인하면 access-token 쿠키에 적당한 더미 토큰 스트링을 넣어서, 마치 서버가 준 토큰이 들어있는 것처럼 (인증완료된 것처럼) 보이게 했다. 물론, 더이상 토큰 검증을 하지 않기 때문에 가능한 일이다.
• dummy-data.ts 파일에 각종 더미데이터 상수를 만들어놓았다. 서버가 보내주는 바디 구조 고대로 적어놓고, 이를 export, import 해서 각종 더미 통신 함수에서 사용하였다.
• 새로운 preview-mode 쿠키에 true 값을 넣어놓았다(물론 스트링 값이다). 그래서, 데이터 끌어오기가 필요할 때면 preview-mode 를 먼저 읽어보고 "true"이면 서버 통신 함수를 호출하지 않고, dummy data를 로컬파일에서 불러오는 함수를 호출한다.
• 서버의 OK 사인이 있어야 넘어갔던 페이지도 그냥 preview-mode 한번 검사하고 바이패스하게 했다.

하지만 이 방법은 좋지 않은 것 같다.

• 첫째로, 프리뷰 모드를 나중에 들어내는 것이 어렵다. 설정변수 하나 딱 바꾸면 프리뷰 모드가 사용가능하게 제어할 수 없다.
• 둘째로, 프리뷰 모드의 구현이 정상 모드를 구현한 것과 섞여있다. 따라서 나중에 고쳐야 하면 잘못하다 정상모드를 건들 수가 있다.
• 셋째로, 데이터가 업데이트되는 모습은 여전히 보여주지 못한다. 상수로 더미데이터를 정의하고 그냥 getter만 사용하기 때문이다.

새로 고안한 방법

새로 고안한 방법은, virtual server를 local에서 만드는 것이다. 다시말해, 하나의 typescript component가 서버와 동일하게 내부에서 소통할 수 있게 만드는 것이다.

구상한 구체적인 방법은 다음과 같다.

• 서버와 통신하는 각 endpoint implementation을 하나의 provider로 묶는다.
• path를 string prop 으로 받으면 원하는 더미데이터를 async 하게 리턴하는 인스턴스를 만든다.
• 해당 provider에서, fetch 혹은 axios를 통해 외부와 통신하는 것이 아닌, 내부 인스턴스의 함수를 호출하게 리매핑한다.

이 방법은 다음의 방면에서 우수하다.

• 프리뷰모드를 껐다 키는 것이 수월하다. provider 에서 if-else 한번으로 매핑함수를 고르면 되기 때문이다.
• 백엔드의 테스트코드로도 사용할 수 있다. '서버가 이렇게 동작했으면 좋겠다'를 명시해두는 것이기 때문이다.
• 데이터가 업데이트되어 보여질 수 있다. 인스턴스의 내부변수를 통해 데이터베이스를 구현하면 된다.

이 방법을 도입하기 위해 선절차가 필요하다.

• 현재 모든 endpoint를 Provider로 묶을 것.
• 데이터구조 및 서버 내부로직을 typescript 인스턴스로 구현할 것.