[나만의 명언집 프로젝트] 코드 리팩터링 정리본

포스트 목적

해당 포스트는 리팩토링 한 코드 중에서 참고할 만한 코드가 있는 경우에 간략하게 정리하는 용도로 활용됩니다.

해당 포스트는 최근 수정된 날짜를 기준으로 업로드 날짜가 갱신됩니다.

 

[리팩터링] 불필요하게 긴 로직을 가진 SNS 공유 함수

해당 함수는 사용자가 [공유하기] 버튼을 클릭하는 경우 호출되며, 클릭한 아이콘 마다 서로 다른 SNS 의 공유 링크가 생성되어 해당 사이트의 브라우저로 연결된다. 

 

해당 함수를 리팩터링하고자 했던 이유는 switch 문으로 인해 불필요한 공간 낭비가 발생한다고 판단되었고, 유지보수적인 측면에서도 향후 기능이 추가 되거나 했을 때, 좋지 못하다고 판단했기 때문이다.

 

기존코드

기존 코드는 switch 문으로 분기 처리하여 urlConcat 변수에 할당 후 window.open 메소드를 호출하는 흐름으로 작성되었다.

 

switch 문이 적용되면서 불필요하게 공간을 차지하고 있는 것을 알 수 있다.

  enum ShareType {
    Facebook = 'F',
    X = 'X',
    Naver = 'N',
  }

  const shareWithSns = (type: ShareType) => {
    const url = window.location.href
    const encodeUrl = encodeURIComponent(url)
    let urlConcat = ''

    switch (type) {
      case ShareType.Facebook: {
        urlConcat = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeUrl
        break
      }
      case ShareType.X: {
        urlConcat = 'https://twitter.com/intent/tweet?url=' + encodeUrl
        break
      }
      case ShareType.Naver: {
        urlConcat =
          'https://share.naver.com/web/shareView?url=' +
          encodeUrl +
          '&title=' +
          '[공유] Wise Sayings '
      }
    }
    window.open(urlConcat, '_blank')
  }

수정코드

리팩토링을 위해서 switch 문을 대신해 Object.values 과 indexOf 를 활용하기로 하였고, 이를 적용한 결과는 다음과 같다.

  const shareWithSns = (type: ShareType) => {
    const url = window.location.href
    const encodeUrl = encodeURIComponent(url)
    let urlConcat = ''

    const index = Object.values(ShareType).indexOf(type)

    index === 0 && (urlConcat = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeUrl)
    index === 1 && (urlConcat = 'https://twitter.com/intent/tweet?url=' + encodeUrl)
    index === 2 && (urlConcat = 'https://share.naver.com/web/shareView?url=' + encodeUrl + '&title=[공유] Wise Sayings')

    window.open(urlConcat, '_blank')
  }

 

 

반환 받은 인덱스와 일치하는 경우,  해당하는 로직을 수행하도록 하여 switch 로 분기처리했을 때 보다 코드 가독성이 향상된 것을 알 수 있다.

 

사용된 메소드에 대해 간략하게 부연 설명 하자면, Object.values() 는 전달받은 객체의 키=값 중 값을 배열 형태로 반환한다. 참고로, Object 는 자바스크립트에 내장된 기본 객체로서 모든 객체의 최상위에 위치한 부모 객체이다. 해당 객체에서만 접근 가능한 메소드 중 values 이 있으며, 이 또한  Object 의 static 메소드로서만 접근할 수 있다(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object.)

 

 [  ].indexOf( )  는 배열 객체에서 자신이 전달받은 인자와 일치하는 경우 해당 요소가 배열에서 위치하고 있는 index 를 반환한다. 이름 그대로 ~의 인덱스인 것이다.

 

[리팩터링] 재사용됨에도 일일이 작성되던 HTTP 상태 코드

리팩터링 목적 및 기존코드에 대한 간략한 개요

기존에는 NextResponse.json({meg, status, success}) 형태로 모든 api 경로에서 각각 작성했으나, 매번 반복되는 코드로 인해서 유지보수적인 측면에서나 개발 시 피로도가 쌓이는 느낌이 들어서 이를 개선하고자 해당 코드를 리팩터링하기로 결정하였다.

 

수정된 방식과 사용 예시

수정된 방식에서는 모듈화하여 재사용하기 위해 http-code.ts 을 따로 생성하고,  재사용할 HTTP 상태 코드들을 객체 리터럴 형태로 정리 하였다.

http-code.ts

 

 

그리고 이를 필요로 하는 route.ts 파일 내에 NextResponse 에 적용하였다.

 

.. /clear-token/route.ts