어느 업체를 통해 어플을 다운 받을 일이 생겼고, 사용하려고 하니 Untrusted Enterprise Developer 이라며 어플이 작동되지 않았다.

왱? 난 이 업체를 신뢰하는데 왜 니가 안 신뢰를 해 ????

App Store을 통해서 설치받은 것이 아니라 따로 외부 링크를 통해 어플을 설치했을 경우, 어플의 인증서에 문제가 있을 경우 등의 상황에서 이러한 에러 메시지가 뜬다고 한다.

그렇지만 난 이 어플을 써야 하는 걸?

해결 방법

1. 아이폰의 설정(Settings)에 들어간다.

2. 일반(General)로 들어간다.

3. 일반(General)에서 기기 관리(Device Management)에 들어간다.

4. 화면을 보면 신뢰할 수 없는 App의 리스트를 확인할 수 있다. 클릭하여 들어간다.

5. 신뢰(Trust this App)을 클릭한다. 해결! 지금 내 핸드폰에서는 이미 신뢰 버튼을 클릭해서 Delete App만 나오지만 원래는 Trust this App인가로 쓰여 있었다.

주의 ! 정말정말정말정말로 신뢰할 수 있는 어플만 신뢰하기!!!

잘 못 신뢰했다가 해킹 당할 수도 있기 때문이다.

Heap

힙은 일종의 완전 이진 트리이다.
주로 우선순위 큐를 구현하는데 밑받침이 되는 자료구조로 쓰인다.
트리 구조이기 때문에 삽입과 삭제에 O(logN)의 시간이 소요된다.

최소 힙, 최대 힙
빠른 시간 안에 최대값과 최소값을 찾아낼 수 있다.

파이선 -> heapq heapify 등 라이브러리에서 함수와 구조를 제공

힙에서의 부모-자식 관계

힙은 완전 이진 트리 base 이기 때문에, 노드들 간의 부모-자식 관계가 성립하게 된다. 힙의 경우엔 보통의 완전 이진 트리와는 다르게 반정렬 상태(느슨한 정렬 상태)를 유지한다. 최대힙이라면 큰 값이 부모 노드쪽에, 최소힙이라면 작은 값이 부모 노드 쪽에 배치되는 것만 유지하고 왼쪽 자식과 오른쪽 자식은 부모 노드보다 작은 값을 유지하기만 하면 된다.

구현 - Max Heap

// 기본 세팅
class Heap {
  constructor() {
    this.heap = [null]; // 첫 원소는 사용 X
  }
}

배열의 첫 원소는 사용하지 않으므로 부모와 자식 간 다음의 관계가 성립한다.

완전 이진 트리의 일종이기 때문에 Binary Search tree에서의 부모-자식 간 관계와 유사하다.

• 왼쪽 자식의 index = 부모 index * 2;
• 오른쪽 자식의 index = (부모 index * 2) + 1;
• 부모의 index = Math.floor(자식의 인덱스 / 2);

getParentIndex(i){
    return Math.floor(i / 2);
}

getLeftChildIndex(i){
    return i * 2;
}

getRightChildIndex(i){
    return i * 2 + 1;
}

삽입

마지막 노드에 들어온 값을 push()하여 배열의 맨 마지막에 삽입한다. 이 때 부모노드를 확인하면서 들어온 값이 부모노드보다 작은지 큰지를 확인하면서 위치를 교환 swap()해주며 정렬 heapifyUp()한다.

swap(idx1, idx2){
    const temp = this.heap[idx1];
    this.heap[idx1] = this.heap[idx2];
    this.heap[idx2] = temp;
}

push(value){
    this.heap[this.heap.length] = value; // 배열의 맨 마지막에 값 넣기
    this.heapifyUp();
}

// 최대 힙에 맞게 제일 큰 노드를 최상단으로 맞춰주기 위해 가장 마지막에 들어온 노드의 인덱스를 변수로 둔다.
heapifyUp(){
    let curIndex = this.heap.length - 1;
    // 확인 중의 인덱스의 값이 부모 인덱스의 값보다 크면, swap하고, 현재 인덱스에 부모 인덱스를 재할당하여 while문에서 부모 인덱스를 확인
    while(this.heap[curIndex] > this.heap[this.getParentIndex(curIndex)]){
        this.swap(curIndex, this.getParentIndex(curIndex));
        curIndex = this.getParentIndex(curIndex);
    }
}

삭제/추출

힙에서 루트 노드가 가장 먼저 추출된다. 그 빈 자리는 트리의 맨 마지막에 있는 값을 가져와 채우고, 맨 마지막 노드를 삭제한다. 그리고 다시 트리를 정렬한다. 힙의 원칙에 맞게 정렬이 다 끝나면 처음에 추출했던 루트노드값을 리턴한다.

1. maxVal: 배열의 최상위 노드를 꺼낸다.
2. 루트 노드와 맨 끝에 있는 값을 교체한다.
3. 맨 마지막 노드를 삭제한다.
4. 변경된 노드와 자식 노드들을 비교하면서 정렬한다.
5. 자식 노드 둘보다 부모 노드가 크거나 가장 마지막 바닥까지 도달하지 않을 때까지 과정을 반복한다.
6. 2에서 제거한 루트 노드 값을 return 한다.

poll(){
    let maxVal = this.heap[1];
    this.heap[1] = this.heap[this.heap.length - 1];
    this.heap.length--;

    this.heapifyDown();

    return maxVal;
}

// 최소 힙에 맞게 제일 작은  노드를 최상단으로 맞춰주기 위해 가장 마지막에 들어온 노드의 인덱스를 변수로 둔다.
heapifyDown(){
    let curIndex = 1;
    // curIndex가 마지막 노드가 아닐 때까지 반복
    while(this.heap[this.getLeftChildIndex(curIndex)] !== undefined){
        let biggerChildIndex = this.getLeftChildIndex(curIndex);

        if(this.heap[this.getRightChildIndex(curIndex)] !== undefined && this.heap[this.getRightChildIndex(curIndex)] > this.heap[this.getLeftChildIndex(curIndex)]
        ){
            biggerChildIndex = this.getRightChildIndex(curIndex);
        }
        // 자식 노드가 있다면 자식 노드 중에서 제일 큰 자식 노드의 값과 현재 노드의 값을 비교
        // 자식 노드 값이 더 크다면 swap하는 식으로 전체 트리를 heap의 구조에 맞게 정렬
        if(this.heap[curIndex] < this.heap[biggerChildIndex]){
            this.swap(curIndex, biggerChildIndex);
            curIndex = biggerChildIndex;
        } else {
            return;
        }

    }
}

전체 코드

class Heap {
  constructor() {
    this.heap = [];
  }

  getParentIndex(i) {
    return Math.floor(i / 2);
  }

  getLeftChildIndex(i) {
    return i * 2;
  }

  getRightChildIndex(i) {
    return i * 2 + 1;
  }

  swap(idx1, idx2) {
    const temp = this.heap[idx1];
    this.heap[idx1] = this.heap[idx2];
    this.heap[idx2] = temp;
  }

  push(val) {
    this.heap[this.heap.length] = val;
    this.heapifyUp();
  }

  heapifyUp() {
    let curIdx = this.heap.length - 1;
    // min Heap 은 반대로 될 것
    while (this.heap[curIdx] > this.heap[this.getParentIndex(curIdx)]) {
      this.swap(curIdx, this.getParentIndex(curIdx));
      curIdx = this.getParentIndex(curIdx);
    }
  }

  poll() {
    // min Heap 은 반대로 될 것
    let maxVal = this.heap[0];
    if (maxVal === 12 || maxVal === 10 || maxVal === 8) {
      console.log("g", this.heap);
    }
    this.heap[0] = this.heap[this.heap.length - 1];
    this.heap.length--;
    this.heapifyDown();
    return maxVal;
  }

  heapifyDown() {
    let curIdx = 0;
    while (this.heap[this.getLeftChildIndex(curIdx)] !== undefined) {
      let biggerChild = this.getLeftChildIndex(curIdx);
      if (
        this.heap[this.getLeftChildIndex(curIdx)] <
        this.heap[this.getRightChildIndex(curIdx)]
      ) {
        biggerChild = this.getRightChildIndex(curIdx);
      }
      if (this.heap[curIdx] < this.heap[biggerChild]) {
        this.swap(curIdx, biggerChild);
        curIdx = biggerChild;
      } else {
        return;
      }
    }
  }
}

힙 사용 예제

• 우선순위 큐를 구현하는데 사용한다.
• 게임엔진에서 각 액터의 우선순위를 정한다.
• 서버에서 많은 트래픽을 처리할 때 우선 처리해야 할 트래픽을 정한다.
• 시뮬레이션 시스템
• 네트워크 트래픽 제어
• 운영 체제에서의 작업 스케쥴링 (우선 순위가 높은 일을 바로 조회)
• 수치 해석적인 계산

관련 문제

프로그래머스 - 더 맵게

문제 설명

매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다.

섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2) Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다. Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 섞어야 하는 최소 횟수를 return 하도록 solution 함수를 작성해주세요.

제한 사항

scoville의 길이는 2 이상 1,000,000 이하입니다. K는 0 이상 1,000,000,000 이하입니다. scoville의 원소는 각각 0 이상 1,000,000 이하입니다. 모든 음식의 스코빌 지수를 K 이상으로 만들 수 없는 경우에는 -1을 return 합니다.

문제풀이

MinHeap을 직접 구현하여야 풀이할 수 있는 문제이다. 최소힙은 오른쪽 왼쪽 상관없이 부모노드가 자식노드보다 크기만 하면 된다. (처음에 오른쪽이 왼쪽보다 커야하는 줄 알고 헷갈렸음 )

먼저, 전체 입력값을 Heap에 push해준다. heap에 push할 때에는 값을 배열의 맨 마지막 부분에 넣어주고, 마지막 index의 값을 기준으로 부모 노드와 비교하면서 부모노드보다 더 큰 상황이 올 때까지 부모와 자식을 swap하면서 올라간다. 부모 노드가 현재 비교대상인 자식노드보다 더 크다면 값을 swap하고 비교대상을 그 부모노드의 index로 변경한다. 그렇지 않다면 멈춘다.

Heap의 첫 번째로 작은 값과 두번째로 작은 값 * 2를 구하기 위해, heap에서 pop을 두 번하여, 제일 작은 값과 두번째 작은 값을 구한다. (매 pop마다 minHeap은 정렬된다.) 그 다음 그 값들의 합을 Push하고, heap을 재정렬한다. 이런식으로 반복하다가 heap의 길이가 1, 즉 제일 작은 값만 있고, 두 번째 값이 없는 경우가 되거나, heap의 [0]값이 K보다 커지면 위 동작을 멈춘다. 위 두 경우에서, heap[0]이 K보다 크다면 answer을, 그렇지 않다면 조건을 충족시키지 못한 경우이므로 -1을 리턴한다. (missing point)

위 과정에서 heap에서 pop하는 동작이 있는데, 여기가 아주 골머리~

일단 힙에서는 최소힙이든 최대힙이든 루트 노드가 항상 먼저 배출되어야 한다. 배출되고 나서 생기는 빈자리는 가장 마지막 노드, 즉 배열에서 제일 뒤에 있는 값을 가져온다. 그리고 다시 루트노드서 부터 재정렬을 실행해준다.

1. 만약 heap에 어떤 값도 없다면 null을 리턴한다.
2. 만약 Heap의 길이가 1인 경우, 즉, 루트 노드 밖에 없는 경우라면, heap[0]을 pop하여 리턴한다.
3. 1, 2번의 경우 외로 자식 노드들이 있는 경우, 루트 노드를 메서드가 끝날 때 return하기 위해 따로 저장한다.
4. 루트 노드와 맨 마지막 노드를 교환하고, 맨 마지막 노드는 필요가 없어졌기 때문에 heap에서 pop() (배열에서의 pop을 의미)을 한다.
5. 새롭게 바뀐 루트 노드를 자식 노드들과 비교하여 재정렬한다.
6. 3번에서 저장했던 루트 노드를 리턴한다.

재정렬

1. 루트 노드를 자식 노드들과 비교하여 정렬할 것이기 때문에 3가지 정보가 필요하다.

• 현재 노드의 위치 : 0
• 왼쪽 자식 노드의 위치
• 오른쪽 자식 노드의 위치

2. 아래 진행될 정렬을 왼쪽 자식 노드와 오른쪽 자식 노드보다 작을 때까지 계속 반복할 것이다.
3. 주의할 점1. 왼쪽 자식 노드만 있고, 오른쪽 자식 노드는 없는 경우가 있음!
4. 주의할 점2. 왼쪽 자식 노드도 있고, 오른쪽 자식 노드도 있는 경우, 더 작은 자식 노드와 위치를 바꾸어야 한다.
5. 왼쪽 혹은 오른쪽 자식 노드와 위치를 바꾼 경우, current idx를 바꾼 자식 노드의 idx로 변경하고, 해당 위치로부터 다시 정렬한다.

