📌 어제 알고리즘 문제를 페어와 함께 푸는 시간이었는데 1~3번인 그리디, 구현 문제는 풀었으나 4번인 DP 문제를 풀지 못하였다 조금만 더 생각했으면 풀었겠지라는 생각도 들었으나 그것은 코딩테스트로 따질때 시간이 많이 걸렸기 때문에 1솔 정도의 풀이가 되진 못했을 것 같다. 앞으로 JS로 알고리즘을 더욱 많이 풀어야 겠다는 생각을 하게되었던 하루였다. 그래서 오늘은 꼭 모든 문제를 페어와 같이 해결할 수 있었으면 좋겠다는 생각을 했다.

📗 오늘 학습한 내용

순열 (Permutaion)

  • 서로 다른 n개의 원소를 가지는 어떤 집합에서 중복 없이 순서에 상관있게 r개의 원소를 선택하거나 혹은 나열하는 것이며, 이는 조합과 마찬가지로 n개의 원소로 이루어진 집합에서 r개의 원소로 이루어진 부분집합을 만드는 것과 같다.

조합 (Combination)

  • 서로 다른 n개의 원소를 가지는 어떤 집합에서 중복 없이 순서에 상관없게 r개의 원소를 선택하는 것이며, 이는 n개의 원소로 이루어진 집합에서 r개의 원소로 이루어진 부분집합을 만드는 것과 같다.

GCD (최대공약수, Greatest Common Divisor)

  • 두 수 이상의 여러 수 중 공통된 *약수를 의미한다.
    • *약수: 어떤 수를 나누어 떨어지게 하는 수를 의미한다.
  • 예시
    • 6의 약수: 1, 2, 3, 6
    • 9의 약수: 1, 3, 9
    • 공약수: 1, 3
    • 최대 공약수: 3

LCM (최소공배수, Lowest Common Multiple)

  • 공배수는 두 수 이상의 여러 수 중 공통된 배수를 의미한다.
    • *배수: 하나의 수에 정수를 곱한 수 이다.
  • 예시
    • 12의 배수: 12, 24, 36, 48, 60, 72, 84, 96 ...
    • 18의 배수: 18, 36, 54, 72, 90 ...
    • 최소 공배수: 36

GCD/LCM 구하는 공식

  • 유클리드 호제법
    • 최대 공약수와 관련이 깊은 공식이다. 2개의 자연수 a와 b가 있을 때, a를 b로 나눈 나머지를 r이라 하면 a와 b의 최대 공약수는 b와 r의 최대 공약수와 같다는 이론이다.
    • b를 r로 나눈 나머지 r'를 구하고, 다시 r을 r'로 나누는 과정을 반복해, 나머지가 0이 되었을 때 나누는 수가 a와 b의 최대 공약수이다.
let getGCD = (num1, num2) => {
    let gcd = 1;

    for (let i = 2; i <= Math.min(num1, num2); i++){
        if(num1 % i === 0 && num2 % i === 0){
            gdc = i;
        }
    }
}
/*----------------------------------------------*/
let gcd=(a,b) => {
    return a%b ? gcd(b, a%b) : b
}
  • 최대 공약수(GCD)
    • 두 수 A와 B의 공통된 약수 중에 가장 큰 정수
    • 2부터 min(A, B)까지 모든 정수로 나누어보는 방법
let getGCD = (num1, num2) => {
    let gcd = 1;

    for (let i = 2; i <= Math.min(num1, num2); i++){
        if(num1 % i === 0 && num2 % i === 0){
            gdc = i;
        }
    }
    return gcd
}
  • 최소 공배수(LCM)
    • 두 수, 그 이상의 여러 수의 공통인 배수 중 가장 작은 수
    • LCM을 1부터 시작하여 점차 lcm++ 하면서 각각의 두 수를 LCM으로 나누었을 때 나머지 값이 0인 지를 비교한다.
    • A*B/GCD
let getLCM = (num1, num2) =>{
    let lcm = 1;
   
    while(true){
      if((lcm % num1 == 0) && (lcm % num2 == 0)){
        break;
      }
      lcm++;
    }
    return lcm
}

멱집합

  • 집합 {1, 2, 3}의 모든 부분집합은 {}, {1}, {2}, {3}, {1, 2}, {1, 3}, {2, 3}, {1, 2, 3} 으로 나열할 수 있고, 이 부분집합의 총 개수는 8개입니다. 그리고 이 모든 부분집합을 통틀어 멱집합이라고 한다.
  • 어떤 집합이 있을 때, 이 집합의 모든 부분집합을 멱집합이라고 한다.

📘 추가로 공부할 내용

Study원과 함께 진행중인 프로젝트 구현

  • 로그인 한 회원의 정보 가져오기

나만의 포트폴리오 사이트 구현  해보기

  • Figma를 사용하여 디자인 해보기

📝 중요한 내용

  • 순열
  • 조합
  • 최대공약수
  • 최소공배수
  • 멱집합

'Daily > Today I Learned' 카테고리의 다른 글

22.08.16_TIL  (0) 2022.08.16
22.08.12_TIL  (0) 2022.08.12
22.08.10_TIL  (0) 2022.08.09
22.08.09_TIL  (0) 2022.08.09
22.08.08_TIL  (0) 2022.08.08

