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

안녕하세요! 🙂

좋은 질문이에요. 실제 백엔드로 전환하면 어떻게 달라지는지 궁금하신 거죠. 하나씩 정리해드릴게요.

네, 맞아요. 실제 백엔드 API를 호출해서 JSON 응답을 받은 뒤 처리하는 흐름은 json-server와 동일해요. json-server가 가짜 REST API 역할을 해준 거고, 실제 백엔드로 바뀌어도 프론트엔드 입장에서는 API 주소만 바뀌고 데이터를 받아서 뿌리는 로직은 같아요.

전체 카운트도 맞아요. 보통 백엔드 API가 페이징 응답에 totalCount(또는 total)를 함께 내려줘요. json-server에서 X-Total-Count 헤더로 받던 것처럼, 실제 백엔드에서도 응답 헤더나 응답 body에 전체 건수를 포함해서 보내주는 게 일반적이에요. 다만 이건 회사마다, 프로젝트마다 API 설계 방식이 다를 수 있어요. 어떤 곳은 헤더에, 어떤 곳은 body에 넣기도 하고요.

조회 조건도 말씀하신 대로예요. params 객체에 where 조건, 정렬, 페이지 번호 등을 담아서 보내면 백엔드에서 DB 쿼리 조건으로 변환해서 처리해요. 프론트엔드가 하는 일은 동일합니다. 다만 params 구조나 API 스펙은 회사마다 다르기 때문에, 백엔드 팀과 API 명세를 맞추는 과정이 실무에서는 필수예요.

서버 페이징에서 헷갈리시는 부분은, 매번 해당 페이지에 필요한 데이터만 API로 요청해서 가져오는 것이에요. 예를 들어 한 페이지에 10건씩 보여준다면, 1페이지 요청 시 1~10번 데이터만, 2페이지 요청 시 11~20번 데이터만 백엔드에서 가져와요. 대량 데이터를 한 번에 다 가져오는 게 아니라, 페이지를 넘길 때마다 해당 페이지 분량만 API를 호출하는 거예요. 그래서 "소량건"이 맞아요 🙂

감사합니다 🙏

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

Vue.js와 관련한 페이징 및 필터링 강의에 대한 좋은 질문을 주셨습니다!

백엔드 API를 호출하여 목록 조회 결과를 처리하는 방식은 강의에서 제시한 json-server와 유사합니다. 다만, 실제 백엔드를 사용할 경우 DB에서 데이터가 어떻게 조회되고 처리되는지를 이해하는 것이 중요합니다.

백엔드 API 구현 및 데이터 처리

1. 조회 조건

   • params 객체를 활용하여 where 조건이나 order by 등의 쿼리 파라미터를 서버에 전달합니다. 서버는 이를 기반으로 DB에 적절히 쿼리를 수행합니다.
     

2. 서버 페이징

   • 대량의 데이터를 다룰 때는 클라이언트에서 모든 데이터를 처리하기 힘들기 때문에, 서버 페이징을 통해 필요한 부분만 가져옵니다.
     
   • 서버 페이징은 클라이언트가 페이지나 페이지 크기를 요청하면, 서버는 그에 맞는 데이터 청크를 반환합니다.
     

3. 대량 데이터 vs 소량 데이터

   • 대량 데이터는 필요할 때마다 서버에서 가져오는 방식(지연 로딩)이 일반적입니다. 이는 네트워크 부하를 줄이고 클라이언트의 성능을 향상시킵니다.
     
   • 소량 데이터는 클라이언트에 필요한 모든 데이터를 한 번에 가져와 로컬에서 빠르게 조회나 검색을 할 수 있도록 합니다.
     

참고 링크

질문하신 내용과 유사한 주제를 다룬 여기에서 json-server와 관련된 설명을 참고하실 수 있습니다. 자세한 내용은 아래 링크를 참조하세요:

• Filter 구현하기에서 input v-model 질문 있습니다.
  

어떤 방식이 맞는지는 데이터의 양, 응답 속도 요구사항, 사용자의 경험 등을 고려하여 결정됩니다. 백엔드와 클라이언트 간에 데이터를 교환하는 최적의 패턴을 선택하는 것이 중요합니다.

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