첫 번째 수업. 210220_궁금해서 찾아본 이것저것

# var 변수는 전역변수로 사용할 때에만 사용하고, 최대한 자제하는 것을 권장한다.

​

# 객체 생성 방식

(1) 리터럴 방식

var obj = new Object();

obj.name = 'lhwn';

(2) 생성자 방식

var obj = {
  name: 'lhwn'
};

 

# Emmet 문법

항목	기호	Emmet	HTML
자식(하위)요소	>	div>ul>li	<div> <ul> <li> </li> </ul> </div>
형제요소	+	div>p+span	<div> <p></p> <span></span> </div>
올라가기 (반복 횟수만큼 올라감)	^	div>ul>li>^p+a	<div> <ul> <li></li> </ul> <p></p> <a href=""></a> </div>
반복하기	*	div>ul>li*3	<div> <ul> <li></li> <li></li> <li></li> </ul> </div>
그룹화	()	div>(header>ul>li*2)+footer	<div> <header> <ul> <li></li> <li></li> </ul> </header> <footer></footer> </div>
		그룹화를 하지 않고 div>header>ul>li*2+footer	<div> <header> <ul> <li></li> <li></li> <footer></footer> </ul> </header> </div>
클래스	.class	div.container	<div class="container"></div> ================================== 기본은 div이기 때문에 div 없이 .container만 해도 동일한 결과
아이디	#id	div#id	<div id="id"></div>
속성	[attr]	td[title="hello" colspan=5]	<td title="hello" colspan="5"></td>
넘버링	$	ul>li.item$*5	<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
		ul>li.item$@5*5	<ul> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> <li class="item8"></li> <li class="item9"></li> </ul>
텍스트	{}	.fruit{banana}	<div class="fruit">banana</div>
		.container>ul.list>li.list-item*5>a{list$}	<div class="container"> <ul class="list"> <li class="list-item"><a href="">list1</a></li> <li class="list-item"><a href="">list2</a></li> <li class="list-item"><a href="">list3</a></li> <li class="list-item"><a href="">list4</a></li> <li class="list-item"><a href="">list5</a></li> </ul> </div>
CSS	p → % e → em x → ex	w50	width: 100px;
		w50p h100p	width: 50%; height: 100%;
		m10p30e5x	margin: 10% 30em 5ex;

 

# CDN

CDN(Contents Delivery Network)는 인터넷 사용 환경에서 게임 클라이언트나 콘텐츠를 사용자의 PC로 효율적으로 전달하기 위해

분산된 서버에 데이터를 저장해 전달해주는 시스템

​

# PowerShell

- PowerShell은 CMD의 고급 버전.

- CMD에서 액세스 할 수 없는 시스템 관리 작업을 자동화하는데 사용된다.

- ping 및 복사와 같은 외부 프로그램을 실행하는데에 사용된다.

- .NET Framework를 기반으로 하는 명령줄 도구

- CMD보다 더 많은 기능을 가지고 있다.

- PowerShell을 이용하여 Windows 운영체제에서 관리작업을 수행할 수 있다. 이러한 작업을 수행하는 강력한 스크립트를 작성하는 명령 모음을 제공한다. PowerShell의 자동화 스크립트를 cmdlet이라고 한다.

​

# CMD (명령 프롬프트)

- Microsoft Windows 운영 체제의 명령줄 해석기 (cmd.exe)

- 명령줄 인터페이스를 통해 사용자와 상호작용

- CMD를 사용하여 다양한 작업을 실행하기 위한 스크립트 및 배치 파일을 만들 수 있다.

​

# DOS (Disk Operating System)

- 디스크에 읽고 쓰기 등의 명령을 수행하는 프로그램 (명령어를 직접 치는 명령줄 기반)

​

# PowerShell 과 CMD의 차이점

 

PowerShell	CMD
배치 명령 + PowerShell 명령까지 해석 가능하다.	배치 명령만 해석할 수 있다.
시스템 관리자가 관리 작업을 수행하는데에 주로 사용된다.	사용자 프로그램과 상호작용하고 사용자가 실행하는 명령에 따라 작업을 수행한다.
강력한 명령줄 인터페이스, 복잡한 스크립트를 실행하여 Windows 시스템 관리 작업을 쉽고 효율적으로 수행할 수 있는 스크립팅 환경이다.	사용자에게 일련의 명령을 제공하는 명령줄 인터페이스, 작업을 수행하기 위해 컴퓨터와 상호작용할 수 있다.
결론적으로 PowerShell이 일반 CMD보다 추가 기능으로 구성된다.

 

# Git bash

- 리눅스 베이스의 터미널용 Git (윈도우에서 Git을 명령어 형태로 다룰 수 있는 터미널같은 프로그램)

​

# Git 설정하는 과정

 

(1) git 설정을 할 디렉터리로 이동한 후,

git init

이제 이 디렉토리를 로컬 git 저장소로 등록해준다는 의미이고, 실행하면 .git 파일이 생성된다.

.git 디렉토리에는 저장소에 필요한 뼈대 파일 (Skeleton)이 들어있다.

 

(2) 원격접속 설정 (사용자 이메일, 이름)

git config user.email '사용자@이메일'

git config user.name '사용자이름'

 

(3) 리퍼지토리(저장소) 원격 추가 접속

