coin FE

오늘 회사에서 관리자 쪽에서 특정 매장을 운영상태를 끄면 사이트에서 계속 노출이 된다는 요청사항이 들어와서 소스코드를 분석했다.

기존 코드에서 fetch 에서 백엔드 api 호출 후 데이터를 받는 부분이 있엇다. 새로고침에서는 mounted 에서 제대로 소스코드가 작동을 했지만 뒤로가기 버튼을 통한 매장접속시 백엔드 api 가 작동을 안함을 확인 할 수 있었다. 

fetch는 비동기 데이터 호출을 위한 Hook 이며 공식문서에서 간략한 설명으로는

• fetch hook (Nuxt 2.12+)은 모든 컴포넌트에서 사용할 수 있고, (client-side 렌더링 중) 렌더링이 진행중인 상태와 에러에 대한 참조(shortcuts)를 제공합니다.

페치는 컴포넌트 인스턴스가 생성된 후 server-side 렌더링 동안 또는 client-side 에서 네비게이션 되는 동안 호출되는 hook으로, 비동기 데이터 호출이 완료되었을때 프로미스를 반환한다. 페치는 불필요한 리렌더링을 방지 하기위하여 캐시를 저장하여 데이터를 보존한다. 

mounted 라이프 사이클 쪽에서 페치에서 백엔드 api 쪽에서 전달해준값을 재렌더링으로 사용하지 못하고있엇다.

서버사이드쪽에서 로그가 찍히므로 테스트 진행시에는 로컬서버에서 콘솔로 찍히는값으로 확인이 필요하다.

위와같이 쓰면 터미널 쪽에서는 아래와같이 데이터가 찍힌다.

사이트네임을 넣어두지 않아서 널값이다. 정상적으로 작동을하는것을 확인하였고. 뒤로가기 했을시에는 로그가 안찍히는것을 확인하였다.

mounted 에서만 호출을 하면 재렌더링 되는 부분에서 함수동작을 못한다. 이럴경우 나는 updated 에서 감지하기로 하였다.

updated 부분에서 스토어에서 저장한값을 체크한 후 매장이 정상적인 플래그값을 가지고 있는지 재차 확인하는 소스코드를 작성하였다.

checkIsStoreUsed(storeInfo: any): void {

    // siteStore.updateExcludedChannels(false);
    let excludedChannel = false;
    let excludedChannelStr = '';

    for (const i in storeInfo?.excludedChannels) {
      if (String(storeInfo?.excludedChannels[i]) === 'WWW') {
        excludedChannelStr = 'www';
      }
    }
    siteStore.setSoreInfo(this.storeInfo);
    sessionStorage.setItem('storeInfo', JSON.stringify(this.storeInfo));
    if (storeInfo?.enabled === false || excludedChannelStr) {
      excludedChannel = true;
    } else if(storeInfo?.enabled === true && excludedChannelStr === ''){
      excludedChannel = false;
    }

    this.checkIsStoreUsedMessage(excludedChannel);


  }

  checkIsStoreUsedMessage(excludedChannel: boolean): void{
    if (excludedChannel) {
      // this.excludedChannels = true;
      siteStore.updateExcludedChannels(true);
      alert('잘못된 접근입니다.');
      if (!BizModeDefines.saas) {
        this.$router.replace('/intro');
      }else{
        this.$router.replace('/');
      }

    }
  }

//
  // 매장 정보
  //
  private _storeInfo: StoreInfoResponseDto | null = null;

  get soreInfo(): StoreInfoResponseDto | null {
    return this._storeInfo;
  }

  @Mutation
  public setSoreInfo(soreInfo: StoreInfoResponseDto | null): void {
    this._storeInfo = soreInfo;
  }

  @Action
  public updateSoreInfo(soreInfo: StoreInfoResponseDto | null): void {
    this.context.commit('setSoreInfo', soreInfo);
  }

  //
  // 매장 채널 리스트
  //
  private _excludedChannels: boolean = false;

  get excludedChannels(): boolean {
    return this._excludedChannels;
  }

  @Mutation
  public setExcludedChannels(excludedChannels: boolean): void {
    this._excludedChannels = excludedChannels;
  }

  @Action
  public updateExcludedChannels(excludedChannels: boolean): void {
    this.context.commit('setExcludedChannels', excludedChannels);
  }

일단 스토어쪽에 매장 정보를 저장할 수 있는 공간을 만들고 다른페이지에서도 매장을 감지하는 부분이 필요해서 추가적으로 작성해주었다.

this.$router.replace 를 사용한이유는 push 를 이용하면 히스토리가 남으면서 추가적으로 다른 이슈상황들이 생기는 부분을 미리 방지하는 차원에서 this.$router.replace 를 사용하면 페이지 이동한다고 보기에는 현재 페이지를 바꿔준다는 개념으로 사용하여 다른 추가적인 에러가 날 수 있는 부분을 방지할수있다.

위와 같은 얼럿 표시 이 후 intro 페이지로 이동한후

정상적으로 페이지 이동도 했다.!

다시 뒤로가기 버튼으로 백해도 스토어쪽으로 다시 재진입을 하지못한다!

이걸로 페치를 이용하여 정보를 스토에 담아두고 mounted에서 호출 하는게 아니라 updated에서 재렌더링을 감지하여 코드를 넣어주면 특정 코드를 다시 실행 시킬 수 있게 되었다.

이걸로 채널 제외 매장을 화면에서 막을 수 있게 되었다.! 코인의 일지 끄읏~