class Heap {
  constructor() {
    this.heap = [];
  }
  // 부모 idx = Math.floor(자식 idx / 2)
  getParentIdx(idx) {
    return Math.floor((idx - 1) / 2);
  }
  // 왼쪽 자식 idx = 부모 idx * 2
  getLeftChildIdx(idx) {
    return idx * 2 + 1;
  }
  // 오른쪽 자식 idx = 부모 idx * 2 + 1
  getRightChildIdx(idx) {
    return idx * 2 + 2;
  }
  swap(idx1, idx2) {
    [this.heap[idx1], this.heap[idx2]] = [this.heap[idx2], this.heap[idx1]];
  }
  push(value) {
    // 일단 마지막 노드에 들어온 값을 push하여 삽입한다. 이때 재귀적이든 반복문을 돌리든 부모노드를 확인하면서 들어온 값이 부모노드보다 작은지 큰지를 구분하여 위치를 교환을 계속 실행해주며 정렬해준다.
    this.heap.push(value);
    let current = this.heap.length - 1; // push 했기 때문에 heap 배열의 맨 뒤에 붙음
    let parent = this.getParentIdx(current);

    while (this.heap[parent] > this.heap[current]) {
      this.swap(parent, current);
      current = parent;
      parent = this.getParentIdx(current);
    }
    return this.heap;
  }
  pop() {
    // heap에 아무것도 없는 경우,
    if (this.heap.length === 0) {
      return null;
    }
    // root만 있는 경우 ,
    if (this.heap.length === 1) {
      return this.heap.pop();
    }
    const min = this.heap[0]; // min에 0번째 값 저장
    this.heap[0] = this.heap.pop(); //  마지막 값이랑 0번째 값이랑 교체

    // 정렬
    let current = 0;
    let leftChild = this.getLeftChildIdx(current);
    let rightChild = this.getRightChildIdx(current);

    while (
      (this.heap[leftChild] && this.heap[leftChild] < this.heap[current]) ||
      (this.heap[rightChild] && this.heap[rightChild] < this.heap[current])
    ) {
      // 오른쪽 왼쪽 다 있고, 왼쪽이 더 큰 경우, -> 오른쪽과 변경
      if (
        this.heap[rightChild] &&
        this.heap[rightChild] < this.heap[leftChild]
      ) {
        this.swap(rightChild, current);
        current = rightChild;
      } else {
        this.swap(leftChild, current);
        current = leftChild;
      }

      leftChild = this.getLeftChildIdx(current);
      rightChild = this.getRightChildIdx(current);
    }
    return min;
  }
}

function solution(input, K) {
  var answer = 0;
  const heap = new Heap();
  for (const item of input) {
    heap.push(item);
  }
  while (heap.heap[0] < K && heap.heap.length > 1) {
    // heap의 root가 k보다 작고, heap에 1개 이상의 데이터가 있다면 계속 할 것
    const first = heap.pop(); // 제일 작은 값과
    const second = heap.pop(); // 두번째로 작은 값을 빼내고,
    heap.push(first + second * 2); // 새로 만든 값을 push
    answer++;
  }
  // 모든 음식의 스코빌 지수를 K 이상으로 만들 수 없는 경우에는 -1을 return 합니다. - `놓친 부분``
  if (heap.heap[0] >= K) {
    return answer;
  } else {
    return -1;
  }
}

이제 취업 준비를 하다보면 공고에서 이런 글을 확인할 수 있을 것입니다.

webpack, esbuild 등 모듈 번들러 활용 경험이 있는 분 Babel을 이용한 ES6+ 스펙의 사용 경험이 있는 분

또 쉽게 우리는 React 앱을 시작할 때, create-react-app 이라는 명령어를 통해 시작하죠? 이 때 webpack, babel이 자동으로 설치됩니다. Vue도 마찬가지에용. vue-cli를 통해 설치하면 webpack, babel이 자동으로 설치됩니다.

💡 학습 목표 : 바벨과 웹팩이 뭔지 알고 가시길!

1. Webpack이란?

💡 webpack: 모던 Javascript 애플리케이션을 위한 정적 모듈 번들러 (webpack 정의)

Webpack: 여러 개의 파일들을 하나로 묶어주는 번들러

• 모듈 번들러 : 웹 어플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 각각 모듈로 보고 이를 병합해서 하나의 결과물을 만드는 도구

모듈 ****

• 프로그래밍 관점
  • 특정 기능을 갖는 작은 코드 단위
• Webpack에서는?
  • 웹 애플리케이션을 구성하는 모든 자원 하나하나가 모두 모듈

• 모듈 번들링: 웹 애플리케이션을 구성하는 여러 자원들을 하나의 파일로 병합 및 압축 해주는 동작

Webpack은 왜 사용하나요?

• 모듈화의 필요성

  • 파일 단위의 자바스크립트 모듈 관리

    • 자바스크립트의 변수의 유효 범위는 기본적으로 global → 어디에서든지 접근하기 용이함

    • 하지만 위 특성이 어플리케이션을 생성할 때는 문제점으로 작용

        <!-- index.html -->
        <html>
          <head>
            <!-- ... -->
          </head>
          <body>
            <!-- ... -->
            <script src="./app.js"></script>
            <script src="./main.js"></script>
                <script>
              getNum();  // main.js의 var num 값이 출력됨
            </script>
          </body>
        </html>

      • 위 두 파일들에서 동일한 이름의 변수를 선언하고 활용한다고 가정했을 때, (예를 들면 var num) 내가 원하는 대로 결과값이 도출되지 않을 수 있음

    • 하지만 파일 단위로 변수를 관리할 수 있게 된다면? → 웹팩은 파일 단위로 모듈화하여 관리

• 번들러를 사용하면 여러 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담을 줄여 더 빠른 서비스를 제공할 수 있음

• 브라우저의 HTTP 요청 제약을 피할 수 있음 (한 번에 보낼 수 있는 HTTP 요청 수 : 6~8개, 2개 이런 브라우저도 있음)

but, 하나의 파일로 모듈화된 파일들을 요청하게 되면 첫 로딩시 속도가 너무 느려질 수 있음

→ Code Splitting, 캐시 등의 방법으로 문제를 해결한다고 함

Code Splitting

웹팩에서 번들링 한 코드를 분할하고, 요청에 따라 로드할 수 있도록 해주는 방법

• Code Splitting을 하지 않은 경우, 애플리케이션을 실행시켰을 때 모든 코드가 한번에 요청이 되어서 로딩 시간이 길어질 수 있음
• Code Splitting을 하게 되면, 필요한 순간 필요한 코드만 불러오기 때문에 우선 순위를 제어할 수 있고, 로딩 시간도 줄일 수 있음

2. Babel이란?

💡 Babel: Javascript compiler

Babel: 입력된 코드를 Javascript로 변환해주는 트랜스파일러

• Transplier: 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환

Babel은 왜 사용하나요?

모든 브라우저가 최신 문법, 기술(ES6)을 지원하는 것은 아니기 때문에 구 기능(ES5)으로 변환하는 작업이 필요

• ES6의 화살표 함수와 ES7의 지수 연산자

[1, 2, 3].map(n => n ** n);

• Transpiled

// ES5
"use strict";

[1, 2, 3].map(function (n) {
  return Math.pow(n, n);
});

Babel이 하는 일

1. Transform syntax 구문 변환

   • 최신 자바스크립트 문법을 오래된 브라우저가 이해할 수 있도록 오래된 문법 ES5으로 변환

2. JSX and React

   • React에서 사용되는 JSX 문법을 Javascript로 트랜스파일링

   • JSX는 브라우저에서 바로 실행될 수 없기 때문에, Javascript로 변환해주어야 함

   • 바벨로 컴파일된 JSX는 React.createElement를 호출하여 리액트 엘리먼트를 반환한다.

   • JSX 문법을 사용하는 컴포넌트 파일에는 React를 import해줘야 한다.

     import React from 'react';

Babel과 Webpack을 활용한 간단 ES6 환경 구축!

Webpack

1. Webpack 설치 및 초기 설정

   1-1. npm 초기화

    npm init -y

    //package.json
    {
      "name": "test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

   1-2. 로컬에서 webpack, webpack-cli (커맨드-라인에서 webpack을 실행할 때 사용되는 도구) 설치

    npm install webpack webpack-cli --save-dev

   devDependecies에 아래와 같이 추가됨

    //package.json
    {..., 
   
    "devDependencies": {
        "webpack": "^5.87.0",
        "webpack-cli": "^5.1.4"
      }
    }

2. 번들 생성

   • lodash 설치 (build 정상적으로 되는지 테스트 하기 위해 설치)

     npm i lodash

   • index.html 파일 생성

     <html>
     <head>
       <title>Webpack Demo</title>
       <script src="https://unpkg.com/lodash@4.16.6"></script>
     </head>
     <body>
       <script src="src/index.js"></script>
     </body>
     </html>

   • src 폴더 생성 > 폴더 안에 index.js 파일 생성

     function component() {
     var element = document.createElement('div');
     
     /* lodash is required for the next line to work */
     element.innerHTML = _.join(['Hello','webpack'], ' ');
     
     return element;
     }
     
     document.body.appendChild(component());

1. 웹팩 빌드를 위한 구성 및 빌드

   • 웹팩 빌드 및 빌드 결과물로 실행하기 위해 각 파일에 아래 내용 반영

     import _ from 'lodash';

   • lodash를 Import하고 html 파일에서 lodash cdn import 관련 코드 삭제

     <html>
     <head>
       <title>Webpack Demo</title>
       <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
     </head>
     <body>
       <!-- <script src="src/index.js"></script> -->
       <script src="dist/main.js"></script>
     </body>
     </html>

   • 웹팩 빌드 명령어를 실행하기 위해 package.json 파일에 아래 내용 추가

     "scripts": {
     "build": "webpack --mode=none"
     }

   • npm run build 명령어 실행

     npm run build
     
     > test@1.0.0 build
     > webpack --mode=none
     
     asset main.js 536 KiB [emitted] (name: main)
     runtime modules 1.25 KiB 6 modules
     cacheable modules 532 KiB
     ./src/index.js 268 bytes [built] [code generated]
     ./node_modules/lodash/lodash.js 531 KiB [built] [code generate

     정상 빌드 됨 → dist 폴더 가 생성되고 해당 폴더 안에 main.js라는 파일의 결과물이 생김

4. Using Configuration

• 버전 4부터 webpack은 어떠한 설정도 필요하지 않으나 복잡한 설정이 필요한 경우를 위해 설정파일을 작성할 수 있음
• webpack.config.js가 있으면 webpack은 이 파일을 기본으로 작동
• 프로젝트 폴더 루트 레벨에 webpack.config.js 파일 생성 후 아래 내용 추가

// webpack.config.js
// `webpack` command will pick up this config setup by default
var path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

• entry : 웹팩이 빌드할 파일의 시작 위치 : default [./src/index.js]

• output : 웹팩에 의해 생성된 번들을 내보낼 위치와 이름 지정 : default [./dist/main.js]

• module

• loaders : JS가 아닌 파일들도 유효한 모듈로 변환

• plugins : 번들화된 JS를 난독화하거나 특정 텍스트를 추출 : 번들된 css, js 파일들을 html 파일에 주입(html-webpack-plugin 사용)하는 역할 : 번들을 최적화하거나, asset을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업 수행

• mode : production(최적화 빌드), development(빠른 빌드), none(그냥 빌드) : 웹팩 설정 모드로 3가지 중 선택 가능

1. NPM Scripts

   • 편리하게 사용하기 위해 단축 명령어를 사용할 수 있음

   • package.json 파일 수정

     "scripts": {
     "build": "webpack"
     }

2. npm run build 정상 작동

    npm run build
   
    > test@1.0.0 build
    > webpack
   
    asset main.js 536 KiB [compared for emit] (name: main)
    runtime modules 1.25 KiB 6 modules
    cacheable modules 532 KiB
      ./src/index.js 268 bytes [built] [code generated]
      ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
    webpack 5.87.0 compiled successfully in 116 ms

Babel

1. 패키지 설치

npm install --save-dev @babel/core @babel/cli @babel/preset-env

• @babel/core

  : 바벨의 핵심 기능이 있는 모듈

  (parsing(코드를 추상 구문 트리로 파싱), traverse(추상 구문 트리를 오래된 문법으로 변환), generator(새로 생성된 추상 구문 트리를 바탕으로 새로운 코드 생성)를 한꺼번에 처리할 수 있는 함수를 제공 => transformSync)

• @babel/cli

  : @babel/core를 터미널에서 커맨드를 입력해서 사용하기 위한 패키지

• @babel/preset-env

  : 모던 자바스크립트를 지원하기 위한 모든 플러그인의 집합

  : ES6 이상(ES2015+)의 문법으로 작성된 코드를 ES5 문법의 코드로 변환해주는 모든 규칙을 정의’

1. 전체 구성 파일 생성

• 프로젝트의 루트에 babel.config.json 파일을 생성한 후, 아래 예시 코드로 설정한다.

    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "edge": "17",
              "firefox": "60",
              "chrome": "67",
              "safari": "11.1"
            },
            "useBuiltIns": "usage",
            "corejs": "3.6.5"
          }
        ]
      ]
    }

1. 아래 코드를 package.json에 적용한 후, npm run compile을 터미널에 입력

   • src 폴더에 있는 모든 JavaScript 파일을 구문 분석(parse) 하고 설정한 변환을 적용하여 각 파일을 dist 폴더로 출력한다.

     npm run compile
     
     > test@1.0.0 compile
     > babel src -d dist
     
     Successfully compiled 1 file with Babel (210ms).

     

• compile 전 원본

import _ from "lodash";

function component() {
  var element = document.createElement("div");
  const a = () => {
    console.log("a");
  };

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(["Hello", "webpack"], " ");

  return element;
}

document.body.appendChild(component());

• compile 후

"use strict";

