개발 항해일지 22/04/01 :: 새 이름, Rewrite, 방향전환

일지 2022년 4월 1일

 

 

새 이름 Affitalink

현재 진행중인 Affiliate 관련 프로젝트 이름을 추천받았다

그 이름하야 Affitalink

Affiliate와 Link를 합성하고, 부르기 싶도록 중간에 ta를 넣은게 아닐까 싶다

Thanks @MaticsPython!

 

 

강적이다! 동료로 만들 수 있을것인가

Next.js프로젝트 항해중

외부 API를 CORS 문제 없이 가져오기 위해 Rewrites를 사용하고 있다

source에서 파라미터를 받아서 destination으로 전달해주고 있는데

아마 문법적으로 잘못 사용하고 있는 것 같은데 오리무중이다

 

과연 rewrites를 동료로 맞이할 수 있을까?

 

 

객체 안되는 localStorage

localStorage는 문자열만 받을 수 있어서

넣을 때 객체를 문자열로 바꿔주고

localStorage.setItem(storageName, JSON.stringify(info));

받을 때 문자열로 객체로 바꿔줘서 사용

JSON.parse(localStorage.getItem(storageName))

 

 

Rewrites와(과) 동료가 되었다!

parameter를 받아서 사용할 수 있는 것을 Next.js 문서에서 봤다

module.exports = {
  async rewrites() {
    return [
      {
        source: '/:slug',
        destination: 'https://example.com/:slug',
      },
    ]
  },
}

 

사용하려는 것은 파라미터에서 물음표 뒤에 query string 이었다

여기서 rewrites와 의사소통이 안되기 시작했다

Next.js에서 위의 예처럼 사용할 수 있는 것은 파라미터를 말하는 것이었다.

 

query는 신기하게도 자동으로 심겨진다

 

그래서 이렇게 fetch를 호출하더라도

const response = await fetch(
      `/offers?website-id=${info.websiteId}&advertiser-ids=${id}`,
      {
        headers: {
          Authorization: "Bearer " + info.token,
        },
      },
    );

앞의 /offers만 신경쓴다

 

그럼 next.config.js에서는 이렇게만 해주면 된다

async rewrites() {
    return [
      {
        source: "/offers",
        destination: `${process.env.NEXT_PUBLIC_CJ_OFFERS_BASE_URL}`,
      },
    ];
  },

 

이틀에 걸쳐서 겨우 rewrites()와 동료가 되었다!

친하게 지내자

 

 

기획 방향전환 & 디자인

샤워하다 지금 만들고 있는 방법으로 불편하다는 것을 발견했다.

1. 현재 첫 번째 fetch에서 모든 Advertisers를 가져오고,
2. 각 advertiser를 클릭시 그에 맞는 모든 오퍼를 가져와서 모달로 보여준다

하지만 이럴거면 그냥 각 Network 사이트에서 확인하면 되는일이다

 

여러 네트워크의 링크를 한 곳에서 확인할 수 있도록,

그 중에서 원하는 Advertisers를 볼 수 있도록,

그 중에서 원하는 Link type을 볼 수 있도록 하기 위해서는 

2가지 개선이 필요하다

1. Links 페이지를 만들어서, Advertisers가 아닌 오퍼들을 바로 보여주자

  - 링크 타입별로 Text와 Banner 그리고 All link 이렇게 3개 필터링을 가져가자

  - 코드, 링크 그리고 이미지 url은 Clipboard API 사용해서 복사하기 편하도록

2. Network 페이지(/networks)에서 네트워크 각각 Connect 할 수 있게 만들자

  - 추가시 /networks/add 페이지로 이동되어 토큰 등 정보 입력

  - /networks/add 페이지에서 보고 싶은 Advertisers만 골라서 볼 수 있도록

 

아쉽게도 지금까지 짠 코드를 엎어야 되지만,

안하면 나도 안쓰는 서비스가 나오게 된다 내일부터 착수!

 

 

Sailing by Michael Held @unsplash