veamcamp HTML+CSS 재미있게 입문하기 5주차

과제까지 마치고 정리를 하려 했는데 계속 미뤄지는 것 같아 우선 수업 내용부터 정리해볼까 한다. 16일을 끝으로 수업은 마무리되었다. 너무 얕지도 깊지도 않아서 재미있게 따라갈 수 있었던 것 같다.

마지막 수업에서도 결과물을 보고 그대로 만들어보는 작업을 했다. 페이지를 만드는 과정은 항상 같다. 큰 단위에서 작은 단위로, 덩어리에 백그라운드 컬러를 줘서 어떤 공간을 차지하고 있는지 확인하는 과정. 그리고 스타일을 담백하게 만들고 시작하는 CSS Reset 과정.

오늘 배운것은 position.

Position

다른 요소에 영향을 주지 않고 선택된 요소의 위치를 지정하고 싶을 때 position을 사용한다. 자주 쓰는 값은 relative와 absolute. relative는 부모 요소로부터 상대적인 position을 지정해주기 위해 쓴다.

position: relative;
left: 30px;
top: 50px;

주위 환경에 영향을 주지 않고 이동하는 것을 확인할 수 있다. 자유도가 꽤나 높아진다. position엔 가급적 left, top을 이용해서 하는 것이 바람직. right, bottom 대신에 left, top에 음수 값을 주는 것이 이해상 낫다. right, bottom을 사용하는 경우는 right: 0, bottom: 0인 경우 정도가 될 듯.

position: absolute;
right: 0;
bottom: 0;

absolute 값은 부모와의 관계를 끊고 독립하는 것으로, 브라우저 기준점에서 어디로든 이동할 수 있다. 위와 같이 하면 브라우저의 우하단에 float되는 효과를 얻을 수 있다. 그런데 브라우저 기준점이 아니라 부모로부터의 절대값을 표현하고 싶을 때가 생길 수 있다. 이런 때엔 부모에 relative를 주고, 자식에게 absolute를 주면 부모위치를 기준점으로 절대 위치를 표현할 수 있다. (강사님은 상대적인 절대값이란 표현을 쓰셨음.)

위와 같은 예제가 있다고 할 때, 각 아이콘의 delete 버튼은 부모 아이콘으로부터 '상대적인 절대 위치'로 표현된 것을 확인할 수 있다.

<ul class="container">
    <li>
        <img class="icon" src="...">
        <img class="del" src="...">
        <h2>iphone</h2>
    </li>
....

.container {
    margin: 100px auto;
    background-image: url(images/bg.png);
    background-attachment: fixed;
    background-position: center;
    width: 1000px;
    border-radius: 10px;
    padding: 20px;
    overflow: hidden;
}

.container li {
    position: relative;
    float: left;
    width: 200px;
    margin: 25px;
}

.container li .del {
    position: absolute;
    right: -20px;
    top: -20px;
}

float와 position을 같이 사용한 예제로 CSS와 결과물을 확인해보면 매우 직관적으로 결과물이 표현된 것을 확인할 수 있다. 마지막으로 position: absolute 에서의 가운데 정렬. 요소의 가로, 세로 값이 150px라 할 때 아래와 같이 해주면 요소를 정가운데로 위치시킬 수 있다.

position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -75px;

position은 앞선 예시에서 보았듯이 직관적이고 매우 편리하지만 position 기능만 가지고 모든 페이지를 구성하기에는 유지보수 측면에서 어려우므로 margin, padding, width, height, border 등으로 커버가 되지 않는 경우에만 제한적으로 쓰는 것이 좋다.

기타 내용

+ 개인적으로 수업 시간에 진행했던 애니메이션이 재미있었는데 IE 하위 버전에선 동작하지 않는다고 한다.

.header .frog img {
    margin: 25px;
    position: relative;
    top: -100px;
    transition: all 1s;
}

.header .frog:hover img {
    top: 0;
    transform: rotate(-360deg) scale(0);
}

+ background color 값에 rgba 모델을 사용할 수 있다. rgba(255, 255, 255, 0.45); 마지막은 알파 값. opacity 값이다.

+ z-index 속성을 이용해 요소간 겹침이 발생할 때 어떤 요소를 우선적으로 표시할지 지정해줄 수 있다.

+ width: 100% 값을 주면 부모 너비를 따라 자식의 너비가 결정되는데, position을 이용해서 동일한 표현을 할 수 있다.

position: absolute;
left: 0;
right: 0;

+ div에 background-image를 주었는데 표시가 되지 않는 이유? 블록 엘리먼트는 명시적인 높이를 갖지 않으므로 Height를 지정해주어야 확인할 수 있다. Width는 기본적으로 부모의 100%를 가져간다.

끝.

[디자인 패턴] Adapter, Decorator, Facade, Proxy

