밤은 짧아, 걸어 아가씨야

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

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

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

[하루한냥] 로그인/회원가입 : 카카오 소셜 로그인 구현 서비스를 이용하려면 로그인 기능이 필요하다. 하루한냥 서비스의 자체 로그인/회원가입 기능을 완성했다. 이후의 태스크는 카카오 소셜 로그인을 구현하는 것이다. 백엔드 처리가 필요해서 이 부분은 멘토님이 맡아주셨다. 나는 카카오 디벨로퍼스 공식 문서와 백엔드에서 만든 API를 참고해 REST API 형식으로 카카오 소셜 로그인을 구현했다. 1. 애플리케이션 추가 Kakao Developers 에 회원가입/로그인하고 내 애플리케이션에 들어가 새로운 애플리케이션을 추가한다. 앱을 추가하면 앱 키가 발급된다. 왼쪽의 설정 메뉴에서 카카오 로그인을 클릭하면 카카오 로그인을 활성화할 수 있다. 하루한냥 프로젝트에서는 이메일 ID와 비밀번호, 닉네임을 사용하기 ..

[트러블 슈팅] 모듈 시스템과 Jest 테스트 로그인, 회원가입 기능을 구현하면서 테스트 오류가 발생했다. 처음에는 단순히 post의 응답 타입을 지정하지 않아서, 혹은 타입이 잘못되어서 발생한 오류인 줄 알았으나 사실은 라이브러리를 잘못 가져다 사용한 문제였고, 생각보다 해결에 오래걸렸다. 허스키에서 1차로 테스트를 진행했지만 이슈를 놓쳤고 깃허브 CI에서 뒤늦게 알게 되었다. 초기 환경을 세팅할 때는 번거로웠지만 이중으로 테스트를 하니까 안정감이 느껴졌다. 이번 글에서는 테스트 오류와 이를 해결하는 흐름을 적어본다. 테스트 오류 발생 발단은 이렇다. 허스키 pre-commit에서 npm run test 명령어로 테스트를 하고 있는데, 오류가 잡히지 않았다. 아마 부분 부분을 나눠 커밋하다보니 한 커밋..