개발항해일지 22년/5월/1주 :: 차크라 UI hover, try_catch와 async_await, 리액트 번역완료!

일지 2022년 5월 1주차

 

 

프로젝트 스타일 손보기

리액트와 Next.js 숙련을 위해 진행중인 프로젝트 Affitalink,

간단히 말해서 어필리에이트들을 위해 오퍼를 정리해서 시간을 절약시켜주는 사이트다

이제 여러 페이지를 어슬렁 거리며 스타일을 손보고 있다

오늘은 전체 백그라운드 높이를 손보고, 대시보드를 위주로 꾸몄다

 

 

페이지네이션 (취소)

깜빡한 페이지네이션은 스케줄에 추가!

페이지 네이션 추가하면 필요한 기술들은 완료된다

그럼 정말 마무리로 스타일을 한번 더 손보고

프로젝트 내용과 추가할 내용 정리하면 공개를 한다

 

페이지네이션 취소 및 방향전환

현재 서비스에서 페이지네이션을 넣으면 사용할 때 혼란이 생길거라는 결론을 내렸다.

1. 우선 fetch 버튼이 있다, 여기에서 받은 데이터가 로컬에 저장된다

2. 로컬에 저장된 데이터는 시간이 지나며 최신 데이터가 아닐 수 있다.

3. 페이지네이션을 클릭하면 fetch를 하게되어 로컬은 최신 데이터로 변한다

4. 즉, 2번째 페이지를 누르면 현재 1페이지 데이터가 새로 들어온 데이터로 인해 2번째 페이지로 이동할 수도 있다.

 

방향전환

100~200개의 오퍼만 보여주자

이유: 각 오퍼는 기한이 있어서 오래전에 올라온 오퍼는 거의 필요치않다.

지속적으로 새로 올라온 내용을 홍보하는 어필리에이트들에게,

최신 오퍼가 더 중요하기에 우선은 최신 오퍼에 집중을 시키자

 

 

차크라 UI hover

진행중인 프로젝트에서 Chakra UI 라이브러리를 사용한다

쓰면 쓸수록 편하고, 디자인이 곧 잘 나와서 만족스럽다

공식 문서도 엄청 세세하게 되어있고,

사용하는 사람들도 꽤 많아서 필요한 정보를 얻기 어렵지 않다

 

이번에 기억하고 싶은 내용은 마우스 호버

그냥 스타일 지정도 간단하지만, 기본 호버 기능에 만족을 못한다면

이렇게 직접 바꿀 수 있다

 

<Box _hover={{bg="red"}}></Box>

 

자매품 focus, 그냥 hover를 focus로 변경해주면 된다

<Box _focus={{bg="red"}}></Box>

 

 

try ... catch

나는 보통 API 콜을 할 때 에러를 잡기 위해 try ... catch 문을 사용한다

하지만 이번에 에러를 유저에게 UI로 보여주려는데 잘못 생각하고 있다는 것을 알았다

 

우선, fetch에서 4xx, 5xx 이런 에러는 catch로 가지 않는다

이들은 그냥 request 에러로 따로 처리해줘야 한다.

 

그럼 뭐가 catch로 갈까?

fetch가 있던 말던 중요한게 아니고, 코드의 문제가 있는 것이 catch로 간다

 

 

try ... catch 그리고 async ... await

앞에 적은 것처럼 fetch에서 4xx, 5xx는 에러가 아니라 요청의 결과물이다

그럼 에러의 상황을 유저에서 보여주고 싶은데 어떻게 해야 할까

간단하게 에러를 던져주면 된다.

 

catch 작동시키기 예시

async function fetch썸띵() {
  try {
    const response = await fetch("url주소", {
      method: "POST",
      headers: {
        Authorization: "Bearer " + tokenkey,
      }
    });
    if (!response.ok) {
      throw response.status;
    }
    const data = await response.json();
    return data.access_token;
  } catch (e) {
    return "Provided infomation looks incorrect";
  }
}

e로 response.status가 들어온다.

사용하거나 위 코드처럼 원하는 내용을 보여줘도 될 듯 싶다

 

 

오류 메시지로 이해를 돕자

앞에서 try ... catch 등으로 오류를 잡으려던 이유는 오류 메시지를 뛰우기 위해서다

입력된 정보와 API 호출을 날려서 제대로 입력되면 연결 메시지,

잘못된 정보가 입력되면 오류 토스트를 보여준다

 

오류 메시지 예시

 

 

Promise.all()

현재 만드는 프로젝트에는 2가지의 API의 검증이 필요하다

하나는 Advertiser 링크를 받을 때, 다른 하나는 Link 받을 때 각각 페이지에서 콜을 한다

하지만 유저는 Network 페이지에서 두 API에 필요한 정보를 입력한다.

그러면 입력된 정보는 각각 페이지에서 할 것이 아니라,

입력 받은 페이지에서 해주는 것이 이용에 간결하고 편리할 것 같다.

 

그래서 입력 받은 정보로 Promise.all()을 통해서 같이 호출을 하고,

하나라도 에러가 있으면 toast로 정보를 다시 확인하라고 알려준다.

 

async function fetchCJAdvertisers(auth) {
  let parseString = require("xml2js").parseString;
  const urls = [
    `/cj-advertisers?requestor-cid=${auth.requestor_id}&advertiser-ids=joined&records-per-page=100`,
    `/cj-links?website-id=${auth.website_id}&records-per-page=1`,
  ];
  try {
    const response = await Promise.all(
      urls.map((url) =>
        fetch(url, {
          headers: {
            Authorization: "Bearer " + auth.token,
          },
        })
      )
    );

    if (!response.every((res) => res.ok)) {
      throw response.status;
    }

	/// ... 코드 생략
    
    return { page, advertisers_info: formatted_advertisers };
  } catch (e) {
    return "Invalid information provided";
  }
}

 

 

리액트 번역완료! 다음은 Sass

FreeCodeCamp에서 번역으로 기여를 하고 있다.

마침내 리액트 번역과 검토를 마쳤다 🥳🥳

 

리액트 기본 지식에 관해 더 강화되었다고 생각된다.

특히 클래스 컴포넌트에 대해 고개를 돌리고 있었지만, 이제는 그런 것도 없다

아마 오래 걸릴 수 있지만, 계속 이어가며 더 많은 한국 사용자에게 다가갈 수 있도록!

 

다음으로 Sass 번역을 시작했다.

Scss, Sass 개념에 대해 약간 혼란도 잡을 수 있을 것 같고,

CSS를 더욱 효과적으로 사용할 수 있는 Sass를 더 자세히 아는 결과가 될 듯

오늘 3개를 번역했지만 벌써 개념들이 정리된다. 

 

 

MVP 완료!!!

드디어 처음 기획시 고려했던 MVP는 나왔다

이제 할 일은

• Next.js 빌드 및 배포
• 기획 노션 토대로 포트폴리오 노션과 github에 정리
• 커뮤니티에 올려서 피드백 받기!

 

 

참고 링크

Processing errors with Fetch API

=> https://gist.github.com/odewahn/5a5eeb23279eed6a80d7798fdb47fe91

 

How to Use Promise.all() by 믿고보는 Dmitri Pavlutin

=> https://dmitripavlutin.com/promise-all/

 

 

sail by Oliver Sjostrom @unsplash