📌 이제 커리큘럼 중 학습을 하는 시간에서 남은 것은 알고리즘 밖에 남지 않았다. 다양한 내용을 학습하고 배우면서 나의 실력에 대해서 깨달았던 시간이었고 많은 것을 배움으로 나의 역량을 성장시킬 수 있는 계기가 되었다. 남은 알고리즘 학습까지 끝마치고 프로젝트에 들어갈 때 팀원들과 원활한 협업을 통해 좋은 결과를 낳을 수 있도록 해보자!!

📗 오늘 학습한 내용

알고리즘

  • 문제를 해결하는 최선의 선택
  • 어떤 문제를 해결하기 위해서 일련의 절차를 정의하고, 공식화한 형태로 표현한 일종의 문제의 풀이 방법을 의미한다.

알고리즘의 명시 조건

  • 입력: 출력에 필요한 자료를 입력받을 수 있어야한다. 꼭 입력을 받지 않아도 되는 알고리즘도 있다.
  • 출력: 실행이 되면 적어도 한 가지 이상의 결과를 반드시 출력해야한다.
  • 유한성: 유한한 명령어를 수행한 후, 유한한 시간 내에 종료해야 한다.
  • 명확성: 각 단계는 단순하고 명확해야 하며, 모호해서는 안된다.
  • 효율성: 가능한 한 효율적이어야 한다. 모든 과정이 명백하게 실행 가능해야 하며, 실행 가능성이 떨어지는 알고리즘은 효율적이지 못한 알고리즘이라 볼 수 있다.

시간 복잡도 

입력값의 변화에 따라 연산을 수행할 때 , 연산 회수에 비해 걸리는 시간

  • 시간 복잡도 표기 방법
    • Big-O(빅-오)
      • 가장 자주 사용되는 표기법
      • 최악의 경우를 고려하여 프로그램이 실행되는 과정에서 소요되는 최악의 시간까지 고려할 수 있다.
    • Big-Ω(빅-오메가)
    • Big-θ(빅-세타)

빅오 표기법 시간복잡도 (feat.codestates)

Big-O 표기법의 종류

  • O(1): Constant complexity
    • 입력값이 증가하더라도 시간이 늘어나지 않는다.
    • 입력값의 크기와 관계없이 즉시 출력값을 얻어낼 수 있다.
  • O(n): linear complexity
    • 입력값이 증가함에 따라 시간 또한 같은 비율로 증가하는 것을 의미한다. (1중 for문)
  • O(log n): logarithmic complexity
    • O(1) 다음으로 빠른 시간 복잡도이다.
    • Binary Search Tree와 같은 이동할 때마다 경우의 수가 절반으로 줄어드는 구조의 알고리즘이다.
  • O(n2): quadratic complexity
    • 입력값이 증가함에 따라 시간이 n의 제곱수의 비율로 증가하는 것을 의미한다. (2중 for문이상)
  • O(2^n): exponential complexity
    • Big-O 표기법 중 가장 느린 시간 복잡도 이다.
    • 매번 접근을 할 때마다 시간이 2배로 늘어나는 알고리즘이다. (대표: 피보나치 수열)

공간 복잡도

  • 알고리즘이 수행되는 데에 필요한 메모리의 총량을 의미한다.
  • 프로그램이 필요로 하는 메모리 공간을 산출하는 것을 의미한다.

Greedy Algorithm (탐욕 알고리즘)

  • 선택의 순간마다 당장 눈앞에 보이는 최적의 상황만을 찾아 최종적인 해답에 도달하는 방법이다.
  • 특징
    • 탐욕적 선택 속성(Greedy Choice Property): 앞의 선택이 이후의 선택에 영향을 주지 않는다.
    • 최적 부분 구조(Optimal Substructure): 문제에 대한 최종 해결 방법은 부분 문제에 대한 최적 문제 해결 방법으로 구성된다.
  • 대표문제: 거스름돈 문제

Greedy Algorithm 문제 해결 단계

  1. 선택 절차(Selection Procedure): 현재 상태에서의 최적의 해답을 선택한다.
  2. 적절성 검사(Feasibility Check): 선택된 해가 문제의 조건을 만족하는지 검사한다.
  3. 해답 검사(Solution Check): 원래의 문제가 해결되었는지 검사하고, 해결되지 않았다면 선택 절차로 돌아가 위의 과정을 반복한다.

Algorithm 구현의 기초

  • 알고리즘을 푼다? 내가 생각한 문제 해결 과정을 컴퓨팅 사고로 변환하여 코드로 구현한다는 것이다.
  • 알고리즘을 해결하기 위해서는 선택한 프로그래밍 언어의 문법을 정확히 알고 있어야 하며, 문제의 조건에 전부 부합하는 코드를 실수 없이 빠르게 작성하는 것을 목표로 두어 연습해야한다.

완전 탐색

  • 모든 문제는 완전 탐색으로 풀 수 있다.
  • 굉장히 단순하고 무식하지만 답이 무조건 있는 강력한 장점을 가지고 있다.
  • 첫 번째 규칙은 만족시킬 수 있지만 두 번째 규칙은 만족할 수 없는 경우가 있다.

완전 탐색을 하는 방법

  • Brute Force(조건/반복을 사용하여 해결), 재귀, 순열, DFS/BFS 등

