밤은 짧아, 걸어 아가씨야

[하루한냥] 심리 테스트 구현 : API 호출 함수 분리하기 하단의 4개 메뉴 중 마지막 큰 과업으로는 '심리 테스트'가 남았다. 현재는 스트레스 검사 하나뿐이지만, 추후 다른 테스트가 추가될 수 있을 여지를 남겨놓고 작업 중이다. 이번 내용은 API 함수를 필요한 페이지에서 바로 작성하는 것이 아니라, 모듈로 분리해서 사용하는 방법을 적어보려 한다. 미처 몰랐던 내용인데 멘토님께서 이런 방향으로 작업해 보라고 알려주셨다. 기존에 내가 코드를 작성했던 방법과, 리팩토링 과정을 남겨본다. 1. REPORT 플로우 라우팅 구성은 아래 스크린샷과 같다. 우선 메인 '/report' 페이지에서는 검사를 새로 하거나, 이전의 검사결과를 볼 수 있다. 7일 이내에 검사를 중복해서 할 수 없도록 처리했기 때문에 새로..

[하루한냥] 심리 테스트 구현 : 라디오 버튼 구현하기 라디오 버튼은 예전에 시도했다가 어려워서 잠시 홀드해놓은 학습 내용이었다. 프로젝트를 하면서 더 이상 피할 수 없어졌고, 이참에 HTML Input 태그의 타입과 radio 버튼을 공부했다. 그러나 HTML로 구현하는 것과 React + TypeScript 프로젝트에서의 구현은 조금 차이가 있었다. 몇 가지 꼼수 같기도, 팁 같기도 한 부분이 존재했다. 태그는 안 보이도록 처리하고 태그로 새로 스타일링을 하면 원하는 스타일대로 커스텀할 수 있다는 점을 배웠다. 1. 마크업 작성하기 구현하려는 화면은 이렇다. 총 10개의 질문이 있고, 각 질문에 정도를 나타내는 5가지의 답변이 있다. 질문과 답변 5가지가 한 세트이다. 이 중 이용자가 한 가지 버튼만..

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

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

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