Taran

정리하게 된 사유 : ...서버 개발을 하고 있었는데 이젠 aws 운영 환경도 신경써야한다고 반 강제로 하게 되었다. 공부하면서 정리했던 필기를 정리한다

요즘 일하면서 공부하는게 평소 공부하는 것보다 많은 듯 (사실 공부 안함)

AWS 운영 환경을 구성할 때 알아야 할 용어 

AWS Region

- AWS 클라우드 센터가 있는 나라/지역

VPC (Virtual Private Cloud)

- 직역 그대로 "가상의 사설 클라우드"

- 논리적인 AWS Region의 하위 구성 

- 사용자가 정의한 aws 계정 전용 가상 네트워크 

- 가상의 개념으로 개인/기업 전용으로 대여되는 클라우드

AV (Availability Zone)

- 가용 영역

- 물리적인 AWS Region의 하위 구성  

- ex) AWS 서울 Region에는 [서울-Region-a, 서울-Region-b] 과 같이 하나의 Region에서도 여러 지역에 물리적으로 분산을 시켜 놓는다. 

Subnet

- VPC 영역의 IP 범위를 칭한다

라우팅 테이블

- 네트워크 트래픽을 전달할 위치를 결정하는데 사용하는 규칙의 집합

EC2 (Elastic Compute Cloud)

- 흔히들 인스턴스Instance 라고 부르는 것이 EC2 Instance다

- 클라우드에 설치, 실행되는 가상 서버

- 기본적으로 생성만 했다면, Subnet 내 IP만 할당되어 외부에선 접근할 수 없다

- "탄력적 IP 할당" 기능을 통해 외부 접근 가능 IP를 발행, 맵핑하여야 외부 접근이 가능하다

인터넷 게이트웨이

- VPC의 리소스와 인터넷 간의 통신을 활성화하기 위해 VPC에 연결하는 게이트웨이 

- 질럿나옴

AMI (Amazon Machine Image)

- 쉽게 생각하면 컴퓨터에 운영체제 설치할 때 사용하는 ISO 파일이다

- EC2 인스턴스에 설치할 소프트웨어(운영체제)의 설치 이미지 파일이자, 소프트웨어 구성이 기재된 Template이다

- EC2 인스턴스 생성 과정에서 AMI를 선택하는 구간이 있다

AWS EBS (Elastic Block Store)

- 교육방송

- Block 단위로 관리되는 동적 저장 공간

- AWS에서 관리하는 S3에 EBS Volume째로 스냅샷을 백업할 수 있다

- EC2 인스턴스에 저장 공간을 할당할 때 기본값으로 설정하는 저장 방식이다

AWS S3 (Simple Cloud Storage)

- 파일 저장소라고 생각하면 된다

- 나도 이렇게만 알고있다

Route 53

- 도메인 설정 기능

AWS 환경 구성 시 기본 순서 및 구성 방식

AWS Region > VPC > AV > Subnet > EC2 Instance

1) 물리적 근본적 지역을 지정

2) 지역 아래에 사용할 가상 대역(VPC)를 설정

3) 가상 대역에 할당할 Region에 속해있는 데이터 센터(IDC 센터)를 지정

4) 물리적(AV)으로 지정된 것을 VPC 할당을 하여 논리적으로 묶었다면, 이제 논리적 공간(VPC) 내에서 사용할 Subnet(내부 IP)를 구성한다

5) 사설 IP까지 구성이 되었다면, EC2 Instance를 생성할 때 사용할 사설 내부 IP를 할당하여 생성한다

원글 

mariadb.com/kb/en/why-is-order-by-in-a-from-subquery-ignored/

찾아본 이유 

mariaDB에서 mysql과 동일한 문법과 테이블 규칙을 가지기 때문에 많이 사용된다. 

그 중 각 그룹 별 최초 혹은 마지막 데이터를 조회할 때 자주 사용되는 쿼리가 있다. 

select * 

from 

(

    select * 

    from table

    order by column_1

) as alias_table

group by column_2 

이런 식으로 정렬한 후 그룹화를 시켜서 각 그룹 컬럼 별 최신 데이터를 뽑는 쿼리를 실무나 개인 개발을 할 때 자주 사용 했었는데, 최근에 mariaDB 최신 버전을 깔고 쓰니까 기존 방식대로 작동하지 않는 것을 발견했다. 

뭐여? 하고 찾아보니 이젠 안된다고 한다. 아래 번역한 내용을 보자.(물론 원본이 더 좋다. 글도 짧은데)

[번역]FROM 절의 서브 쿼리 내에 있는 ORDER BY 절이 왜 무시되는가?

