밤은 짧아, 걸어 아가씨야

[리팩토링] 디렉토리별 index를 이용한 모듈화 작업하기 중요한 캘린더 부분을 마치고, 중간 점검하는 시간을 가지기로 했다. 이슈와 PR 이름을 아예 '리팩토링'으로 지었다. 그동안 인지는 했지만 미처 신경쓰지 못한 부분이나, 후순위로 밀렸던 태스크, 효율적으로 개선할 수 있을만한 내용을 이번 PR에서 작업 중이다. 멘토님께 리뷰를 받아가며 작업하니, 내 수준에서 몰랐던 노하우도 많이 배우고 있다. 이번 포스트에는 import 할 때 좀 더 깔끔하게 가져오도록 하는 index 사용 방법과 주의점을 적어본다. 1. 기존의 import CalendarPage.tsx 파일의 import 현황이다. export default로 내보낸 것과, 그냥 export로 내보내서 객체로 묶어 가져온 것이 섞여있다. 2...

[트러블 슈팅] 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..