디자인패턴

디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태

• 유지보수를 용이하게 하기위해 모듈화 시키는 것

라이브러리

공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것.
폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유로움.

프레임워크

공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것.
폴더명, 파일명 등에대한 규칙이 있으며 라이브러리에 비해 좀 더 엄격하다.

axios 라이브러리 사례

일정 규칙을 따라야 하나 프레임워크보다 자유롭고 다른 라이브러리 등에 넣을 수 있다.

axios.get('/user?ID=12345') .then(function (response) {
        // handle success
    console.log(response);
})
.catch(function (error) { // handle error
    console.log(error);
})
.then(function () {
// always executed
});        

※ axios로 get요청을 하려면 .get() 그리고 그 이후에 콜백함수 처리는 .then(callback) 등으로 해야 한다는 일정한 규칙이 있다. 패턴을 확인하자.

• 메서드 체인(.then) : 쇠사슬 처럼 객체를 연결고리로 함수를 지속적으로 호출되는 패턴. 객체지향프로그래밍(OOP)에서 여러 함수를 호출하는 일반적인 방식이다.

A.method1().method2(a,b).method3()..

Vue.js

규칙이 있긴 하나 라이브러리보단 좀 더 엄격한 프레임워크며 많은 것들을 제공한다.

<script>
export default { data() {
return { count: 0
} }
}
</script>
<template>
    <button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped> button {
        font-weight: bold;
    }
</style>

위의 코드를 보면 count라는 변수를 ++하기 위해서는 date(){ 메서드 안에 변수를 선언해야 한다는 규칙 등이 있다.
또한 style을 보면 scoped라는 것을 통해서 해당 컴포넌트기반에서만 종속된다라는 것을 정할 수 있다.