FROM절 서브쿼리에 있는 ORDER BY가 사용된 쿼리가 정렬되지 않은 결과를 제공한다. 하단이 예시 쿼리이다.

예시) SELECT field1, field2 FROM ( SELECT field1, field2 FROM table1 ORDER BY field2 ) alias

위 쿼리가 무조건 field2 컬럼으로 정렬되지 않은 결과를 반환한다.

위 쿼리가 꼭 filed2 컬럼을 기준으로 정렬된 결과를 반환하는 것은 아니다.  버그가 아니란 것이다. 

테이블(과 FROM 절 내의 서브쿼리)는 SQL 표준에 따라 비정렬된 행들의 집합이다. 테이블의 행들은 어떤 특정 순서에 맞춰서 나오지 않는다. 옵티마이저(최적화 툴)가 당신이 특정시킨 ORDER BY절을 무시할 수 있는 이유다. 사실, SQL 표준은 이 서브쿼리에서 ORDER BY가 적용되는 것을 허락하지도 않는다.(ORDER BY ... LIMIT ... 는 순서뿐만 아니라 '행들의 집합'인 쿼리의 결과를 바꾸기 때문에 허가하고 있다.)

당신은 '특정되지 않고 규명되지 않은 순서의 행들의 집합'으로서 FROM절에서 서브쿼리를 사용해야 하고, ORDER BY를 최상위 레벨의 SELECT문에서 사용해야 한다. 

내 생각

사실 이상한 현상은 아니다.

처음 이런 방식의 쿼리를 사용했을 때에도, GROUP BY를 할 때 ORDER BY의 순서가 지켜진다는 것이 RDB의 규칙 - [테이블의 데이터에는 순서가 없다] - 에 어울리지 않다고는 생각을 했었다. 심지어 쿼리 작성/실행 순서도 group by -> order by 순서이기 때문에 그룹화가 된 후에 정렬이 되는데 그룹화되기 전의 결과를 건드린다는 것 자체가 이상한 것이다. 

잘 돌아가니까 이 방식을 많이 애용해왔지만, 머릿속으로는 왜 될까 하면서도 돌아가니까 쓰던 걸 이젠 합당하게 못쓰게 되었으니, 매우 불편해졌다(이런 젠장!). 

현재의 해결책은 위 링크 혹은 번역에서 제시된 것과 같이 내부 서브쿼리에서 [ORDER BY ... LIMIT ...] 를 사용하여 쿼리의 결과 자체가 고정되도록 유도하면 원하던 결과를 낼 수 있다. LIMIT 값 조절을 위해 LIMIT에 필요 이상의 값을 할당하거나 동적 값을 유도해야 하겠지만 현재로서는 어쩔 수 없어 보인다. 

Vue.js 개인 프로젝트 진행 중, 이전에 v-bind의 true-value, false-value 속성을 사용한 분기만 있는 것이 별로 도움이 되지 않아 다른 방법을 작성한다. 

이전 작성글 (v-bind 바인딩)

https://chainbell.tistory.com/entry/Vuejs-6-v-model%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%9C-%EC%9E%85%EB%A0%A5-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94%A9?category=784113

* 작성 코드가 이전 글과 다르게 vue 파일로 되어있다. 

1. 목표 

기능 구현 목표는 [로그인 페이지에서 아이디/비밀번호가 미기재 상태일 때, 입력을 유도하기 위한 표시]를 하는 것이다. 

새로운 글자를 출력할 필요 없이, input type text의 테두리에 빨간 테두리를 표시만 해줄 것이다. 

2. 템플릿 

input_box와 input_box_invalid는 vue 파일 하단에 기재된 css class 명이다. 

3. Vue instance 

아이디/패스워드 각 입력칸이 별도로 움직일 것이기 때문에, 그를 위한 변수를 하나씩 생성해준다. 

class_id_input_box는 아이디, class_pw_input_box는 비밀번호에 적용시킬 것이다. 

위 함수는 로그인 버튼 클릭 시 호출되는 함수이다. (로그인 버튼 관련 내용은 언급하지는 않았다.)

간단하게 각 입력값이 빈 문자열이라면, 각 data 인자를 false로 바꿔 템플릿에서 다른 css가 적용된 class를 받아가도록 되어있다. 

4. 결과

미입력 후 로그인 실행 시, 이렇게 빨간색으로 테두리가 생긴다. 

1. v-for 반복문 바인딩

v-for 지시자는 list, map과 같은 다수의 데이터를 포함한 객체형 변수를 반복하여 출력할 때 사용된다. 

먼저 상단의 Template을 보면,

(1) 상수값 5에 따라 인덱스를 출력하는 반복문

