오전

1교시: CSS

지난 시간 복습

• 계층 선택자
  • 특정 위치의 요소를 계층적 구조로 요소 선택
    • 모든 태그에게 id, class 부여하는 건 현실적으로 불가능 → 서로의 포함 관계를 이용해 특정 위치 요소들을 지정하자!
  • 종류
    • 자식 선택자(>)
    • 자손 선택자( ) → 자식과 자손 모두 포함이라 광범위한 개념임
    • 형제(sibling) 선택자(+, ~ 등)
  • 자식 선택자를 가장 많이 사용
• 반응 선택자
  • 사용자의 반응으로 생성되는 특정한 상태를 선택 → 이벤트 제어
  • :hover, :active 등
    • hover는 알아두면 좋음 → 메뉴에 마우스 올리면 서브 메뉴 보이게 하기, 영상에 마우스 올리면 화면 커지게 하기 등
• display 속성
  • 요소가 화면에 보이는 방식 지정
  • 기본으로 모든 태그가 display 속성에 대해 자신의 기본값을 가지고 있음
  • block, inline, none
    • block: 웹 페이지의 가로 공간을 모두 차지 → 아래로 쌓임 → flex를 사용하면 옆으로 쌓을 수 있음
    • 공간 할당(영역 배치) 시에는 block 사용: 너비와 높이 설정 가능
    • inline: 내가 사용한 컨텐츠 너비만큼만 차지 → 너비, 높이 조정 불가
    • none: 해당 html 요소를 눈에 보이지 않게 함(태그가 삭제되는 건 아님) → 사용 예: 사용자가 마우스를 특정 위치에 올렸을 때만 메뉴 리스트가 보이게 함

• CSS 위치 속성: 박스 모델(box model)
  • 모든 요소는 '사각형'으로 구성 → 모니터 화면에서 죽는 공간 없이 전체를 활용하기 위함
  • 박스 모델 구조(단면도) ★★★
    
    • content → 글자가 있는 영역
    • border → 테두리
    • 중요 개념: margin과 padding!
    • margin(바깥 여백) → 태그와 태그 사이 공백 조절
    • padding(안쪽 여백) → 테두리와 컨텐츠 사이 공백 조절
    • 글자가 들어가는 공간에는 모두 padding이 존재함

박스 모델

• '모든 요소는 공간을 사각형으로 차지한다'는 개념
• 4가지 구성 요소가 존재

박스 모델 구성 요소

1. 컨텐츠(content): 글자(내용)을 작성하는 공간
2. 안쪽 여백(padding): 테두리와 컨텐츠 사이의 여백을 담당
   • 사용처: 테두리에 글자가 붙지 않고, 안쪽으로 밀려 들어올 때 사용
   • 사용법: 원하는 요소에 padding 값을 부여
     • 값을 주는 방법 4가지
     1. 값을 한 개만 부여하면 → 상 우 하 좌 모든 방면에 부여
   • 주의점: padding은 기본 값을 사용하면 화면에 보여지는 영역이 증가 → box-sizing과 함께 사용해야 함!
3. 테두리(border): 컨텐츠를 감싸는 테두리 영역
   • 사용법: border 속성에 선의 두께, 선의 종류, 선의 색깔순으로 작성한다.
   • 팁
     • 최근 사이트들은 테두리를 회색 계열을 많이 활용한다.
     • 테두리를 지우는 border: none 많이 활용한다.
     • border-radius 속성을 통해 테두리를 깎아서 활용한다.
4. 바깥쪽 여백(margin): 테두리 바깥쪽 여백을 담당
   • 사용처: 요소와 요소 사이에 공백을 추가해서 요소끼리 밀어낼 때 사용
     • 모든 태그가 붙어버리면 보기가 좋지 않음 → margin으로 여백의 미 주기
   • 사용법: margin과 똑같다.
     • 단, box-sizing은 없음(border 밖에다 주는 거라서 box 크기가 변하지 않기 때문)
   • 팁: margin 값에 auto를 지정하면, 좌우 공백을 똑같이 부여 → 가운데 정렬