var _lodash = _interopRequireDefault(require("lodash"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function component() {
  var element = document.createElement("div");
  const a = () => {
    console.log("a");
  };

  /* lodash is required for the next line to work */
  element.innerHTML = _lodash.default.join(["Hello", "webpack"], " ");
  return element;
}
document.body.appendChild(component());

• but, 화살표함수는 ES5에서 안되지 않나요?

1. plugin 사용하여 코드 변환 수행하기

   • ES2015+ 구문을 ES5로 변환하고자 한다면 @babel/plugin-transform-arrow-functions 플러그인을 사용하여 적용

     npm install --save-dev @babel/plugin-transform-arrow-functions

   • babel.config.json 파일에 도 설정

     {
     "presets": [
       ...
     ],
     "plugins": ["@babel/plugin-transform-arrow-functions"]  // 추가
     }

     이제는 화살표 함수도 선언형 함수 형태로 컴파일 해줄 수 있다.

     "use strict";
     
     var _lodash = _interopRequireDefault(require("lodash"));
     function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
     function component() {
     var element = document.createElement("div");
     const a = function a() {
       console.log("a");
     };
     
     /* lodash is required for the next line to work */
     element.innerHTML = _lodash.default.join(["Hello", "webpack"], " ");
     return element;
     }
     document.body.appendChild(component());

• 그 외에도 추가적으로 preset, polyfill, configuration을 활용하여 더 다양하게 사용할 수 있다.

한 줄 요약

💡 웹팩은 자바스크립트 어플리케이션을 위한 모듈 번들러! 바벨은 자바스크립트 컴파일러! (or 트랜스파일러)

참고 webpack Babel · Babel 웹팩이 필요한 이유 | 웹팩 핸드북 Babel 직접 적용하며 이해하기

💡 웹사이트를 구성하는 수많은 리소스들이 있을 경우 어떻게 최적화할 수 있을까요? -> *CDN!!! *

CDN이란?

콘텐츠 전송 네트워크(Content Delivery Network)

데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이고자 인터넷 콘텐츠를 전송하기 위한 지리적으로 분산된 상호 연결된 서버 집단

• 보통 웹 사이트를 로드할 때 서버에 HTTP 요청을 보내서 리소스를 가져옴
• CDN은 클라이언트와 서버 사이에 중간 서버를 두고, 사용자의 현재 지리적 위치에서 가장 가까운 서버에 리소스를 캐싱해놓고 이를 빠르게 가져오는 기법
  • 사용자가 원하는 데이터를 가진 서버가 멀리 있을 경우, 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드해오는데 시간이 오래 걸릴 수 있음
  • 하지만 CDN 서버를 활용하면, 웹 사이트의 콘텐츠를 지리적으로 사용자와 가까운 CDN 서버에 저장하여 컴퓨터에 빨리 도달할 수 있음

CDN 작동 원리

CDN을 사용하지 않은 경우

• 하나의 오리진 서버가 모든 클라이언트의 요청에 일일히 응답해야함
• 막대한 트래픽을 유발하고, 부하가 발생해 장애가 발생할 수 있음

CDN을 사용하는 경우

• CDN을 사용한 경우, 트래픽을 분산하여 장애가 발생할 확률이 적어짐
• 사용자의 지리적으로 가까운 곳에 컨텐츠를 가진 서버를 위치하여, 보다 빠르게 데이터를 받아올 수 있음

서버를 여러 지역에 분산시켜 두고, 각 CDN 서버에 데이터를 캐싱

사용자의 컨텐츠 요청이 들어오면 사용자와 가장 가까운 CDN 서버로 매핑시켜 요청된 컨텐츠의 캐싱된 내용을 전달

만약 서버가 파일을 찾는데 실패하는 경우 CDN 플랫폼의 다른 서버에서 컨텐츠를 찾은 다음 응답을 전송

CDN 서버의 데이터 캐싱 플로우

💡 1. 최초의 요청은 오리진 서버로부터 컨텐츠를 가져와 고객에게 전송하고 동시에 CDN 서버에 캐싱한다. 2. 최초 요청 이후로의 요청은 CDN 에서 지정하는 해당 컨텐츠 만료 시점까지 캐싱된 컨텐츠를 전송한다. 3. 자주 사용하는 페이지에 한해서 캐싱되며, 해당 컨텐츠 호출이 없을 경우 주기적으로 삭제된다. 4. 서버가 파일을 찾는 데 실패하면, CDN 플랫폼의 다른 서버에서 컨텐츠를 찾아서 엔드유저에게 응답을 제공한다. 5. 컨텐츠를 오래되거나 사용할 수 없는 경우, CDN은 향후 요청에 대해 응답할 수 있도록 새로운 컨텐츠를 저장한다.

캐싱의 종류

• 정적 캐싱 : 캐싱할 데이터들을 미리 각 엣지에 보내 놓음

  • 게임 클라이언트 다운로드 등

• 동적 캐싱: 사용자가 요청을 보낼 때마다 보낼 컨텐츠가 엣지에 있는지 확인한 뒤, 있으면 (cache hit) 바로 사용자에게 보내고, 없으면 (cache miss) 그 때 서버로 요청하여 받아옴

• url 접속 → DNS에서 IP 주소를 찾음 → 근데 여기에 origin server IP주소가 아니라 CDN IP 주소를 넣어놓음

CDN 사용 예시

1. 고속 콘텐츠 전송
   • Reuters는 BBC, CNN, New York Times, Washington Post와 같은 주요 채널에 뉴스를 공급하는 세계 최대 뉴스 통신사로, 뉴스 미디어로서 Reuters는 전 세계 고객에게 뉴스 콘텐츠를 신속하게 제공하기 위해 AWS의 CloudFront를 사용
2. 실시간 스트리밍
3. 다중 사용자 확장
   • 온라인 게임의 오픈 베타테스트나 정식서비스 시작시점에 클라이언트의 다운로드 수요가 급격하게 증가 이럴 경우 병목 현상이 일어나거나 심한 경우 서버가 다운 되기도 하기 때문에 CDN이 필수적으로 사용됨 또한 대규모 업데이트를 위한 패치가 있을 경우에도 병목 현상을 막기 위해 CDN을 사용

CDN의 장점

• 컨텐츠 송수신의 병목현상을 피할 수 있음
• 리소스를 캐싱해 놓고 가져오기 때문에 로딩 속도가 빠름
• 1개의 서버에서만 리소스를 가져오지 않기 때문에 서버의 부하가 줄어듦
• 보통 1개의 도메인이 10개의 병렬 연결을 허용 → CDN을 활용하면 병렬 연결 허용 가능 개수가 증가
• 웹 사이트 보안 강화
  • DDoS(분산 서비스 거부) 공격은 대량 가짜 트래픽을 웹 사이트로 전송하여 어플리케이션이 작동 중지되도록 함
  • CDN은 여러 서버의 로드를 분산하여 origin 서버에 미치는 영향을 줄여 트래픽 급증을 처리할 수 있음

CDN의 단점

• 서버를 구축하는 데 비용이 많이 듬
• 사용자가 해당 CDN을 막아 놓으면 리소스 로딩이 막힘
• 배포과정이 다소 복잡
• CDN 서비스 회사는 각 나라마다 서버를 구축 → 해당 국가에 CDN이 없을 경우, 해외 CDN을 사용하여 로딩 속도가 더 증가할 수 있음

Reference CDN이란 무엇인가요? - 콘텐츠 전송 네트워크 설명 - AWS CDN이란 무엇인가 웹서비스에 필수! CDN이 뭔가요?

💡 객체지향언어에서의 this?

일반적으로 객체 지향 언어에서의 this는 함수가 속해있는 객체의 자기자신을 가리킴 하지만 Javascript에서의 this는 다름 !!

Javascript에서의 this

💡 Object를 참조하는 keyword

Javascript의 함수 → 일급 객체

함수를 …

1. 변수나 데이터에 할당할 수 있음
2. 다른 함수의 인자로 사용할 수 있음
3. 다른 함수의 반환값, return 값으로 사용될 수 있음

→ 이렇게 다양한 환경에서 함수가 호출될 수 있기 때문에, this의 의미도 함수가 호출되는 상황(함수가 호출되는 방식)에 따라 가리키는 객체가 달라짐

Javascript 실행과정

1. 자바스크립트 엔진 실행
2. 실행 가능한 코드 분석
   • 전역 코드, 함수 코드, eval 코드, 블록문
3. 실행 컨텍스트 생성
   • 변수 환경, 렉시컬 환경, this

this binding Rules

1. 기본 바인딩

1-1. 브라우저

함수를 단독으로 호출할 경우, 전역 객체 에 바인딩됨 → 브라우저에서 실행하면, 전역 객체인 window 가 바인딩 됨

function foo() {
  const a = 10;
  console.log(this.a);
}

foo(); // undefined

※ use strict 모드를 사용하면, 전역 객체를 this 바인딩 대상에서 제외시킴 → undefined 가 바인딩 됨

function showThis(){
    console.log(this);
}

function showThisinStrictMode(){
    'use strict'
    console.log(this);
}

showThis(); // window
showThisinStrictMode(); //undefined

1-2. Node

함수를 단독으로 호출한 경우, 동일하게 전역 객체 에 바인딩 됨 → Node에서는 global 에 바인딩 됨

※ 함수 호출이 아니라, 그냥 전역에서 this를 호출한다면?

function showThis(){
    console.log(this);
}

showThis(); // object[global]
console.log(this); // { }

→ 빈 객체 { } 가 출력되는데, 이는 node에서의 module.exports 와 동일하다.

module.exports : 파일을 모듈로 사용할 수 있게 해주는 객체

2. 암시적 바인딩

객체의 메서드로 호출되는 경우, Object.function(); → 호출된 객체 Object 에 바인딩 됨

const obj = {
    name : "isabel",
    getName(){
        return this.name;
    }
}

console.log(obj.getName());

※ 참조 타입 Reference Type

const obj = {
    name : "isabel",
    getName(){
        return this.name;
    }
}

function showReturnValue(cb){
    console.log(cb());
}

showReturnValue(obj.getName); // undefined

자바스크립트에서 객체를 할당한 변수는 그 객체를 참조하는 값을 저장함 → obj.getName에는 getName에 대한 참조값이 들어있는 것

참조값을 함수의 인자로 넘기게 되면, 그 참조값을 복제하여 사용 → showReturnValue에서는 같은 getName의 참조값을 복제하여 cb에 저장하는 것이고, 이는 같은 것을 참조하는 또 다른 객체가 생성되는 것

💡 근데 같은 함수를 복제해서 쓰는데 showReturnValue에서는 왜 바인딩이 안 됨?

. 연산과 [] 연산을 통해서 객체의 property에 접근을 하면 참조 타입이라는 타입을 반환해줌

참조 타입?

• Javascript 내부에서, 명세서 에서만 사용되는 타입(specification type)
  • (base, name, strict)
  • base : 해당 객체
  • name : 프로퍼티 이름
  • strict : strict mode 여부

obj.getName : (obj, getName, false)

위 함수를 호출하면 → 위의 obj에 this가 바인딩 됨

하지만 . 연산자와 { } 연산자를 제외한 다른 연산자들은 참조타입이 아닌 해당 프로퍼티의 값만을 전달함 → 다른 함수로 인자로 넘기는 경우에도 참조 타입이 아닌 프로퍼티의 값만 전달되므로, 해당 값에는 base, 즉 원래 가지고 있던 객체는 전달되지 않음

이러한 문제를 해결하고 싶다면?!

3. 명시적 바인딩

3-1. call

call(context, arg1, arg2, ... )

3-2. apply

apply(context, args)

call, apply → this를 바인딩할 객체를 지정한 상태로 함수를 호출할 수 있음

const foo = {
  a: 20,
}

function bar() {
  console.log(this.a);
}
bar.call(foo); // 20
bar.apply(foo); // 20

3-3. bind

func.bind(context, arg1, arg2, ... )

this가 바인딩하는 객체를 고정시켜주는 함수로, this가 바인딩된 함수를 반환함

const foo = {
  a: 20,
}

function bar() {
  console.log(this.a);
}

const bound = bar.bind(foo)

bound(); // 20

a.k.a. hard binding

4. new 바인딩

function Person(name) {
  this.name = name;
}

const isabel = new Person("isabel"); //Person { name: 'isabel' }
console.log(isabel.name); // isabel

new func() → 생성자 함수로서의 기능을 수행할 수 있게 됨

1. 새로운 객체를 내부에서 생성 ← this는 이 객체에 바인딩됨
2. 함수의 코드 실행
3. 새로 생성한 객체를 반환하여 변수에 할당

5. 바인딩 종류에 따른 우선순위

1. new 바인딩
2. 암시적 바인딩
3. 명시적 바인딩
4. 기본 바인딩

화살표 함수의 this 바인딩

const obj = {
    name : "isabel",
    showNameInSec(sec){
        setTimeout(() => {
            console.log(this.name);
        }, sec);
    }
}

obj.showNameInSec(1500); // isabel

• 렉시컬 스코프와 상관없이 호출 당시에 의존하는 기존의 바인딩 방식과 달리, 화살표 함수에서는 선언될 당시의 상위의 실행 컨텍스트 의 this 바인딩 객체를 참조함
• 선언할 때 정적으로 결정
• Lexical this라고도 함
• 위 코드의 경우, this.name의 this는 상위 스코프의 실행 컨텍스트에 있는 this, 즉 showNameInSec의 this를 가리키기 때문에, isabel을 정상적으로 출력할 수 있게 됨

참고 [JS] 알쏭달쏭 자바스크립트 this 바인딩 [10분 테코톡] 🥦 브콜의 This [JS] 상황에 따른 this 바인딩 참조 타입

컴포넌트는 생명주기를 가짐

• 생성(mount) → 업데이트(update) → 제거(unmount)
• 리액트에서 클래스 컴포넌트는 Lifecycle Methods를 사용하고, 함수형 컴포넌트에서는 Hooks를 사용

1. Class Components Lifecycle

1.1. Mount

1.1.1. Constructor

컴포넌트 생성자 메서드 컴포넌트가 생성되면 가장 먼저 실행되는 메서드 this.props, this.state에 접근이 가능하고, React 요소를 반환

1.1.2. getDerivedStateFromProps

props로 받아온 것을 state에 넣어줌

1.1.3. render

화면에 컴포넌트를 렌더링

1.1.4. componentDidMount

컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드 이 메서드가 호출될 때는 화면에 컴포넌트가 나타난 상태 해당 메서드에서 주로 DOM을 사용해야하는 외부 라이브러리 연동 혹은 해당 컴포넌트에서 필요한 데이터를 요청하기 위한 api 요청 등의 행위를 함

React.useEffect(()=>{
    console.log("componentDidMount");
}, []);

1.2. Update

1.2.1. getDerivedStateFromProps

컴포넌트의 props나 state가 바뀌었을 때도 이 메서드가 호출

1.2.2. shouldComponentUpdate

컴포넌트가 리랜더링할지 말지를 결정하는 메서드 React.memo와 유사하게 boolean return으로 결정

1.2.3. componentDidUpdate

컴포넌트가 업데이트되면 발생

• 의존성 배열이 변경되었을 때만 useEffect 실행되는 것과 동일

React.useEffect(()=>{
    console.log("countState or exampleProps changed");
}, [countState, exampleProps]);

1.3. Unmount

Unmount는 화면에서 컴포넌트가 사라지는 것

1.3.1. componentWillUnmount

컴포넌트가 화면에서 사라지기 직전에 호출됨 해당 메서드에서 주로 DOM에 직접 등록했던 이벤트를 제거함 외부 라이브러리를 호출한 것이 있고, 해당 라이브러리에 dispose 기능이 있다면 여기서 호출

React.useEffect(()=>{
    const timer = setTimeout(() => {
        console.log('timer');
}, 1000)
    return clearTimeout(timer);
}, []);

2. Functional Components Hooks

React의 함수형 컴포넌트에서 생명주기 관련 기능을 연동할 수 있도록 해주는 함수들 class없이 React를 사용할 수 있게 됨

2.1. React Hooks의 도입 목적

기존 라이프 사이클 메서드 중심이 아니라 로직 중심으로 나눌 수 있게 되어 컴포넌트를 함수 단위로 잘게 쪼갤 수 있게 됨 → 유지보수 EZ

2.2. React Hooks의 사용 규칙

💡 최상단에서만 Hook을 호출할 수 있다.

• 반복문, 조건문, 중첩된 함수 등에서 호출할 수 없다.
• 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 호출되는 것이 보장된다.

💡 리액트 함수 컴포넌트 안에서만 hook을 호출할 수 있다.

• 일반 JS 안에서는 호출할 수 없다 .

2.3. Hooks의 종류

2.3.1. useState

상태를 관리

const [state, setState] = useState(initialState);

useState의 데이터는 동기적으로 업데이트 되지 않음 (비동기처리) → 페이지의 수많은 useState 데이터가 모두 동기적으로 업데이트 된다면 리렌더링을 계속 발생시켜 성능 저하가 일어날 수 있음 → 이러한 문제를 해결하기 위해서 useState는 setState가 연속적으로 호출되면 데이터를 배치(batch) 처리를 통해 한번에 처리하곤함 (16ms를 기준으로 한 번씩 업데이트된다고 한다. )

2.3.2. useEffect

useEffect(() => {

}, [의존성1, 의존성2, ...])

화면에 렌더링 된 이후에 한 번 실행 componentDidMount, componentDidUpdate, 그리고 componentWillUnmount 가 합쳐진 것

• 만약 화면을 다 그리기 전에 동기화 되어야 하는 경우, useLayoutEffect 를 활용하여 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트 순으로 실행시킬 수 있음
• useLayoutEffect는 렌더링 후 layout과 paint 전에 동기적으로 실행됨
• useEffect는 렌더링 후, layout과 paint가 완료된 후에 비동기적으로 실행됨
• useInsertionEffect
• useEffect 안에서 return은 clean-up을 사용하기 위해서 쓰임
  1. 메모리 누수 방지를 위해 UI에서 컴포넌트를 제거하기 전에 수행
  2. 컴포넌트가 여러 번 렌더링된다면, 다음 effect가 수행되기 전에 이전 effect를 정리

2.3.3. useContext

const ThemeContext = CreateContext(null);

export default function MyApp() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <label>
        <input
          type="checkbox"
          checked={theme === 'dark'}
          onChange={(e) => {
            setTheme(e.target.checked ? 'dark' : 'light')
          }}
        />
        Use dark mode
      </label>
    </ThemeContext.Provider>
  )
}