git remote add origin https://github.com/사용자이름/경로.git

 

- git 접속 유효성 확인하기 (여기서 v는 verify)

git remote -v 

(4) 파일 업로드 (push)

  4-1) 업로드할 파일을 선택한다 : (staging)

    (.은 모든 파일을 의미)

git add .

 

  4-2) 커밋한다 : (commit) 수정/삭제/추가 등등을 검증하는 단계

    (여기서 m은 message)

git commit -m 'MESSAGE'

 

  4-3) push 한다

git push origin master

 

# Vue는 MVVM (Model + View + View Model) 모델이다

​

# MVC, MVP, MVVM의 비교

- MVP, MVVM 패턴은 MVC에서 파생되어 나온 모델이다. 그럼 왜 이렇게 역할을 분리하는 것일까?

각 역할을 나누어 코드 관리를 하자는 의미이다. 그러면 유지보수나 개발 효율의 측면에서도 좋을 것이다.

​

1. MVC = Model + View + Controller

​

1-1) 구조

- Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

- View : 사용자에게 보여지는 UI 부분

- Controller : 사용자의 입력(Action)을 받고 처리하는 부분

 

1-2) 동작의 순서

​

사용자의 Action 들은 Controller를 통해 들어온다.

→ Controller는 사용자의 Action을 확인하고 Model을 업데이트한다.

→ Controller는 Model을 나타내줄 View를 선택한다.

→ View는 Model을 이용하여 화면을 나타낸다.

​

(참고) MVC에서 View가 업데이트되는 방법

(1) View가 Model을 이용하여 직접 업데이트 하는 방법

(2) Model 에서 View에게 Notify하여 업데이트 하는 방법

(3) View 가 Polling으로 주기적으로 Model의 변경을 감지하여 업데이트 하는 방법

​

1-3) 특징

Controller는 여러 개의 View를 선택할 수 있는 1:N의 구조이다.

Controller는 View를 선택할 뿐 직접 업데이트 하지 않는다. (View는 Controller가 누군지 모른다.)

​

1-4) 장점

MVC의 장점은 널리 사용되고 있는 패턴이라는 점에 걸맞게 가장 단순하다. 가장 보편적인 디자인 패턴이다.

​

1-5) 단점

View와 Model사이의 의존성이 높다는 점이다. View와 Model의 높은 의존성은 어플리케이션이 커질수록 복잡해지고 유지보수가 어려워진다.

​

2. MVP = Model + View + Presenter

(Model과 View는 MVC 패턴과 동일하지만, Controller 대신 Presenter가 존재한다.)

​

2-1) 구조

 

- Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

- View : 사용자에게 보여지는 UI 부분

- Presenter : View에서 요청한 정보로 Model을 가공하여 View에게 전달해준다. View와 Model을 붙여주는 역할을 한다.

 

2-2) 동작의 순서

​

사용자의 Action들은 View를 통해서 들어온다.

→ View는 데이터를 Presenter 에게 요청한다.

→ Presenter는 Model에게 데이터를 요청한다.

→ Model은 Presenter 에서 요청받은 데이터를 응답한다.

→ Presenter는 View에게 데이터를 응답한다.

→ View는 Presenter가 응답한 데이터를 이용하여 화면에 나타낸다.

​

2-3) 특징

Presenter는 View와 Model의 인스턴스를 가지고 있어 둘을 연결하는 접착제 역할을 한다.

Presenter과 View는 1:1 관계이다.

​

2-4) 장점

Presenter를 통해서만 데이터를 전달받기 때문에 View와 Model의 의존성이 없다는 것이다.

​

2-5) 단점

View와 Model의 의존성은 해결되었지만, View와 Presenter사이의 의존성은 높다는 것이 단점이다.

​

3. MVVM = Model + View + View Model

​

3-1) 구조

- Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

- View : 사용자에게 보여지는 UI 부분

- View Model : View를 표현하기 위해 만든 View를 위한 Model이다. View를 나타내기 위한 Model 이자 View를 나타내기 위한 데이터 처리 부분이다.

​

​

3-2) 동작의 순서

사용자의 Action들은 View를 통해 들어온다.

→ View에 Action이 들어오면 Command 패턴으로 View Model에 Action을 전달한다.

→ View Model 은 Model 에게 데이터를 요청한다.

→ Model은 View Model에게 요청받은 데이터를 응답한다.

→ View Model은 응답 받은 데이터를 가공하여 저장한다.

→ View는 View Model과 Data Binding하여 화면을 나타낸다.

​

3-3) 특징

MVVM 패턴은 Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되었다.

이 Command 패턴과 Data Binding 패턴을 통해 View와 View Model 사이의 의존성을 없앴다.

View Model과 View 는 1:N의 관계이다.

​

3-4) 장점

MVVM 패턴은 View와 Model 사이의 의존성이 없다. 또한 Command 패턴과 Data Binding 을 사용하여

View와 View Model 사이의 의존성 또한 없앤 패턴이다. 각각의 부분이 독립적이기 때문에 모듈화하여 개발할 수 있다.

​

3-5) 단점

View Model 의 설계가 쉽지 않다는 것이다.

---

출처 : https://beomy.tistory.com/43

[디자인패턴] MVC, MVP, MVVM 비교