수신거부 링크 프론트엔드 화면 만들기

0. 들어가며

본 메일은 정보통신망 이용촉진 및 정보보호 등에 관한 법률 시행규칙 제 11조 제 3항에 의거 2022년 3월 7일 기준 회원님께서 수신을 동의하셨기에 발송되었습니다. 메일 관련 문의 사항은 스냅스 고객센터(1577-4701)를 이용해 주시기 바랍니다. 더 이상 수신을 원하지 않는 분은 여기를 클릭해주세요.

위와 같이 이벤트성 메일에는 "'여기'를 클릭해주세요."와 같이 수신거부를 할 수 있는 링크가 들어간다.
이 중에 링크가 들어가는 부분은 '여기'이다.
수신거부 메일 서비스에서는 필요한 요소가 3가지이다.
1. 이메일 발송 서버
2. 위의 사진과 같은 프론트엔드 화면
3. 수신거부 백엔드 api

1. 수신거부 로직

수신거부 프론트엔드 화면을 만들어야 했는데, 기획과 디자인에 맞춰 화면을 만들었어도 그 로직이 이해되지 않았다.
전반적인 수신거부의 흐름을 정리해본다.

1) 이메일 서버에서 메일을 보낼 때, 이메일 주소에 고유 아이디를 부여한다.

2) 메일을 작성할 때, 프론트엔드 링크에 해당 고유 아이디를 삽입한다.

예시) <a href='www.xxx.com/unsubscribe?key={encodeId}'>여기</a>

3) 백엔드에서 수신거부관련 api를 만들고 put || patch 요청으로 보낼지 결정한다.

4) 프론트엔드는 key={encodeId}를 고려하여 동적 라우팅으로 페이지를 만든다.

5) 프론트엔드는 유저가 '확인'을 눌렀을 때, 유효한 key값일 경우에만 api.put으로 요청한다. (try - catch문 사용)

오라운드의 경우, put으로 결정했는데 그 이유는 해당 api에 데이터가 수신거부 관련 데이터만 있기 때문에 put으로 했다. 만약 하나의 데이터만 변경하고 싶다면 patch를 사용하는 것이 나을 것 같다.

2-1) 관련지식 1 - next.js dynamic routing

오라운드에서는 수신거부 메일 url을 '/unsubscribe?key={value}'로 하기로 결정했다.
그렇기 때문에 동적 라우팅이 필요했는데, next.js를 쓰는 상황에서 동적 라우팅이 헷갈려서 공식문서를 보며 공부를 했다.

내가 만들고 싶은 route는 '/unsubscribe?key={value}'이기 때문에 'pages/unsubscribe/[key].js'로 폴더,파일구조를 만들었다.

왜냐하면 route parameter가 query parameter를 override하는 경우를 만들고 싶었기 때문에 이와같이 만들었다.

[공식문서 내용]
However, route parameters will override query parameters with the same name. For example, the route /post/abc?pid=123 will have the following query object:
{"pid": "abc"}

그리고 해당 {value}를 가져오기 위해서 router.asPath.split('=')[1]로 "=" 뒤의 value를 가져왔다.

2-2) 관련지식 2-API의 모듈화(Modularization)

오라운드에서는 하나의 api마다 한 파일로 만들었고 그 안에 CRUD를 함수형으로 만들어 모듈화를 해놓았다.

기존에 각각 페이지에서 api통신 관련 코드를 작성해놓았던것과 다르게 CRUD형식으로 함수를 만든다.
해당 함수를 필요한 store나 page에서 해당 페이지를 import해서 xxapi.함수이름(인자)의 형식으로 사용한다.

class UnsubscribeAPI {
  async updateUnsubscribeInfo(key: string | string[] | undefined) {
    try {
      const URL = `$xxx/api/v1/member/unsubscribe/email/${key}`;
      const response = await axios.put<UnsubscribeInfoResponse>(
		...
      );
      if (response.data) {
        await router.push(`/unsubscribe/${key}/result`);
        return response.data;
      }
    } catch (e: any){
      console.log(e);
      await router.push('/');
    }
  }

}

export default UnsubscribeAPI;

위와 같이 모듈화해놓은 코드를 페이지 단위나 스토어에서 아래와 같이 사용하면 된다.

    const api = new UnsubscribeAPI();
    return api.updateUnsubscribeInfo(key);

3. 마치며

하나의 새로운 기능을 만들 때, 로직을 생각해내는 것이 우선이라는 것을 다시금 깨달은 페이지 제작이었다.

로직을 알고 있어도 해보면서 체감하는 것이 중요하다고 느낀 프로젝트였다. 끝.