Brute Force (무차별 대입 방법)

  • 순수한 컴퓨팅 성능에 의존하여 모든 가능성을 시도하여 문제를 해결하는 방법이다.(완전탐색)
  • 공간, 시간 복잡도의 요소를 고려하지 않고 최악의 시나리오를 취하더라도 정답을 찾으려는 방법이다.

Brute Force가 사용되는 경우

  • 프로세스 속도를 높이는데 사용할 수 있는 다른 알고리즘이 없을 때
  • 문제를 해결하는 여러 솔루션이 있고 각 솔루션을 확인해야 할 때

Brute Force의 한계

  • 문제가 복잡해질수록 기하급수적으로 많은 자원(시간, 컴퓨팅)을 필요로 하는 알고리즘이 될 수 있다.

Brute Force를 사용하는 문제

  • 순차 검색 알고리즘 (Sequential Search)
    • 배열안에 특정 값이 존재하는지 검색할 때 인덱스 0부터 마지막 인덱스까지 차례대로 검색한다.
  • 문자열 매칭 알고리즘 (Brute Force String Matching)
    • 길이가 n인 전체 문자열과 길이가 m인 문자열 패턴을 포함하는지를 검색한다.
  • 선택 정렬 알고리즘 (Selection Sort)
    • 전체 배열을 검색하여 현재 요소와 비교하고 컬렉션이 완전히 정렬될 떄까지 현재 요소보다 더 작거나 큰 요소(오름차순, 내림차순)를 교환하는 정렬 알고리즘이다.
  • 버블 정렬 알고리즘 (Bubble Sort)
  • BFS, DFS
  • DP

Dynamic Programming (DP, 동적 계획법)

  • 하나의 문제는 단 한 번만 풀도록하는 알고리즘이다.
  • 탐욕 알고리즘과 함께 언급되는 알고리즘이며, 탐욕 알고리즘과 같이 작은 문제에서 출발한다.
  • 모든 경우의 수를 조합해 최적의 해법을 찾는 알고리즘이다.
  • 주어진 문제를 여러 개의 (작은) 하위 문제로 나누어 풀고, 하위 문제들의 해결 방법을 결합하여 최종 문제를 해결한다.
  • 하위 문제를 계산한 뒤 그 해결책을 저장하고, 나중에 동일한 하위 문제를 만날 경우 저장된 해결책을 적용해 계산 횟수를 줄인다.

Dynamic Programming을 사용할 수 있는 조건

  • Overlapping Sub-problems: 큰 문제를 작은 문제로 나눌 수 있고, 이 작은 문제가 중복해서 발견된다.
  • Optimal Substructure: 작은 문제에서 구한 정답은 그것을 포함하는 큰 문제에서도 같다. 즉, 작은 문제에서 구한 정답을 큰 문제에서도 사용할 수있다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기) (완주)

Study원과 함께 진행중인 프로젝트 구현

pre-Project 사이트 찾기

📝 중요한 내용

  • 알고리즘이란?
  • 시간 복잡도
  • Big-O 표기법
  • 공간 복잡도
  • 그리디 알고리즘
  • 브루트포스 알고리즘

'Daily > Today I Learned' 카테고리의 다른 글

22.08.12_TIL  (0) 2022.08.12
22.08.11_TIL  (0) 2022.08.10
22.08.09_TIL  (0) 2022.08.09
22.08.08_TIL  (0) 2022.08.08
22.08.05_TIL  (0) 2022.08.05

📌 어제 오랜만에 저녁에 조금 스트레스를 풀 수 있었던 시간이었다!!! 가끔씩 이러한 시간도 필요하다고 생각이 많이 드는 시간이었다. 재밌게 살기위해 코딩을 시작했는데 점점 지치는 것을 볼 수 있었다.(근 3.5개월동안 쉬지 않은듯?) 그렇기 때문에 오랜만에 맘편히 놀고 기분을 전환할 수 있었서 너무 좋았다!!!🥳 앞으로 남은 커리큘럼과 프로젝트를 더욱 열심히 할 수 있는 동기를 다시 생각하게 되었다!! 그리고 오늘은 AWS 배포를 하는데 저번에 배웠던 것을 바탕으로 진행이 될 것 같다.

📗 오늘 학습한 내용

Github Actions: Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼

  • 레포지토리에서 Pull Request, push 같은 이벤트를 트리거로 Github 작업 워크플로(Workflow)를 구성할 수 있다.
  • 워크크플로는 하나 이상의 작업이 실행되는 자동화 프로세스로 각 작업은 자체 가상 머신 또는 컨테이너 내부에서 실행되며, .yml or .yaml 파일에 의해 구서오디며, 테스트, 배포 등 기능에 따라 여러개의 워크플로도 만들 수 있다.
  • 워크플로 경로: .github/workflows 디렉토리 이하에 존재
  • 비공개 레포지토리의 경우 용량과 시간이 제한되어있으며 공개 레포지토리는 무료로 사용이 가능하다.
  • 공식링크: https://docs.github.com/en/actions