특정 클래스를 Wrapping해서 사용하는 디자인 패턴으로 Adapter, Decorator, Facade, Proxy 등이 있다. 각각의 역할과 쓰임에 대해 알아보기로 하자.

Adapter Pattern

Incompatible → Compatible. Convert!!

Adapter 패턴은 클라이언트가 원하는 인터페이스(Target)와 호환되지 않는 클래스(Adaptee)를 소스 코드 변경 없이 클라이언트가 원하는 인터페이스로 동작할 수 있게 해준다. Adapter 클래스가 서로 호환되지 않는 인터페이스를 변환하여 동작할 수 있게 하는 것이다. 이를 이용하면 클라이언트는 Adaptee를 몰라도 되고, Adaptee의 수정 없이 원하는 목적을 달성할 수 있는 이점이 생긴다.

public class AdapteeToClientAdapter implements Adapter {
    private final Adaptee instance;

    public AdapteeToClientAdapter(final Adaptee instance) {
         this.instance = instance;
    }

    @Override
    public void clientMethod() {
       // call Adaptee's method(s) to implement Client's clientMethod
    }
}

Decorator Pattern

대상 Object의 기능을 확장

원래의 코드를 Wrapping하여 동적으로 책임을 인터페이스에 추가하기 위해 사용한다. 전형적인 예로 자바의 I/O가 있다.
BufferedReader br = new BufferedReader(new FileReader(new File("test.txt")));

public interface Coffee {
    public double getCost(); // Returns the cost of the coffee
    public String getIngredients(); // Returns the ingredients of the coffee
}

public abstract class CoffeeDecorator implements Coffee {
    protected final Coffee decoratedCoffee;

    public CoffeeDecorator(Coffee c) {
        this.decoratedCoffee = c;
    }
...
    public String getIngredients() {
        return decoratedCoffee.getIngredients();
    }
}

class WithMilk extends CoffeeDecorator {
    public WithMilk(Coffee c) {
        super(c);
    }
...
    public String getIngredients() {
        return super.getIngredients() + ", Milk";
    }
}

class WithSprinkles extends CoffeeDecorator {
    public WithSprinkles(Coffee c) {
        super(c);
    }
...
    public String getIngredients() {
        return super.getIngredients() + ", Sprinkles";
    }
}

Facade Pattern

복잡한 것을 간단하게, 개별 컴포넌트로의 접근을 하나로.

클래스 라이브러리 같은 어떤 소프트웨어의 다른 커다란 코드 부분에 대한 간략화된 인터페이스를 제공하는 객체이다. (위키피디아)
Wrapper가 특정 인터페이스를 준수해야 하며, 폴리모픽 기능을 지원해야 할 경우에는 Adapter 패턴을 쓰고 단지 쓰기쉬운 인터페이스를 이용하고 싶을 경우에는 Facade를 쓴다.

class CPU {
    public void freeze() { ... }
    public void jump(long position) { ... }
    public void execute() { ... }
}

class HardDrive {
    public byte[] read(long lba, int size) { ... }
}

class Memory {
    public void load(long position, byte[] data) { ... }
}

class ComputerFacade {
    private CPU processor;
    private Memory ram;
    private HardDrive hd;

    public ComputerFacade() {
        this.processor = new CPU();
        this.ram = new Memory();
        this.hd = new HardDrive();
    }

    public void start() {
        processor.freeze();
        ram.load(BOOT_ADDRESS, hd.read(BOOT_SECTOR, SECTOR_SIZE));
        processor.jump(BOOT_ADDRESS);
        processor.execute();
    }
}

Proxy Pattern

Subject에 대한 은닉과 제어

특정 객체에 대한 접근을 제어하고, 객체에 대한 접근에 대해 추가 기능을 제공할 필요가 있을 때 사용한다. 보안, 성능, 네트워킹 등의 이유로 Subject (실제 object)를 숨겨야 하는 경우 쓰인다.
구현 예로 원격 object와 통신하는 Remote proxy, 비용이 드는 object에 접근을 통제하는 Virtual proxy,  Role 기반 object의 접근을 제공하는 Protection proxy, 캐시 object를 반환하는 Caching proxy 등이 있다.

interface ICar
{
    void DriveCar();
}

// Real Object
public class Car : ICar
{
    public void DriveCar()
    {
        Console.WriteLine("Car has been driven!");
    }
}

// Proxy Object
public class ProxyCar : ICar
{
    private Driver driver;
    private ICar realCar;

    public ProxyCar(Driver driver)
    {
        this.driver = driver;
        this.realCar = new Car();
    }

    public void DriveCar()
    {
        if (driver.Age < 16)
            Console.WriteLine("Sorry, the driver is too young to drive.");
        else
            this.realCar.DriveCar();
     }
}

public class Driver
{
    public int Age { get; set; }

