[moin-review] 2021-09-23

김_리트리버·2021년 9월 23일

Facts

Header Navigation link 부분 마무리 함

기존 react-router 를 사용하지 않고 router 를 구현한 legacy code 에서는

Header 에서 메뉴를 클릭해서 url 을 변경할 때 아래의 함수를 사용했었다.

const route = (view: string) => {
    switch (view) {
      case '/login':
        pushToDataLayer({ event: 'menu_login' })
        dispatch(pushView(view))
        break
      case '/signup':
        pushToDataLayer({ event: 'menu_signup' })
        dispatch(pushView(view))
        break
      case '/business/signup':
        pushToDataLayer({ event: 'menu_business' })
        dispatch(pushView(view))
        break
      case '/event/univ':
        pushToDataLayer({ event: 'main_student' })
        dispatch(pushView(view))
        break
      case '/business':
        pushToDataLayer({ event: 'main_business' })
        dispatch(pushView(view))
        break
      case '/faq':
        pushToDataLayer({ event: 'main_faq' })
        dispatch(pushView(view))
        break
      case '/promotion':
        pushToDataLayer({ event: 'main_promotion' })
        dispatch(pushView(view))
        break
      default:
        dispatch(pushView(view))
        break
    }
    if (view === '/logout') {
      logout()
    }
  }

이렇게 되면 단점이 굳이 상관없는 메뉴를 클릭했음에도 switch 문을 돌면서 하나씩 확인해야 하고

읽기도 오래걸린다.

마침 google tag manager 용으로 쓰였던 pushToDataLayer 함수가 쓸모 없어져

깔끔하게 아래처럼 변경했다.

const onSelect = (selected: string) => dispatch(pushView(selected))

변경하는 데는 오래 걸리지 않았지만 test code 를 넣는데 시간이 오래 걸렸다.

화면의 너비에 따라 desktop 용 Header 와 Mobile 용 Header 를 분리해서 보여주는데

반응형이 아니다 보니 desktop 용 Mobile 용 React Component 가 각각 있어

사실상 같은 test code 를 약간만 변형해서 각각 넣어줘야 해서 시간이 오래 걸렸다.

다음에는 송금공유하기 url 로 들어왔을 때 동적으로 open graph meta tag 를 html head 에 넣어주는 것 이었다.

react-router 의 useRouteMatch hook 을 사용해서 공유하기 url 로 들어오면 meta tag 를 추가하려고 했다.

일단 브라우저 상에서는 정상적으로 tag 가 추가 되었으나 문제는 실제 링크를 공유했을 때 썸네일이 변경되지 않는 것이었다.

SPA 일 때 크롤러는 하나의 index.html 만을 확인하기 때문에 원래 있었던 meta tag 만 확인할 수 있고

react-helmet 을 통해서 생성한 tag 는 인식하지 않는다.

<Helmet defaultTitle='모인(MOIN) 해외송금'>
        <html lang={language} />
        <title>{`${tt('meta.title')}`}</title>
        {headLinks}
        {isShared && <meta
          property='og:image'
          content='https://img.themoin.com/public/img/thumbnail-history@3x.png'
        />}

이것 저것 찾아보니 server 단에서 user agent 가 크롤러 임을 확인하고 크롤러이면 해당 open graph meta tag 만 넣어서 html 을 리턴하는 방식으로 문제를 해결한 사람을 찾았다

https://daeguowl.tistory.com/187

모인 서비스는 쇼핑몰까지는 아니고 open graph meta tag 도 송금 공유하기 기능에서 밖에 안쓰이기 때문에

S3 배포 방식을 포기하기는 애매했다.

핵심은 크롤러가 서버에 요청하는 것만 가로채서 open graph meta tag 를 넘겨주어 썸네일만 그리게 해주면 된다고 생각했다.

S3 + cloud-front 조합에서는 결국 cloud-front 로 요청이 들어올 거고 cloud-front 에서 크롤러 요청을 잡아서

aws-lambda 로 미리 설정해 놓은 html 을 주는 것으로 생각했다.

아직 개발용으로 배포가 안되서 일단 배포한뒤 cloud-front 와 aws-lambda 에 대해서 학습해서 처리할 예정이다.

Findings

react-helmet 을 통해 생성한 head tag 들은 크롤러 봇에서 인식하지 못한다.
배포 전 환경에서 open graph meta tag 를 확인하고 싶으면 localhost 에 서버를 띄우고 ngrok 으로 해당 port 를 잠시동안 public 으로 배포해서 https://developers.facebook.com/tools/debug/?locale=ko_KR 통해서 확인하면 된다.
cloud-front , aws-lambda 를 통해 S3 의 index.html 주기 전에 요청에 대해 처리를 할 수 있다.