순수 자바스크립트 1
만약 리액트 같은 UI 라이브러리가 없으면 어떻게 개발할까?
자바스크립트와 브라우저의 돔 스크립트만을 이용하여 개발하는 것
=> 순수 자바스크립트, 바닐라 자바스크립트
MVC 란?
문제 해결에 쓰이는 해법 -> 패턴
프로그래밍에서 문제를 해결하는 접근법 -> 디자인 패턴
화면 개발에서 많이 쓰이는 디자인 패턴 중 하나가 MVC이다.
-
모델
데이터를 관리하는 역할을 한다.
api나 브라우저 로컬 저장소에 있는 데이터를 가져와 어플리케이션에서 사용할 수 있는 모양으로 만든다. -
뷰
사용자가 볼 수 있는 화면을 관리하는 역할을 한다.
데이터를 돔에 출력하거나 삭제할 수 있는 방법도 알고 있다. -
컨트롤러
모델과 뷰는 서로 독립적으로 일을 하는데 이 모델과 뷰를 협력할 수 있게 연결하고 움직이는 주체이다.
왜 MVC패턴을 사용해야 할까.
사용자가 보는 페이지, 데이터처리, 그리고 이 2가지를 중간에서 제어하는 컨트롤, 이 3가지로 구성되는 하나의 애플리케이션을 만들면 각각 맡은바에만 집중을 할 수 있게 된다.
서로 분리되어 각자의 역할에 집중할 수 있게끔하여 개발을 하고 그렇게 애플리케이션을 만든다면, 유지보수성, 애플리케이션의 확장성, 그리고 유연성이 증가하고, 중복코딩이라는 문제점 또한 사라지게 되는 것이다. 그러기 위한 MVC패턴이다.
깃 꿀팁
git checkout -f (브랜치이름)
-> -f는 브랜치 이동시 변경사항을 모두 무시해준다.
폴더 구조
모델 역할을 하기 위한 Store 클래스이다.
class Store {
constructure(storage) {
this.storage = storage // 1
}
}컨트롤러 역할을 하기 위한 Controller 클래스이다.
class Contoller {
constructor(store, views) {
this.store = store;
}
}main.js 기본 구조
function main() {
const store = new Store(storage);
const views = {
// TODO
};
new Controller(store, views);
}실습
화면 안보이게 하려면
this.element.style.display = "none";
return this;화면 보이게 하려면
tihs.element.style.display = this.originalDisplay;
return this;데이터를 받아서 시간을 계산하는 함수
const SECOND = 10 * 1000;
const MINUTE = 60 * 1000;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
const diff = new Date() - date;
if (diff < SECOND) return '방금 전';
if (diff < MINUTE) return '${Math.floor(diff / 1000)초 전';
if (diff < HOUR) return '${Math.floor(diff / 1000 / 60)분 전';
if (diff < DAY) return '${Math.floor(diff / 1000 / 60 / 24)시간 전';
return date.toLocaleString("ko-KR", {
hour12: false,
dateStyle: "medium",
});
console 태그 출력하는 방법
const tag = "[Controller]";
export default class (클래스명) {
console.log(tag);
}버튼 이벤트 기능 (보이는 것이 true 일때는 block처리하고 false 일때는 none 처리한다.)
버튼명(visible = true) {
this.resetElement.style.display = visible ? "block" : "none";
}