언박싱 몬스터 개선하기(1) - 테스트 환경 만들기

MirageJS 서버 설정

서버 없이도 테스트를 진행할 수 있도록 MirageJS를 활용하기로 했다.

 

1. tsconfig.json 설정
   compilerOptions → lib에 "DOM"을 추가해준다.
   이걸 추가하지 않으면 window를 찾을 수 없다는 에러가 발생한다.  
   
   

   {
     "compilerOptions": {
       "lib": ["es2017", "DOM"],
       ...
     }
   }​

   
   
   
2. server type 만들기
   window 안에 server에 대한 타입을 만들어두지 않으면 server를 찾을 수 없다는 에러가 발생한다.  
   
   

   declare global {
     interface Window {
       server: any;
     }
   }​

   
    
3. MirageJS 서버를 만드는 함수  
   
   

   export const setupServer = () => {
     if (window.server) {
       window.server.shutdown()
     }
   
     window.server = createServer({
       routes() {
         this.get(URLS.unboxing_api, () => {
           return {
             text: 'hello world!'
           }
         })
       }
     })
   }​​

   
   
   
4. App.tsx 상단에서 호출
   
   

   setupServer()
   
   const App = () => { .. }​

   
   
   
5. MIrage 서버 테스트
   
   

   fetch(URLS.unboxing_api)
   .then(result => console.log(result))​

   
   콘솔에 'hello world!'가 출력된다!!

 

로그인 건너뛰기

앱에 로그인한 유저만 커스텀박스를 만들 수 있도록 설정되어있다.

언박싱 몬스터는 로그인 방식으로 소셜 로그인만 제공하기 때문에 서버 없이는 로그인이 안된다.

코드에서 로그인 여부를 AsyncStorage에 access token이 저장되어 있는지로 확인하고 있으니, 처음 앱을 시작할 때 AsyncStorage access token에 임의의 값을 set 해줌으로써 로그인을 건너뛴다.

 

1. 테스트용 로그인 함수 만들기
   
   

   export const login = () => {
     setAccessTokenToAsyncStorage('access token')
   }​

   
   
   
2. App.tsx 상단에서 호출
   
   

   setupServer()
   login()
   
   const App = () => { .. }​​

   
   커스텀 박스 제작 페이지 진입 완료!!

 

아이템 데이터 넣기

현재 상품 아이템 데이터를 엑셀 파일에 가지고 있다.

1. 먼저, 엑셀을 CSV파일로, CSV를 JSON 형태로 변환한다.  
2. JSON 형태의 아이템 데이터를 Array로 저장한다.
   
   

   export const ITEMS = [
     {
       "id": 0,
       "productId": 1234,
       "seller": 1,
       "title": "킨더 부에노",
       "price": 1500,
       "image": "image.address.com",
       "detail": "디테일"
     },
     ....
    ]​

   
   
   
3. Mirage 서버에 routes를 추가한다.
   
   

     window.server = createServer({
       routes() {
         this.get(URLS.unboxing_api + 'item', () => {
           return ITEMS
         })
       }
     })​

   아이템 데이터 불러오기 성공!!