    public Driver(int age)
    {
        this.Age = age;
    }
}

veamcamp HTML+CSS 재미있게 입문하기 4주차

이제 좀 눈에 들어오는 것 같다.

4주차의 주요 내용은 float와 overflow.
inline-block의 대안(?) float는 inline-block에서 생기는 의도치 않은 spacing을 컨트롤할 수 있게 해준다. 그리고 overflow는 float의 부작용을 컨트롤 해준다. 물론 float와 overflow가 요소의 가로 배치를 위해 만들어진 기능은 아니다.

컨텐츠의 가로 배치를 고려할 때 선택사항 세가지.
1. inline-block : inline tag 특성상 생기는 띄어쓰기 공백 문제
2. float + overflow
3. grid : 브라우저 하위 호환성 문제
→ float + overflow !

몇 가지 속성에 대해..

> line-height : p 태그 내 컨텐츠에서 한 행이 갖는 높이를 설정한다. '1'이라 하면 1em과 같은 효과로 지정된 font size만큼의 행 높이가 설정된다. 기본적으로 웹사이트 내 font size는 16px라 한다. ! 태그가 차지하는 높이가 200px라 하고, line-height가 200px면 세로축 가운데 정렬과 같은 효과를 만들어낼 수 있다. 다만 영어의 경우 y, g와 같이 꼬랑지가 붙는 경우가 있기 때문에 완전히 가운데 정렬처럼 보이진 않는다.
> letter-spacing : 글자 사이의 간격
> vertical-align : 인라인 태그에 대한 수직 정렬을 제공한다. 기본 값은 baseline. 주의할점은 middle값이 line-height의 정가운데를 의미하진 않는다는 것이다. 실제론 서체의 영어 소문자 기준 가운데를 가리킨다. ! inline-block으로 나열된 상황에서 요소의 수직축 정렬이 상하로 뒤틀어지는 현상이 생길 수 있다. 이런 경우엔 vertical-align을 top으로 조정해주면 다시 원하는대로 정렬이 가능하다. vertical-align 기본값이 baseline이라 발생하는 현상으로 자세한 내용은 생략..
> text-indent: 들여쓰기 속성으로 -9999px와 같이 매우 작거나 매우 큰 값을 지정하면 text를 사라지게 하는 표현을 할 수 있다. SEO를 위해 이미지 a태그에 text를 넣어주고 text를 날리는 식으로 실무에서 쓰이는 듯 함.

em?

부모 태그에 font size가 50px라 되어있고, 자식 태그에서 font size를 0.5em라 되어있다면 자식 태그의 font size는 50px * 0.5 = 25px가 된다.
em은 font size에만 적용되는 개념이 아니고 일반적인 단위의 개념이다. 따라서 margin과 같은 속성에 em값을 지정 해줄 수 있음.

float

float는 컨텐츠를 화면에 띄우는 역할로, height를 갖지 않는 특징이 있다. 원래는 이미지와 텍스트 컨텐츠를 어우러지게 하는 목적으로 고안된 기능이지만 이를 응용해 요소들을 가로배치 하는데에도 응용된다. inline-block을 활용해 가로배치할 때 생겼던 띄어쓰기 여백을 없앨 수 있다.
float 사용에서 주의할점은 float 사용이 끝나면 해제(clear) 해주어야 한다. 그렇지 않으면 float가 선언된 이후의 모든 요소에 float 속성이 전달된다. float: left는 clear: left, float: right는 clear: right로 해제하는데, 그냥 clear: both로 하는게 일반적.

overflow

원래 목적은 문서 내 새로운 영역을 생성(격리)하는 것이지만 overflow가 갖는 성질을 이용한 각종 trick이 여러 곳에 쓰인다. 대표적으로 float와 같이 쓰거나 마진 겹침 현상을 해소해주기 위해 쓰인다.
overflow는 격리될 때 overflow가 품는 자식 요소의 모든 시각적인 표시 범위를 떠안고 격리되어진다. 앞서 적혀있듯이 float된 요소엔 따로 height 값이 없기 때문에 float의 부모도 마찬가지로 height가 적절히 지정되지 않게 된다. 이러한 부분에서 오는 여러 문제가 생길 수 있는데 float의 부모에 overflow: hidden; 속성을 줌으로 이러한 문제를 해결할 수 있다. overflow: hidden;은 부모 요소에 대해 자식 요소가 흘러 넘치면 그 내용을 숨기라는 의미지만 부모 요소에 height가 없기 때문에 부모는 어쩔 수 없이 자식 요소를 감싸야 하는 책임이 주어져 float된 만큼의 height 값을 갖게 되는 것이다. (직접 해보면 이해가 빠름.)
overflow: hidden; → float가 적용된 부모에게 overflow: hidden을 지정하면 문제 해결! 글로 적긴 힘듦..
overflow: scroll; → 부모 요소에 대해 자식 요소가 흘러 넘치면 스크롤을 붙여라. (height가 지정될 때만 동작)

