개발 항해일지 22년/4월/4주 :: FORM, useEffect와 useRouter 공존, LocalStorage, DB 구조

일지 2022년 4월 4주차

어필리에이트를 위한 프로젝트 진행중

 

 

HackerRank

어려운 알고리즘에 머리 싸매고 있는 것은 좋아하진 않지만,

프로젝트를 하면서 간단한 알고리즘을 필요할 때가 있다(주로 libs 폴더에 들어가는 것들)

백준에서 간단한 문제 위주로 풀고 있는데, 이번주부터 HackerRank 라는 곳 시작

1주 코스, 30일 코스 등으로 어려움 정도 순서로 문제를 준다

코드를 짜는 한 머리의 유희를 위해 꾸준히 풀어봐야겠다

 

 

FORM

UX가 좋은 폼을 만들고 싶은데 복잡하네.

FORMIK을 써보려고 했는데, Chakra UI와 함께 쓰려니 헷갈려서 다음으로 미루고

현재 필요한 내용을 정리해서 간단하게 만들자

 

⏳⌛💡

간단한 validate 함수 만들어서 빈 곳이 있는지만 확인하게 했다

쏙 마음에 드는 로직이 아니라 추후 개선하기로!

Validate UI

 

 

SELECT

이렇게 많은 select를 어떻게 상태 관리를 하고, 로컬에 할 것인가?

SLECT UI

 

⏳⌛💡

로컬에 저장하고 불러오는 기능이 완료됐다!

 

프로세스

1. 우선 advertiser 데이터가 변경되면

2. 밑의 DB처럼 각 네트워크사이트의 'advertisers' 키로 로컬에 저장한다

3. 브라우저를 시작할 때 로컬에서 가져오는 방식!

 

Advertiser 데이터가 변경될 때 저장하는 로직 예시

useEffect(() => {
const current_data = { ...JSON.parse(localStorage.getItem(site)) };
if (
  Object.keys(current_data).length !== 0 &&
  current_data["advertisers"].length !== 0
) {
  saveAdvertisersToDB(data);
}
}, [data]);

 

 

useEffect와 useRouter의 공존

useEffect가 실행되는 시점에 useRouter의 query를 받지 못한다

그럼 useRouter 준비 되었을 때 useEffect를 돌릴 수 있으면 좋겠다

고맙게도 router 객체에 isReady 프로퍼티가 있다!

 

예시

const router = useRouter();
const { site } = router.query;
  
useEffect(() => {
if (!router.isReady) return;

// site 가지고 처리할 코드

}, [router.isReady]);

 

 

DB에 대한 생각

이 프로젝트는 localStorage에 저장하고 있다

하지만 업데이트하거나, 새로 진행할 프로젝트에서 클라우드 서비스를 이용할 예정이다.

 

즉, 직접 서버를 구성하지 않더라도, 데이터베이스가 어떻게 구성할지 생각해야 한다는 것

운이 좋게도 기능 하나 둘 추가하다보니 충돌이 생겼다 허허..

 

충돌을 없애고 효율적으로 DB 구조를 구성하고자 생각해봤다

(이 과정에서 나비효과처럼 코드의 리팩터링이 생겼다)

우선 노션에 만들었고, 여기에 타입을 넣어주면 될 듯 싶다

간단 DB

 

 

이제 할 일을 정리해보자

드디어 이 프로젝트의 마무리가 보인다

할 일을 정리해보자

1. fetch 과정에서 오류 사용자에게 알리는 UI
2. 다른 네트워크(Rakuten) advertisers fecth 및 저장
3. 모달 전체화면 로딩으로 가자
4. 선택된 advertisers의 id 이용해서 선택적 fetch
5. 디자인 마무리

 

 

참고 링크

router object [Next.js 공식문서]

=> https://nextjs.org/docs/api-reference/next/router#router-object

 

How to get router.query value in useEffect hook.

=> https://github.com/vercel/next.js/discussions/12661#discussioncomment-360764

 

 

Sail by Ludomil Sawicki @unsplash