(2) list형 변수의 값을 전체 출력하는 반복문

(3) map형 변수의 key, value를 받아 동시에 출력하는 반복문 

총 세 종류를 확인할 수 있다. 

최초 페이지 출력 상태를 보자. 

(1) 상수값 5에 따라 인덱스를 출력하는 반복문

보통 개발 언어의 인덱스는 0 base(zero base) indexing에 따라 0부터 시작하기 마련이지만, v-for을 이용한 출력에서는 1 base 방식인 것을 확인할 수 있다. 

(2) list형 변수의 값을 전체 출력하는 반복문

list의 경우, 처음에는 값이 비워져 있어 버튼만 출력된 것을 볼 수 있다.

여기서 버튼 이벤트를 실행해보자.

( * 실행 순서는 push, push, pop, push, pop 이다. [push : 1 된 숫자 추가, pop : 목록의 마지막 숫자를 제외] )

화살표 순서를 따라 보면, list 변수값에 따라 양방향 바인딩을 통해 목록이 동적으로 변하는 것을 확인할 수 있다.

(3) map형 변수의 key, value를 받아 동시에 출력하는 반복문

map형 변수의 경우, 예시 데이터를 보면 순서가 고의적으로 바뀌어 있는 것을 알 수 있다.

key 4가 두 번째 위치에 있는 상태로 반복 출력을 실행한 상태이다. 결과를 보면 알 수 있듯이, 값의 입력 순서를 기준으로 출력되고 있다. 

1. v-model 모델 바인딩

v-model 지시자는 주로 값을 입력하고, 그 값을 활용할 때 사용된다. 

위 코드는 HTML input tag와 vue instance의 data를 맵핑 시켜놓은 것이다. 

데이터 모델 numberModel, textModel을 입력받고 바로 아래에 출력하도록 하였다. 

vue의 양방향 데이터 바인딩 정책에 따라 입력과 동시에 하단에 출력이 이루어질 것이다. 

[ input element 입력 -> vue instance data 업데이트 -> HTML 값 출력 element 반영 ]

위 상태에서 input에 입력을 하면 

이렇게 바로 적용이 된다. 

2. v-bind 속성 바인딩

v-bind 지시자는 HTML element의 속성에 바인딩 할 때 사용한다. 

input type checkbox의 경우, 체크가 되어있는지 여부에 따라 값을 결정하게 된다. 이럴 때 v-bind 하위 속성인 true-value와 false-value를 사용하여 값을 지정한다. 

HTML 파일을 호출하면, 위와 같이 기본값으로 출력된 상태로 출력된다.

이 상태에서 체크박스를 체크하게 되면 

이렇게 model에 bind된 값이 입력되며 출력까지 수정되는 것을 볼 수 있다. 

checkbox 이외에도 img tag에서 v-bind:src로 이미지 파일을, v-bind:class로 HTML class를, v-bind:value로 HTML element의 지정값을 바인딩 시킬 수 있다.

1. v-show & Computed

v-show 지시자는 HTML 요소를 조건부로 출력하고 싶을 때 사용한다. 일단 예시 코드를 보자

일단 v-show와 computed가 새롭게 추가되었다. 

(1) v-show 지시자는 받는 결과값이 true일 때, 출력을 하게 된다. 

(2) Vue instance내에 포함된 computed는 data의 값이 바뀌면 수정된 것을 감지하여 실행되는 함수를 가진다. 앞서 나왔던 filter와 비슷한 역할을 하지만, 더 동적으로 데이터를 처리할 수 있게 해준다. 

위 코드에서 showComputed는 clickConfig의 값이 변경되면, 변경사항을 감지하여 결과값을 반환하게 된다. 

실행 순서는

[버튼 이벤트 실행 -> clickMethod 함수 실행 -> clickConfig 값 수정 -> computed 감지 -> showComputed 실행 -> v-show 지시자가 결과를 받음 -> 화면 출력]

이다.

화면 첫 로딩 시, default true로 되어있기 때문에 출력되는 것을 알 수 있다. 이 상태에서 "클릭 이벤트 버튼"을 누르게 되면, 

이렇게 "보여주겠습니다!" 문구가 출력되지 않게 된다. 

(참고 1) v-show는 보여줄지 말지를 선택하는 지시자다. 기본 원리는 display: none을 해주는 것으로 데이터 자체는 잔류하게 된다. 보안상이나 임의 조작을 막아야 하는 경우에 사용하는 것은 바람직하지 못하다. 

2. v-if & v-else

v-show와 다르게 HTML element 자체를 제거시키는 방법이 필요할 때는 v-if를 사용하면 된다. 