이미지-스프라이팅

브라우저 렌더링 속도를 끌어올리기 위한 trick. 페이지에 담기는 이미지를 하나의 통-이미지로 만들어 각각의 요소에 통-이미지의 특정 영역을 지정해 주는 방식. 위 그림의 이미지 링크가 스프라이팅 기법으로 되어있다.
.icon a.view { background-position: left top; }
.icon a.like { background-position: center top; }
.icon a.share { background-position: right top; }

애니메이션

transition 속성으로 단순한 애니메이션 기능을 넣을 수 있다. 아래는 예시. li의 a태그 기본 상태에서 hover될 때 바뀌는 변화를 0.5초 이내에 브라우저가 부드럽게 표현해준다. 익스플로러 하위 버전에선 동작하지 않는다고 함.

.sidebar .menu li a {
    display: block;
    padding: 10px;
    background-color: #222;
    border-left: 5px solid #333;
    transition: all 0.5s;
}

.sidebar .menu li a:hover {
    border-color: dodgerblue;
    color: dodgerblue;
    background-color: #111;
    padding-left: 20px;
}

veamcamp HTML+CSS 재미있게 입문하기 3주차

2주차엔 과제가 있었다. 배운 내용을 가지고 해보는 자유과제 였는데 그냥 하기엔 좀 심심할 것 같아서 자바 스크립트를 사용해서 간단한 대화 기능을 만들었다. 의식적으로 제이쿼리나 다른 프론트엔드 프레임워크를 쓰지 않고 하려니 생각보다 시간이 걸렸다. 아래는 결과물.

업무 시간 외에 뭔가 만들어본건 오랜만이라 완성도를 떠나서 꽤나 신선한 경험이었다. 3주차엔 선택자에 대한 심화(?) 내용과 display 속성에 대해 배웠다.

마진 병합, CSS의 우선순위

마진과 마진이 만나면 자동으로 병합이 된다는 내용. 예를 들어 연속된 두개의 요소에 각각 margin이 20px를 지정하면 두 요소 사이의 간격이 40px가 아니라 20px가 된다는 내용이다.

CSS의 우선순위. 나중에 선언될수록, 구체적일수록 높은 우선순위가 높다. 선택 구문마다 일종의 score가 메겨진다고 보면 되는데, 당연히 score가 높을수록 우선순위는 높다.

<h1 class="wow wow2"/>를 가장 구체적으로 선택해보자.
 → h1.wow.wow2
.wow.wow2는 어색한 표현이지만 아무튼 저렇다고 한다. h1:hover에서 'hover'도 클래스의 범주에 들어가므로 h1:hover는 좀 더 구체적인 h1.wow.wow2에 의해 무시된다는 점을 이해할 수 있어야 한다.

.section.skill:hover h2 { ... }
 → section이면서 skill 클래스를 갖는 태그에 hover가 되면 그 하위의 h2 스타일이 변경된다.

.section.skill :hover { ... }
 → section이면서 skill 클래스를 갖는 태그 내 모든 자식에 hover가 되면 스타일이 변경된다.

다시 정리하는 페이지 만들기 순서

1. 덩어리를 구성한다.
2. CSS를 담백하게 만들고 시작하자. (CSS RESET)
 → 브라우저마다 지정되는 기본 스타일이 조금씩 다르므로 동일한 기준에서 동작하도록 한다.
3. 각 덩어리의 백그라운드를 지정한다.
 → 요소가 차지하는 영역을 확인하기 위함이다.

서체 지정