function Form({ children }) {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

Context API를 통해 만들어진 Context에서 제공하는 value를 가져올 수 있음

컴포넌트에서 가장 가까운 <MyContext.Provider> 이 업데이트되면, 이 hook은 MyContext Provider 에게 전달된 가장 최신의 context value를 사용하여 렌더러를 trigger

전역 상태 관리로 많이 사용됨

2.3.4. useReducer

useState 대체 함수로 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있움 컴포넌트 바깥에서 로직을 작성할 수 있고, 심지어 다른 파일에서 작성한 후 불러와서 사용할 수도 있음

• reducer : 현재 상태와 액션 객체를 파라미터로 받아와 새로운 상태를 반환해주는 함수

const [state, dispatch] = useReducer(reducer, initialArg, init?)

import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [currentState, dispatch] = useReducer(reducer, { age: 42 }); // 여기에서는 {age : 42}가 initial state
  // ...

    return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );

}

• dispatch function
  • state를 새로운 값으로 변경하게 하고, 리렌더링을 일으킨다.
  • dispatch함수에 매개변수로 action을 넘겨주어야 한다.
  • 기존의 state 값은 dispatch한 action에 따라 변경된 값으로 return된다.
  • action 은 각각을 구분하기 위해 type 프로퍼티를 가진다. (그냥 이름 같은 거)
  • redux를 생각하면 좀 더 이해가 잘 될 듯

function reducer(state, action) {
  switch (action.type) {  //switch ~ case ~ 문으로 조건문 사용
    case 'incremented_age': {
            // state를 직접 변경해서 return 하지 않기! 
            // 새로운 object를 만들어서 return 하기! -> for 불변성
      return {
        name: state.name,
        age: state.age + 1
      };
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age
      };
    }
  }
  throw Error('Unknown action: ' + action.type);
}

function Form() {
  const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 });

  function handleButtonClick() {
    dispatch({ type: 'incremented_age' });
  }

  function handleInputChange(e) {
    dispatch({
      type: 'changed_name',
      nextName: e.target.value
    });
  }
  // ...

💡 “Too many re-renders”

Too many re-renders. React limits the number of renders to prevent an infinite loop.

렌더링 중에 무조건적으로 액션을 디스패치하여, 컴포넌트가 루프에 진입하게 되는 것

// 🚩 Wrong: calls the handler during render
return <button onClick={handleClick()}>Click me</button>

// ✅ Correct: passes down the event handler
return <button onClick={handleClick}>Click me</button>

// ✅ Correct: passes down an inline function
return <button onClick={(e) => handleClick(e)}>Click me</button>

2.3.5. useRef

특정 DOM을 선택할 때 사용되며, 데이터를 저장하는 용도로도 쓰임 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 리턴함 반환된 객체는 컴포넌트의 전 생애 주기를 통해 유지됨

const inputRef = useRef(null);

...

const handleInputClick = () => {
    inputRef.current.focus();
}

<>
    <button onClick={handleInputClick}>click here</button>
    <input ref={ inputRef } />
</>

const valueRef = useRef(0);

...
valueRef.current = valueRef.current + 1;

Performance Hooks

리렌더링을 최적화하는 가장 일반적인 방법은 필요하지 않은 업무를 skip하는 것
리액트가 캐시된 연산 결과를 재사용하게 하거나 이전 렌더링에 비하여 데이터가 바뀌지 않았다면 리렌더링 하지 않게 하는 것

2.3.6. useMemo

const cachedValue = useMemo(calculateValue, dependencies)

고연산의 연산 결과를 캐시할 수 있게 해줌 → 메모이제이션된 값을 반환 의존성이 변경되었을 때만 메모이제이션된 값을 다시 연산함 의존성 배열에 아무런 값도 없는 경우, 매 렌더링마다 새로운 값을 연산함

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

최초 렌더시, () => filterTodos(todos, tab) 부분, 즉 사용자가 원하는 연산이 실행되고, 해당 연산의 return 값이 반환됨

매 re-render마다 리액트는 dependencies에 있는 값들을 이전 렌더의 값과 비교할 것

import { useMemo } from 'react';
import { filterTodos } from './utils.js'

export default function TodoList({ todos, theme, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  return (
    <div className={theme}>
      <p><b>Note: <code>filterTodos</code> is artificially slowed down!</b></p>
      <ul>
        {visibleTodos.map(todo => (
          <li key={todo.id}>
            {todo.completed ?
              <s>{todo.text}</s> :
              todo.text
            }
          </li>
        ))}
      </ul>
    </div>
  );
}

• children Component 리렌더링 관리

  기본적으로 리액트는 컴포넌트가 리렌더링 되면, 그 자식들도 재귀적으로 모두 리렌더링됨

  props가 동일하다면, children 컴포넌트들은 리렌더링을 skip하게 할 수 있음 → React.memo 를 사용!

    import { memo } from 'react';
  
    const List = memo(function List({ items }) {
      // ...
    });

  memo로 감싼다면, 해당 자식 컴포넌트는 props가 모두 바뀌지 않을 경우 리렌더링을 skip함!

  이 부분은 useCallback의 경우에도 동일!

    export default function TodoList({ todos, tab, theme }) {
      // Tell React to cache your calculation between re-renders...
      const visibleTodos = useMemo(
        () => filterTodos(todos, tab),
        [todos, tab] // ...so as long as these dependencies don't change...
      );
      return (
        <div className={theme}>
          {/* ...List will receive the same props and can skip re-rendering */}
          <List items={visibleTodos} />
        </div>
      );
    }

  아니면, List 컴포넌트를 useMemo에 넣어도 동일한 결과를 유도할 수 있음

  
    export default function TodoList({ todos, tab, theme }) {
      // Tell React to cache your calculation between re-renders...
      const visibleTodos = useMemo(() => filterTodos(todos, tab),[todos, tab]);
        const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
      return (
        <div className={theme}>
         { children }
        </div>
      );
    }

2.3.7. useCallback

최적화된 컴포넌트로 넘기기 전에 함수 선언을 캐시할 수 있게 해줌 메모이제이션 된 콜백 함수를 반환 의존성이 변경되었을 때만 변경되며, 특정 함수를 새로 렌더링하지 않고 재사용할 수 있게 함

const cachedFn = useCallback(fn, dependencies)

함수를 캐시하기 위해서는 해당 함수를 useCallback으로 감쌈 handleSubmit이 리턴되는 함수임

import { useCallback } from 'react';

function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]); // dependencies
  // ...

    return (
    <div className={theme}>
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );

자바스크립트에서는 function(){} , () ⇒ {} 은 항상 다른 함수를 생성함 → 이 말은 렌더링 될 때마다 다른 함수를 생성한다는 의미

→ useCallback 을 사용하면 같은 함수가 계속 사용됨 (dependencies가 변경되지 않는 한)

useCallback은 아래와 같은 경우에 유용함

• 함수를 memo로 감싸진 컴포넌트에게 prop으로 보내는 경우 → 이 경우는 개발자가 최적화를 원하는 경우니까
• 개발자가 넘기는 함수가 나중에 다른 Hook의 dependency로 사용되는 경우

React.memo

props가 변경되지 않았을 때는 컴포넌트가 리렌더링을 skip할 수 있게 해줌

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

export const MemoizedMovie = React.memo(Movie);

• 같은 props로 리렌더링이 자주 일어나는 컴포넌트에 사용할 것!

그러면 여기서 real DOM과 virtual DOM은 뭘까요?

💡 학습 목표: Javascript에서의 DOM에 대해 알아보고, DOM과 virtual DOM의 차이점에 대해서 이해해봅시다.

브라우저 렌더링

브라우저: 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램(MDN)

예) Chrome, Firefox, Safari, Opera …

렌더링: 서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아 브라우저에 뿌려주는 것

브라우저 렌더링 과정 5단계

1. Parsing

   HTML파일과 CSS파일을 서버로부터 받아와 parsing하여 DOM tree와 CSSOM tree를 생성

2. Style

   두 트리를 합쳐 Rendering Tree를 생성

3. Layout/Reflow

   Rendering Tree에서 각 노드의 위치와 크기를 계산

4. Painting(repaint)

   계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어 생성

5. Composite

   레이어를 합성하여 실제 화면에 출력

DOM이란?

• 문서 객체 모델 ( Document Object Model )의 줄임말

• html 파일을 웹 브라우저에서 보여주게 하기 위해서는 브라우저 렌더링 엔진은 웹 문서를 parsing하여 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 올림 → DOM
• 모든 요소, 텍스트, attribute들은 각각 객체로 만들어지고, 이 객체들은 위와 같이 트리 구조로 구성되어있기 때문에 DOM Tree라고 부름
• DOM tree는 각 노드들로 이루어져있고, 이 노드들은 각 객체들임
• 화면에 그려진 DOM은 DOM API를 통해 Javascript와 같은 스크립팅 언어로 동적으로 조작할 수 있고, 이 변경된 DOM은 rendering에 반영됩니다.

[DOM을 사용하는 API들의 목록] document.getElementById(id) document.getElementsByTagName(name) document.createElement(name) parentNode.appendChild(node) element.innerHTML element.setAttribute element.getAttribute element.addEventListener

