28일차는 WIL로 대신하는 걸로....🥴
심화 과제 시작💪🏻
오늘 한 일
React 과제를 위한 캘린더 구현
주특기 2주차 과제 시작일이 되었다.
이번 리액트 과제는 순한 맛/매운 맛 두 가지 중 고를 수 있게 되어있는데, 나는 매운 맛🔥을 골랐다.
매운 맛을 고른 이유는 두 가지다.
- 순한 맛은 강의 내용과 거의 일치한다.
- 인스타그램과 비슷한 프로젝트를 이전에 해본 적이 있다.
게다가 매운 맛 과제는 한 번도 제대로 구현한 적이 없는 캘린더라서 더 궁금했다.
사실 HTML, CSS를 처음 공부한 후 일주일 뒤 쯤 캘린더를 만들어봤다.
하지만 <div>로 도배하고 flex를 열심히 쓴 가짜 캘린더라서 지금도 2020년에 멈춰있을 것이다.
그 때 언젠가 제대로 된 캘린더를 만들어보겠다고 했지만 그 때가 항해가 될 줄은🤷🏻♀️
1. Moment.js 사용
과제 안내에서 fullcalendar를 사용해도 된다고 했지만 들어가보면 알겠지만 깔끔해도 예쁘지는 않은 것 같다.
일단 내 스타일은 아니다.
그래서 언제나 그랬듯 또 0부터 만들어보기로 했다.
Moment는 자바스크립트에서 날짜, 시간을 쉽게 다루기 위한 라이브러리다.
자바스크립트의 date객체는 지저분해서 사용하기 어렵다면 Moment는 직관적이고 깔끔하게 사용이 가능하다.
캘린더 헤더는 [React] 캘린더 컴포넌트 만들기를 참고했다.
이 글을 통해 Moment를 더 유연하게 쓸 수 있다는 것을 깨닫고 본문은 자체적으로 개발했다.
사실 여러 블로그 글을 보았지만 썩 코드가 예쁘지 않았고, 좀 더 내가 작성한 느낌이 나는 코드를 갖고 싶었다.
캘린더에 대한 코드는 프로젝트를 총 정리하며 TIL에는 작성하지 않을 예정이다.
사실 Moment는 개발이 중단된 상태로 앞으로 만들 프로젝트에는 사용하지 않는 것을 추천한다는 글을 봤다.
하지만 캘린더를 이미 구현해 본 상태라 이번까지는 Moment를 사용해보고 다음 프로젝트에서는 다른 라이브러리를 찾아보려고 한다.
2. grid 사용
오랜만에 flex가 아닌 grid를 사용해봤다.
flex보다는 grid처럼 행과 열이 딱딱 맞는게 취향이라 너무 즐거웠다.
더 많이 지원해줬으면 좋겠다 grid...
React 과제 계획 세우기
과제 계획 Notion 바로가기
기록보다도 내 머리에 그림을 그리기 위해 전체적인 계획을 작성했다.
확실히 어떤 것을 만들어야 할 지 감이 잡힌 느낌✨
오늘 목표인 캘린더 구현을 해냈으니 내일은 프로젝트의 전체 기능을 완성할 수 있으면 좋겠다.
이제는 뒷전이 되어버린 CSS...
모레는 CSS파티를 할 수 있도록 더 노력 또 노력💪🏻💪🏻💪🏻
내일 할 일
React 과제 진짜 시작하기🥰
