밤은 짧아, 걸어 아가씨야

[트러블 슈팅] Context와 Promise에 타입스크립트를 싸서 드셔보세요 모달을 모듈화하는 리팩토링을 거치며 있었던 트러블 슈팅에 관한 글을 작성하려 한다. 개발하며 어려움을 겪은 부분과 새로 알게된 내용, CI에서 지속적으로 통과되지 못했던 오류 등을 담았다. 타입스크립트 오류가 생각보다 많아서 배우는 계기가 되었다. 각 파트가 별개의 것이 아니라 긴밀하게 연관되어 있어서 통합적인 이해가 중요했다. 🌱 1. useOverlay를 바로 이용하는 대신 useModal을 만든 이유 🌱 2. useModal을 재활용하지 않고 useConfirm을 새로 만든 이유 🌱 3. 백드롭 클릭 시 하위 요소들로 이벤트 전이 방지하기 - stopPropagation 💡 4. 상위에서 전달한 함수가 사용 시점에 타입 ..

[하루한냥] 모달 모듈화 구현 : OverlayProvider와 Context API 우여곡절 끝에 캘린더 CRUD 구현을 마쳤다. 캘린더 페이지에서 일기를 작성하거나 수정할 수 있다. 타임라인 페이지에서 달별 일기 목록을 조회하고 삭제할 수 있다. 이 기능을 바탕으로 필요한 부분에 살을 덧붙이고 있다. 일기 텍스트를 작성하거나, 저장하지 않고 뒤로가기를 클릭하는 경우 모달창이 뜬다. 우선 모달을 useState로 구현했고, 이를 Context API를 기반으로 하는 OverlayProvider로 리팩토링하는 과정을 거쳤다. 이번 글에서는 이렇게 모달을 모듈화해서 모달 관련한 중복 코드를 줄이고, 기존에 페이지에 종속되었던 모달을 범용적으로 사용할 수 있도록 하는 모달 모듈화 내용을 담아보았다. 💡 리액..

INFCON 2023 배우고 나누고 성장하는 인프콘 참여 후기 인프콘 2023 - INFCON 2023 인프런이 만드는 IT인의 축제, 인프콘으로 초대합니다. 인프콘과 함께 배우고 나누고 성장하세요. 다양한 발표 세션, 핸즈온, 네트워킹까지 만나보세요. inflearn.com 지난 광복절, 코엑스에서 열린 2023 인프콘 행사에 다녀왔다. 작년 2022 인프콘도 당첨되었지만 개인적인 사정으로 참여하지 못해 아쉬웠는데, 올해는 나와 남자친구 모두 당첨되어 같이 다녀오게 되었다. 개발자의 오프라인 축제인 만큼, 무슨 옷을 입고갈지 고민했는데 예전에 사둔 고퍼 티셔츠를 입을 기회라고 생각되었다. Go 언어에 대해 전혀 모르지만 해당 언어의 마스코트(고퍼)가 너무 귀여워서 알리 익스프레스에서 사둔 옷이다. 10..

[하루한냥] 캘린더 구현 : Zustand를 이용한 상태관리 구현하기 이전 시간에 만든 캘린더 컴포넌트에 Zustand를 이용해 상태관리 store를 구현했다. 헤더에서 날짜가 바뀌면 캘린더 컴포넌트의 달력이 바뀌어야 한다. useDateStore를 이용해 두 컴포넌트를 연결하고 상태값을 관리하도록 했다. zustand는 사용법이 간단하기 때문에 처음 사용해보는 라이브러리였지만 크게 어려움을 겪지는 않았다. 1. Zustand Store 생성하기 달력의 날짜를 관리할 스토어이기 때문에 useDateStore라고 이름을 붙였다. 스토어에는 상태와 액션을 저장한다. 상태에는 유저가 애플리케이션을 이용하는 순간의 현재 날짜인 currentDate, 헤더의 화살표를 이용해 이동할 대상 날짜인 targetDate..

[하루한냥] 캘린더 구현 : 달력의 시작 요일과 마지막날 구하기 본격적으로 달력 컴포넌트를 구현하기에 앞서, 달력을 구현하려면 생각해야 할 중요한 포인트가 몇 가지 있다. 한 주의 시작을 어떤 요일로 할 것인지, 한 달이 무슨 요일부터 시작하는지, 매달 며칠까지 있는지 등을 고려해야 한다. 달력을 구현하려면 자바스크립트 Date 객체와 다양한 메소드를 이용하게 되기 때문에 해당 부분에 대한 이해가 필요하다. 이번 글에서는 날짜의 상태값 처리 내용을 담지 않았다. Zustand를 이용한 상태관리 구현은 다음 포스트에서 작성할 예정이다. 1. 한 주의 시작 요일 알아보기 맥북 기본 달력을 참고해 달력을 어떻게 만들면 좋을지 생각해 보았다. 한 주의 시작은 대체로 많은 달력이 그러하듯 일요일부터 시작하도록 정..