AWS EC2 Pipeline 배포

  • 태그
    • 파이프라인 구축 단계에서 인스턴스를 식별하기 위해서 추가한다.
    • 추가방법
      • 작업 → 인스턴스 설정 → 태그 관리
  • 역할부여
    • AWS의 개체(서비스, 사용자 등)가 다른 서비스에 접근하게 할 수 있도록 해주는 방법이다.
    • 부여방법
      • 작업 → 보안 → IAM 역할 수정
  • 보안그룹
    • AWS 인스턴스에 대한 접근과 인스턴스로부터의 접근에 대한 패킷을 포트번호로 제어하기 위한 설정이다.
  • CodeDeploy
    • EC2 인스턴스, 온프레미스 인스턴스, 서버리스 Lambda 함수 또는 ECS 서비스로 애플리케이션 배포를 자동화하는 배포 서비스이다.
    • 로드 밸런서를 사용할 경우에 배포가 진행될 때 각 인스턴스를 등록 취소한 후 배포가 완료된 후 서비스로 복원할 수 있다.
    • CodeDeploy 공식문서
    • Pipeline 공식문서

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

📝 중요한 내용

  • Github Actions
  • AWS로 Pipeline 배포하는 법(자동화 배포)

'Daily > Today I Learned' 카테고리의 다른 글

22.08.11_TIL  (0) 2022.08.10
22.08.10_TIL  (0) 2022.08.09
22.08.08_TIL  (0) 2022.08.08
22.08.05_TIL  (0) 2022.08.05
22.08.04_TIL  (0) 2022.08.04

📌 AWS, Firebase만 사용했던 나에게 Vercel은 처음보는 배포 방법이다. 배포하는 방법을 많이 알아봐야겠다!

📗 오늘 학습한 내용

배포 자동화

  • 한번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것을 뜻한다.

배포 자동화가 필요한 이유

  • 먼저 수동적이고 반복적인 배포 과정을 자동화함으로써 시간이 절약됩니다.
  • 휴먼 에러(Human Error)를 방지할 수 있다.
    • *휴먼 에러: 사람이 수동적으로 배포 과정을 진행하는 중에 생기는 실수들을  뜻한다.

배포 자동화 파이프라인

  • 소스 코드의 관리부터 실제 서비스로의 배포 과정을 연결하는 구조를 뜻한다.
    1. Source 단계: 원격 저장소에 관리되고 있는 소스 코드에 변경 사항이 일어날 경우, 이를 감지하고 다음 단계로 전달하는 작업을 수행합니다.
    2. Build 단계: Source 단계에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공합니다. 또한 Build 단계를 거쳐 생성된 결과물을 다음 단계로 전달하는 작업을 수행합니다.
    3. Deploy 단계:  Build 단계로부터 전달받은 결과물을 실제 서비스에 반영하는 작업을 수행합니다.

CI/CD 파이프라인

  • Plan → Code → Build → Test → Release → Deploy → Operate → Plan

지속적 통합 (CI, Continuous Integration)

  • 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식이다.
    • Code: 개발자가 코드를 코드 저장소에 push한다.
    • Build: 코드 저장소로부터 코드를 가져와서 빌드한다.
    • Test: 코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는지 확인한다.
  • 모든 코드 변화를 하나의 레포지토리에서 관리하는 것 부터 시작한다.
  • 모든 개발팀이 코드의 변화를 확인할 수 있기 때문에, 투명하게 문제점을 파악할 수 있다.
  • 잦은 풀 리퀘스트와 머지로 코드를 자주 통합하여 기본적인 테스트도 작동시킬 수 있다.
  • 지속적 통합을 통해 개발팀은 각자 개발한 코드를 이른 시점에, 자주 합치고, 자주 테스트 해볼 수 있다.

지속적 배포(CD, Continuous Delivery, Continuous Deployment)

  • 지속적 통합 과정이 원활하게 끝나면 바로 고객에게 배포하는 것이다.

지속적 배포 과정

  • Release: 빌드까지 모두 준비가 되었고, 어떤 기능이 개발되었는지 비즈니스 관계자들과 이야기를 나누는 단계이다. 어떤 기능을 넣을지, 해당 릴리즈는 배포를 할지 말지 결정하는 단계로 여러 의사결정이 이루어진다.
  • Deploy: 실제 배포한다.
  • Operation: 배포된 소프트웨어를 실제 운용하는 과정이다. 해당 과정에서 고객의 피드백을 충분히 받아 기획에 반영한다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

📝 중요한 내용

  • 배포 자동화
  • CI/CD
  • Vercel 사용법

'Daily > Today I Learned' 카테고리의 다른 글

22.08.10_TIL  (0) 2022.08.09
22.08.09_TIL  (0) 2022.08.09
22.08.05_TIL  (0) 2022.08.05
22.08.04_TIL  (0) 2022.08.04
22.08.03_TIL  (0) 2022.08.03

📌 AWS를 통해 배포를 몇번 해봤었지만 오랜만에 하는 거라 신이난다. 항상 새롭게 할 때 마다 재미있게 개발을 할 수 있는 것 같다.

📗 오늘 학습한 내용

클라우드 서비스 업체의 기본 장점

  • 신속한 인프라 구축
  • 유연한 인프라 관리
  • 예상치 못한 트래픽 폭주 대응
  • 손쉬운 글로벌 서비스
  • 강력한 보안과 장애 없는 서비스
  • 합리적인 요금제