div 태그

• 'div' → divide; division
  • 가장 어렵고 가장 중요한 태그
    
    • 가상의 공간에 큰 네모를 만들고(wrap) 상, 중, 하로 나눔 → header, container, footer
  • CSS 등장 전에는 사용하지 않았음
    • 과거에는 table, tr, th, td 사용해서 페이지 만들었다고 함 → 영역 분리 한계 있음

실습: 박스 모델

• 영역 크기 확인을 위해 배경색 넣기
  • 원하는 색상 선택 가능
    
    • r, g, b, alpha(투명도) 순

• 중복되는 내용은 합쳐주기
  
  • 모든 프로그래밍 언어에서 중복되는 코드가 발생하면 반드시 줄여준다!

• content가 border에 바로 붙어 있어서 보기 불편 → padding 넣기
  

• padding: 20px;
  
  • padding을 쓰면 원본 컨텐츠의 크기가 늘어남 → 레이아웃 맞춰둔 게 깨져버림 → 원래 사이즈를 유지하기 위해 box-sizing 설정을 추가해 주어야 함: border-box
    

• padding 부여하는 방법은 다양함
  • padding: 20px;
  • padding: 20px 10px;
  • padding: 20px 10px 10px; (거의 사용하지 않는 형태)
  • padding: 20px 10px 10px 10px; → 위 오른쪽 아래 왼쪽 순: 시계 방향
  • padding-top: 20px;
    등등

2교시

실습: 박스 모델

• 테두리(border)
  • border: 2px solid rgba(230, 230, 230, 0.5);
  • round 처리 가능: border-radius → 경계를 부드럽게
    • 값은 px 넣어도 되고 % 넣어도 됨
    • 50% 이상으로 넣으면 동그라미로 테두리 깎아짐 (영역 자체는 그대로 네모임)

• 바깥쪽 테두리(margin)
  • 태그와 태그 사이를 벌어지게 함 (요소와 요소 사이 여백을 만듦)
    • 마진은 위치가 바뀐다 (cf. 패딩은 글자가 밀려가면서 부피가 커짐)
    • 따라서 box-sizing 개념이 없음
  • 양쪽에 동일한 크기의 여백을 알아서 줄 수 있음: margin: auto;
    • 좌우 공백이 동일하게 들어감 (상, 하 마진은 빠짐) → 화면 변화에 맞춰서 계속 변함

• padding, margin이 없다면 답답하게 보임:
  
  • 답답해 보이면 패딩과 마진을 적재적소에 넣어주자

position 속성

• 최상단으로 가는 버튼이 화면에 고정되어 스크롤 할 때 계속 따라다님 → position 속성
  • 태그를 특정 위치에 고정
    
• 요소를 특정 위치에 강제로 이동(배치)시키는 속성
  • 이동 요소는 현재 flex와 grid라는 기술이 생겨서 거의 사용하지 않는 방식(과거 스타일 방식)이 되었음
  • 하지만 고정하는 건 자주 쓰임 → fixed
• 사용법: 특정 위치에 고정할 때는 fixed를 활용한다.

flex 속성

• flex 속성: block 요소를 원하는 위치에 배치할 때 사용 → 레이아웃 설계
  • block 요소를 좌우 배치하고 싶을 때 (상하는 그냥 쓰면 됨)
    • 과거에는 position: absolute; 활용해 하나하나 이동: 강제 이동 개념 → 같은 그룹으로 인식되지 않고 층이 바뀌어 layout이 깨지는 문제 & 변화에 대응이 불가
  • 사용 방법이 매우 복잡
    • 우리는 가장 쉬운 걸 배울 거임: display: flex; + 크롬 개발자 모드 활용
• 사용법: 배치를 원하는 요소를 하나의 그룹으로 만들어서 flex를 적용
  • 부모로 묶은 뒤 부모에게 flex를 준다
    
  • 개발자 도구에서 다양한 설정이 가능
    
  • 개발자 도구는 테스트 환경 → 적용하고 싶으면 코드 복사해서 내 코드에 붙여넣으면 됨
    