실행 순서와 구현 내용은 v-show와 동일하다. 다른 점이 있다면, v-show가 있던 자리에 v-if와 v-else가 있다는 점이다. 

v-if 역시 받는 결과가 true일 때 실행된다.

처음 실행 되었을 때, 두 버튼이 모두 활성화 되어있는 것을 볼 수 있다. 여기서 "클릭 이벤트 버튼"을 클릭하면

이렇게 클릭이 비활성화된 버튼으로 바뀌게 된다. 

v-on 지시자는 UI에서 사용할 event와 실행할 Vue instance내의 mehtod를 등록한다.

예시 코드를 보면, HTML 구간에 v-on:click="clickMethod" 라고 작성되어있다. 읽는 그대로 click이벤트가 발생을 하면, instanceElement라는 이름의 Vue instance내에 구현된 clickMethod를 호출하겠다는 의미이다.

위 예시는 

[button 클릭 -> 클릭 이벤트 실행 -> clickMethod 함수 실행 -> Vue instance내 data "clickConfig"값이 수정] 

순서로 실행된다.

최초 페이지 실행 시에는 

버튼 하나와 default 값 true로 된 clickConfig가 출력되고 있다. 그리고 버튼을 클릭하게 되면 

clickMethod 함수가 실행되면서 clickConfig의 값이 false로 수정되고, 화면 출력값도 바뀌는 것을 알 수 있다. 

(참고 1) 위 예시 코드에서 값을 출력할 때, v-text나 v-html과 같은 출력용 지시자를 사용하지 않았다. 위 방법은 Vue instnace내 data 값을 그대로 출력시키는 방식으로 {{data-key}} 과 같은 방식으로 출력한다.

(참고 2) data의 값이 수정되는 과정은 소스 코드의 동작 상에 있지만, 수정된 값을 HTML에 update하는 과정은 없었다. 이것은 Vue.js의 데이터 관리에 대한 기본 철학이 데이터 양방향 바인딩을 따르고 있기 때문이다. 순수 Javascript로 개발하거나 Jquery로 개발할 때는 단방향 바인딩으로, 데이터의 수정과 HTML로의 수정을 별도로 개발하는 것과 다르게 data의 수정을 통해 바로 수정되도록 하는 것이 Vue.js가 가지는 프레임워크로서의 차별점이다. 

1. 지시자 및 인스턴스 객체 설명 

(1) v-text

    - Vue 인스턴스 data의 값을 text로 출력한다. data 값이 html tag를 포함하고 있다면, tag 역시 text로 그대로 출력한다.

(2) v-html

    - Vue 인스턴스 data의 값을 출력하는데, 값에 html tag가 포함되어 있다면 tag를 인식하여 출력된다. 

(3) filter

    - data의 값을 입력 파라미터로 사용하여, filter로 등록한 함수의 결과값을 반환한다.

2. 예시 소스 코드 

예시 코드에서 신경 써서 볼만한 것은 v-html과 filter 정도이다. 

data에 sample이라는 객체 아래 선언된 tagData는 <h1> 헤더 태그를 포함한 텍스트 값이다. tagData가 v-html로 출력되면 출력 결과를 보면 헤더 효과가 적용된 것과 그 밑에 v-text로 호출된 것은 <h1> 태그를 텍스트 그대로 출력하는 것을 볼 수 있다. 

filter의 경우, filters 아래 numberCheck 라는 콜백 함수가 선언되어 있고, {{ 데이터 변수 | filter 함수 }} 로 호출되어 해당 함수의 반환값이 출력되는 것을 알 수 있다. 예시에서는 함수 입력 파라미터가 int값인지 아닌지를 구별하여 문자열을 반환하고, 출력값에서 동작하는 것을 확인할 수 있다.

1. Vue instance

Vue는 Javacript 객체 인스턴스와 HTML 요소(element)가 맵핑되어 동작하게 된다. 

위 코드는 

HTML에서 id가 instnaceElement인 요소를 생성하고 

Javacript에서 Vue instance를 선언한 후 el(element)가 '#instanceElement'인 요소를 보도록 등록한 것이다.

2. Vue instance 굴러가는 걸 보자

굴러가는 것을 보기 위해

HTML 요소에 Vue에서 제공하는 v-text 지시자를 사용해 name value를 받아오고

Javascript의 Vue instance에 data 프로퍼티를 구성한다. 

* Vue instance에서 HTML과 Javascript에서 사용할 데이터를 data 프로퍼티에 구성한다. 

위와 같이 작성하면, 

이렇게 출력된다. 

3. 생명주기(LifeCycle)

간단한 출력문을 봤으니 생명주기를 확인해보자

