MVC 구조 차용 건의

mu-hun commented 5 years ago

UI와 데이터 관리 액션을 ./script.js 에서 모두 관리하는 방식은 좋지 않습니다.

맡는 역할마다 코드를 분리하는 방법을 권장드립니다.

모델과 뷰, 컨트롤러(MVC)나 Vue/React에서 얘기하는 MVVM 패턴을 권해드릴 수 있겠네요.

O-Kreator commented 5 years ago

데이터를 정의하는 부분은 따로 파일을 분리할 예정이었습니다.

그 외에는 어떻게 나눌 수 있을 지 고민이네요. MVC나 MVVM 같은 디자인 패턴도 이 자리에서 처음 듣는데, 예시를 들어 부연 설명을 해주실 수 있나요?

mu-hun commented 5 years ago

일단, MVC는 모델(데이터), View(사용자 인터페이스.. 아시죠?), Controller(제어)의 축약된 약자입니다.

MVC란 Model View Controller의 약자로 에플리케이션을 세가지의 역할로 구분한 개발 방법론이다. 그림처럼 사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 된다.

- MVC 디자인 패턴 - 생활코딩

해당 패턴에 대한 해석이 여러 가지라[1] 예시를 내리긴 어려울 것 같아 위 인용문을 빌려 설명드리겠습니다.

소프트웨어 공학에서 단일 책임의 원칙이라는 것이 있습니다. 하나의 개체마다 하나의 책임을 가진다는 의미입니다.

이와 같이 MVC는 앱의 역할을 세가지로 세분화 및 고정시켜 예외적인 동작을 방지하는 기능을 수행 합니다.

MVVM은 Model-View-ViewModel 의 약자로, 모델이 바뀌면 뷰 또한 바로 바뀌는 구조입니다. 데이터와 뷰를 중계하는 컨트롤러의 존재가 없어 MVC 보단 손이 적게 든다는 장점이 있습니다.

입력에 따라 항상 View의 결과가 같은 상태를 유지하기 때문에 무상태의, 불변적인 구조라고 많이 평가하는데... 이건 수학에서 건너운 함수형 패러다임을 아셔야 되서 대충 데이터 중심의 디자인 패턴이라고 이해하면 괜찮을 것 같습니다.

아래와 같이 수식으로 정리가 가능하겠네요.

MVC: UI = Mix(Model, View, Controller) # 상태가 매번 변함
MVVM : UI = View(Model) # 상태가 고정됨. 변하지 않음

바닐라로 MVC를 구현하는 예제는 관련된 인프런 강의가 하나 있습니다. 주어진 명세를 구현하면서 MVC 패턴을 점진적으로 이해할 수 있었습니다.

당장 다른 예시를 참고하고 싶다면, 제가 해당 강좌를 바탕으로 만든 데모 저장소를 링크로 첨부드립니다.

1: MVC, 정말제대로알고계신가요? - Sungdoo Yoo - Medium

O-Kreator commented 5 years ago

첫 이슈입니다. 감사합니다!

방금 잠깐 살펴봤는데 역시 아직 제겐 어려운 개념이라 와닿질 않네요. 파일을 역할에 따라 분리한다는 기본 틀은 알겠는데, 그 이상으로 어떻게 구조를 설계해야 괜찮을까 고민이 많이 됩니다.

우선 그 원칙에 따라 Data와 DOM을 정의 내리는 부분은 따로 파일로 뺐씁니다. 하지만 아직 코드가 많아서 어디부터 정리해야 할 지 모르겠네요. 이런 것을 실력 부족이라 하는 것이겠죠. 짚어주셔서 감사합니다.

첨부해주신 링크와 강좌는 시간을 내서 분석하고 듣도록 하겠습니다. 도움이 많이 될 것 같습니다.

P.S. 해당 토픽은 제가 MVC나 MVVM 구조를 완전히 적용할 때까지 오픈 상태로 두겠습니다.

O-Kreator commented 5 years ago

기쁜 소식입니다. MVC 적용에 첫 발을 디뎠습니다!

일단 돌아가는 코드를 만들었다는 데에 의의를 두고 싶습니다. 차차 개선해나가고자 합니다.

O-Kreator / nyong-studio

MVC 구조 차용 건의 #3