MVC란? MVC 디자인 패턴

기타 2019. 3. 20. 16:37


- MVC 모델이란?

M : Model

V : View

C : Controller

의 약자로 어플리케이션을 3가지의 역할로 구분한 개발 방법론을 의미하며

UI(사용자 인터페이스)로부터 로직을 분리하여 유지보수에 이점이 있는 디자인 패턴이다.

- MVC 구성요소

Model은 어플레이케이션의 데이터들을 의미하고, 사용자에게 보여지는것에 대해 신경쓰지않으며, 순수 public 함수로 이루어진다.

View는 UI요소들을 나타내며, 모델에게 질의하여 값을 가져와 사용자에게 보여준다.

Controller는 뷰와 모델의 상호 작용을 관리한다.


- MVC 작동방식

1. User가 View를 통해 소통

2. Controller가 Model에게 Status를 변경하라고 요청

3. Model의 Status가 변경되면 View에게 알림

4. View에서 Model에게 Status에 대한 데이터 요청



- MVC 장점

역할로 인해 각각의 패턴들을 구분하여 개발하므로 유지보수가 용이하며 유연성과 확장성이 높다.

디자이너와 개발자간의 협업이 용이하다.


- MVC 단점

Model과 View의 의존성이 완전히 분리될 수 없기 때문에

설계 단계에서 클래스들이 많아져 구조가 복잡해질 수 있다.

설계시간이 오래걸리며 숙련된 개발자가 필요하다.


- MVP 모델

MVC의 단점 중 Model과 View의 의존성을 줄이기 위해 나온 디자인 패턴이다.

Model과 View는 MVC모델과 같으며 P(Presenter)가 존재

Presenter : View에서 요청한 데이터를 Model로부터 가공하여 View로 전달

MVC 모델과 동일하지만 차이점은 User 입력을 View에서 받음

View에서 받은 데이터는 항상 Presenter를 거쳐 Model과 Communication

따라서 View와 Model은 Presenter의 존재만 알 뿐 서로의 의존성이 사라지게 된다.

하지만 View와 Presenter가 1:1의 강한 의존성이 생김


- MVVM 모델

역시 Model과 View는 같으나 Presenter 대신 ViewModel이 존재.

ViewModel : View를 표현하기 위해 만들어진 Model

Command 패턴과 Data Binding 패턴을 통해 View와 ViewModel의 의존성이 사라짐.



- 무엇을 사용해야하나?

위에서 설명한 각각의 패턴들은 각자의 장단점이 존재.

무엇을 사용해야 한다는 것은 정해진 것이 없다.

프로젝트의 규모와 필요한 기능들에 따라 선택하여 사용하면 된다.



저작자표시

'기타' 카테고리의 다른 글

리그오브레전드 사양, 롤 설치 방법  (1) 2020.04.06
프로그래밍 언어별 정리  (2) 2018.10.19
카카오톡 pc버전 설치하기  (8) 2018.09.13
Visual Studio 2017 설치하기  (1) 2018.09.12
카카오 개발자 컨퍼런스 2018 'if kakao' 개최  (0) 2018.08.16
  • By 열코

[프론트엔드 개발자] ECMAScript란?

HTML, CSS, JS 2019. 3. 20. 14:15


 ECMAScript란 무엇인가?


- 먼저 익숙한 자바스크립트에 대해 알아보자.

자바스크립트는 객체기반의 스크립트 프로그래밍 언어로 주로 웹 브라우저내에서 사용되며

현재 자바스크립트의 최신 버전을 살펴보면 ECMAScript 2019이라고 표기되어있다.


- 왜 자바스크립트의 버전이 ECMAScript로 표기되어있을까?

우리가 알고있는 자바스크립트는 사실 ECMAScript + BOM + DOM이다.

쉽게말해 ECMAScript는 자바스크립트의 표준 규격을 뜻한다.


참고) BOM(Browser Object Model) : 브라우저 객체 모델로 웹 브라우저 기능 요소를 직접 관리/제어 할 수 있는 객체 모음이다.

웹 브라우저의 버튼과 주소입력창, 윈도우 크기등을 제어하는 역할을 한다.


참고) DOM(Document Object Model) : 문서 객체 모델로, HTML, XML 문서의 프로그래밍 인터페이스이다.

동일한 문서를 표현, 저장, 조작하는 방법을 제공한다.


- ECMAScript 버전

ECMAScript (이하 ES)의 버전은 다음과 같이 발전했다.

ES3 -> ES5 -> ES6(ES2015) -> ES7(ES2016) -> ES8(ES2017) -> ES9(ES2018) ->ES10(ES2019)


상위 버전으로 업데이트되면서 편리한 기능들이 추가되었다.


ECMAScript의 대한 역사는 다음 링크를 참조 : https://en.wikipedia.org/wiki/ECMAScript

저작자표시

'HTML, CSS, JS' 카테고리의 다른 글

자바스크립트 스크롤 멈춤 이벤트  (0) 2019.04.07
JavaScript String substring() Method : 자바스크립트 문자열 자르기  (0) 2019.03.25
css로 텍스트 ... 처리하기 - 고정, 가변 길이 element  (0) 2019.03.25
Javascript에서 $ 기호는 뭘까?  (1) 2019.03.24
HTML div 태그 사용법  (0) 2018.11.13
HTML에 CSS 적용하기  (0) 2018.10.03
Atom Editor 설치  (0) 2018.10.01
HTML 기본 문법  (3) 2018.09.30
  • By 열코