Vue Instance는 각각 별도로 4단계의 생명 주기를 갖는다. 

   (1) 인스턴스 생성  

           - 인스턴스가 생성된다. 데이터 관찰자와 사용할 이벤트를 생성하고 초기화한다.

   (2) 템플릿 & 가상 DOM 생성

           - 렌더링 함수를 통해 템플릿을 컴파일한다. 그리고 가상 DOM을 만들고 결과를 HTML DOM에 마운트(mount) 한다.

   (3) 이벤트 루프

           - view-model의 Data를 감시(monitoring)한다. 값에 변화가 있을 때 다시 랜더링한다.

   (4) 인스턴스 소멸

           - 앱 소멸이 시작되면, 모든 관찰자/리스너/자식 컴포넌트들이 삭제된다. 

* 각 생명 주기 단계 별 간단한 설명을 작성했지만, 당장 이해하기에는 나오지 않은 기능 및 요소들이 있다. 개발에 있어서 가장 중요한 생명 주기인 만큼 지속적으로 보면서 나오는 내용들과 함께 겹쳐 봐야 할 것 같다. 

3. LifeCycle Hook

만약 안드로이드 개발을 한 적이 있다면, onCreate나 onResume과 같은 각 생명 주기를 감지해서 특정 시점에 원하는 함수를 실행하는 개발에 익숙할 것이다. 

Vue 역시 생명주기를 기반으로 개발을 할 수 있고, 그것을 도와주는 것이 Hook이다. 

생명주기 4단계에 따라 [create, mount, update, destroy]가 있고 각 주기별 [전/후]로 나누어 총 8개의 Hook이 있다. 

- 인스턴스 생성 : beforeCreate, created

- 템플릿 & 가상 DOM 생성 : beforeMount, mounted

- 이벤트 루프 : beforeUpdate, updated

- 인스턴스 소멸 : beforeDestroy, destroyed

* 코드가 길어져서 파일로 넣습니다. 

개발자 도구를 키고 해당 페이지를 호출하면, beforeCreate, created, beforeMount, mounted

네 개의 Hook이 호출되어 로그가 남는 것을 알 수 있다. 

* update와 destroy의 경우, 위 코드 중에서 데이터의 수정 및 인스턴스 소멸이 발생하지 않아서 호출이 안된 것이다. 

* 개발자 도구에서 생명 주기를 강제 호출할 수도 있지만, 당장 필요한 내용도 아니니 지나가겠다. 

현재 웹 프레임워크 시장은?

최신 웹 프레임워크의 파이는 크게 

- 죽어가는 Angular

- 현재 웹 프레임워크의 주연 React (정확히는 프레임워크가 아닌 라이브러리라고 한다.)

- React의 바로 뒤를 쫓고 있는 Vue.js

세 가지가 있다. 

세 가지 중 Vue를 꺼낸 이유는?

셋 모두 SPA(Single Page Application)을 지향하고 인지도 있는 웹 프레임워크였지만, 재작년부터 그 희비가 뚜렷하게 갈렸다.

- Angular는 메이저 버전 업그레이드 이후 아예 다른 프레임워크로 바뀌어 버렸다고 한다. 실제로 웹 프레임워크 시장에서 하향세를 타고 있다. 버전 업그레이드가 되었다고 기존 개발자도 사용 못 할 정도로 바뀌었다면 프레임워크로서 역할을 못한 것이니 제외 했다.

- React는 공부해보겠다고 책 사서 한번 봤었는데, 지나치게 어렵다. 당장 실무에서 사용하는 것도 아닌 개인 공부용으로 보는 수준에서 보기에는 필요 이상으로 복잡해서 때려쳤다. 

- Vue는 어떤 방식인가 하고 블로그 글을 찾아 따라해봤을 때 약간 따라해봤다. 문법이 JQuery에서 개선되었다고 생각될 정도로 친숙했고, 작성된 코드가 React에 비해서 이해하기 쉬웠다. 

그렇다. 쉬워보여서 골랐다. 

Vue.js란?

Vue 공식적인 설명은 "사용자 인터페이스 구성에 집중한 프로그래시브 프레임워크"이다. 

여기서 말하는 프로그래시브 프레임워크(progressive framework)가 Vue의 최대 장점이다. 이름대로 점진적으로 적용이 가능한 프레임워크라는 것이다. 운영/개발 중이던 기존 환경(HTML과 Javascript)에서 개발을 이어서 진행할 수 있다. 

근데 다들 튜토리얼 잘되어있다고 그거 보고 공부하면 된다고 했는데 역시 돌머리라 잘 이해를 못하겠어서 책 한권 사서 보고 있다.