개발 여행자, 현

1. 웹 아키텍처, 어디까지 왔나웹은 정적인 HTML에서 시작해, 이제는 앱처럼 동작하는 복잡한 시스템으로 진화했다. 이 과정에서 다양한 아키텍처가 등장했고, 각각의 방식은 시대적 요구와 기술 환경에 따라 선택되었다. 이 글에서는 현재 주목받는 SPA, MPA, PWA를 중심으로 어떤 아키텍처가 앞으로 주류가 될지 살펴본다.2. SPA: 앱 같은 웹SPA는 한 번의 페이지 로딩 이후, 필요한 데이터만 비동기적으로 불러와 화면을 갱신. 대표적인 기술은 React, Vue, Angular 등이 있으며, UX 측면에서 빠른 반응성과 모바일 친화적인 구조로 주목받고 있다.장점: 빠른 전환, 모바일 친화적단점: 초기 로딩 느림, SEO 이슈대표 사례: Gmail, Facebook, Twitter3. MPA: 전통..

❗️어떤 문제가 발생했을까 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 요청을 최소화 하고싶었고, 추후 방생성하는 페이..