[ 스파르타 / TIL ] 내일배움캠프 #40

오늘 한 것

---

• SaveDuck 프로젝트 firebase 연결
• SaveDuck 달력 기능 구현

 

오늘의 배움

---

firebase와 리액트를 연결하는 과정에서 redux-thunk를 알게 되었다. 

그리고 redux에서 가져온 미들웨어 applyMiddlewares를 사용하여 SaveDuck 프로젝트와 firebas를 연결시켰다.

 

달력 구현에서 어려웠던 부분은 달에 따라 달라지는 날짜였다. 1일이 시작하는 위치가 달르고 윤년해에는 2월의 날짜 수도 달라진다.

new Date()로 날짜를 가져오면 1월이 코드에서는 0이다. 이것 또한 잘 생각하며 코드를 짜야했다.

 

다행히 윤년 계산법을 찾아보고 아래와 같이 코드를 작성해 보았다.

const checkLeapYear = (year) => {
    if (year % 400 === 0) {
      // 육년
      return true;
    } else if (year % 100 === 0) {
      // 평년
      return false;
    } else if (year % 4 === 0) {
      return true;
    } else {
      return false;
    }
  };

 

 

날짜 클릭 시 날짜 관련 아이템들이 DB에서 가져와 출력되게 하기

---

디비에서 가져오기는 하지만 처음에 페이지가 렌더링 될 때만 가져오고 다른 날짜를 눌러도 목록 변경이 되지 않았다.

 

처음에는 useState를 사용하여 날짜가 변경되었을때 목록을 출력하는 함수를 실행시켜 보려고 했지만 마음대로 되지 않았다.

그러다가 아래와 같이 코드를 써서 해결하였다.

 

useEffect를 사용하여 'dateToString'에 변경이 일어나면 두개의 함수가 실행되게 했다.

의존성 배열에 있는 변수를 모니터링 하고 있다가 변하는 순간 캐치해서 내부의 로직이 실행되는 방법이다.

 

 useEffect(() => {
    shoppingListUnchecked();
    shoppingListChecked();
  }, [dateToString]);