• 사용처: block 요소를 "좌우 배치"를 할 때 사용
  • 상하 배치는 그냥 하면 됨(block default가 상하 배치니까)
• 팁: 개발자 도구에서 flex 탭을 클릭 → 속성 수정 → 코드 복사

3교시

CSS 선언

• CSS를 HTML style 태그 안에 쓰면 치명적인 문제가 있음: CSS 내용이 전부 공개됨 → 보안에 취약
  • 그 밖에도 다양한 문제가 있음
    • 분리되지 않은 하나의 코드 내에서 언어 혼용 → 문법 혼동할 가능성
    • CSS는 엄청 길어지기 때문에(3~4만 줄) HTML 수정하려고 파일 읽을 때 시간이 많이 걸림 → 메모리 낭비 → 비용!
    • 재사용성이 떨어짐
• CSS 선언 3가지 방식
  1. 내부 방식
     • HTML 코드 안에 style 태그를 통해서 CSS를 선언하는 방법
     • 단점: 재사용성이 좋지 않다. 유지보수성이 좋지 않다. 보안에 취약하다.
     • 장점: 간단한 디자인 코드를 테스트하기 빠르다.
     • 사용처: 로컬 테스트 개발에 활용한다.
  2. 인라인 방식
     
     • 태그에 직접 스타일을 작성하는 방법
     • 단점: 재사용성이 좋지 않다. 유지보수성이 좋지 않다. 보안에 취약하다.
     • 장점: 간단한 스타일 처리에 매우 빠르게 대응 가능
     • 사용처: 중요하지 않은 짧고 간단한 스타일에 사용

3. 외부 방식
   • 파일을 분리하는 방식 → HTML 파일과 CSS 파일을 분리
   • html에 css 파일 가져오는 법: <link rel="stylesheet" href="style.css"> → rel(relative)
   • CSS 코드 노출이 되지 않음
     • 완벽한 보안이라는 뜻은 아님 → 통신(network)에서 파일 확인할 수 있음
     • 포인트는 숨겨서 가져온다는 것
   • 현업에서 웹 개발 할 때는 무조건 외부 방식만 사용한다

QnA
혹시 서버 만들 때 사용할 만한 사이트 있을까요? aws 같은 게 무료가 있긴 한데 복잡하기도 해서 간단하게 서버 올릴 목적으로는 적합하지 않은 거 같아서요
→ 서버 관리, troubleshooting 관리하려면 AWS나 네이버 클라우드가 가장 적당
가장 쉬운 건 네이버 클라우드(다 한글이니까)
아키텍쳐 설계를 알고 있다면 네이버 클라우드 클래식 서버(무료) 추천
성능이 좋지는 않지만 배포까지 해볼 수 있음
프론트엔드 껍데기만 해보고 싶은 거면 무료 웹 호스팅 사이트 이용
AWS, NCP 가격 면에서 큰 차이는 못 느낌 → 대신 NCP는 기술 지원이 한국어니까 좋음
아니면 웹 클라우드용 데이터베이스 supabase 추천

오후

4-6교시: 시험

7-8교시: AWS Skill Builder

AWS Cloud Practitioner Essentials Day

• AWS Cloud Practitioner Essentials Summary
  • 기본적인 사항 이해하기(클라우드가 뭔지 등)
  • 전체적인 흐름 이해하기
  • 서비스명에 익숙해지기

AWS 소개

• 기존: 물리적 서버/컴퓨터 → 온프레미스
• "클라우드"가 뭔지 먼저 알아야 함
  • 3가지 단어 기억하기: 인터넷을 통해, 온디맨드 서비스 엑세스(필요한 순간 필요한 양만큼), 사용한 만큼만 지불(종량 요금제)
• 온프레미스
  • 내 서비스가 어떻게 될지 모르는 상황에서 선 투자/예측
  • 물리적 공간
• 클라우드
  • 요구사항에 맞게 늘렸다 줄였다 가능