HTML div 태그 사용법

HTML, CSS, JS 2018. 11. 13. 16:52



안녕하세요 열코입니다.

이번시간에는 html의 div 태그에 대해 알아보도록 하겠습니다.

div 태그는 Division(분할, 나누기)태그로 알려져있으며 html에서 웹 페이지의 내용(텍스트, 이미지, 머리글 등)을 구분하는데 사용됩니다.

div 태그에는 열기(<) 및 닫기(>) 태그가 모두 있어야 하며 특정 데이터나 기능에 대한 섹션을 만들 수 있기 때문에 웹 개발에서 유용한 태그중 하나입니다.


div 태그는 블록 레벨 태그이며 일반 컨테이너 태그입니다.

html의 다양한 태그 그룹에 사용되며 섹션을 만들고 스타일을 적용할 수 있습니다.


css 레이아웃 및 div 태그의 기본 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html> 
   <head> 
      <title>열코 div 테스트</title> 
<style type=text/css> 
div 
{ 
  color: white; 
  background-color: #333333; 
  font-size: 20px; 
} 
</style> 
   
</head> 
  
 <body> 
   <div> div 태그 </div> 
   <div> div 태그 </div> 
   <div> div 태그 </div> 
 </body> 
</html> 
cs


실행 화면


div 태그안에 컨테이너 태그로 두개 이상의 html 요소를 넣을 수 있으며 함께 그룹화하여 css를 적용할 수 있습니다.

div 태그는 아래 예제에서 웹 페이지의 레이아웃을 만드는데 사용할 수 있습니다.

테이블 태그를 사용하여 만들 수 있지만 테이블 태그는 레이아웃을 수정하는데 매우 복잡합니다.

그러나 div 태그는 매우 유연하여 레이아웃 수정이 쉽습니다.

다음은 div 태그를 이용하여 html 요소를 그룹화한 레이아웃 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html> 
   <head> 
      <title>열코 div 테스트</title> 
      <style type=text/css> 
         .leftdiv 
         { 
         float: left; 
         } 
         .middlediv 
         { 
         float: left; 
         background-color:gray 
         } 
         .rightdiv 
         { 
         float: left; 
         } 
         div{ 
         padding : 1%; 
         color: white; 
         background-color: 009900; 
         width: 30%; 
         border: solid black; 
         } 
      </style> 
   </head> 
   <body> 
      <div class="leftdiv"> 
         <h1>열코1</h1> 
         <p>열코의 프로그래밍 일기</p> 
      </div> 
 
      <div class="middlediv"> 
         <h1>열코2</h1> 
         <p>열코의 프로그래밍 일기</p> 
      </div> 
 
      <div class="rightdiv"> 
         <h1>열코3</h1> 
         <p>열코의 프로그래밍 일기</p> 
      </div> 
   </body> 
</html> 
cs


실행 결과



다음과 같은 방법으로 css를 사용할 수 있습니다.

1. 클래스 사용

내부 css또는 외부 css에서 특정 div에 클래스를 사용할 수 있습니다.

- 내부 css : <style> 요소 내 html의 <head> 섹션에 클래스 정의

- 외부 css : 별도의 css파일을 만들고 <link>를 사용하여 <head> 섹션에 포함


2. 인라인 css

div에서 직접 css를 사용할 수 있습니다.

이 방법은 클래스가 따로 필요하지 않고 모든 태그를 포함할 수 있으므로 컨테이너 태그로도 사용됩니다.

간단한 예제코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html> 
   <head> 
      <title> 열코 div 테스트 </title> 
   </head> 
   <body> 
      <center> 
         <div style="height:300px; width:500px; color:white; 
            border:1px solid; background-color: 009900;"> 
            <!--open tag of Div!-->
            <caption> 
               <h1>div 인라인 css 테스트</h1> 
            </caption> 
            <h1>div 태그내에 css 스타일 정의
            </h1> 
         </div> 
      </center> 
   </body> 
</html> 
cs


실행결과




이상 'html div 태그 사용법'에 대해 알아보았습니다.

질문 사항은 모두 커뮤니티에서 받습니다. -> 커뮤니티 바로가기

메인 페이지로 이동하시면 더 많은 자료를 볼 수 있습니다.


저작자표시

'HTML, CSS, JS' 카테고리의 다른 글

자바스크립트 스크롤 멈춤 이벤트  (0) 2019.04.07
JavaScript String substring() Method : 자바스크립트 문자열 자르기  (0) 2019.03.25
css로 텍스트 ... 처리하기 - 고정, 가변 길이 element  (0) 2019.03.25
Javascript에서 $ 기호는 뭘까?  (1) 2019.03.24
[프론트엔드 개발자] ECMAScript란?  (0) 2019.03.20
HTML에 CSS 적용하기  (0) 2018.10.03
Atom Editor 설치  (0) 2018.10.01
HTML 기본 문법  (3) 2018.09.30
  • By 열코

to Top

티스토리툴바