밤은 짧아, 걸어 아가씨야

[트러블 슈팅] 11월이 되어야 관측되는 오류가 있다? 어느덧 프로젝트 완성이 코 앞으로 다가왔다. 모바일에서도 예쁘게 보이는지 스타일링과 UIUX에 중점을 맞춰 리팩토링을 진행하고 있었다. 그러다보니 달력은 넘어가고, 2023년이 2달 밖에 남지 않은 시점이 되었다. 그런데 갑자기 캘린더 헤더가 이상하게 동작했다. 이전 날짜로 이동하는 것은 제대로 되는데, 다음 달로 넘어가질 않았다! 이게 무슨 소린가? 그동안 정상 동작하는걸 몇 달 간 봐왔는데? 알고보니 정말 11월이 되지 않았다면 발견하지 못했을 오류였다. 프로젝트 개발 기간이 길어진 것에 고마워해야 하는 것인지? 😂 만약 실제 서비스하는, 앱스토어에 올라간 앱이라면 급하게 오류 고치고 심사받느라 진땀 뺐을 것이다. 캘린더 헤더 오류 발생 캘린더..

[리팩토링] useRef로 반응형 resize 이벤트 구현하기 모바일에 최적화된 프로젝트를 기획했지만, 모바일이라고 모든 기기가 동일한 크기를 가지고 있지는 않다. 여러 기기에 맞춰 특별히 어디가 모나지 않은 스타일링을 하기 위해서는 반응형 웹페이지로 구현하는 것이 중요하다. 주변 프론트 개발자분들이 반응형 때문에 어려움을 겪는 것도 보았기 때문에 중요하게 생각하고 있는 문제였다. 이번 리팩토링 시간에는 미디어쿼리를 이용해 실시간으로 완벽한 반응형 페이지를 구현하는 것은 아니지만, 리액트와 자바스크립트를 이용해 resize 이벤트를 만들어보려 한다. 추가로 쓰로틀링 기법을 이용해 최적화까지 진행할 것이다. 1. 기존의 상태 일기 작성 및 수정 페이지와, 타임라인 페이지 두 곳에서 해당 문제가 일어났다. ..

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

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

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