[TodoMVC] TodoList based MVC Project with VanillaJS / To do MVC 만들기 프로젝트 Intro

TodoList Project based MVC with Vanilla JS

프로젝트 시작 배경

프론트엔드 분야에서 빼놓을 수 없는 자바스크립트를 중점적으로 공부하고 있는데, 무엇인가를 직접 만드는 것보다 좋은 공부는 없다고 생각하여, 무엇을 만들지 고민하던 중에, 정말 정말 유명한 Todo List를 만들어보자고 생각했습니다. 지난 포스팅에서는 html, css, javascript 를 이용하여, 아무 구조도 갖추고 있지 않은 To do list 프로젝트로 만들어봤습니다. ( >> Todo list Basic >> ) 하지만 이번에는 To do list에 MVC 구조를 적용하여 보다 유지보수성이 높고 구조를 갖춘 To do MVC를 만드는 프로젝트입니다.

To do MVC 공식 홈페이지에서는 각종 프레임워크들로 만들어진 To do MVC 소스들을 볼 수 있습니다. 저는 그 중 pure Javascript 만으로 이루어진 Vanilla JS 버전의 소스를 참고하여 이번 프로젝트를 진행하였습니다. To do MVC Github에 소스가 있긴 하지만 완성된 소스 코드가 올라와있었기 때문에 초심자에게는 좀 어려울 것으로 예상됩니다. 그래서 이 부분을 해소하기 위해 순차적으로 어떻게 접근하면 좋을지에 대한 고민을 하면서, 각 소스의 의미를 중점적으로 이번 프로젝트를 정리했습니다.

---

프로젝트 대상

자바스크립트라는 언어를 공부했는데, 어떻게 써먹어야 할지,

그저 팝업 창만 나타나게 하면 되는 건지 잘 모르겠는 예비 개발자,

Angular, React 같이 프론트엔드 진영에서 유행하고 있는 프레임워크, 라이브러리를 공부하고 싶은데,

기본적인 JavaScript 응용과 학습에 대한 러닝커브 때문에 고생하고 있는 예비 개발자,

이 때, 무엇을 공부하고 들어가야할지 모르는 예비개발자,

클라이언트 사이드 렌더링에서 MVC 구조가 어떻게 돌아가는지 알고 싶은 예비 개발자,

이러한 분들이 한 번 해볼만한 프로젝트라고 생각합니다.

---

프로젝트 준비단계

1. Editor, Browser, http-server npm

에디터는 자신이 사용하던 에디터면 됩니다. 참고로 저는 Atom 이라는 에디터를 사용하고 있습니다.

단, JS Hint Plugin을 통해 자바스크립트 개발환경을 구축한 뒤에 프로젝트를 진행하시길 바랍니다.

그리고 이 프로젝트에서는 Chrome Browser를 사용하여 자바스크립트 코드를 테스트할 예정입니다.

작성한 코드를 테스트 하기 위해 특정 폴더를 Server로 띄워주는 npm이 있습니다. 설치하시면 됩니다.

>> http-server npm 설치, 사용 방법 >>

( 자체 서버를 돌리는 다른 방법이 있으시면 그 방법을 사용하셔도 문제 없습니다. ) 

2. HTML / CSS 파일 가져오기 ( index.html, index.css, base.css )

JavaScript에 집중하기 위해서 HTML과 CSS는 공식 홈페이지로부터 얻어왔습니다.

위 세 개의 파일을 프로젝트 폴더에 복사해주시면 됩니다.

https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs

(index.html 파일로 들어가서, index.css , base.css 의 link 경로를 바꿔 CSS가 적용되게 하시면 됩니다.)

3. 기본적인 MVC에 대한 이해

기본적으로 MVC란 무엇인지 이해한 상태에서 이 프로젝트를 진행하는 것이 좋습니다.

>> MVC란 무엇인가? >>

>> Servlet, JSP로 알아보는 MVC >>

>> JavaScript로 이해하는 클라이언트 사이드 렌더링의  MVC 구조 >>

Data Flow에 대한 이해가 중요한 만큼 JavaScript로 이해하는 클라이언트 사이드 렌더링의 MVC 구조에 대한 포스팅은 한 번 보시고 이 프로젝트를 진행하는 것이 좋을 것 같습니다. 

추상적으로만 알고 있는 것 같다면 제가 올린 프로젝트 중 To do MVC 보다 간단한 프로젝트인 Spinbox MVC small project를 통해서 감을 잡으셔도 좋을 것 같습니다.

>> Spinbox MVC projcet >>

4. Javascript 파일 생성

template.js / view.js / controller.js / model.js / storage.js / app.js

이 프로젝트에서는 이렇게 총 6개의 파일로 나누어 MVC 구조를 설계할 것입니다.

예비 프론트엔드 개발자분들께 도움이 되셨으면 좋겠습니다.

---

목차

Step 1. 각 JS파일들을 모듈화하고 의존성 관계 확립하기

Step 2. To do List Add Item / list 추가하기

Step 3. To do List - Remove Item / list 제거하기

Step 4. To do List - Update Item's Status / list 상태 수정하기

Step 5. To do List - Update Item's Content / list 내용 수정하기

Step 6. To do List - Remove Item Completed / list 에서 완료된 목록 삭제하기

Step 7. To do List - Refactoring / ECMAScript2015 문법으로 refactoring

Step 7. ECMA 6 문법으로 Refactoring ( 준비중 )

Step 8. Webpack 으로 transfile, bundle 과정 ( 준비중 )

해당 프로젝트의 코드 Gitbub 주소

https://github.com/JaeYeopHan/TodoMVC_VanillaJS

Step 별로 폴더를 나누어 놓았고, Readme에서 상세 Step을 확인할 수 있습니다.

많은 피드백 부탁드립니다.

감사합니다!