개발 여행자, 현

1. 이슈 발생 React Query 도입 이후 로그인 페이지에서 사용되는 Input 컴포넌트 리팩터링 도중에 동일한 API를 여러번 호출하는 이슈를 발견했다. 개발자 도구의 네트워크 탭을 확인하면 동일한 API가 여러번 호출된 것을 확인할 수 있다. 이런 상황이 발생하는 경우는 다른 인터넷 창, 탭, 어플리케이션에 방문했다가 돌아오면 API를 재요청하는 것이었다. 알고보니 Background Refetch라는 개념이 있었다. 2. 어떻게 해결했나? - Background Refetch (feat. refetchOnWindowFocus) Background Refetch란 브라우저가 해당 캐시에 대한 데이터를 재요청하는 것으로, 이를 통해 캐시가 항상 최신의 상태를 유지하도록 한다. - refetchOn..

react-query 도입기 모두의 시간 프로젝트를 짧은 기한 내에 개발하면서 유지보수의 필요성을 크게 느끼고 있었다. 메인 개발을 전부 마친 이후에 공통 컴포넌트를 우선적으로 재정돈하고 react-query를 도입했다. React Query를 도입 해야겠다고 생각한 가장 큰 이유 중 하나는 API를 요청해야 하는 페이지가 하나 둘 늘어났고 useEffct, async await, try catch, loading state... 코드의 줄 수가 불필요하게 길어지고 복잡해졌기 때문이다. 또한 생성한 방의 정보를 불러오는 API를 호출하는 페이지가 많은데, 데이터가 업데이트 되지 않았을 때는 일정시간 내에는 동일한 데이터를 사용하는게 맞다고 판단했다. API 요청을 최소화 하고싶었고, 추후 방생성하는 페이..

모두의 시간 서비스 QA 과정을 거치면서 발견한 크로스 브라우징 문제를 해결했던 경험을 작성한다. iOS15 버전이 릴리즈 된 이후에 사파리 브라우저에서만 발생하는 '크로스브라우징' 이슈인 만큼 자세히 기록하고자 한다. 1. 이슈 발생 모두의시간 서비스에서 방을 생성하는 과정에서 input창에 정보를 입력해야 되는 부분이 있다. input 창을 클릭하면 하단에서 키보드가 올라오는데, 키보드 창이 올라온 상황에서 스크롤을 아래로 내리면 검은 빈공간이 표시된다. 서비스 사용에는 문제가 없지만, 사용자의 경험을 헤칠 수 있는 문제가 있기에 이를 해결하고자 했다. 파악한 이슈는 다음과 같다. 키보드를 열기전 : 화면의 높이 키보드를 열었을 때 : 화면의 높이 + 키보드의 높이 키보드가 나오기 전에는 docume..

모두의 시간 서비스 QA 과정을 거치면서 발견한 크로스 브라우징 문제를 해결했던 경험을 작성한다. 1. 문제발생 사이드 프로젝트로 개발하고 배포까지 진행했던 모두의 시간 서비스를 사용하다가 밤 23:00시경 큰 이슈를 발견했다. 서비스 내에 참여자들이 일정을 등록하는 기한을 설정하는 기능이 있는데, 날짜가 NaN 형식으로 보여지는 문제였다. 단순히 Date 객체에 형식을 잘 못 전달했다는 생각이 든 것도 잠시, 다른 팀원은 잘 보인다는 것이었다 🫢 브라우저 차이 문제인가 싶어서 확인하였지만 그것도 아니었고, 네트워크 문제도 아니었다. 그럼 기기 버전 문제라고 생각하여 버전을 비교 해보았는데 안보이는 팀원의 iOS 버전은 15.4.1였고 잘보이는 팀원들의 iOS 버전은 16 이상이었다. 2. 문제해결 문제..