처음 써보는 라이브러리와 프레임워크’들’

1. React는 써봤으나, Redux, Next.js, 그리고 TailwindCSS는 이번에 처음 써 봄. 2주 간 진행되는 프로그램이었지만, 처음 며칠 간은 Redux Toolkit과 next-redux-wrapper를 같이 쓰는 데에서 생기는 에러를 핸들링하느라 많은 시간을 보냄.
2. Redux Toolkit은 글로벌한 상태 관리를 하는 데에 아주 적합한 툴이라는 것을 알게 됨. 매번 useState를 이용하지 않아도, reducer를 적재적소에 활용해 상태와 통신할 수 있었음.
3. Next.js의 강점에는 라우팅에 있는 것 같음. 실제로 Monthly view에서 Weekly view, Daily view로 넘어갈 때 useRouter 훅을 아주 잘 이용했음.

TailwindCSS는 간단하게 작성하기엔 좋으나, 코드의 가독성이 심각하게 떨어진다는 단점이 있음. 또한 TailwindCSS에서는 템플릿 리터럴(백틱)을 이용한 다이나믹한 스타일 적용이 매우매우 어려움! 이 부분이 끝나는 Due 며칠 전까지도 전혀 해결이 안 되어서, 결국 안 되는 부분은 style props를 이용해 매우 ‘전통적인’ 방법으로 스타일링하거나, 아래 코드와 같이 리스트를 따로 만들어서 인덱스를 통해서 스타일링을 찾아가는 방법을 썼음.

const width = [
  "w-0/7",
  "w-1/7",
  "w-2/7",
  "w-3/7",
  "w-4/7",
  "w-5/7",
  "w-6/7",
  "w-7/7",
]

캘린더에 일정들을 렌더링할 때, One-day 일정의 경우는 그냥 하면 되지만 Multispan 일정은 포지션을 absolute로 하고 width 값을 조정해야 되는데, 이 부분에서 애를 많이 먹었음.

일정 렌더링하기

1. 앞서 Tailwind에서 잠시 언급했지만, 일정 렌더링 하는 것이 주 과제였을 정도로 많은 시간을 썼음.
2. Monthly view에서는, 아쉽게도 Multispan 일정이 날짜 하나당 1개까지밖에 렌더링되지 않음. 이는 absolute여서… top이나 bottom 값을 조정하면 될 거 같은데 그 부분까지는 해결하지 못했음.
3. Weekly view는 구현은 완료했으나 Vercel 배포 단계에서 시간이 너무 오래 걸려서 에러를 내뱉는 바람에 잠시 봉인해두었음…
4. Daily view에서는, 해당 날짜에 해당하는 One-day 일정은 수월하게 가져왔으나, Multispan 일정 중 해당 날짜에 걸쳐 있는 것을 가져오는 것이 어려웠음. 또한, 오전 9시 - 오전 12시 이런 식으로 구체적인 시간이 있는 일정 여러 개를 동시에 렌더링하면 전부 겹쳐서 확인하기 어려웠음. 일정 Overlay는 좀 더 고려해보자.

초반 설계를 잘하자!!! (localStorage)

성파님께서 첫 과제로 state design을 내주었는데, 이 부분에서 시간을 더 쓸 걸 했다. 너무 러프하게 생각하다 보니 실전 코딩에서 마주친 에러가 매우 많았다. 결국 중간에 데이터 구조를 전면 손을 보았다.

콘솔 창에서 계속 봤던 에러 중에 하나는 바로 non-serializable values 에러였다. 이는 일정 state에 자바스크립트 Date 오브젝트를 그대로 넣어서 생기는 에러였는데, 앱 구동 상에는 크게 문제가 되지 않길래 대수롭지 않게 넘어갔다. 하지만 프로젝트 종료 후 redux-persist와 연동해 로컬스토리지 상에서 redux state가 존재하게끔 시도했는데, 이때 non-serializable 데이터 때문에 적용이 안되는 것이었다! 다음부터 Date를 다룰 땐 String으로 변환해서 저장한 후 이를 Parsing하는 함수를 따로 구현하자.

Date 오브젝트를 그대로 넣고, 이를 가끔 toISOString()을 통해 변환하다보니 시차 이슈가 있었다. 나는 한국 시간 기준으로 하고 싶은데… 표준시 기준으로 string이 만들어져서 이를 고치는 데에도 에러를 먹었다. 깔끔하게 한국 시간 기준 Date를 스트링으로 저장하자!!

JavaScript와 TypeScript

수없이 만난 에러가 TypeError였음. 그리고 레퍼런스 대부분이 TypeScript였어서 코드를 JavaScript로 변환해서 보는 과정이 꽤 번거로웠음. 빠른 시일 내로 TypeScript를 배워야겠다.