// DOM 조작 예시
document.querySelector(‘#title”).style.color = “red”;

Virtual DOM

1. Virtual DOM이 등장하게 된 배경

• 화면에 보여지는 데이터값이 수정되면 브라우저의 렌더링 과정이 전체가 다시 실행되어, 비효율적
• SPA로 된 웹페이지들이 점차 늘어나면서 사용자 인터렉션에 의해 화면이 즉각적으로 수정되어야 하는 경우가 더욱 많아짐
• 또한 CSR 방식으로 렌더링 되는 경우에는, 처음 렌더링 이후에는 서버로부터 데이터만 받아오고 뷰는 Javascript로 관리하기 때문에 브라우저에서 연산이 많아지면 렌더링 속도가 느려지는 문제도 발생할 수 있음

→ 이러한 문제를 해결하기 위해서 virtual DOM이 등장!

2. Virtual DOM

• Virtual DOM은 Real DOM을 컴포넌트 단위로 쪼개어 추상화시킨 메모리상에만 존재하는 복사본
• html객체에 기반한 Javascript 객체로 표현되고, 실제 DOM이 아닌 메모리 상에서 동작

html

<ul id="items">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

javascript

let domNode = {
  tagName: "ul",
  attributes: {
    id: "items",
  },
  children: [
    {
      tagName: "li",
      textContent: "Item 1",
    },
    {
      tagName: "li",
      textContent: "Item 2",
    },
  ],
};

• virtual DOM 적용
  • 데이터가 변경
  • 전체가 virtual DOM에 렌더링
  • 이전 virtual DOM에 있던 내용과 업데이트 후의 내용을 비교
  • 바뀐 부분만 실제 DOM에 적용
• 변경되는 부분만 real DOM에 적용하기 때문에, 연산 비용 측면에서 효율적
• 수정 사항이 여러 개 있어도 virtual DOM은 real DOM에 렌더링을 1번만 발생
  • DOM 요소의 변화를 묶어서 적용 후, 이를 Real DOM에 동기화

3. React에서의 Virtual DOM 렌더링

React의 두 개의 가상돔

1. 렌더링 이전 화면 구조를 나타내는 가상돔
2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔

• React에서 데이터 업데이트 시 virtual DOM에서 real DOM으로 렌더링되는 과정
  • 데이터 업데이트
  • React.createElement()를 통해 JSX.element를 렌더링
  • 모든 virtual DO2M object가 업데이트 됨
  • React는 virtual DOM을 이전 virtual DOM의 스냅샷과 비교하여 바뀐 부분을 캐치!

💡 Diffing Algorithm: virtual DOM이 업데이트되면, React는 virtual DOM을 이전 virtual DOM의 스냅샷과 비교하여 바뀐 부분을 검사

• element의 속성값만 바뀐 경우 → 속성 값만 업데이트
• element의 태그 혹은 컴포넌트가 변경된 경우 → 해당 node를 포함한 하위 node를 unmount 후 새로운 virtual DOM으로 대체

Diffing 알고리즘을 통해 확인한 새로 바뀐 부분들을 DOM object에 적용 → 재조정(reconciliation)

4. 무조건 Virual DOM이 좋음?

정보만 제공하고, 사용자의 interaction이 많지 않은 페이지라면 Real DOM이 성능이 더 좋을수도 있다.

💡 SPA로 제작된 큰 규모의 웹페이지는 Virtual DOM을 활용하여 브라우저의 연산 양을 줄여 성능 개선에 도움을 줄 수 있다.

브라우저 렌더링 과정에 대해서 더 알아보고 싶다면…!? 브라우저는 어떻게 동작하는가?

참고자료 PoiemaWeb [10분 테코톡] 🥁 지그의 Virtual DOM 브라우저 렌더링 과정 이해하기.

BOJ 2605 줄 세우기

문제

점심시간이 되면 반 학생 모두가 한 줄로 줄을 서서 급식을 탄다. 그런데 매일 같이 앞자리에 앉은 학생들이 앞에 줄을 서 먼저 점심을 먹고, 뒷자리에 앉은 학생들은 뒤에 줄을 서 늦게 점심을 먹게 된다. 어떻게 하면 이러한 상황을 바꾸어 볼 수 있을까 고민하던 중 선생님이 한 가지 방법을 내 놓았다. 그 방법은 다음과 같다.

학생들이 한 줄로 줄을 선 후, 첫 번째 학생부터 차례로 번호를 뽑는다. 첫 번째로 줄을 선 학생은 무조건 0번 번호를 받아 제일 앞에 줄을 선다. 두 번째로 줄을 선 학생은 0번 또는 1번 둘 중 하나의 번호를 뽑는다. 0번을 뽑으면 그 자리에 그대로 있고, 1번을 뽑으면 바로 앞의 학생 앞으로 가서 줄을 선다. 세 번째로 줄을 선 학생은 0, 1 또는 2 중 하나의 번호를 뽑는다. 그리고 뽑은 번호만큼 앞자리로 가서 줄을 선다. 마지막에 줄을 선 학생까지 이와 같은 방식으로 뽑은 번호만큼 앞으로 가서 줄을 서게 된다. 각자 뽑은 번호는 자신이 처음에 선 순서보다는 작은 수이다.

예를 들어 5명의 학생이 줄을 서고, 첫 번째로 줄을 선 학생부터 다섯 번째로 줄을 선 학생까지 차례로 0, 1, 1, 3, 2번의 번호를 뽑았다고 하자, 첫 번째 학생부터 다섯 번째 학생까지 1부터 5로 표시하면 학생들이 줄을 선 순서는 다음과 같이 된다.

첫 번째 학생이 번호를 뽑은 후 : 1 두 번째 학생이 번호를 뽑은 후 : 2 1 세 번째 학생이 번호를 뽑은 후 : 2 3 1 네 번째 학생이 번호를 뽑은 후 : 4 2 3 1 다섯 번째 학생이 번호를 뽑은 후 : 4 2 5 3 1 따라서 최종적으로 학생들이 줄을 선 순서는 4, 2, 5, 3, 1이 된다.

줄을 선 학생들이 차례로 뽑은 번호가 주어질 때 학생들이 최종적으로 줄을 선 순서를 출력하는 프로그램을 작성하시오.

입력

첫째 줄에는 학생의 수가 주어지고 둘째 줄에는 줄을 선 차례대로 학생들이 뽑은 번호가 주어진다. 학생의 수가 100 이하이고, 학생들이 뽑는 번호는 0 또는 자연수이며 학생들이 뽑은 번호 사이에는 빈 칸이 하나씩 있다.

출력

학생들이 처음에 줄을 선 순서대로 1번부터 번호를 매길 때, 첫째 줄에 학생들이 최종적으로 줄을 선 순서를 그 번호로 출력한다. 학생 번호 사이에는 한 칸의 공백을 출력한다.

N = int(input()) # 5
arr = list(map(int, input().split()))
result_arr = []

for idx, number in enumerate(arr):
    if number == 0: # 0 : 자기 index 자리니까 지금 있는 arr에 뒤에 줄세움
        result_arr.append(idx+1) # 자리 순서라서 index + 1을 해줌! (1부터 N까지)
    else : # 0 카드 아니면 자기 자리보다 number만큼 뺀 자리로 이동!
        result_arr.insert(idx-number, idx+1) 

print(" ".join(map(str, result_arr)))

insert(idx, 넣을 요소) : idx번째 자리에 두번째 인자를 넣어주는 함수
처음에는 딱 바로 정리가 되지는 않았지만 한줄씩 써 내려가면서 정리가 되었던 문제이다. insert를 사용하여 간단히 해결할 수 있었다!

BOJ 2635 수 이어가기

문제

다음과 같은 규칙에 따라 수들을 만들려고 한다.

첫 번째 수로 양의 정수가 주어진다.
두 번째 수는 양의 정수 중에서 하나를 선택한다.
세 번째부터 이후에 나오는 모든 수는 앞의 앞의 수에서 앞의 수를 빼서 만든다. 예를 들어, 세 번째 수는 첫 번째 수에서 두 번째 수를 뺀 것이고, 네 번째 수는 두 번째 수에서 세 번째 수를 뺀 것이다.
음의 정수가 만들어지면, 이 음의 정수를 버리고 더 이상 수를 만들지 않는다.
첫 번째 수로 100이 주어질 때, 두 번째 수로 60을 선택하여 위의 규칙으로 수들을 만들면 7개의 수들 100, 60, 40, 20, 20 , 0, 20이 만들어진다. 그리고 두 번째 수로 62를 선택하여 위의 규칙으로 수들을 만들면 8개의 수들 100, 62, 38, 24, 14, 10, 4, 6이 만들어진다. 위의 예에서 알 수 있듯이, 첫 번째 수가 같더라도 두 번째 수에 따라서 만들어지는 수들의 개수가 다를 수 있다.

입력으로 첫 번째 수가 주어질 때, 이 수에서 시작하여 위의 규칙으로 만들어지는 최대 개수의 수들을 구하는 프로그램을 작성하시오. 최대 개수의 수들이 여러 개일 때, 그중 하나의 수들만 출력하면 된다.

입력

첫 번째 수가 주어진다. 이 수는 30,000 보다 같거나 작은 양의 정수이다.

출력

첫 번째 줄에는 입력된 첫 번째 수로 시작하여 위의 규칙에 따라 만들 수 있는 수들의 최대 개수를 출력한다.
둘째 줄에 그 최대 개수의 수들을 차례대로 출력한다. 이들 수 사이에는 빈칸을 하나씩 둔다.

문제 풀이

N = int(input()) #100 
max_list = []
max_cnt = 0
for i in range(N, -1, -1):
    cnt = 0
    list_a = [N, i]
    while True:
            temp = list_a[cnt] - list_a[cnt + 1]
            if temp < 0:
                break
            else : 
                list_a.append(temp)
                cnt += 1

    if max_cnt <= cnt :
        max_cnt = cnt
        max_list = list_a

str_s = ''
for i in max_list:
    str_s += (str(i) + " ")

print(len(max_list)) # 8 
print(str_s) #100 62 38 24 14 10 4 6

처음 입력받은 input 값만큼 뒤에서부터 하나씩 계산하는 브루트 포스 방법으로 문제를 풀었다. while문으로 n-2번째 값에서 n-1번째 값을 뺀 결과가 0보다 클때까지 반복하면서 해당 값들을 list_a에 저장하였다. while문을 돌 때마다 count를 세어주어 count가 제일 클 때의 list를 max_list로 저장하여 문제를 해결하였다.
처음에는 for문의 range에 입력받은 N값은 포함되지 않는다고 생각하여 for i in range(N-1, -1, -1)로 놓고 문제를 풀었지만 계속 100%에서 틀렸다고 나왔고 더 보니 자기 자신 N을 포함시키지 않아 문제가 해결되지 않았던 것이다. 범위에 자신이 포함되는지 안되는지를 잘 생각해야 될 것이다.

Example 1:

Input: strs = ["eat","tea","tan","ate","nat","bat"] Output: [["bat"],["nat","tan"],["ate","eat","tea"]]

cf) An Anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

words = ["eat", "tea", "tan", "ate", "nat", "bat"]

anagram_dict = {}  # 애너그램단위로 묶은 결과가 들어있는 딕셔너리
# key : 해당 단어를 정렬한 결과
# value : key와 같은 애너그램 그룹에 있는 단어들의 모음을 리스트로 만든다.

for word in words:
    sorted_word = "".join(sorted(word))  # sorted() => 결과가 리스트, 문자열로 변환해야한다. ==> join()
    # word = "eat"
    # sorted(word) = ["a" , "e" , "t"]
    # "".join(sorted(word)) = "aet"
    # ".".join(sorted(word)) = "a.e.t"

    if anagram_dict.get(sorted_word):  # 딕셔너리에 애너그램 그룹이 존재한다.
        anagram_dict[sorted_word].append(word)  # 존재하면 리스트에 추가를 해준다.
    else:
        anagram_dict[sorted_word] = [word]  # 존재하지 않으면 리스트를 새로 만들어준다.

print(anagram_dict)

dictionary와 친해져야겠다. dict[key].append(a) -- dictionary의 key값에 리스트가 있다면 key에 접근하여 value에 해당하는 자리에 append()로 a를 추가할 수 있다. 이와는 달리 dict[key] = [a] 로 새로운 key와 그에 해당하는 list value를 생성할 수 있다.

sorted()함수를 사용하면 단어를 한 글자씩 쪼개어서 list로 만들 수 있다. # ['a', 't', 'e'] 이렇게 만든 리스트를 다시 "".join 공백없이 join하면 쭈루룩 붙일 수 있다. # ate

dictionary.get(x)을 통해 x가 dictionary의 key 중에 있는지 없는지를 확인할 수 있다.(이에 해당하는 value값을 return 함) key가 없을 경우, 에러가 발생하지 않고 None을 리턴한다.

key를 기준으로는 sorted()를 사용하면 오름차순으로 정렬할 수 있다. argument를 1개 받으며, dict.items()를 넣어주면 오름차순으로 정렬된다. tuple로 이루어진 list를 반환한다.

dict_a={'파이썬':1, '자바':2, '자바스크립트':3, '씨':4}
sorted_dict = sorted(dict_a.items())
print(sorted_dict)
# [('씨', 4), ('자바', 2), ('자바스크립트', 3), ('파이썬', 1)]

Key만 뽑아서 오름차순 정렬

key만 출력하는 경우에는 sorted함수에 dict을 넣으면 key만을 뽑아서 오름차순 정렬이 된다.

dict_a={'파이썬':1, '자바':2, '자바스크립트':3, '씨':4}
sorted_dict = sorted(dict_a)
print(sorted_dict)
#['씨', '자바', '자바스크립트', '파이썬']

이제 여기서부터는 람다식을 이용해야 한다.

Key를 기준으로 내림차순 정렬

내림차순의 경우에도 sorted()함수를 사용하는데, 내림차순이기 때문에 reverse=True를 인자로 건넨다. 또한 lambda를 key인자로 전달한다.

sorted 함수의 key 파라미터는 어떤 것을 기준으로 정렬할 것인지를 정해준다. 즉, key 값을 기준으로 비교를 하여 정렬을 하는 것이다.

아래에서 key는 기준으로서의 매개변수이다. item[0] 은 dicts.items()를 뽑아보면 (key, value) 튜플로 이루어진 리스트가 나오는데 이 튜플에서의 key를 의미한다.

sorted_dict = sorted(dict_a.items(), key = lambda item: item[0], reverse = True)
print(sorted_dict)

Key만을 뽑아서 내림차순 정렬

key만 출력할 경우에는 sorted()함수에 인자로 dictionary와 역순 정렬이라는 의미의 reverse=True를 넣어준다.