• AWS Cloud
  • 다양한 서비스를 제공하고 있음
  • 기본 서비스 5가지

글로벌 인프라 및 안정성

• 글로벌 인프라?
• 리전과 가용 영역
  • 1개 이상의 데이터 센터를 모아서 '가용 영역'이라 지칭
    • 데이터 센터: 서버들이 모여 있는 공간
  • 3개 이상의 가용 영역을 모아서 '리전'이라 지칭
    • 어느 리전에 서비스를 올릴 건지 정해줘야 함
    • 한국 고객에게 서비스하기 위해서는 한국 리전을 선택하는 것이 좋음: 지연 시간, 해당 지역 법규 등
• 적절한 리전을 선택하는 것이 첫 번째
  • 어느 지역에 서비스를 올릴 것인가?
• 가용 영역
  • 수십 키로의 거리를 두고 가용 영역 구축
    • 화재, 홍수 등 문제가 생기더라도 정상적으로 서비스를 제공할 수 있게 하려고
• AWS 사용 방법
  • REST API
  • 관리 콘솔
  • CLI
  • SDK

계정 보안

• 방화벽 규정 업데이트
• 데이터 관리
• 계정 관리

• AWS Console
  • AWS 계정 생성 → 루트 사용자
    • 로그인 당시 이메일과 패스워드로 로그인하는 경우
    • 이걸로 바로 일하면 안 되고 사용자 하나 만들어야 한다고 함
  • IAM 서비스로 들어가는 게 첫 번째
    • IAM 유저를 하나 만들고 그 유저에게 admin 권한을 줘야 함 → 리소스 권한 관리
    • 이후 해당 유저로 로그인(아이디, 패스워드)
    • 사용자 생성, 인증 및 권한 부여
  • 사용자에게 권한 부여 → 정책을 통해
  • 정책
    • json 형식
    • 권한 부여하지 않으면 해당 사용자는 로그인밖에 못함
    • arn은 주민등록번호 같은 것
    • 필수 요소: effect, action, condition
    • 사용자 또는 그룹에게 정책을 붙여준다. (permission add)
    • condition은 if문 같은 역할
  • IAM 역할
    • 임시 기간 인증을 위함(IAM Role) → 개발팀이 디버깅 하는 동안만 잠깐 운영팀 서버에 들어갈 수 있도록 해야 함
    • 정책을 주는 건 조금 과함 → 너무 과한 권한을 줄 필요 없음: 최소 권한 원칙 준수 → 개발팀은 개발팀 권한만 가지고 있자
    • 이러한 요구 때문에 등장한 개념이 바로 "역할"
    • 포인트: 최소 권한의 원칙을 지키며 정책 부여 / 잠깐만 다른 일 할 때는 역할(role)을 부여받아 잠깐 처리하고 돌아오게 처리

많은 IT 회사에서의 웹 서비스 개발자와 운영자는 역할이 명확하게 구분되어 있습니다. 그래서 개발자에게 보다 친숙한 테스터 업무를 임시로 할 수 있도록 IAM 역할을 활용하시는 케이스가 많습니다.

테스팅 환경을 구성하고 사용할 수 있게 임시 역할을 주는 걸까요..
IAM 계정이 권한을 부여한 다른 계정의 이메일로 AWS에 가입하면 계정 관리가 가능한 IAM을 가질 수 있는 걸까요?? 컴퓨터가 아니라 AWS에 계정을 주고 관리하는 게 상상이 잘 안되어서..
쉽게 말씀드리면 테스트 작업을 수행할 수 있는 EC2 서버에 접근할 수 있는 권한을 임시로 부여한다고 보시면 됩니다.
AWS 계정을 만드실 때 입력하신 이메일 주소와 비밀번호로 계정의 주인인 루트 사용자가 만들어진다고 보시면 됩니다. 그리고 IAM 사용자는 AWS 계정 내부에 있는 사용자라고 보시면 됩니다.
하나의 계정을 한 명이 쓰는 다른 웹 서비스(인스타그램이나 틱톡...)와 달리 AWS는 계정 하나에 수십명 또는 그 이상의 사용자들을 만들어 쓴다고 보시면 됩니다.
운영 체제나 데이터베이스을 비롯하여 대부분의 IT 솔루션들은 여러 사용자들을 만들어서 작업할 수 있도록 기능을 제공하고 있습니다.