기존 서버 방식

  • 전산실 등에 컴퓨터를 배치하고 인터넷을 연결하여 서비스를 제공했습니다.
  • 전산실에 있는 컴퓨터의 서버가 수용 능력이 한계에 도달하면 같은 공간에 더 많은 컴퓨터를 제공하여 해결하거나 컴퓨터 한 대의 성능을 높이는 방식으로 해결했습니다.
  • 이러한 방식의 문제점으로는 주기적인 관리가 필요하며, 공간의 한계가 있습니다.

Cloud Computing

  • 서버의  자원과 공간 및 네트워크 환경 제공
  • 필요할 때마다 컴퓨팅 능력을 유연하게 조절
  • 사용한 만큼의 요금만 지금

단점

  • 운영 환경 자체가 클라우드 제공자에게 종속되어 클라우드 서비스에 문제가 생기면 내가 배포하고 관리하는 환경에도 영향이 미친다.

클라우드 서비스의 형태

  • SaaS(Software as a Service): 클라우드 제공자가 당장 사용 가능한 소프트웨어를 제공하는 경우
  • PaaS(Platform as a Service): 클라우드 제공자가 데이터베이스, 개발 플랫폼까지 제공하는 경우
  • IaaS(Infrastructure as a Service): 클라우드 제공자가 가상 컴퓨터까지 제공하는 경우 (AWS)

Deploy(배포)

  • 개발한 서비스를 사용자가 이용가능하게 하는 과정

Deployment(배포과정)

  • Development (개발)
    • 로컬 컴퓨터 환경에서 개발 및 테스트
    • 샘플 데이터를 이용
    • 변경사항이 있어도 문제가 되지 않음
    • 모든 구성원이 각자의 환경에서 진행
  • Integration (완성)
    • 각자의 환경에서 개발된 부분을 취함
    • 코드간 Conflict(갈등)가 없는지 확인하는 단계
    • 작성한 코드가 다른 코드에 문제를 발생 시키지 않는지 확인
  • Staging (각색)
    • Production 단계와 가장 유사한 환경에서 테스트
    • 복제된 실제 데이터를 이용해서 테스트
    •  모든 관계자들에게 검증하는 단계
  • Production (생산)
    • 개발환경과는 구분 된 환경
    • 실제 데이터를 이용
    • 실제로 서비스가 제공되는 단계

배포시 주의할 점

  • 여러명이 개발을 진행할 시 node버전, 인증정보 등 개발환경이 다양하기 때문에 문제가 일어날 수 있습니다.
  • 위와 같은 문제를 해결하기 위해 환경 설정을 코드와 분리하는 것이 중요합니다.
    • 절대경로 대신 상대 경로를 사용한다.
    • 환경에 따라 포트를 분기할 수 있도록 환경변수를 설정한다. (.env 사용)
    • Docker와 같은 개발 환경 자체를 통일시키는 솔루션을 사용한다.

배포관련 플랫폼 종류

  • heroku
  • DigitalOcean
  • AWS
  • Azure
  • Firebase

EC2 (Elastic Compute Cloud)

  • AWS에서 제공하는 클라우드 컴퓨팅 시스템으로 AWS에서 원격으로 제어할 수 있는 가상의 컴퓨터를 한 대 빌리는 것을 의미
  • 컴퓨터 대여를 통해 서버, 스토리지, 데이터베이스 등 컴퓨팅 서비스를 제공한다.
  • 사용한 만큼 비용을 지불하는 의미하며, 필요에 따라 성능, 용량을 자유롭게 조절할 수 있다.
  • AWS에서 비용, 성능, 용량 면에서 탄력적인 클라우드 컴퓨터를 제공하는 서비스이다.
  • Instance는 1대의 컴퓨터를 의미하며, AWS에서 컴퓨터를 빌리는 것을 인스턴스 생성이라고 한다.

EC2 사용의 이점

  • 구성하는 데 필요한 시간이 짧다.
  • AMI를 통해서 필용한 용도에 따라 다양한 운영체제에 대한 선택이 가능하다. (CPU, RAM 용량까지 구성 가능)
    • AMI(Amazon Machine Image): 소프트웨어 구성이 기재된 템플릿  
      • 단순히 운영체제만 깔려있는 템플릿을 선택할 수도 있고, 아예 특정 런타임이 설치되어 있는 템플릿이 제공되는 경우가 있다.

RDS (Relational Database Service)

  • AWS에서 제공하는 관계형 데이터 베이스 서비스
  • EC2 인스턴스에 데이터베이스를 설치하여 데이터를 관리하는 것은 유지 보수 같은 일들을 온전히 사용자가 부담해야하며, 다른 작업을 해야 할 경우 많은 시간과 노동이 필요하다.
  • 위의 내용을 조금 더 자세하게 말한다면 데이터베이스와 관련해서 자동으로 관리를 담당하는 부분이 매우적어 사용자가 일일이 시간을 투자하여 데이터베이스 엔진의 설치와 버전 관리, 데이터 백업을 해야한다.
  • 가용성과 내구성이 확보되지 않기 때문에 데이터베이스에 저장된 데이터가 유실되거나 정상적으로 사용하지 못할 확률이 커지며, 데이터베이스의 규모를 확장하기 어렵다.