dict_a={'파이썬':1, '자바':2, '자바스크립트':3, '씨':4}
sorted_dict = sorted(dict_a,reverse=True)
print(sorted_dict)
#['파이썬', '자바스크립트', '자바', '씨']

Value를 기준으로 오름차순 정렬

value를 기준으로 오름차순 정렬한 sorted_dict을 출력하기 위해서 key로 lambda를 주고, 여기서의 item[1]은 value를 의미한다. item[1](value)을 기준으로 정렬을 하겠다는 의미이다.

dict_a={'파이썬':1, '자바':2, '자바스크립트':3, '씨':4}
sorted_dict = sorted(dict_a.items(), key= lambda item:item[1])
print(sorted_dict)
#[('씨', 4), ('자바스크립트', 3), ('자바', 2), ('파이썬', 1)]

Value를 기준으로 내림차순 정렬

value를 기준으로 오름차순 정렬한 sorted_dict을 출력하기 위해서 key로 lambda를 주고, 여기서의 item[1]은 value를 의미한다. item[1](value)을 기준으로 역순 정렬을 하겠다는 의미이다.

dict_a={'파이썬':1, '자바':2, '자바스크립트':3, '씨':4}
sorted_dict = sorted(dict_a.items(), key= lambda item:item[1], reverse=True)
print(sorted_dict)
#[('씨', 4), ('자바스크립트', 3), ('자바', 2), ('파이썬', 1)]

SWEA 1959

각 길이가 다른 두 개의 숫자열의 서로 마주보는 숫자들을 곱한 뒤 더했을 때 최댓값을 구하는 문제이다.

#testcase
T = int(input())

for i in range(0, T) : 
    #각 숫자열의 길이
    NM = input()

    A = input().split() 
    A = list(map(int, A)) # 배열의 모든 값을 정수형(int)로 변환한 list를 만듦
    B = input().split() 
    B = list(map(int, B))

    # B열의 길이가 더 짧을 경우, A와 B swab (이렇게 하면 항상 B열이 더 긺)
    if len(A) > len(B) :
        B, A = A, B

    arr = []

    for k in range(len(B)-len(A)+1) : 
        sum = 0
        for r in range(len(A)) : 
            sum += A[r] * B[r+k]
        arr.append(sum)  # 각 시도들을 배열에 넣고 그 중에서 제일 큰 값을 출력 

    print(f'#{i+1} {max(arr)}')

조건

단, 더 긴 쪽의 양끝을 벗어나서는 안 된다.

• 더 긴 쪽의 양끝을 벗어나서는 안 되기 때문에, 각 testcase마다 시도는 긴 열에서 짧은 열의 길이를 뺀 것보다 1번 더 가능하다.

  e.g.) len(A) = 5, len(B) = 3 --- > try_no = 3

• 그리고 각 testcase의 한 번의 시도마다 A열과 B열이 곱하는 횟수는 A열의 길이만큼 가능하다. 시도는 아래와 같이 시행된다.

  arr = [A1*B1 + A2*B2 + A3*B3, A1*B2 + A2*B3 + A3*B4, A1*B3 + A2*B4 + A3*B5 ]

• 위 arr의 값들 중에서 제일 큰 값을 찾는다.

여전히 memory error가 발생한다. 리스트나 변수를 굳이 만들지 않고 코드를 작성하는 법을 익혀야 될 것 같다.

리눅스 개발자인 리누스 토르발스이 개발한 것으로 분산 버전 관리 시스템이다. 다른 개발자들과 함께 업무를 할 때 예전에는 중앙집중식으로 버전 관리를 했으나 중앙집중식으로 관리를 하게 되면 서버의 데이터가 다 타버렸을 때, 복구할 수 없다는 단점이 있다. 이러한 단점을 방지하기 위해 만든 것이 git이다. 로컬에 원격 Repository의 모든 데이터를 복제하기 때문에 개발자의 수만큼 백업이 되어있다.

GitHub ? Gitlab ?

GitHub과 Gitlab은 git을 통해 이용하는 Cloud서비스

GitHub 장점

1. Microsoft사의 서비스이기 때문에 비교적 안정적임
2. 개인 이용 시 무료
3. Git저장소임에 동시에 개발 관련 정보를 공유할 수 있는 플랫폼

그런데도 회사에서 GitHub 말고 Gitlab을 사용하는 이유는?

1. 보안상의 이유
2. 비용상의 이유 - 기업으로 사용할 경우 GitHub이 요금이 더 비쌈
3. GitHub 이용 시 소스코드를 Microsoft사에 올리는 것으로 영업 비밀 유출 가능성 있다고 생각되어 꺼림

CLI(Command-Line Interface) <-> GUI(Graphic User Interface) CLI : 명령어를 통해 사용자와 컴퓨터가 상호작용을 하는 방식 ex)MacOS - terminal / Windows - 명령 프롬프트(.cmd) Why CLI?

• GUI는 CLI에 비하여 컴퓨터의 성능을 더 많이 소모함
• 많은 서버 / 개발 시스템이 CLI를 통한 조작 환경을 제공함

home : C: > user > 현재 로그인한 사용자

git bash: 쉘(Shell)이란 키보드로 입력한 명령어(Command)를 운영체제(OS)에 전달하여, 키보드로 입력한 명령어를 실행하게끔 하는 프로그램

• Markup vs Markdown Markdown - e.g) velog, notion에성 마크다운 형식으로 글을 작성하게 되어있음 마크다운을 활용하게 되면 텍스트와 코드(w/ highlight syntex)를 같이 작성할 수 있음

• README.md (md: markdown) 활용: 오픈소스의 공식문서 작성 / 개인 프로젝트 소개 문서 작성 / WIL(Weekly I Learned) 작성 / 블로그 작성 / 소프트웨어의 배포 방법 안내

왜 Typora ?

1. 실시간 마크다운 변환
2. 제공이미지 / 표 삽입

Repository

원격 Repository

Local Repository

• git init 명령어: local repository 생성 및 초기화

    (git을 사용하기 위해 가장 기본적으로 필요한 요소를 초기화)

git - 3가지 영역을 바탕으로 관리함

Working Directory Staging Area Repository

Staging Area를 거치는 이유???

Staging Area : commit으로 남기고 싶은, 특정 버전으로 관리하고 싶은 파일이 있는 곳 commit: Staging Area안의 파일 하나 하나를 기록하는 것이 아니라, Staging Area 자체를 새로운 버전으로 기록함

git 로컬에서 작업하기

• git init: local repository 생성 및 초기화

• git add 파일이름.확장자: 작업 디렉토리(working directory) 상의 변경 내용(삭제, 수정, 파일 생성 등... )을 버전으로 관리하고자, Staging Area에 추가하는 명령어
• git add . : 현재 Working Directory의 모든 변경사항을 Staging Area에 올리는 명령어
• git status: 현재 폴더의 git 상태를 확인하는 명령어
• git commit -m 메시지내용: '메시지 내용'을 커밋 메시지(수정 이유)로 남기면서 버전을 기록하는 명령어
• git log: 커밋한 기록을 확인하는 명령어
• git log --oneline : 커밋한 기록을 간단하게 한 줄로만 확인하는 명령어

git과 원격저장소 연결하기

• git remote add origin 원격레포지토리url: git과 원격 저장소 연결하는 명령어

• git remote -v: origin http://github.com/~~ 등록한 Remote Repository 정보 확인
• git push origin master: 연결된 원격 저장소(여기서 원격 저장소의 이름은 origin, 브랜치는 master 브랜치)에 로컬의 변경사항 업데이트 하기(master 브랜치에 업데이트)
• git push -u origin master:
  • git push
• git pull origin master : 원격 저장소의 변경 사항을 업데이트(원격 저장소로부터 받아와서 sync)
• git clone 원격레포지토리url : 원격 저장소를 로컬 저장소로 복제해온다

협업과 복구 및 백업

Remote Repo 생성 및 연결하기

원격 저장소에 Push하기 전에 반드시 최소 하나 이상의 Commit을 가져야한다.

GitHub

1. 기본 브랜치 이름 master로 변경하기
2. new Repo 생성 버튼 클릭 (원격 저장소 생성)
   1. 이름 설정
   2. 생성

Local

3. 새로운 디렉토리 생성

   1. mkdir
   2. cd 경로로 이동
   3. git init: Local Repository 생성
   4. git remote add origin 원격레포지토리url
      5. git remote: origin 이름으로 remote 추가된 것 확인하기
      6. touch README.md
         1. 내용 수정(Optional)

4. 버전 남기기(remote repository로 push하기 전에 반드시 commit해야 함)

   1. git add 파일명.확장자 / git add .
   2. git commit -m '커밋메시지'
      3. git push origin master

Branch

흐름의 분기 pointer는 하나의 커밋만 바라볼 수 있음 master은 일반적으로 상용 pointer

• git branch : branch 리스트를 확인하는 명령어
  • *이 붙은 branch가 HEAD가 바라보는 branch

• git branch branch이름 : 새로운 'branch이름'이름의 branch 생성하는 명령어
• git switch branch이름 : HEAD가 바라보는 branch를 변경하는 명령어
• git switch -c branch이름 : (-c : create ) 'branch이름'이름의 branch를 생성하고 pointer을 생성한 branch로 옮기는 명령어

3-way Merging

3-way Merging의 방법으로 머지를 하면 merge commit의 상태를 비교적 확실하게 확인할 수 있다.

3-way Merging의 순서

1. 내 브랜치 commit
2. 다른 사람의 브랜치 commit
3. 두 브랜치의 공통 조상이 되는 merge commit

3-way Merge 참고

Git Ignore

.gitignore : 저장소에 추가되면 안 되는 파일과 폴더 목록을 모아놓은 파일 git repository를 생성하자마자 .gitignore파일을 생성해야 함

참고 gitignore.io gitignore.io: 언어, OS 나 Framework, IDE 별로 저장소에 추가되면 안 되는 파일과 폴더 목록인 .gitignore 를 자동으로 생성해 주는 서비스

1. 개념 구조화하기: 개념을 명확히 알고, 그것을 구조화하기!

해당 개념과 하위 개념을 잘 묶어서 머릿속에 저장하는 것

1. 개념의 정의
2. 개념의 포함 관계
3. 두 개념의 차이점

2. 기본기 탄탄하게 쌓기

3. 동료 학습

상호작용을 기반으로 한 학습

친구에게 배운 개념 설명하기
친구 코드의 에러 함께 해결하기
모르는 내용 서로 질문&대답하면서 지식의 빈틈 채우기

프로그래밍

컴퓨터에게 일을 시키기 위해서 컴퓨터가 해야할 일을 순서대로 적어 놓은 프로그램을 만드는 행위

프로그램

특정 작업을 수행하는 일련의 명령어들의 모음

프로그래밍 언어

컴퓨터는 0과 1(2진법)로 이루어진 기계어로 소통 처음 컴퓨터가 발명될 때, 전기 신호로 전기가 들어왔는지(1) 안 들어왔는지(0) 확인하던 것을 지금까지 사용

하지만 기계어로 의사소통하는 것은 어려움이 있음 기계어의 대안으로 사람이 이해할 수 있는 새로운 언어 개발 -> 프로그래밍 언어 사람이 이해할 수 있는 문자로 구성 기본적인 규칙과 문법이 존재

소스 코드(Source Code)

프로그래밍 언어로 작성된 프로그램

번역기 (interpreter / compiler)

소스코드를 컴퓨터가 이해할 수 있는 기계어로 번역해줌 || e.g. Python - 인터프리터

Python

Python을 배워야하는 이유

1. 알고리즘 코딩 테스트에 유리

2. 구현 코딩 테스트에 유리

유용한 라이브러리 중에서 최소한만 사용하여 프로그램을 개발할 수 있어 가장 유리한 언어

3. 가장 인기가 많은 언어

프로그래밍 인기척도로 사용하는 PYPL index와 TIOBE index에서 2022년 6월 1위를 기록 AI개발, 데이터 분석, 웹 개발, 업무 자동화 등 Python 활용 분야가 늘어나고 많은 회사에서 도입 중

Python의 특징

1. Easy to Learn

타 프로그래밍 언어에 비해 문법이 간결하고, 유연함 (변수에 별도의 타입 저장이 필요치 않음) 비교적 쉽게 익히고, 프로그래밍 사고에 집중할 수 있음

2. 인터프리터 언어 (Interpreter)

Python은 기계어로 번환할 때, 통역하듯이 1줄씩 변환

3. 객체지향 프로그래밍(OOP, Object Oriented Programming)

현대 프로그래밍의 기본적인 설계 방법론으로 자리잡은 객체 지향 프로그램 Python은 객체 지향 언어로, 모든 것은 객체로 구현되어있음

Python의 개발 환경

IDE (Integrated Development Environment): 통합 개발 환경 개발에 필요한 다양한 기능들이 포함되어 있음 || e.g.) VS Code, XCode, Eclipse 등

Jupyter Notebook: 문법 학습을 위한 최적의 도구로, 소스코드와 함께 실행결과와 마크다운 저장 가능 open source 기반의 웹 플랫폼 및 어플리케이션 실시간으로 결과를 확인하며 학습할 수 있음

IDLE (Integrated Development and Learning Environment)

기초 문법

코드 작성법