아.. 그럼 iam으로 만들고 권한을 준만큼
그 계정으로 aws에 로그인해서 권한 내의 인스턴스들에 대한 관리(?)를 할 수 있는걸까요?
인스턴스 뿐만 아니라 스토리지, 네트워크, 데이터베이스 관련 작업에 대한 권한 설정이 가능합니다.

클라우드 컴퓨팅

• 컴퓨팅 파워를 구매해서 사용: 종류 다양함
• EC2
  • Amazon Machine Images (AMI): 어떤 운영체제인지 고르는 것
  • 필요없으면 종료해야 함 → 비용이 계속 나가기 때문
  • 컴퓨터를 하나 사는 거라고 생각하면 된다고 함
• 서버리스 컴퓨팅
  • 호출되는 순간 서버가 켜지는 개념
• 람다
  • 프로세스 최대 15분 켜짐

서버리스 환경이면 구동까지 시간이 걸리나요?
요청이 없을때 꺼져있으면 요청이 올 때 켜진다는 의미같아서요.
몇 밀리초에서 몇 초라고 보시면 됩니다.

현재 홍은미 강사님께서 설명해주셨던 클라우드 핵심 내용들은 아래 스킬 빌더 디지털 과정 링크를 통해서 다시 보실 수 있습니다.
AWS Cloud Practitioner Essentials (한국어)
https://skillbuilder.aws/learn/94T2BEN85A/aws-cloud-practitioner-essentials-/KEGU7KUPF6

네트워킹

• VPC
  • 구매한 컴퓨터(EC2)를 놓을 집이라고 생각하면 됨
  • 아무데나 놓으면 누구나 올 수 있으니까 나만 올 수 있는 집을 사는 것
  • 방을 여러 개 나누듯 서브넷을 나눌 수 있음
  • 퍼블릭 서브넷은 외부 인터넷과 연결되는 곳: 거실/현관
  • 프라이빗 서브넷은 나만: 안방
• 네트워크 엑세스 제어 목록은 서브넷 영역에, 보안 그룹은 인스턴스 각각에 적용
• 네트워크 엑세스 제어 목록 in/out 모두 검사, 보안 그룹은 들어올 때만 검사

스토리지 및 데이터베이스

• 스토리지: 파일 보관, 데이터베이스: 데이터 보관

관리 콘솔

• 관리 콘솔에서 모든 걸 할 수 있는 건 아님 BUT 대부분을 할 수 있음!
  • 웹 어플리케이션이라 생각할 수 있음
• 위젯
  -15개

리소스 확인 운영 관리는 IAM user

Authentication

Root 유저가 중요함
보안에 신경 많이 써야 함

관리 사용자/일반 사용자 → 권한 차이!

대시보드 사용자가
없으면 가장 중요한 게 뜸

리전은 실습할때 리전: US West (Oregon) 으로만 사용해야 하나요?
실습 시작할때마다 실습 환경이 만들어지는 리전이 다르며, 콘솔 열기 버튼을 누르시면 해당 리전으로 바로 접속되기 때문에 바로 실습을 하시면 됩니다.
다만 실습을 마치시면 꼭 실습 종료 버튼을 누르시면 되겠습니다.

Introduction to Amazon EC2

정리 노트

미니 프로젝트 관련

AwesomeKorean_Data
g2pK: g2p module for Korean
KoGEC

---

---

하루 돌아보기

👍 잘한 점

• 없는 것 같음

👎 아쉬웠던 점

• 시험 보기 전에 공부를 좀 했었어야 했는데
• AWS 하나도 몰라서 강의 내용을 못 따라갔음. 예습 좀 할 걸 그랬다.

🔬 개선점

• AWS 열심히 쓰기