RDS 사용의 이점

  • 데이터베이스 유지 보수와 관련된 일들을 RDS에서 전적으로 자동 관리한다.
  • 사용자가 해야 할 일은 초기 설정을 제외하고 데이터베이스에 저장된 데이터를 관리하는 일 밖에 없기에 큰 편의성을 느낄 수 있다.
  • 다양한 데이터 베이스 엔진 선택지를 제공한다.
    • ORACLE, Amazon Aurora, SQL Server, MySQL, MariaDB, Postgre SQL

S3 (Simple Storage Service)

  • AWS에서 제공하는 클라우드 스토리지 서비스
    • *클라우드 스토리지: 인터넷 공간에 데이터를 저장하는 장소

S3 사용의 이점

  • 확장성이 높아 많은 시간과 수고를 들이지 않고 스토리지 규모를 확장/축소할 수 있다.
  • S3에서는 스토리지의 용량을 무한히 확장할 수 있으며, 사용한 만큼만 비용을 지불하면 되기 때문에 비용적인 측면에서 매우 효율적이다.
  • 스토리지의 내구성이 높아서 저장된 파일을 유시할 가능성이 적어진다. (내구성 99.99%)
  • 높은 가용성 보장을 통해 스토리지에 저장된 파일들을 정상적으로 사용할 수 있는 시간이 길어진다.
  • 높은 가용성과 내구성을 보장하는 이유
    • 가용 영역(Availability Zone): 각 리전 안에 존재하는 데이터 센터(IDC)를 뜻하며 한 곳의 가용 영역이 재난이나 사고로 인해 가동이 불가능해지더라도 다른 가용 영역에 백업을 해놓은 데이터를 활용하여 문제없이 서버가 가동되게 한다.
    • *Region: AWS에서 클라우드 서비스를 제공하기 위해서 운영하는 물리적인 서버의 위치
  • 스토리지 클래스 (Standard, Glacier를 가장 많이 사용)
    • Standard
      • 범용적인 목적으로 사용하기 좋다.
      • 데이터에 빠른 속도로 접근할 수 있고, 데이터 액세스 요청에 대한 처리 속도가 빠르다.
      • 대신 데이터를 오래 보관하는 목적으로는 효율적인 선택지가 아닌데 이유는 보관 비용이 높게 발생하기 떄문이다.
    • Glacier
      • 장기적인 보관 목적으로 스토리지를 사용할 때 효육적이다.
      • 저장된 데이터에 액세스 하는 속도는 느리지만, 데이터를 보관하는 비용이 매우 저렴하다.
    • Standard-IA, One Zone-IA, S3 Glacier Deep Archive 등
  • 정적 웹 사이트 호스팅 가능
    • 버킷을 통해 정적 웹 사이트 호스팅 가능
    • 버킷이라는 저장 공간에 정적 파일을 업로드하고 버킷을 정적 웹 사이트 호스팅 용도로 구성하면 정적 웹 사이트를 배포할 수 있다.
      • 정적 파일: 서버의 개입 없이 클라이언트에 제공될 수 있는 파일
      • 웹 호스팅: 서버의 한 공간을 빌려주어 웹 사이트의 배포, 운영이 가능하게 만들어주는 서비스
    • 버킷
      • 저장되는 파일들이 담기는 저장공간 (파일을 저장하는 최상위 디렉터리)
      • S3에서 저장되는 모든 파일은 버킷 안에 저장되어야 하고, 버킷에는 무한한 양의 파일을 저장할 수 있다.
      • 버킷의 이름은 버킷이 속해 있는 리전에서 유일해야 한다.
      • 버킷 정책을 생성하여 해당 버킷에 대한 다른 유저의 접근 권한을 수정할 수 있다.
    • 객체
      • 버킷에 담기는 파일
      • 저장소에 데이터를 저장할 때 key-value 페어 형식으로 데이터를 저장하기 때문이다.
      • S3에 저장되는 객체는 파일과 메타데이터로 구성된다.
      • 파일 값에는 실제 데이터를 저장하며 데이터의 최대 크기는 5TB이다.
      • 파일의 키는 각각의 객체를 고유하게 만들어주는 식별자 역할을 하며, 파일의 키를 이용하여 원하는 객체를 검색할 수 있다.
      • 메타데이터는 객체의 생성일, 크기, 유형과 같은 객체에 대한 정보가 담긴 데이터이다.
      • 모든 객체는 고유한 URL 주소를 가지고 있다.

Deploy Strategy

Client 배포

  • 정적파일로 빌드하여 배포한다.

빌드

  • 불필요한 데이터를 없애고, 여러 갈래로 퍼져있는 데이터들을 통합/압축하여 배포하기에 최적화된 상태를 만드는 것이다.
  • 데이터의 용량이 줄어들고, 웹 사이트의 로딩 속도가 빨라진다는 장점이 있다.

 

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

JavaScript 코딩테스트 준비

📝 중요한 내용

  • EC2란?
  • EC2 사용방법
  • S3란?
  • S3 사용방법

'Daily > Today I Learned' 카테고리의 다른 글

22.08.09_TIL  (0) 2022.08.09
22.08.08_TIL  (0) 2022.08.08
22.08.04_TIL  (0) 2022.08.04
22.08.03_TIL  (0) 2022.08.03
22.08.02_TIL  (0) 2022.08.02