: 코드를 어떻게 작성할지에 대한 가이드 라인 파이썬에서 제안하는 스타일 가이드 : [PEP8] (https://www.python.org/dev/peps/pep-0008) 각 회사/프로젝트마다 따로 스타일 가이드를 설정하기도 함 || e.g. [Google Style Guide] (https://google.github.io/styleguide/pyguide.html)

들여쓰기

Space Sensitive 문장을 구분할 때 중괄호 대신 들여쓰기(Indentation) 사용

• Tab으로 들여쓰거나 Spacebar4칸으로 들여쓰기 할 수 있음 (하나만 골라야함)
• PEP8에서는 공백(빈칸, Space)를 권장함

주석 Comment

-코드를 보다 이해하기 쉽게하여 분석 및 수정이 용이해짐 -*초기부터 주석을 다는 습관을 들일 것! * -잘 달린 주석은 어떤 정보보다 유용함 -코드의 내용을 잘 이해할 수 있도록 작성 -가독성을 저해할 정도로 무분별한 사용은 자제 -주석은 실행에 영향을 미치지 않고 프로그램의 속도를 느리게 하지 않으며 용량을 늘리지 않음

• 한줄 주석 주석으로 처리될 내용 앞에 #을 입력

• 여러 줄 주석 한줄 씩 #을 사용하거나, """ 혹은 ```으로 묶어서 표현할 수 있음

변수(Variable)

변수란?

데이터를 저장하기 위해서 사용 변수를 사용하면 복잡한 값들을 쉽게 사용할 수 있음(추상화)

• 코드의 가독성 증가
• 의미 단위로 작성 가능
• 코드 수정이 용이해짐

동일 변수에 다른 데이터를 언제든지 할당(저장)할 수 있음

변수의 할당

변수는 할당 연산자=을 통해 값을 할당(assignment)

americano_price = 2000
cookie_price = 1500

같은 값을 동시에 할당할 수 있음

americano_price = cookie_price = 2000

다른 값을 동시에 할당할 수 있음

americano_price, moka_price = 2000, 3000 

각 변수의 값을 바꿔서 저장하기

x = 10, y = 20일 때, 각 값을 바꿔서 저장하는 코드를 작성해보자

• 방법 1) 임시변수 temp 활용

  x, y = 10, 20
  

temp = x x = y y = temp print(x, y) #20, 10

- 방법 2) Pythonic한 방법!!
```python
x, y = 10, 20

y, x = x, y
print(x, y) #20, 10

식별자

변수 이름 규칙

• 식별자의 이름은 영문 알파벳, 언더 스코어_, 숫자로 구성
• 첫 글자에 숫자가 올 수 없음
• 길이 제한이 없고, 대소문자를 구별함
• 다음 키워드는 예약어reserved words로 변수 이름으로 사용할 수 없음

  import keyword
  print(keyword.kwlist)
  

#출력 결과 ['False', 'None', 'True', 'and', 'as', 'assert', 'async', 'await', 'break', 'class', 'continue', 'def', 'del', 'elif', 'else', 'except', 'finally', 'for', 'from', 'global', 'if', 'import', 'in', 'is', 'lambda', 'nonlocal', 'not', 'or', 'pass', 'raise', 'return', 'try', 'while', 'with', 'yield']

- 내장 함수나 모듈 등의 이름도 사용하지 않아야 함


## 연산자
### 산술 연산자(Arithmetic Operator)
기본적인 사칙연산 및 수식 계산
```python
+ : 덧셈
- : 뺄셈
* : 곱셈
/ : 나눗셈
% : 나머지
// : 몫
** : 거듭제곱

연산자 우선순위

괄호가 가장 먼저 계산되고, 그 다음에 곱하기와 나누기가 더하기와 빼기보다 먼저 계산됨

자료형

자료형(Datatype) 분류

프로그래밍에서는 다양한 종류와 값(data)를 쓸 수 있음 사용할 수 있는 데이터의 종류들을 자료형(Datatype)이라고 함

수치형(Numeric Type) - int(정수, integer) - float(부동소수점, 실수, floating point number) - complex(복소수, complex number) 문자열(String Type) 불린형(Boolean Type) None

수치형

정수형 (int)

0, 100, -200 같은 정수를 표현하는 자료형 일반적인 수학 연산 가능

진수 표현

- 2진수 binary : 0b
- 8진수 octal : 0o
- 16진수 hexadecimal : 0x

실수형(float)

유리수와 무리수를 포함하는 '실수'를 다루는 자료형 0.1, 100.0, -0.001 등

실수 연산시 주의할 점(부동 소수점)

실수 값을 처리할 때 의도치 않은 값이 나올 수 있음

부동 소수점

• 컴퓨터는 2진수를, 사람은 10진법을 사용
• 이 때 10진수 0.1은 2진수로 표현하면 0.00011001100110011.. 같이 무한으로 반복됨
• 무한대 숫자를 그대로 저장할 수 없어서 사람이 사용하는 10진법의 근사값만 표시
• 0.1의 경우, 0.1에 가깝지만 정확히 동일하지 않음
• 이런 과정에서 예쌍치 못한 결과가 나타남(Floating Point Rouding Error)

실수 연산시 주의할 점(부동 소수점) - 해결책

값을 비교하는 과정에서 정수가 아닌 실수라면 주의할 것 매우 작은 수보다 작은지를 확인하거나 math 모듈 활용

a = 0.1
b = 1.2 - 1.1 #0.9999999999999987
# 매우 작은 수와 비교
print(abs(a-b) <= 1e-10)
# math 모듈 활용
import math
print(math.isclose(a,b)) #True

문자열 자료형 (String Type)

모든 문자는 str 타입 문자열은 작은따옴표 '나 큰따옴표"를 활용하여 표기

Escape Sequence

역슬래시(backslash) 뒤에 특정 문자가 와서 특수한 기능을 하는 문자 조합

\n : 줄바꿈
\t : 탭
\r : 캐리지 리턴(carriage return) - 커서를 맨 앞으로 옮김
\o : Null
\\ : \
\' : 단일인용부호(')
\" : 이중인용부호(")

문자열 연산

• 덧셈 (String Concatenation) 파이썬에서 문자열 덧셈은 문자열을 연결함

• 곱셉 문자열"Python"*3 ?

  "Python"*3  # PythonPythonPython

  String Interpolation(문자열을 변수를 활용하여 만드는 법)

• f-string: python 3.6+

  name = 'Kim'
  score = 4.5
  

print(f'Hello, {name}! Your score is {score}') #Hello, Kim! Your score is 4.5

- % - formatting
```python
name = 'Kim'
score = 4.5

print('Hello, %s' % name) #Hello, Kim
print('My score is %d' % score) #My score is 4.5
print('My score is %f' % score) #My score is 4.500000

• str.format()

  name = 'Kim'
  score = 4.5
  

print('Hello, {}! Your score is {}'.format(name, score)) #Hello, Kim! Your score is 4.5

## None
- 파이썬 자료형 중 하나
- `값이 없음`을 표현하기 위한 타입
- 일반적으로 반환값이 없는 함수에서 사용함

## Boolean형 - True, False
- 논리자료형으로 참과 거짓을 표현하는 자료형
- 바교/논리 연산에서 활용됨
```python
< : 미만
<= : 이하
> : 초과
>= : 이상
== : 같음
!= : 같지 않음
is : 객체 아이덴티티(OOP)
is not : 객체 아이덴티티가 아님

비교 연산자

• 수학에서의 등호/부등호와 동일한 개념
• 주로 조건문에서 사용되며 값을 비교할 때 사용

• True / False 값을 return함

논리 연산자

여러 가지 조건이 있을 때 모든 조건을 만족하거나 (and), 여러 조건 중 하나만 만족해도 될 때 (or) 특정 코드를 실행하고 싶을 때 사용

A and B : A와 B 모두 True이면, True
A or B : A와 B 모두 False이면, False
    A와 B 중 하나라도 True이면, True
Not : True를 False로, False를 True로 

논리 연산자 주의할 점 / not 연산자

• Falsy : False는 아니지만 False로 취급되는 다양한 값 0, 0.0, (), {}, [], None, ""(빈 문자열)
• 논리 연산자도 우선순위가 존재함 not, and, or 순으로 우선순위가 높음

논리 연산자의 단축 평가

• 결과가 확실한 경우, 두번째 값은 확인하지 않고 첫번째 값 반환
• and 연산자에서 첫번째 값이 False인 경우, 무조건 False --> 첫번째 값 return
• or 연산자에서 첫번째 값이 True인 경우, 무조건 True --> 첫번째 값 return
• 0은 False, 1은 True

print(3 and 5) #5, 첫번째 값 True, 두번째 값도 True, and는 모든 값 확인해야하기 때문에 두번째 값까지 확인 후 두번째 값 출력
print(3 and 0) #0 둘 중 하나의 값이 False이므로 0 출력
print(0 and 3) #0 둘 중 하나의 값이 False이므로 0 출력 ==> 당연히 False 첫번째 값 출력
print(0 and 0) #0 둘 중 두 값이 모두 False이므로 0 출력

print(5 or 3) #5 둘 중 하나의 값이 True이면 True ==> 두번째 값 확인하지 않고 첫번째 값 출력
print(3 or 0) #3 둘 중 하나의 값이 True이면 True ==> 두번째 값 확인하지 않고 첫번째 값 출력
print(0 or 3) #3 둘 중 하나의 값이 True이면 True ==> 첫번재 값 False, 두번째 값까지 확인 후 두번째 값 출력
print(0 or 0) #0 둘 중 두 값이 모두 False이므로 0 출력

컨테이너(Container)

컨테이너

여러 개의 값(데이터)를 담을 수 있는 것(객체)으로, 서로 다른 자료형을 저장할 수 있음 || e.g. 시퀀스형 (List, Tuple, Range), 비시퀀스형 (Set, Dictionary) || e.g. 가변형 (List, Set, Dictionary), 불변형 (Tuple, Range)

컨테이너의 분류

• 순서가 있는 Ordered 데이터 vs 순서가 없는 Unordered 데이터
• 순서가 있다 != 정렬되어 있다

List

여러 개의 값을 순서가 있는 구조로 저장하고 싶을 때 사용 가변 자료형(mutable)

List의 생성과 접근

대괄호[] 혹은 list()를 통해 생성 Python에서는 어떤 자료형도 저장할 수 있으며, 리스트 안에 리스트도 넣을 수 있음 순서가 있는 시퀀스로 index를 통해 접근 가능 list[i] 로 값에 접근할 수 있음

Tuple

여러 개의 값을 순서가 있는 구조로 저장하고 싶을 때 사용 리스트와의 차이점 : 생성 후, 담고 있는 값 변경 불가 (불가변 자료형, immutable) 소괄호 형태()로 사용

Tuple의 생성과 접근

소괄호()혹은 tuple()을 통해 생성 수정불가능한 시퀀스로 index로 접근 가능 tuple[i]로 값에 접근할 수 있음

Tuple 생성 주의사항

• 단일 항목의 경우, 하나의 항목으로 구성된 튜플은 생성 시 갑 뒤에 쉼표를 붙여야 함

  tuple_a = (1,) 
  tuple_b = 1,

• 복수 항목의 경우, 마지막 항목에 붙은 쉼표는 없어도 되지만, 넣는 것을 권장(Trailing Comma)

  tuple_c = (1, 2, 3,)
  tuple_d = (1, 2, 3)
  tuple_e = 1, 2, 3,
  tuple_f = 1, 2, 3

Tuple 대입(Tuple Assignment)

우변의 값을 좌변의 변수에 한 번에 할당하는 과정 일반적으로 파이썬 내부에서 활용

x, y = 1, 2
print(x, y) # 1 2

#실제로 튜플로 처리
x, y = (1, 2)
print(x, y) # 1 2

Range

숫자의 시퀀스를 나타내기 위해 사용 주로 반복문과 함께 사용됨

print(range(o, 4)) #0, 1, 2, 3

Range 사용 방법

• 기본형 : range(n) : 0 ~ n-1의 숫자의 시퀀스
• 범위 지정 : range(n, m) : n ~ m-1의 숫자의 시퀀스
• 범위 및 스텝 지정 : range(n, m, s) : n ~ m-1까지 s만큼 증가시키며 숫자의 시퀀스

범위 및 스텝을 지정하여 역순으로 시퀀스를 만들 수 있음

range(6, 1, -1) #[6, 5, 4, 3, 2, 1]
range(6, 1, -2) #[6, 4, 2]
range(6, 1, 1) #[]

슬라이싱 연산자

Sequence를 특정 단위로 슬라이싱

인덱스와 콜론을 사용하여 문자열의 특정 부분만 잘라낼 수 있음 slicing할 때, 콜론을 기준으로 앞 인덱스에 해당하는 문자는 포함하고 뒤 인덱스에 해당하는 문자는 미포함

print([1, 2, 3, 5][1:4]) #[2, 3, 5]
print((1, 2, 3)[:2]) #(1, 2)
print(range(10)[5:8]) #range(5, 8)
print('abcd'[2:4]) # cd

Sequence를 k간격으로 슬라이싱

print([1, 2, 3, 5][0:4:2]) #[1, 3]
print((1, 2, 3, 5)[0:4:2]) #(1, 3)
print(range(10)[1:5:3]) #range(1, 5, 3)
print('abcdefg'[1:3:2]) # b

Set

= 집합

• 중복되는 요소가 없이, 순서에 상관없는 데이터들의 묶음 데이터의 중복을 허용하지 않음 -> 중복되는 원소가 있다면 하나만 저장 순서가 없기 때문에 index를 이용한 접근 불가능

• 집합 연산이 가능 - 합집합, 교집합, 차집합 (여집합을 표현하는 연산자는 별도로 X)

• 가변 자료형(mutable)

Set 생성

중괄호{} 혹은 set()을 통해 생성 빈 Set을 만들기 위해서는 반드시 set()을 활용하여야 함

빈 중괄호는 type이 Dictionary임
black = {}
blank_set = set()

순서가 없어 별도의 값에 접근할 수 없음

Set 사용하기

• set으로 다른 컨테이너에서 중복된 값을 쉽게 제거할 수 있음
• • 단, 순서가 무시되므로 순서가 중요할 경우 사용하면 안 됨**

my_list = ['서울', '서울', '서울', '광주', '거제', '광주', '부울경']
print(len(set(my_list))) #4

Set 연산자

| : 합집합
& : 교집합
- : 차집합
^ : 대칭차집합 (합집합 - 교집합)
여집합은 없음

Dictionary

