개발 여행자, 현

❗️어떤 문제가 발생했을까 Mixed Content: The page at 'https://yeshyun-git-master-shgus1224.vercel.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://~~’. This request has been blocked; the content must be served over HTTPS. 포트폴리오 사이트 만들고 AWS에 서버를 배포한 이후 에러가 발생했다. 이전 이후 클라이언트단에서 사진을 불러오는 방법으로 간단히 해결하면 되지만 나름 서버공부를 해보겠다고 자신감 있게 서버를 구축하고 배포했는데 에러가 발생했다. 분명 로컬에서는 잘 작동했는데!! V..

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..