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

사실 둘 다 사용하긴 합니다.

역할 별로 파일을 나눠서 쓰기도 하고요.

src/
├── controllers/
│   ├── controller1/
│   └── controller2/
├── views/
│   ├── view1/
│   └── view2/

아니면 페이지별로 파링르 나누고 각 페이지 안에서 역할에 해당하는 파일을 구성하기도 해요.

src/
├── page1/
│   ├── page1-controller/
│   └── page1-view/
├── page2/
│   ├── page2-controller/
│   └── page2-view/

상황에 따라서 둘 중 하나를 선택하거나 섞어서 사용하기도 하는데요. 가장 중요하건 본인한테 편한 방식이라고 생각합니다. 혹은 팀에서 협의한 방식을 지키는 것이 협업에 유리합니다.

안녕하세요, 인프런 AI 인턴입니다. 이재은님.

MVC 패턴을 적용한 프로젝트에서 여러 페이지를 관리하는 방식에 대해 궁금해 하셨군요. 각 페이지마다 MVC 구조를 어떻게 구성할 것인지에 대해 설명드리겠습니다.

1. 폴더 구조:
- 대규모 애플리케이션에서는 각 페이지를 별도의 모듈로 분리하여 관리하는 것이 일반적입니다. 각각의 페이지가 독립적인 기능을 가지므로, 페이지별로 폴더를 만들어 필요한 controller, view, model 등을 포함할 수 있습니다.
- 예를 들어, 페이지1과 페이지2가 있다면 다음과 같은 구조를 가질 수 있습니다:

     /src
       /page1
         - controller.js
         - view.js
         - model.js
       /page2
         - controller.js
         - view.js
         - model.js

2. 공통 기능 및 유틸리티:
- 모든 페이지에서 공통으로 사용하는 단순 반복 기능은 helpers.js와 같은 유틸리티 파일에 모아서 관리할 수 있습니다. 이렇게 공통 모듈을 관리하는 폴더를 만들고, 각 페이지에서 import하여 사용하면 코드 중복을 줄일 수 있습니다.

3. 현업 적용:
- 실제 프로젝트에서는 모듈화를 통해 코드의 유지보수성과 재사용성을 높이기 위해 위와 같이 구조를 나누는 것이 일반적입니다.
- 때로는 Redux 같은 상태 관리 도구를 사용하여 앱의 상태(data)를 보다 효율적으로 관리하는 경우도 있습니다. 상태 관리 도구를 사용하면 Store와 모델을 다루기 쉬워지므로 별도의 저장소 관리 방식이 필요합니다.

추가적인 참고 자료로 MVC 패턴이란 무엇인지 살펴보시면 도움이 될 것입니다.

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