키-값(Key-Value) 쌍으로 이루어진 자료형 (3.7+ ordered, 이하 버전은 unordered)

• Dictionary의 Key key는 변경불가능한 데이터만 활용 가능(immutable) String, Integer, Float, Boolean, Tuple, Range
• 각 Key의 Value(값) 어떤 형태이든 관계없음

Dictionary 생성

중괄호{} 혹은 dict()을 통해 생성 key를 통해 value에 접근

dict_a = {'a':'apple', 'b':'banana', 'list':[1,2,3]}
print(dict_a['a']) #apple

dict_b = dict(a = 'apple', b = 'banana', list = [1,2,3])

형변환

파이썬에서 데이터 형태는 서로 변환할 수 있음

• 암시적 형 변환(Implicit) 사용자가 의도하지 않고, 파이썬 내부적으로 자료형을 변환하는 경우

  • bool (True = 1, False = 0)

  • numeric type (int, float)

    print(True + 3) # 4 print(3 + 5.0) # 8.0

• 명시적 형 변환(Explicit)

• 사용자(개발자)* 가 특정 함수를 활용하여 의도적으로 자료형을 변환하는 경우

  • int
    • str, float => int 단, 형식에 맞는 문자열만 정수로 변환 가능 문자열은 암시적 타입 변환이 되지 않음 명시적 타입 변환이 필요함

• float

  • str(참고), int => float 단, 형식에 맞는 문자열만 float으로 변환 가능 정수 형식인 경우에도 float으로 타입 변환 float 형식이 아닌 경우, 타입 변환할 수 없음

• str

  • int, float, list, tuple, dict => str

참고) input() : 사용자로부터 데이터를 입력 받음 입력받은 데이터는 string으로 저장됨

파이썬 프로그램 구성 단위

프로그램 구성 단위

식별자(identifier)

변수, 함수, 클래스 등 프로그램이 실행되는 동안 다양한 값을 가질 수 있는 이름 예약어(reserved words)

리터럴(literla)

읽혀지는 대로 쓰여있는 값 그 자체

표현식(expression)

새로운 데이터 값을 생성하거나 계산하는 코드 조각

문장(statement)

특정한 작업을 수행하는 코드 전체 파이썬이 실행가능한 최소한의 코드 단위

*모든 표현식expression은 문장statement이다. *

SWEA1989 - 초심자의 회문 검사

T = int(input())
j = 0
sign = True
while j < T :
    word = input()
    word = word.replace(" ", "")
    arr = list(word)
    arr1 = []
    for i in range(len(arr)) : 
        arr1.insert(0, arr[i])

    for i in range(len(arr)) :
        if arr[i] == arr1[i] :
            sign = True
        else :
            sign = False
            break
    if sign == True :
        print(f'#{j+1} 1')
    else : 
        print(f'#{j+1} 0')
    j = j + 1

다른 사람의 문제 풀이를 보니

temp = '' 
for i in range( len(word)-1, -1, -1) :
    temp += word[i]

이런식으로 각 단어의 i번째 단어로 자를 수 있는 것 같다 . range (n, m, p) 에서는 n번째부터 m번째 전까지 갭을 p만큼 두고 for문을 돌리는 것이다. 위에서는 word의 길이-1번째 즉 맨 마지막 글자부터 시작하여 -1미만, 즉 0번째 글자까지 for문을 돌 것이며 gap의 값이 -1이므로 for문을 돌릴 때 역순으로 돌리게 되는 것이다.

#testcase
T = int(input())

for i in range (0, T) :
    arr = []
    #number of alphabet 
    num = int(input())

    for j in range (0, num) : 
        temp = input().split()
        arr.append(temp[0])
        arr.append(temp[1])
    temp = ""
    for j in range(len(arr)) : # 0, 1, 2
        if j % 2 != 1 : # 짝수번째 배열값일 때 
            print(int(arr[j+1]))
            for k in range(int(arr[j+1])) :
                temp = temp + arr[j]

    print(f'#{i+1}')
    for j in range(0, len(temp)//10+1) : 
        print(temp[j*10 : (j*10)+10])

VSCODE로 예제를 돌려봤을 때는 문제가 풀리지만 SWEA에서 돌리면 계속 아래와 같은 오류가 발생했다.

(Runtime error)
Error Message:
Memory error occured, (e.g. segmentation error, memory limit Exceed, stack overflow,... etc)

아직 문제푸는 방법을 잘 모르는 것인지 메모리를 너무 잡아먹는가보다ㅠㅠ 그 생각을 하면서 문제를 풀어야될 것 같다! 문자*int를 하면 문자가 int만큼 반복되어 출력된다는 것을 몰랐어서 괜히 어렵게 풀었던 것 같다. python 문법에 익숙해져야겠다. !

#testcase
T = int(input())

for i in range (0, T) :
    arr = []
    #number of alphabet 
    num = int(input())

    for j in range (0, num) : 
        temp = input().split()
        arr.append(temp[0])
        arr.append(temp[1])
    temp = ""
    for j in range(len(arr)) :
        if j % 2 == 0 : 
            temp = temp + arr[j]*int(arr[j+1])

    print(f'#{i+1}')
    for j in range(0, len(temp)//10+1) : 
        print(temp[j*10 : (j*10)+10])

성공! 쿡

상근이는 요즘 설탕공장에서 설탕을 배달하고 있다. 상근이는 지금 사탕가게에 설탕을 정확하게 N킬로그램을 배달해야 한다. 설탕공장에서 만드는 설탕은 봉지에 담겨져 있다. 봉지는 3킬로그램 봉지와 5킬로그램 봉지가 있다.

상근이는 귀찮기 때문에, 최대한 적은 봉지를 들고 가려고 한다. 예를 들어, 18킬로그램 설탕을 배달해야 할 때, 3킬로그램 봉지 6개를 가져가도 되지만, 5킬로그램 3개와 3킬로그램 1개를 배달하면, 더 적은 개수의 봉지를 배달할 수 있다.

상근이가 설탕을 정확하게 N킬로그램 배달해야 할 때, 봉지 몇 개를 가져가면 되는지 그 수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 N이 주어진다. (3 ≤ N ≤ 5000)

출력

상근이가 배달하는 봉지의 최소 개수를 출력한다. 만약, 정확하게 N킬로그램을 만들 수 없다면 -1을 출력한다.

let n = require('fs').readFileSync('/dev/stdin');
let result = 0;

while(true){
  if (n<0) {
    console.log (-1);
    break;
  }
  if (n%5 === 0) {
    result = result + n/5;
    console.log(result);
    break;

  } else {
    n = n - 3;
    result++;
  }
}

문제풀이

처음에는 3의 배수로 끝날 때, 5의 배수로 끝날 때 나눠서 해결하고, 나머지 경우를 else문으로 해결하려고 했다. 그렇게 했더니 경우를 일일이 나눠서 확인해보아야 했기 때문에 너무 코드가 길어지고 복잡해졌다. 숫자가 3과 5의 공배수라면 5사이즈의 가방에 넣는 경우가 더 적은 가방의 수를 return하기 때문에 먼저 5의 배수인지 확인하고 아니라면 3씩 차감(3사이즈의 가방에 넣기) 가방의 개수를 하나씩 늘렸다. 그런 방식으로 3씩 감하다가 3의 배수도 아니고 5의 배수도 아니어서 음수가 되는 경우에는 '-1'을 return 하게 계산하였다.

리액트는 페이스북에서 개발하고 관리하는** 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리**이다. 왜 프론트 개발을 할 때 리액트를 사용하게 되었는지에 대한 이유 및 장점, 단점에 대해서 정리해보려고 한다.

가상 DOM을 이용한 성능 향상

리액트는 가상 돔(virtual dom)으로 UI를 빠르게 업데이트 해주고, 메모리에 가상돔을 올려놓고 이전과 이후를 비교하여 변경될 UI의 최소 집합을 계산해준다. 가상 DOM은 가상 트리 형태의 자료구조에 실제 DOM 트리가 매핑된 형태로 동작한다. 매 변경시마다 실제 DOM트리를 변경하게 될 경우, 매번 DOM 전체를 직접 접근하여 변화를 주면 html, css, js파일 전체를 다시 리랜더링하기 때문에 성능이 매우 떨어진다. React에서는 데이터가 변경되면 리액트는 가상 DOM를 변경한다. 그리고 이전의 가상 DOM과 비교해서 변경된 부분을 체크하고 변경된 부분만 실제 DOM에 적용하기 때문에 real DOM을 매번 업데이트 하는 것에 비하여 성능을 향상시킬 수 있다.

단방향 데이터 바인딩

앵귤러나 뷰에서 사용하는 MVC패턴은 Model에 데이터를 정의해 두고, Controller를 이용해 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터를 View에 출력되면서 사용자에게 전달하는 방식이다. 하지만 위 패턴을 이용하게 되면, 양방향 데이터 바인딩으로 Application의 규모가 커질수록 데이터의 흐름이 점점 복잡해지게 된다. 또한 MVC 패턴은 데이터의 변경 사항을 신속하게 전파하기가 어렵다.

하지만 리액트의 경우, FLUX구조의 단방향 데이터 바인딩 흐름을 이용한다. Action-Dispatcher-Store-View의 구조로 데이터가 흐름으로써 양방향 데이터 바인딩의 문제를 해결할 수 있다. 여기 store은 MVC의 model과 비슷하지만, 여러 데이터 객체들을 저장할 수 있다. 단방향 데이터 바인딩의 경우, 데이터가 한 방향으로 흐르기 때문에 디버깅이 용이하고 예측 가능성이 높아 코드가 더 안정적이다.

컴포넌트 단위 작성

리액트에서는 화면을 Component단위로 나눠 독립적으로 관리할 수 있다. 버튼이면 버튼, 인풋이면 인풋 각각 나눠서 관리하기 때문에, 나중에 같은 기능이 다른 페이지에서 필요할 경우 가져다 사용하기만 하면 되어서, 재사용성이 높다. 또한 컴포넌트 별로 구성하기 때문에 가독성이 매우 높고 간단하여 유지보수하기가 쉽다.

View에 집중

다른 프레임워크들과 달리 React는 MVC(Model-View-Controller)패턴으로 구성되어 있지 않고 View만 제공한다. MVC패턴에 메일 필요없이 다른 필요한 부분들이 있다면 별도 기능을 제공하는 라이브러리를 같이 사용하면 된다.

오픈소스 프로젝트

누구나 코드를 볼 수 있고 수정 또는 새로운 기능을 제안할 수 있다.

큰 생태계

페이스북의 지원으로 계속적으로 신 기능이 나오고, 유지보수가 원활히 시행된다.

단점

VIEW에 집중

뷰에 집중하기 때문에 자질구레한 기능들이 없어 간단하지만, 반대로 없는 기능들이 많아 VIEW 이외의 기능은 써드파티 라이브러리(Third party library)를 이용하거나 직접 구현해야한다는 단점이 있다.

IE8이하는 지원하지 않음

하지만 이제 IE 자체가 지원 종료되어 이 부분은 걱정을 하지 않아도 될 것이다.

참고 블로그

6주간의 프로젝트가 드디어 끝이 났다. 말이 6주지 실질적으로는 4주반? 5주에 가까웠던 것 같다.
일단 어마어마한 뷰의 양에 기가 눌린 채로 시작했지만 어찌어찌 완성을 하게 되었다. 여러모로 부족했던 나로서는 팀원들에게 많이 배우면서 작업을 진행해 나갔던 것 같다. 끝나고 나서보니 성능적으로 부족한 것이 많아 보인다. 차차 포트폴리오 및 이력서 작업을 하면서 성능적으로 어떻게 하면 개선할 수 있을까 고민해보려고 한다. (이미지 down-sizing, 데이터 구조 변경 등 )

CHOROK 초록 : _Chorok은 식물 집사들을 위한 일정관리 및 커뮤니티 서비스_입니다. 나만의 식물을 등록하고, 매일매일 내 식물만을 위한 작업일정을 관리해보세요!

발표자료 영상

주요 기능

• 일정관리
  • 내 식물별 투두 생성
  • 캘린더 탭을 통한 기록 일람
• 식물도감
  • 식물 타입별 필터링
  • 원하는 키워드로 식물 검색
• 식물 추천
  • 레이블링 테스트를 통한 사용자 니즈에 알맞는 식물 추천
• 커뮤니티
  • 플랜테리어 공유 / 질문 등

내가 담당했던 부분

• 회원가입 및 이메일 인증, 로그인 (소셜 로그인 포함 ), 비밀번호 재설정 등 각종 회원 관련 뷰 및 기능 구현

• 초록톡 페이지 게시글 CRUD와 댓글 CRUD

  • +) 필터를 통한 게시글 분류

• 사용자 맞춤 식물 추천

• 마이페이지 조회

  • 나의 사진, 스크랩한 사진 조회
  • 나의 식물 조회 및 수정, 스크랩한 식물 조회
  • 나의 글, 스크랩한 글 등 조회

• Progressive Web Application 적용

CRUD를 중심적으로 다루면서 데이터를 백으로부터 받아올 때의 흐름을 이해하는 데에 도움이 되었다. 전에는 좀 더 vague하게 알았던 전역 상태 관리의 부분에 대해서도 더 자세히 알게 되었다. 하지만 새로운 기술보다는 CRUD를 많이 다룬 것이 조금 아쉽기는 하다.

다른 팀의 사람들과 이야기를 더 나누어 보니 아직 성능적으로 부족한 부분들이 많은 것 같았다. 추후에 취업 준비를 하면서 더욱 효율적이고 사용자가 이용했을 때 편리할 서비스로 수정과 보완을 해나갈 예정이다.

아래 예시는 Eric Meyer’s reset css라고 하는 reset CSS 방법이다.

/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

reset CSS를 해주고 나면 브라우저에서 다른 설정값 없이 내가 원하는 방향으로 CSS를 조정하기가 용이해질 것이다.