구글 웹폰트 (https://fonts.google.com/)
전문가가 미리 만들어놓은 웹 폰트를 따다 쓰는 쪽으로 많이 한다고 한다. 구글 웹폰트 기준으로, script를 로드하고 css만 해당 서체를 지정해주면 폰트를 쉽게 적용할 수 있다.

Span

인라인 태그를 감싸는 용도로 span이 권장된다. 인라인 태그는 완전한 박스모델을 따르지 않으므로 사용법이 다름에 주의할 필요가 있다. 예를 들면 span에 width는 적용되지 않는다. (span에는 width 대신 길이의 개념이 적용된다.) 그리고 span엔 margin, padding을 지정할 순 있지만 top, bottom 값이 동작하지 않는다.

Display

각 요소에 대해 display css 속성을 이용해 다른 성격을 줄 수 있다. 예를 들어, 인라인 태그에 display: block 값을 주면 해당 요소는 블록 엘리먼트 처럼 동작하게 된다. a 태그 같은거에 inline-block이나 block 같은 속성을 지정해주면 a 링크가 갖는 크기를 키울 수 있는 것이 주 활용 예다.
display: inline-block은 블록 엘리먼트의 가로 배치를 하는데 자주 쓰인다. inline 속성까지 같이 부여되기 때문에 inline 특성상 원치않는 여백이 포함되는데 이러한 부분에 대해선 float나 grid 같은 대안이 있는 듯 하다.

3주차까지 마치면 다음과 같은 웹 페이지를 만들 수 있다. 뽀록 없이 기계적으로 만들어 낼 수 있다는데서 의미가 있다. 여타 UI Framework에서 자주 쓰곤하는 margin에 음수 값을 주는 trick은 html/css에서도 유효하다.

>> 취미와 업무의 접점에서 스트레스가 찾아온다. 취미 생활에서 스트레스를 받는다면 곤란하겠지만 경험상 취미와 업무가 애매하게 걸치는 경우엔 목표를 약간 높게 설정하는 것이 좋았던 것 같다. 다음주부턴 꽤 어려워질거라 하는데 이번 기회에 잘 배워서 React나 Vue까지 연계해 볼 생각이다.

AWSomeday online conference 요약.

180531 AWSomeday online conference 요약

세션1. AWS 소개 및 AWS의 역사
세션2. AWS 인프라스트럭처 소개 - 컴퓨팅, 스토리지 및 네트워킹
세션3. AWS 보안 및 AWS IAM
세션4. 데이터베이스
세션5. AWS 배포 및 관리 서비스

by 정도현, 안준필 강사님.

좀더 실용적인 내용은 아래 링크를 참고하자.
http://www.pyrasis.com/private/2014/09/30/publish-the-art-of-amazon-web-services-book

세션1. AWS 소개 및 AWS의 역사

:: Amazon Web Services의 커버리지
  스토리지 / 개발 및 관리 도구 / 분석 / 콘텐츠 전송 / 메시징 / 앱 서비스 / 컴퓨팅 / 데이터베이스 / 결제 / 모바일 / 네트워킹 / 온디맨드인력 / VPC

:: 클라우드?
  클라우드 플랫폼에서 다양한 IT 리소스를 인터넷으로 제공하고 사용한 양만큼 비용을 지불하는 모델. 원하는 때 원하는 만큼 자원을 사용. 전기회사가 전기를 공급하는 것과 유사하다. AWS는 개발자와 서비스 사업자를 위한 Building 블럭을 제공. AWS를 이용하여 확장 가능하고 정교한 애플리케이션을 구축할 수 있다.

:: 왜 AWS를 사용해야 하는가?
1. 확장, 그리고 축소에 대한 민첩성
2. 비용절감 (자본비용 > 가변비용)
 - 규모의 경제로 얻게되는 이점
 - 데이터 센터 운영 및 유지 관리에 비용 투자 불필요
3. 탄력성  (시설 과잉 설치 > 실제 필요한 만큼만 리소스를 갖춤)
 - 용량 추정 불필요
4. 기능성의 폭 (타 클라우드 플랫폼과 차별성.)
5. 글로벌 서비스 (세계 곳곳에 배치된 리젼과 가용역역. 몇 분 안에 전 세계 배포 가능)
*** 기존(온프레미스) 환경 대비 최악의 상황을 고려한 프로비저닝을 하지 않아도 된다. 관리 장비와 이를 관리하는 인력에 대한 비용을 줄일 수 있다.

:: AWS 기반 시스템 구축을 위한 일곱가지 모범 사례
1. 장애를 감안한 디자인
2. 소결합 적용
3. 탄력성 구현
4. 모든 계층에서 보안 설정.
5. 여러가지 제약에서 벗어나기.
6. 모든 것을 병렬적으로 생각하기
7. 다양한 스토리지 옵션을 적용.

:: AWS가 제공하는 서비스의 구분
  서비스의 성격에 따라 색상으로 특징하였음. 예를 들면 컴퓨팅, 네트워크는 주황색, 스토리지 서비스는 빨간색으로 구성되는 식임. 'Amazon'으로 시작하는 서비스는 주 재료에 해당하고, 'AWS'로 시작하는 서비스는 보조재료, 마지막으로 아무것도 안붙는 서비스는 Amazon EC2 하부 서비스로 보면 된다고 함.

:: AWS 리전과 가용영역
 . 리전 - 지리적 위치. 2개 이상의 가용 영역(AZ)로 구성됨.
 . 가용영역 - 데이터 센터의 클러스터, 다른 가용 영역의 장애로부터 격리된다. 다중 AZ를 통해 장애에 대한 고 가용성을 보장함.
* 클러스터링된 가용영역의 집합이 리전.
* 모든 서비스를 모든 리전에서 사용할 수 있는 것은 아니라고 함.
* 엣지 로케이션 - Amazon Route 53, Amazon CloudFront 서비스를 주로 지원하는 로컬 지점.

:: AWS 사용하는 세가지 방법
 . AWS Management Console - GUI 기반. ID/PW 인증.
 . CLI - Access Key 기반 인증
 . SDK - 프로그래밍 레벨의 언어 라이브러리로 접근

세션2. AWS 인프라스트럭처 소개 - 컴퓨팅, 스토리지 및 네트워킹

:: Amazon EC2
 . 요구 사항에 따라 컴퓨팅 파워를 조정 가능한 가상화 서버 인스턴스
 . 사용한 만큼만 지불한다.
 . 새로운 서버 인스턴스 확보 및 부팅 시간을 수 분으로 단축.
 . 안정성을 위해 여러 리전과 가용 영역에 걸쳐 배포됨 또는 배포되는 것을 권장.
*** AWS Lambda라는 FaaS도 있다. 이건 아예 서버리스한 구성으로 노출시킨 Function에 대한 호출 비용만 지불하면 된다.
*** Amazon Lightsail이라는 서비스도 있는 것 같다. 간편한 웹 및 애플리케이션 서버 관리에 쓰인다고 하는데 살펴봐야 함. 저렴한게 강점인듯. Amazon ECS는 관리형 컨테이너 서비스로 뛰어난 확장성과 성능을 제공한다.

:: Amazon EC2 시작
1. 리전을 정함
2. 사전 구성된 AMI에서 Amazon EC2 인스턴스 시작
3. CPU, 메모리, 스토리지, 네트워크 요구사항에 따라 인스턴스 유형 선택
4. 네트워크, IP주소, 보안그룹, 스토리지볼륨, 태그, 키페어를 구성.

:: AMI (Amazon Machine Image)
일종의 템플릿. 리전, 운영체제, 아키텍처(32bit or 64bit), 시작 권한, 루트 디바이스용 스토리지를 기준으로 AMI를 선택하면 됨. AMI는 OS, 애플리케이션 및 구성에 해당. 실제 실행되고 중지되는건 EC2 instance.

:: EC2 인스턴스 종류
 컴퓨팅 파워 우선, 메모리 우선, 스토리지 우선, 그리고 범용 컴퓨팅 등 목적에 맞게 인스턴스가 세분화되어 지원됨. 컴퓨팅은 C, 범용 컴퓨팅은 M이 붙는 식.
 . 컴퓨팅 (C4, C3) - 고성능 프론트 엔드, 비디오 인코딩
 . 메모리 (R3) - 고성능 데이터베이스, 분산 메모리 캐싱
 . 스토리지 (I2, D2) - 데이터 웨어하우징, 로그 또는 데이터 처리 애플리케이션
 . GPU (G2) - 3D 애플리케이션 스트리밍, 기계학습
 . 범용 (T2, M3, M4) - 트래픽이 적은 웹 애플리케이션, 소형 및 중형 데이터베이스
* 인스턴스 메타데이터를 가져와 실행 중인 인스턴스를 구성 또는 관리하는데 사용할 수 있다.

:: EC2 구입 옵션 *** 확실치 않음
 . 온디맨드 인스턴스 - 시간당 비용 지불. (초당 과금 기본)
 . 예약 인스턴스 - 사용 시간을 지정하고 사용. 선 결제.
 . 예정된 인스턴스 - 일정 기간에만 사용할 경우. (트래픽이 몰리는 걸 예상 가능할 때 쓰는 모델인듯)
 . 스팟 인스턴스 - 일종의 입찰 형식으로 사용하는 모델인듯
 . 전용 호스트 - 물리적 호스트가 전적으로 인스턴스 실행에 사용되는 모델.

:: Amazon S3
 . 인터넷을 위한 스토리지, 데이터 객체에 대한 HTTP/S 엔드포인트를 제공함. (표준 REST / SOAP 인터페이스 제공)
 . 웹에서 언제 어디서든 원하는 양의 데이터를 저장하고 검색할 수 있다.
 . 데이터는 버킷 내 객체로 저장된다. 버킷 크기와 버킷 내 객체는 무제한.
 . 객체는 최대 5TB.
 . AWS SDK 통한 암호화 지원.
 . S3는 CAP에서 가용성과 파티션 내성에 중점적. 데이터 Upload / Delete 즉시에는 수정 전 데이터를 참조할 수도 있음.
* 일반 사용 시나리오: 스토리지 백업, 정적 호스팅, 미디어 호스팅, 소프트웨어 전송, AMI 및 스냅샷 저장 등 // 여러 서버에서 공용으로 쓰는 파일을 S3에 올려서 SDK와 URL로 엑세스하는데 주로 쓰임.
* 스토리지 요금, 요청 요금, 데이터 전송 요금을 기준으로 과금됨.

:: 버킷과 버킷에 저장되는 데이터 객체
  객체는 파일과 파일을 설명하는 메타데이터로 구성. 계정당 100개의 버킷 보유 가능하고 버킷 및 버킷 내 객체에 대한 access 제어가 가능함. 각 객체는 버킷 내 고유 식별값인 객체 키를 갖는다. 버킷의 버전 관리를 활성화 하면 객체에 대한 버전 관리가 가능하여 특정 버전으로 손쉽게 롤백할 수 있음.

:: S3 객체 수명 주기
  객체의 특성에 따라 나뉘게 되는 수명 주기에 대한 객체 관리 방법을 지원함. 최근에 생성된, 자주 참조되는 데이터는 '핫' 데이터. 핫 데이터에 대한 참조가 적어지거나 시간이 경과하면 콜드 데이터로 분류. 특정 데이터를 특정 기간 이상 지나면 삭제하거나 다른 영역으로 이동.

:: Amazon Glacier
 . 아카이빙 목적의 저렴한 장기 보관 서비스
 . 자주 엑세스하지 않는 데이터에 최적.
 . 3~5시간의 검색시간. (객체 복원 시간이 포함되어 느림)
 . 월별 GB당 0.01달러 수준.

:: Amazon EBS (Elastic Block Store)
 . 일관적이고 짧은 지연 시간의 성능을 제공하는 영구적 블록 레벨 저장장치
 . 가용 영역 내에서 자동으로 복제된다.
 . 스냅샷을 Amazon S3에 안정적으로 저장함.
 . EBS 지원 EC2 인스턴스만 중지 > 가동이 가능. (잘 이해는 안감.)
* EBS를 사용하면 EC2인스턴스의 수명주기와 데이터 스토리지의 수명주
기를 분리할 수 있음. (EC2 인스턴스 스토어는 휘발성이라 함. 인스턴스 스토어에 저장된 데이터는 인스턴스가 활성화되어 있는 동안만 유지. EBS는 영구적. EC2를 삭제해도 EBS는 다른 EC2에 붙일 수 있다고 하는데 확실한 건 아님.)
* 일관적 짧은 지연 시간의 성능을 제공하는 영구적 블록 레벨 저장장치. 가용 영역 내에서 자동 복제된다.

:: EBS vs S3
  EBS는 일반적으로 디스크 드라이브 용도. S3는 온라인 스토리지. EBS는 프로비저닝한 만큼 과금. S3는 사용한 만큼 과금됨. S3는 한번 쓰고 여러 곳에서 여러 번 읽는 용도.

:: Amazon VPC
 . 가상 네트워크를 프로비저닝 함. 가상 네트워크 환경을 제어할 수 있음.
 . 선택한 IP 주소 범위(서브넷)에서 AWS 리소스를 시작할 수 있고,
인터넷으로 액세스 할 수 없는 리소스에 대한 프라이빗 서브넷. (일종의 내부망. Public NAT 게이트웨이 통해 외부 데이터를 가져올 수 있긴 함.)
인터넷으로 액세스할 수 있는 리소스에 대한 퍼블릭 서브넷으로 구분. (퍼블릭에 ELB, 프라이빗에 WAS 배치.)
* 각 서브넷은 하나의 AZ 내에 모두 상주해야 하며 다른 영역으로 확장 불가함.

:: ACL (네트워크 엑세스 제어 목록)
인바운드 아웃바운드 필터링. Amazon EC2의 방화벽 역할을 한다.

세션3. AWS 보안 및 AWS IAM

:: SSL 엔드포인트
 . SSL / TLS을 이용해 보안 통신 세션(HTTPS) 구축

:: 보안 그룹
 . 보안 그룹을 사용하여 인스턴스에 대한 방화벽 규칙 구성

:: VPC
 . VPC에서 리소스 액세스에 대한 low level의 네트워킹 제약 조건을 생성.
 . 퍼블릭, 프라이빗 서브넷에 따른 리소스 접근 설정

:: 멀티 티어 보안 그룹
  웹 티어, 애플리케이션 티어, 데이터베이스 티어를 나누고, 계층 단계로 티어끼리의 연결 설정 가능.

:: IAM (Identity and Access Management)
 . AWS IAM 사용자 및 액세스 관리
 . AWS IAM 역할 및 권한 관리
 . 자격 증명 연동 사용자 및 권한 관리
 . IAM은 모든 AWS 리소스에 접근하기 위해 최초로 접근되는 포털 게이트웨이 영역
 . AWS 계정과 달리 IAM은 인스턴스 레이어의 접근을 위한 계정.
* 그룹과 사용자에 따라 권한 부여. JSON 형식으로 정책이 기술되어 있다. 별도로 IAM 역할이라는 개념이 있는데, expire time이 있는 휘발성 개념의 롤임. 특정 시기와 특정 시점에만 영역 밖의 권한이 필요할 때 임시로 사용되는 형태라 한다. IAM 역할에는 연결된 자격 증명이 없음. IAM 사용자, 애플리케이션 및 서비스는 IAM 역할을 맡을 수 있다고 하는데 듣기만한거라 그런지  잘 이해는 안감.
* 자격 증명을 공유하기보다는 역할을 사용하여 위임.
* 불필요한 사용자와 자격 증명을 제거하는 방향으로.

세션4. 데이터베이스

:: Amazon RDS
 . 비용 효율적이고 크기 조정 가능한 용량 (간편하고 빠른 배포, 확장)
 . 시간 소모적인 데이터베이스 관리 작업을 AWS가 해준다. (관리 부담을 최소화)
 . 다양한 관계형 DB 엔진을 제공함.
 . SSL 연결, 암호화 등의 보안 기능을 제공함.
* 비즈니스 프로세스 중심의 앱
* 복잡한 쿼리, 조인 및 업데이트
* 클러스터링, 파티션, 샤딩으로 극복

:: DB 인스턴스
 . DB 인스턴스는 Amazon RDS의 기본 빌딩 블록.
 . DB 인스턴스는 클라우드에 있는 격리된 데이터베이스 환경으로 사용자가 생성한 여러 데이터베이스가 포함될 수 있다.
 . 자동 백업이 기본 활성화 되어 있으며 최대 35일까지 보존기간 선택 가능.
 . 수동 스냅샷 기능 또한 제공. Amazon S3에 저장된다.

:: Amazon RDS 모범 사례
1. 메모리, CPU, 스토리지 사용량을 모니터링 한다.
2. 다중 AZ 배포를 사용해 다른 가용 영역에 동기식 대기 인스턴스를 자동으로 프로비저닝하고 유지한다.
3. 자동 백업을 활성화 한다.
4. 일일 쓰기 IOPS가 낮을 때 백업 기간이 되도록 설정한다. (*IOPS: Input/Output Operations Per Second, 저장 장치 벤치마크 성능 측정 단위)
5. I/O 용량이 높은 DB 인스턴스 클래스로 마이그레이션 하며 표준 스토리지에서 프로지버닝된 IOPS 스토리지로 변환한다.
6. 처리량 용량을 추가로 프로비저닝한다.
7. 클라이언트 애플리케이션이 DB 인스턴스의 DNS 데이터를 캐시하는 경우 TTL을 30초 미만으로 설정한다.
8. DB 인스턴스에 대한 장애 조치를 테스트 한다.

:: Amazon DynamoDB
 . 완전 관리형 No SQL 데이터베이스 서비스.
 . 어떤 양의 데이터든 제한없이 저장 가능. SSD를 사용해 빠르고 예측 가능한 성능.
 . DynamoDB에 저장되는 객체는 파티션 키과 정렬 키를 기본 키로 갖는다.
* 적은 용량의 읽기 및 쓰기를 다수 수행하는 경우 적합.
* 범위 쿼리, 단순 데이터 모델, 트랜잭션

// 물론 관리형 서비스 말고 사용자가 자체적으로 원하는 AMI에 데이터베이스를 직접 설치해 운영할 수도 있다.

세션5. AWS 배포 및 관리 서비스

:: Auto Scailing
 . Amazon EC2 용량을 조정. (도커 컨테이너, AWS DB 등도 포함.) 사용량 변화가 많은 애플리케이션에 적합하며 추가 요금없이 사용할 수 있다.가용성을 향상시키고 비용 관리 측면에서 이점이 있다. Auto Scailing 그룹으로 최소 크기, 최대 크기에 대한 EC2 인스턴스 모음을 구성한다.
 . Elastic Load Balancing과 CloudWatch와 함께 동작함.

:: ELB (Elastic Load Balancing)
  트래픽을 가용 영역에서 여러 인스턴스에 분산시켜줌. 특정 인스턴스 헬스체크에 실패하면 해당 인스턴스를 Auto Scailing 그룹에서 제외시키고 재가동 시킨다.
* Classic load balancer: TCP와 HTTP Layer 4에서의 트래픽 분석
* Application load balancer: Layer 7에 기반한 애플리케이션 레이어의 트래픽 분석 (컨테이너 기반에 유리하다함)

:: Cloud Watch
 . Auto Scailing 정책 실행 주체로 Auto Scailing 그룹의 확장과 축소 시점을 판단한다.
 . AWS에서 실행하는 AWS 클라우드 리소스와 애플리케이션에 대한 모니터링 서비스. 운영 성능 등에 대한 가시성 제공, 이벤트 기반의 룰 설정 기능 제공.
 . CPU 사용량 등의 Limit을 걸어놓고 경보를 발생시킬 수 있다. 이를 기준으로 SMS / 메일 등의 메시징 발신이나 Auto Scailing을 진행함.

- 이상 AWS 한번도 안써본 유저의 AWSomeday 후기. 잘못된 내용 있으면 알려주세요.