인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 인스타 위치 검색이 뭔지 잘 몰라서 찾아보고 왔습니다 ㅋㅋㅋㅋ 요런 서비스가 있었군요 맛집 찾을 때 편하겠네요 👍

요구사항을 살펴보니 해당 기능은 굳이 Next.js의 장점이나 기능들을 살리기 보다는 클라이언트 사이드 측에서 위치 기반으로 빠르게 데이터를 페칭하고 렌더링 하는 것이 가장 관건일 것 같습니다. 구체적으로 고려해봐야 할 부분에는 다음 사항들이 있겠네요

• 서버측 고려사항

  • 위치 기반의 요청을 더 빠르게 처리할 수 있는 방법에는 무엇이 있을까?

    • 대표적으로 캐시를 생각해 볼 수 있을 것 같아요!

       

  • 그렇다면 매우 동일하거나 비슷한 위치의 요청을 매번 계산하지 않도록 캐시할 수 있을까?

    • 도시나 지역별로 데이터를 샤딩하는 방법, 그리드 기반으로 캐싱하는 방법, 위도 + 경도 기반의 키로 해싱 하는 방법 등등이 있을 것 같습니다.

       

• 클라이언트 측 고려사항

  • 지도 + 맛집 리스트 렌더링은 생각보다 렌더링 리소스가 클 것 같은데 최대한 빠르고 매끄럽게 렌더링 할 방법은 무엇이 있을까?

    • 메모이제이션을 적절히 잘 활용해야 할 것 같다. 등등 ...

       

적어두고 보니 Next.js와는 크게 관련 없는 요구사항들이 많이 존재하죠? 이처럼 특정 도구를 이용하는 프레임에서 벗어나, 실제 문제 해결에만 초점을 맞춰 생각해보면 도구는 결국 도구라는 결론을 얻게 됩니다. 따라서 이 솔루션 개발에 Next.js 사용이 굳이 필요할까 싶기도 해요!

안녕하세요, 인프런 AI 인턴입니다. Byoungmin Kang님.

인스타그램의 위치 검색 기능과 같이 실시간으로 검색 결과를 표시해야 하는 경우라면, 클라이언트 컴포넌트를 주로 사용하여 구현하는 것이 일반적입니다. 이렇게 함으로써 입력된 검색어에 따라 즉시 서버에 쿼리를 보내어 결과를 가져와 화면에 반영하는 사용자 경험이 가능해지기 때문입니다.

Next.js에서 실시간 검색 구현 전략

1. 클라이언트 컴포넌트 사용: 검색어 입력 시 즉시 서버로 요청을 보내고 결과를 반환받는 비동기 작업을 수행해야 하기 때문에 useEffect나 react-query 같은 라이브러리를 활용하여 클라이언트 측에서 데이터를 패칭하는 것이 적합합니다.

2. 데이터 패칭 최적화:

   • 입력값이 변경될 때마다 실시간으로 서버에 요청을 보내는 방식은 서버 부담을 증가시킬 수 있습니다. 따라서, 디바운스(debounce) 기술을 사용하여 입력이 일정 시간 동안 일어나지 않았을 때에만 요청을 보내거나,
     
   • 요청 횟수를 줄이는 쓰로틀링(throttling)를 구현하는 것도 좋은 방법입니다.
     

3. Next.js 서버 컴포넌트와의 결합:

   • 만약 최초 접속 시에 기본 데이터 세트를 서버에서 받아와 화면에 초기화해야 한다면, getStaticProps나 getServerSideProps를 활용하여 초기 데이터 설정을 할 수 있습니다.
     

위의 방법들은 Next.js를 사용하는 동안 React의 서버 및 클라이언트 개념을 적절히 활용하여 최적화된 성능과 유연성을 제공할 수 있도록 돕습니다.

관련 질문 및 유사 케이스

• “React에서의 실시간 검색과 최적화된 패칭 방법”
  

위 링크는 실시간 검색 구현 및 어떠한 성능 최적화를 할 수 있는지에 대한 다양한 사례와 방법을 제공합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.