📌 이제 프로젝트까지 남은 시간이 2주정도 남았다.... 어떤 문제가 있더라도 해낼수 있도록 해보자!

📗 오늘 학습한 내용

최적화(Optimization)

주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정

허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정

 

최적화의 필요성 및 효과

  1. 이탈률 감소
    • 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하게 하는 것이다.
    • 페이지 로드가 3초이상 걸리면 53%의 사용자가 사이트를 이탈한다. 그렇다면 화면을 불러오는 시간을 짧게 하여 사용자가 페이지를 이탈할 확률을 낮출 수 있다.
  2. 전환율 증가
    • 이탈률이 줄어드면 자연스럽게 전황율이 높아질 확률이 커진다.
    • 전환율: 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미
  3. 수익 증대
    • 빠른 웹 사이트의 로딩 속도는 이탈률 감소, 전환율 증가, 트래픽 증대, 회원 수 증가로 곧 수익의 증대를 의미한다.
    • 실제 사례로 아마존 로딩 속도가 1초 빨라졌을 때 아마존 판매량은 1%, 구글 검색량은 0.2%가 증대했다.
  4. 사용자 경험(UX) 향상
    • 최적화는 효과적인 UX 개선 수단이다.
    • 로딩이 오래 걸릴 경우 스피너, 프로그레스바 같이 로딩 중임을 알려주는 UI를 먼저 표시하여 사용자가 인내심을 갖고 기다리게 하는 방법이 있다.

HTML, CSS 코드 최적화 하기

  • 화면을 렌더링 할 때 필요한 HTML, CSS 파일의 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있다.

HTML 최적화 방법

  1. DOM 트리 가볍게 만들기
    • DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다. 복잡도가 클 수록 DOM 트리가 변경되었을 때 계산해야 하는 것이 많아짐으로 불필요한 요소를 삭제한다.
  2. 인라인 스타일 사용하지 않기
    • 인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것이기 때문에 클래스로 묶어서 한 번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생기는데 이처럼 불필요한 코드 중복은 가독성을 떨어뜨리며 파일 크기를 증가 시킨다.
    • CSS 파일을 따로 작성하면 단 한 번의 리플로우만 발생하여 렌더링 완료 시점을 단축시킨다.

CSS 최적화 방법

  1. 사용하지 않는 CSS 제거하기
    • CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성되는데 이때 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어진다.
    • 위의 단점 때문에 사용하지 않는 CSS 코드는 제거하는 것이 좋다.
  2. 간결한 셀렉터 사용하기
    • 셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 되므로 간결하게 사용하는 것이 좋다.

리소스 로딩 최적화하기

  1. CSS 파일 불러오기
    • CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있으므로 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋다.
  2. JavaScript 파일 불러오기
    • JavaScript 파일을 다운받아와서 사용하는 경우에는 다운로드 및 스크립트 실행이 완료될 때까지 DOM 생성이 중단된다. 이 시간만큼 렌더링 완료 시간이 늦춰지게 되므로 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.

브라우저 이미지 최적화하기

  • 페이지의 대부분의 용량은 코드가 아닌 이미지 파일, 미디어 파일이 차지하기 때문에 용량을 줄이거나 요청의 수를 줄여 사용자 경험을 빠르게 개선할 수 있다.
  1. 이미지 스프라이트
    • 박스에 표시한 아이콘 이미지의 경우 각각의 이미지를 서버에 요청할 경우 웹 사이트의 로딩시간이 늘어나게 될 때 사용하는 기법
    • 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.
  2. 아이콘 폰트 사용하기
    아이콘 사용이 많을 때, 모든 아이콘을 이미지로 사용하지 않고 아이콘 폰트를 사용하여 용량을 줄일 수 있다.(Font Awesome)
    1. CDN으로 사용하기
      • Font Awesome에 가입할 때 발급받은 키트를 HTML 파일 head 요소에 넣어주면 CDN으로 사용할 수 있다.
    2. Font Awesome 모듈 설치하기

WebP 또는 AVIF 이미지 포맷 사용하기

  • 전통적인 이미지 포맷 방식은 JPEG, PNG 형식이 아닌 새롭게 등장한 WebP, AVIF를 사용하여 용량을 더욱 감소시킬 수 있다.(20~35%)
  • 하지만, 모든 브라우저에서 호환되지 않는다는 단점이 있지만 HTML의 picture 태그를 이용하여 각 브라우저의 호환에 맞도록 분기를 대체할 수 있다.
    • *<picture>: img 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용한다.

캐시 사용하기

  • 캐시는 다운도르 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용하며, 필요한 리소스를 캐시에서 꺼내와 재사용하면 되기 때문에 네트워크 리소스, 로딩시간을 줄일 수 있다.
  • HTTP 요청을 보낼 때 조건부 요청 헤더를 작성하여 캐시를 재사용해도 되는지 확인하면 된다.
    • If-Modified-Since: 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용한다.
    • If-None-Match: 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용한다.

CDN 사용하기

  • CDN? 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다. 유저가 가까운 곳에 위치한 데이터 센터의 데이터를 가져오기 때문에 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄기 때문에 로딩 속도가 빨라진다.
  • 사용가능 서비스
    • CloudFront, Cloudflare 등

