공유된 기술노트 · 넥스트JS

newlec · 2026. 10. 1.

페이지 컴포넌트 분리와 API 관계에 대한 조별 실습과제

이번 실습과제는 조별 실습 과제입니다.

메뉴 관리를 위한 관리자 페이지를 보여드릴 겁니다. 그 페이지를 구현하기 위한 API의 url과 dto를 정의하는 과제입니다.

다들 아시는 것처럼 Rest API는 페이지가 요구하는 데이터를 제공합니다.

따라서 api를 만드는 방법은 간단합니다.

  • 페이지가 메뉴 목록을 달라고 한다면 api는 메뉴목록을 주면 되는 것이고,
  • 페이지가 메뉴 상세를 달라고 하면 api는 메뉴 상세를 주면 되는 겁니다.

간단하쥬?

그런데 페이지가 복잡하다면? 다양한 목록이 한 페이지에 있는 상황이 발생합니다. 일반적으로 한 페이지에는 특정 데이터로만 이루어지지 않습니다. 그럼 그 데이터를 책임지는 컨트롤러?는 누가일까요?

그게 이번 조별 과제의 핵심입니다. 누가 해야 하지? 그리고 url은? 하~ (newlec 왈 : 저는 수업시간에 알려주었지만 서도..)

image

조금 힌트를 드리겠습니다.

위의 페이지는 메뉴를 관리하는 관리자 페이지(/admin/menus)입니다.

이 페이지에서 어떤 데이터들이 보이나요?

설마 메뉴 목록 데이터만 보이나요? 다른 데이터도 보이나요?

api는 페이지와의 관계를 1:1로 만들어지지 않습니다. 절대로 Page 1 : API 1 관계가 아니예요. 오히려 API는 컴포넌트와 1:1 관계를 갖습니다.

위의 페이지에는 사실 몇 개의 컴포넌트로 나누어 볼 수 있을 것 같아요.

몇 개가 보이시나요? 하나? 둘 ?

잘 모르겠으면 페이지에서 데이터의 성질이 다른 부분을 컴포넌트로 분리한다고 가정해 보세요. 그 분리가 잘 되었다면 그 컴포넌트를 위한 api는 1:1이니까 어려울 것이 없습니다.

찾아보셨다면 그것을 위한 API URL, DTO 를 적어보세요. 내일 뉴렉쌤이 검토를 할 예정입니다.

명심하세요. GET 요청에 대한 API 만 골라보는 겁니다. GET 요청은 컴포넌트와 1:1 이라는 점 기억하세요

안녕~~

이 주소는 글의 저작자가 공개한 링크입니다. 뉴렉처 스터디의 다른 자료는 로그인 후 볼 수 있어요.