first_project DAY+9

KEEP 오늘의 좋았던 경험

• 책장에 책 색깔 렌더링 될 때마다 색깔 변하던 것 안바뀌게 수정. 색깔 배열을 만들어서 배열안에 있는 색깔을 랜덤하게 추출 해서 styled component에 props로 전달해 주었는데, 매번 랜덤한 색깔을 넘겨주다보니 렌더링 될때마다 색깔이 변하는 현상이 발생했다.

//아래처럼 해줘서 매번 같은 색깔이 들어가도록 해줘서 색깔이 매번 바뀌는 것을 고정된 색깔로 해주었다.
const color = [
    "#e76438",
    "#4f8f91",
    "#e48365",
    "#2c5854",
    "#eebb3a",
    "#3a506b",
  ];
//중략
{shelf.map((book, idx) => (
            <ShelfBook
              key={idx}
              page={book.pages}
              color={color[idx % 6]}
              onClick={() => reviewHandler(book)}
              idx={idx}
            >
              <span>
                {book.title.length >= 16
                  ? book.title.slice(0, 16) + " ..."
                  : book.title}
              </span>
            </ShelfBook>
          ))}

• Notification 알림 메시지가 먼저 사라지는 현상 수정.

// 기존에는 key값에 map 고차함수 두번째 인자인 index를 넣어줬는데, 
// 그 부분 때문에 key(index)값이 같아지는 현상이 생겨 한 Notify div에 같은 알림 메시지를 넣어줘서
// 앞의 알림 메시지가 사라지면 뒤에 나온 알림창에는 메시지가 없는 현상이 발생했다.
// 그래서 액션에 notify 함수를 만들어줄 때 key값에 넣어줄 랜덤한 uuid를 만들어서 보내줘서 
// 한개의 박스에 하나의 메시지를 할당해주게되어 앞의 문제를 해결할 수 있었다.

// 알림창이 사라질 때 애니메이션을 걸어줄게 아니면 굳이 message가 사라지는 time을 주지 않고 
// dequeueNotification으로 인해 Notification 자체를 사라지게 해주어도 된다.

//NotificationCenter
return (
    <>
      {state.notifications.map((noti) => (
        <Notification
          key={noti.uuid}
          message={noti.message}
          link={noti.link}
          time={noti.dismissTime}
        />
      ))}
    </>
  );

//Notification
useEffect(() => {
    let mounted = true;
    setTimeout(() => {
      if (mounted) {
        setIsFading(true);
      }
    }, time);

    return () => {
      mounted = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

return (
    <Notify>
      <span className={`message ${isFading ? "fade" : ""}`}>{message}</span>
      <span
        className={`link ${isFading ? "fade" : ""}`}
        onClick={navigateHandler}
      >
        {link}
      </span>
    </Notify>
  );

• 서비스 구현 완료

PROBLEM 고쳐나갈 경험

• CSS 반응형, 애니메이션 효과줘서 디자인을 좀 더 발전 시키고싶다.
• 책장 페이지를 구현했는데, 여러번 넘기다보면

Over 200 classes were generated for component styled.div with the id of "sc-jIkXHa". Consider using the attrs method, together with a style object for frequently changed styles. Example: const Component = styled.div.attrs(props => ({ style: { background: props.background, }, }))width: 100%; 이런 에러메시지가 콘솔창에 뜬다. 메시지에 나와있는대로 attrs를 사용해서 만들어주었는데도 똑같은 현상이 발생했다. 왜 이런건지 조금 더 찾아보고, attrs가 무슨 의미인지를 좀 알아볼 필요가 있을 것 같다. 그리고 페이지를 구현할 때 내가 한 방법으로 구현하는 것이 맞는지도 알아볼 필요가 있다.

TRY 시도해볼 일

• 발표자료 피피티 완성하기
• redux-persist (상태를 로컬 스토리지나 세션에 저장할 수 있도록 도와주는 모듈(?) → 로그인 상태 유지)