트리쉐이킹(Tree Shaking)

나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미한다.

  1. JavaScript 파일의 크기
    • JavaScript 파일 크기의 증가, 요청 횟수의 증가는 렌더링이 늦어진다는 것을 뜻하고, 네트워크 속도가 느린 환경에서 더 큰 병목현상을 유발 합니다. 트리쉐이킹을 통해 파일 크기를 줄여서 최적화를 시킬 수 있다.
  2. JavaScript 파일의 실행 시간
    • 다운로드부터 필요한 경우에는 우선 요청을 보내어 파일을 다운받아 온 다음 압축을 해제해야 하고, JS코드를 파싱하여 DOM 트리를 생성한다. 파싱이 끝나면 컴파일을 진행하여 코드를 실행할 수 있는 일련의 과정을 거쳐야 한다.
    • 파일이 커질수록 실행 시간이 점차 늘어날 때, 트리쉐이킹을 통해 최적화를 해야한다.

JavaScript 트리쉐이킹

웹팩 4버전 이상을 사용하는 경우 ES6 모듈을 대상으로 기본적인 트리쉐이킹을 제공한다.

  1. 필요한 모듈만 import 하기
    • import 구문을 사용하여 라이브러리를 불러와서 사용할 때, 라이브러리 전체를 불러오지 않고 필요한 모듈만 불러와서 트리쉐이킹이 가능하다.
  2. Babelrc 파일 설정하기
    • Babel은 JS 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리이다.
    • 이때, ES5문법은 require를 사용하여 모든 라이브러리를 불러오기 때문에 Babelrc 파일에 modules: false로 작성하여 ES5문법으로 변환되는 것을 막아주면 된다.
  3. sideEffects 설정하기
    • 웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.
    • package.json 파일에서 sideEffects:false를 설정하여 사이드 이펙트가 생기지 않는다고 알려 코드를 제외시킬 수 있도록 한다.(sideEffects:false는 전체 파일에서의 설정이고 특정 파일만 설정할 수도 있다.)
  4. ES6 문법을 사용하는 모듈 사용하기
    • ES5 문법을 사용하는 모듈을 통째로 사용하는 경우가 아니라면 ES6 문법을 사용하여 필요한 부분만 사용하는 것이 좋다.

Lighthouse

  • 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책을 제공한다.
  • 구글에서 개발 한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴이다.
  • 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다.

Lighthouse 시작하기

  1. Chrome 개발자 도구에서 실행하기
  2. 크롬에서 검사하고 싶은 페이지의 url을 입력한다.
  3. 개발자 도구를 연다.
  4. lighthouse 탭을 클릭한다.
  5. Generate report를 클릭한다. (Categories에서 특정 지표만 선택하여 검사할 수도 있다.)
  6. 검사가 실행 된 후, 결과가 해당 페이지의 개발자 도구내에 생성된다.

Node CLI에서 실행하기

Lighthouse를 설치한다.  → 명령어로 검사르 수행한다. → 명령어로 모든 옵션을 본다.

npm install -g lighthouse

lighthouse <url>

lighthouse --help

Lighthouse 분석 결과 항목

  • Performance
    • 웹 성능을 측정한다. 화면에 컨텐츠가 표시되는데 걸리는 시간과 표시된 후 사용자와 상호작용하기 까지 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인한다.
  • Accessibility
    • 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인한다. 대체 텍스트를 잘 작성했는지, 배경색과 컨텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인한다.
  • Best Practices
    • 웹 페이지가 웹 표준 모법 사례를 잘 따르고 있는지 확인한다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인한다.
  • SEO
    • 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인한다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인한다.
  • PWA (Progressive Web App)
    • 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인한다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 컨텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인한다.

Lighthouse의 Performance 측정 메트릭

  1. First Contentful Paint
    • 성능(Performance) 지표를 추적하는 메트릭이다.
    • 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정한다.
    • 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 한다.
  2. Largest Contentful Paint
    • 뷰포트를 차지하는 가장 큰 컨텐츠의 렌더 시간을 측정한다.
    • 주요 컨텐츠가 유저에게 보이는 시간까지를 가늠할 수 있다.
  3. Speed Index
    • 성능(Performance) 지표를 추적하는 메트릭이다.
    • 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정한다.
  4. Time to interactive
    • 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정한다.
      • 페이지에 FCP로 측정된 컨텐츠가 표시되어야 한다.
      • 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록된다.
      • 페이지가 0.05초안에 사용자의 상호작용에 응답한다.
  5. Total Blocking Time
    • 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정한다.
    • FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정한다.
  6. Cumulative Layout Shift
    • 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표이다.

 

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

  • 마이페이지 드롭다운 메뉴 구성

📝 중요한 내용

  • 최적화란?
  • 최적화의 필요성과 효과
  • 프론트엔드에서의 최적화 방법
  • Ligthhouse를 통한 웹 페이지 개선

'Daily > Today I Learned' 카테고리의 다른 글

22.08.08_TIL  (0) 2022.08.08
22.08.05_TIL  (0) 2022.08.05
22.08.03_TIL  (0) 2022.08.03
22.08.02_TIL  (0) 2022.08.02
22.08.01_TIL  (0) 2022.08.01

+ Recent posts