버블 정렬

정렬 알고리즘, 정렬되지 않은 배열이 주어졌을 때 어떻게 오름차순으로 정렬? 순서>

1. 베열 내 연속되 두항목 가리켜, 첫 번째 항목과 두 번쨰 항목 비교
2. 두 항목 비교해 왼쪽이 오른쪽 값보다 크면 두 항목 교환하고 순서 올바르면 그대로
3. 포인를 오른쪽으로 한 셀씩 옮김
4. 배열 끝까지 또는 이미 정렬된 값까지 1-3단계 반복해 배열 첫 패스스루 끝내기
5. 두 포인터 다시 배열 처음 두 값으로 옮겨 1-4 단계 다시 실행해 교환 일어나지 않으면 정렬되어 문제 해결

• 버블 정렬이라 부르는 까닭은 각 패스스루마다 정렬되지 않은 값 중 가장 큰 값, 즉 버블이 올바른 위치로 가기 때문(즉 한 번 패스스루를 수행하면 마지막 항목은 비교하지 않아도 됌)

  버블 정렬 적용

function bububbleSort(list){
  let unsortedUntilIdx = list.length - 1;
  let isSorted = false;

  while(!isSorted){
    isSorted = true;
    for(let i = 0; i < list.length; i ++){
        if(list[i] > list[i+1]){
          [list[i], list[i+1]] = [list[i+1], list[i]];
          isSorted = false;
          unsortedUntilIdx -= -1;
        }    
      }
  }
  return list
}

bububbleSort([4,2,7,1,3])

• unsortedUntilIdx, 정렬되지 않은 배열 가장 오른쪽 인덱스 기록 알고리즘 시작 시 전체 배열 정렬되지 않은 상태이므로 배열 마지막 인덱스로 변수 초기화
• isSorted, 배열 정렬 여부 기록하는 변수로 처음엔 정렬되지 않으므로 false
• 배열 정열 될때까지 while 루프 시작해 루프 한 번 실행이 배열의 한 패스스루
• 각 패스스루 안에 교환 일어나기 전까지 배열 정렬되어 있다 가정해 값 교환 시 변수 다시 false로 바꿈 > 전체 패스스루 통과 시 isSorted가 true로 남아 배열 완전 정렬된 상태임
• while 루프 내 for 루프 시작해 루프 안 배열 내 모든 값 쌍 가리켜 변수 i를 포인터로 배열 첫 인덱스부터 정렬되지 않은 인덱스까지 수행
• for 루프 내 모든 인접 값 쌍 비교해 순서 뒤바뀌어 있으면 교환하고 교환되면 isSorted를 false로 바꿈
• 각 패스스루 끝나면 오른쪽 올려준 버블 값 올바른 위치에 있으므로 기존 가리키던 unsortedUntilIdx 인덱스가 정렬된 상태니 값을 1 감소
• isSorted가 true 되면 배열 완전 정렬되어 while 문 종료 후 정렬된 배열 반환

버블 정렬 효율성

• 두 가지 중요한 단계 포함 1> 비교 2> 교환
• 버블 정렬은 원소 수 증가할수록 단계수 기하급수적으로 늘어남
• 값이 N인 경우 N2 단계, 이차 시간이 소요

이차 문제

• 느린 알고리즘, N2 빠른 알고리즘 N으로 대체
• 보통 배열 n개 값 있을 때 함수 n2번 빅 수행하는데 순회마다 안쪽 루프는 n 번 다시 순회해야하기 때문임

선형 해결법

• 데이터 원소 n개 있을 때 비교 n번만 하되 배열에 삽입을 하여 비교하는 제약이 있긴함
• 속도 향상은 보장되었으나 메모리 소비 하는 부분 고려

마무리

• 빅오 표기법 명확하게 이해 시 느린 코드 식별해 두 경쟁 알고리즘 중 빠른 알고리즘 고를 수 있음

연습문제

다음 함수 배열 가장 큰 수 하나 찾아내지만 효율성 n2 이를 n이 되도록 함수 다시 작성 O(N)2 코드

function greatestNum(arr){
  for(let i=0; i<arr.length; i++){
    let isValGreatest = true
      for(let j=0; j<arr.length; j++){
          if(arr[j]>arr[i]) isValGreatest = false
      }
      if(isValGreatest) return arr[i]

  }
}

greatestNum([1,23,4,35,3,23,5])

O(N) 코드

function upgradeGreatestNum(arr){
  let greatestNum = arr[0]
  for(let i=1; i<arr.length; i++){
     greatestNum = greatestNum < arr[i] ? arr[i] : greatestNum
  }
  return greatestNum
}

upgradeGreatestNum([1,23,4,35,3,26,52,123,3,4,2,3,52,2,35])

null은 숫자로 표현할 시 0 타입으로 표현시 Object undefined는 Nan, 타입으로 표현시 undefined는

동등연산자 > 타입캐스팅 발생 엄격한 연산자

동등 비교 연산자 일치 비교 연산자

형변환 ex Number, valueAsNumber같이 해서 완전하게 비교하기

eslint에 eqeqeq를 강제할 수 있는 방법도 있음

느슨한 검사 > 암묵적 형변환 이것보단 명시적 형변환을 하자 사용자 > 명시적 형변환 타입 JS > 암묵적 형변환 타입

isNaN 느슨한 검사 Number.isNaN 엄격한 검사

경계를 다룰 시 min max

1. 최소값과 최대값을 다룬다
2. 최소값과 최대값 포함 여부를 결정해야한다 (이상 - 초과 / 이하-미만)
3. 혹은 네이밍에 최소값과 최대값 포함 여부를 표현

매개변수 순서가 경계

호출하는 함수 네이밍과 인자 순서 연관성 고려

1. 매개변수 2개 넘지 않도록 함수 만들기
2. arguments, rest param
3. 랩핑하는 함수
4. 매개변수 객체로 남아 넘기기

들어가기

• 타입스크립트 무엇, 왜 사용하는지
• 학습 때 도움되는 자료

1.1. 타입스크립트 공부 시 알아야할 한 가지

• 타입스크립트는 타입을 위한 구문이 있는 자바스크립트
• 타입을 위한 구문은 변수나 매개변수, 반환값 같은 값에 타입을 부여
  • 타입은 데이터 형태 의미하며 데이터 형태란 문자열, 숫자, 객체 등 자료형
• 타입스크립트, 데이터 타입 명시적 표시 할 수 있게된 자바스크립트

1.2 공식문서와 플레이그라운드

• 타입스크립트 공부 시 공식 사이트 참고

1.3 왜 타입 필요

• 타입스크립트 목표는 자바스크립트 프로그램 정적 타입 검사자, 코드 실행 전에 실행(정적)하고 프로그램 타입이 정확한지 확인한는 도구(타입검사)
• 타입스크립트는 타입관련 오류와 오타를 코드 실행 전 잡아주므로 실제 코드 실행 시 오류 나는 경우를 줄임
• 자바스크립트 오류는 3가지로, 문법에러, 타입에러, 그 외 기타 에러
• 타입스크립트는 타입에러를 사전에 방지하는 데 탁월

타입스크립트가 타입에러를 잡는 예 2가지 1> 사소한 오타 있는 경우 2> 타입 관련 오류 있는 경우

• 타입에러를 사전에 차단하면 서비스 안정성 높아짐
• 타입스크립트는 자바스크립트 코드에 대한 설명서 역할

2. 기본 문법 익히기

2.1 변수, 매개변수, 반환값에 타입 붙이기

• 타입스크립트 사용 시 어떤 값에 타입 부여할지 알고 있어야 함
• 변수와 함수의 매개변수, 반환값에 타입 부여하고 이를 타이핑이라 표현

2.2 타입 추론 적극 활용

타입 추론 원칙

• 타입스크립트 어느 정도 변수와 반환값의 타입을 스스로 추론, 다만 매개변수에는 타입을 부여해야 함
• 타입스크립트가 타입 제대로 추론하면 그대로 쓰고, 틀리게 추론할 때만 올바른 타입을 표기

첫째, 타입 표기 시 hello,123,false 같은 정확한 값 입력할 수 있으며 이를 리터럴 타입이라 부름 둘째, 타입 표기 시 더 넓은 타입으로 표기해도 문제 없음 참고로 let, const 다르게 타입 추론하는데 let은 타입 넒게 추론하여 타입 넓히기를 함 null, undefined는 let 변수에 대입 시 any 추론

2.3 값 자체가 타입인 리터럴 타입 있음

• 주로 const에 사용 let은 보통 자료형 타입

  const func : (a:number, b:string) => string = (a,b) => a+b;

• 값이 변하지 않는 것이 확실하다면 as const라는 특별 접미사 붙이면 readonly가 됌

2.4 배열 말고 튜플

• 타입[] 또는 Array<타입> 타이핑, <> 제네릭이라 부름
• 배열 추론 시 요소들 타입 토대로 추론 하는데 빈 배열은 any[]로 추론되므로 주의
• 타입스크립트 배열엔 자유도가 제한, 배열엔 대부분 같은 타입 값들어가나 다른 타입 값 들어가는 경우 보통 배열 길이 짧거나 고정
• 각 요소 자리에 타입 고정된 배열 특별히 튜플이라 부르는데 튜플 타이핑은 다음과 같음

  const tuple:readonly [number, boolean, string] = [1,false,'h1'];
  tuple[0] = 3;
  tuple[2] = 5;
  tuple[3] = 'no'
  tuple.push('yes')
  const strNumBools: [string, number, ...boolean[]] = ['hi', 1, false, true];
  const [a, ...rest] = ['hi', 1, false, true];
  // 명시적 타이핑
  const [b, ...rest2] : [string, ...number[]] = ['hi', 1,2,3];
  const tuple2: [number, boolean?, string?] = [1,false,'h1'];

• []안에 정확한 타입 하나씩 입력하고 표시하지 않으면 undefined 타입 됌
• push, pop, unshift, shift 메서드 통해 배열 요소 추가 및 제거 막지 않는데 push 까지 막으려면 readonly 수식어 붙이면 됌
• ...타입[] 표기 통해 특정 타입 연달아 나올 수 있음을 알려 ...은 전개 문법으로 특정 자리에 특정 타입 연달아 나옴 표시하며 타입 뿐만 아니라 전개 문법 사용해도 타입스크립트 타입 추론
• 구조분해 할당에선 나머지 속성 문법 사용가능해 역시 타입스크립트 타입 추론
• 타입 뒤에 ? 붙어 있음 옵셔널 수식어로 해당 자리에 값 있어도 그만 없어도 그만 의미하며 undefined 들어갈 수 있음

2.5 타입으로 쓸 수 있는 것 구분

• 타입 배우다 보면 값과 타입 헷갈리는데 값은 일반적으로 자바스크립트에서 사용하는 값 가리키고 타입은 타입을 위한 구문 사용하는 타입 가리킴
• 결론, 타입을 값으로 사용 못하는데 타입으로 사용할 수 있는 값과 타입으로 사용할 수 없는 값만 구분
• 대부분 리터럴 값 타입으로 사용, 반대로 변수 이름 타입을 사용 못하지만 Date, Math, Error, String, Object, Number, Boolean 같은 내장 객체는 타입으로 사용 가능

  const date:Date = new Date();
  function add(x: number, y: number): number { return x + y }
  const add2  :typeof add = (x:number, y:number) => x+y

• String, Object, Number, Boolean, Symbol 타입 사용하는 것 권장하지 않음 대신 일반 타입 사용 권장
• 변수에는 typeof 앞에 붙여 타입으로 사용 가능
• 클래스 이름은 typeof 없이도 타입 사용 가능

2.6 유니언 타입으로 OR 관계 표현

• 타입스크립트엔 타입 위한 연산자, 유니언 타입과 유니언 타입 표기 위한 파이프연산자
• 유니언 타입은 하나 변수가 여러 타입 가질 수 있는 가능성 표시

  let strOrNum : string | number  = 'hi'
  const arr: (string| number)[] = ['3',1,2] 
  function returnNumber(value: string | number): number {
    if (typeof value === 'string') { //타입좁히기
        return parseInt(value, 10);
    } else {
        return value;
    }
  }
  type Union1 =
  | string
  | boolean

• 유니언 타입으로 정확한 타입 찾아내느 기법, 타입 좁히기라 부름
• 타입 사이에만 | 쓰는게 아니라 타입 앞에도 쓸 수 있음

2.7 타입스크립트에만 있는 타입 배우자

• any외 unknown, void {}, never 등

2.7.1 any

• 타입스크립트 지양해야할 타입으로

keyword thema

• Node.js 철학
• Reactor 패턴 - Node.js 비동기 이벤트 주도 아키텍처 핵심 메커니즘
• 브라우저와 다르게 서버에서 동작하는 JavaScript 의미

- 1.1 Node.js 철학

모든 프로그래밍 플랫폼 자신들만 철학, 커뮤니티에서 따르게 되는 일련 원칙과 지침, 플랫폼 진화와 애플리케이션 개발 및 디자인에 영향을 주는 이데올로기를 지님

• WHAT IS❓ 1.1.1 경량 코어

  • Node.js 코어 몇 가지 원칙들 기반으로 기초 구성 기능 세트를 가지고 코어 바깥 부분에 유저랜드 혹은 유저스페이스라 불리는 사용자 전용 모듈 생태계를 두는 것

• WHAT IS❓ 1.1.2 경량 모듈

  • Node.js 프로그램 코드 구성하는 기본 수단으로 모듈 개념 사용 애플리케이션 재사용 가능한 라이브러리 만들기 위한 구성 요소 코드 양뿐 아니라 범위 측면에서 작은 모듈 디자인하는 것이 통용되는 원칙

작은 모듈의 장점

• 이해와 사용이 쉬움

• 테스트 및 유지보수 쉬움

• 사이즈 작아 브라우저에 사용하기 완벽

• WHAT IS❓ 1.1.3 작은 외부 인터페이스

• Node.js 모듈 장점은 작은 사이즈, 범위, 최소한 기능 노출

• Node.js 모듈 정의 일반적 패턴, 단일 진입점 제공 위해 단 하나의 함수나 클래스 노출

• Node.js 모듈 특징 중 하나는 확장보단 사용되기 위해 만들어졌다는 것인데 유스케이스 줄이고 구현 단순화, 유지관리 용이하고 가용성 높이는 장점 가짐

• 따라서 내부 외부에 노출시키지 않기 위해 클래스 보단 함수 노출을 선호

• WHAT IS❓ 1.1.4 간결함과 실용주의

• 완벽하고 모든 기능 갖춘 소프트웨어와 반대로 단순하게 설계하는 것이 좋은 실천

• 구현 위해 적은 노력, 가벼워 빨리 보급 가능, 유지보수 쉽고 빠른 이해 가능

• 이러한 요인 커뮤니티 기여 용이하게 하고 소프트웨어 자체 성장 향상 도움

• 해당 원칙 채택되는 것 큰 영향 준 것이 실용적인 자바스크립트 언어, 복잡한 클래스 계층 대체 위한 간단한 클래스나 함수, 클로저 사용의 예

- 1.2 Node.js 어떻게 작동

• Node.js 내부적 어떻게 동작하는지 이해 및 비동기의 핵심인 리액터 패턴 소개

• 단일 스레드 아키텍처와 논 블로킹 I/O 주요 개념

• WHAT IS❓ 1.2.1 I/O는 느리다

• I/O 컴퓨터 기본적 동작들 중 가장 느린데, I/O 속도와 빈도는 기술적 측면에만 의존하지 않으며 디스크나 네트워크 보다 느릴 수 있음

• WHAT IS❓ 1.2.2 블로킹 I/O

• 전통적 블로킹 I/O 프로그래밍 I/O 요쳥하는 함수 호출은 작업 완료될 때까지 스레드 실행 차단

• 스레드 시스템 리소스 측면에서 비용이 저렴하지 않아 메모리 소모 및 컨텍스트 전환 유발하여 대부분 시간 동안 사용하지 않는 장시간 실행 스레드를 가져 메모리와 CPU 사이클 낭비

• WHAT IS❓ 1.2.3 논 블로킹 I/O

• 해당 운영모드에선 시스템 호출은 데이터가 읽혀지거나 쓰여지기를 기다리지 않고 항상 즉시 반환

• 논 블로킹 I/O 다루는 가장 기본적 패턴은 실제 데이터 반환될 때까지 루프 내 리소스 적극적을 폴링하는 것, 이것을 바쁜 대기라 함

• WHAT IS❓ 1.2.4 이벤트 디멀티플렉싱

• 바쁜 대기는 논 블로킹 리소스 처리위한 이상적 기법 아님

• 효율적으로 처리하기 위한 동기 이벤트 디멀티프렉터(이벤트 통지 인터페이스) 메커니즘 제공

• 멀리플렉싱, 여러 신호 하나로 합성해 제한된 수용 범위 내 매개체 통해 쉽게 전달하는 방법 나타냄

• 디멀티 플렉싱, 신호 원래 구성요소로 다시 분할되는 작업

• 동기 이벤트 디멀티플렉서, 여러 리소스 관찰하고 이 리소스 중 읽기 또는 쓰기 연산 실행 완료시 새로운 이벤트 반환

• 이점은 동기 이벤트 디멀티플렉서가 처리 위한 새로운 이벤트가 있을 때까지 블로킹된다는 것

• 해당 패턴 이용 시 바쁜 대기 기술 이용하지 않고 여러 I/O 작업 단일 스레드 내 다룰 수 있어 여러 리소스를 단일 스레드를 사용하여 다룸

• 단일 스레드 사용이 동시적 다중 I/O 사용 작업에 나쁜 영향 미치치 않고 작업은 시간에 다라 분산되어 전체 유휴시간 최소화하는데 이점

• 하나 스레드만 가지는 건 프로그래머가 동시성에 접근하는 방식에 이로운 영향 미침

• 경쟁 상태 발생 문제, 다중 스레드 동기화 문제 없는게 더 간단한 동시성 전략 사용하게 해줄 수 있는지 볼 수 있음

• WHAT IS❓ 1.2.5 리액터 패턴

• 리액터 패턴 이면 주된 아이디어 각 I/O 작업에 연관된 핸들러 갖는 것, 이는 콜백함수에 해당

• 콜백함수는 이벤트 생성되고 이벤트 루프의해 처리되는 직시 호출

• WHAT IS❓ 1.2.6 Libuv, Node.js I/O 엔진

• 각 운영체제는 이벤트 디멀티플렉서 위한 자체 인터페이스 가짐,

• Node.js 주요 운영체제 호환하게 해주며 서로 다른 리소스 유형 논 블로킹 동작 표준화를 위해 libuv 불리는 C 라이브러리 생성

• libuv는 기본 시스템 호출 추상화하는 것 외에 리액터 패턴 구현, 이벤트 루프 생성, 이벤트 큐 관리, 비동기 I/O 작업 실행 및 다른 유형 작업 큐에 담기위한 API 제공

• WHAT IS❓ 1.2.7 Node.js 위한 구성

• 리액터 패턴과 libuv, Node.js 기본 구성 요소 전체 플랫폼 구축 위해선 3개 구성 더 필요, libub와 다른 저수준 기능 랩핑하고 표출 시키기 위한 바인딩 세트 V8, 크롬 브러우저 위해 구글 개발한 자바스크립트 엔진 고수준 Node.js API 구현하고 있는 코어 자바스크립트 라이브러리

이것들이 Node.js 구성 요소

- 1.3 Node.js에서 자바스크립트

• 노드에서 사용하는 자바스크립트는 브라우저 사용하는 자바스크립트와 다소 다름

  • DOM, window, document 없음
  • 운영체제 기본적으로 제공하는 서비스 접근 가능

• WHAT IS❓ 1.3.1 최신 자바스크립트 실행

• WHAT IS❓ 1.3.3 모듈 시스템

--

1. Node.js 철학: Node.js는 'non-blocking', 'event-driven'을 기반으로 한 아키텍처를 갖고 있습니다. 이는 I/O 작업이 블로킹(blocking) 되지 않도록 하여 애플리케이션의 효율성과 성능을 향상시키는데 중점을 두고 있습니다. 이를 위해 Node.js는 'event loop'와 'callback' 함수를 사용하여 비동기적으로 작동합니다.
2. Reactor 패턴: 이는 Node.js의 비동기 이벤트 주도 아키텍처의 핵심 메커니즘이며, 애플리케이션의 성능을 향상시키는 주요 구성 요소입니다. 이 패턴에서, 이벤트는 "reactor"에 의해 감지되고 적절한 "handler"로 전달됩니다. Node.js에서는 이벤트 루프가 reactor의 역할을 하며, callback 함수가 handler의 역할을 합니다.
3. 서버에서 동작하는 JavaScript: 웹 브라우저에서 동작하는 JavaScript와 달리, Node.js는 서버에서 동작하는 JavaScript입니다. 이는 Node.js가 파일 시스템에 액세스하고, 네트워크를 통해 데이터를 전송하고, HTTP 또는 TCP 서버를 생성할 수 있다는 것을 의미합니다.

keyword thema ✅: keyword word(🔑, 🗝️), point words: 🔓

- Node.js

Q) 왜 Node.js가 웹 개발 분야에 혁신으로 떠오른걸까? A) 기술적인 능력 + 웹 개발과 소프트웨어 개발 생태계에 도입한 새로운 패러다임으로 인하여!

WHY & WHNE USE❔❕**

1. Node.js 애플리케이션은 웹에서 가장 많이 쓰는 언어이며 모든 웹 브라우저에 지원되는 Javascript로 작성

- 단일 언어 애플리케이션 스택 및 서버-클라이언트 간 코드 공유 가능

-> 이로 인해 프론트-백엔드 격차 줄이는데 도움, 개발자의 프론트-백엔드 프로그래밍의 접근을 쉽고 직관적이게 함
-> 따라서 Node.js 및 Javascript에 익숙해지면 플랫폼 및 컨텍스트를 위한 소프트웨어 쉽게 빌드 가능
=> 노드가 실용성, 유연성, 이벤트기반, 접근방식 그리고 객체지향 프로그래밍과 함수 프로그래밍의 중간인 하이브리드적 특성을 담은 자바스크립트 언어의 발전에 기여

2. Node.js의 혁신적인 단일 스레드 프로그래밍 모델과 비동기 아키텍쳐

- 성능 및 확장성 관점에서의 장점 외에도 개발자가 동시성 및 병렬 처리에 접근하는 방식에 변화

- 뮤텍스는 대기열, 스레드는 콜백, 동기화는 인과관계로 대체되어 이러한 추상화가 일상적인 문제를 해결하는데 생산성을 높임

3. Node.js의 중요한 측면은 생태계에 있으므로 극도의 모듈성을 강조하는 문화를 갖춤

- NPM 패키지 관리자, 지속적으로 성장하는 모듈 데이터베이스와 유용한 커뮤니티로 인해 단순성, 실용성을 갖춤

그렇다면 이러한 특성을 갖춘 Node.js의 패러다임의 디자인과 코딩문제를 효과적으로 해결하기 위해 다음과 같은 질문에 주목해야한다.

• 어떻게 코드를 구조화 할 것인가?
• 이것을 디자인하는 좋은 방법은 무엇일까?
• 애플리케이션을 모듈화하려면 어떻게 해야하는가?
• 일련의 비동기 호출을 효과적으로 처리하는 방법이 있는가?
• 애플리케이션이 커지면서 문제가 발생하지 않도록 하려면 어떻게 해야할까?

이 책을 통해 디자인 패턴, 입증된 코딩 기법을 통해 검증된 솔루션을 보여주며 이를 특정 문제에 대한 솔루션으로 만들기 위한 출발점으로 사용하는 방법을 알려줄 것이다.

*💡conclusion

앞으로 배우게 될 내용들

Node way - 올바른 관점을 사용하는 방법 EX> 전통적인 디장인 패턴이 어떻게 보이는지 또는 한가지만 수행하는 모듈을 디자인하는 방법 일반적인 Node.js 설계 및 코딩 문제를 해결하기 위한 일련의 패턴들 - 일상적인 개발 및 디자인 문제를 효율적으로 해결하기 위해 사용할 수 있는 패턴 확장가능하고 효율적인 Node.js 애플리케이션 작성하는 방법 - 기본 컴포넌트들과 그 원리를 이해하고 기존 패턴의 범위에 포함되지 않는 새로운 문제에 원칙 적용 모던 JavaScript 코드 - 클래스 구문, 프라미스, 제너레이터 함수와 async/await같은 최신 기능을 활용하여 사용자에게 적합한 최신 환경 제공

#📑Study Source

Node.js 디자인 패턴 바이블 중 머리말과 들어가기 전 부분

목적 : scss를 테마화하여 저시력모드와 일반모드를 나누어 적용

과정 : 하여 sfc(싱글 파일 컴포넌트)되어있는 vue의 scss관련 스크립트를 걷어낼 목적

모두 별개의 폴더 내 별도의 scss로 분리하여 변수화 시켜 테마를 적용

1. 확인사항

• 테마를 몇 개로 지정하는 지
  • 일반 테마와 저시력 테마로 나뉨
• 사용자가 선택 할 수 있어야하는지
  • 사용자가 키오스크에 접근하여 직접 테마를 변경할 수 있어야함
    • 최상단 html에 클래스 부여 시 테마 맞춰 일괄 변경 가능
• 테마화 하려는 단위가 무엇이 있는지
  • 기본 컬러, 타이포 그래피, 이미지(svg로 되어있는 아이콘 등), 컴포넌트(인풋, 탭, 버튼 등) 테마화 참고 자료

2. Mozila CSS 속성 순서 컨벤션

display list-style position float clear width / height padding / margin border / background color / font text-decoration text-align / vertical-align white-space other text content

3. 진행 과정

1. 테마화 시 적용할 단위를 나눈다
2. 가령 컬러 별 테마화를 한다면 현재 UI에 적용된 컬러들을 변수화 시켜 scss에 별도 저장
3. utils 폴더내 변수화 및 mixin으로 묶을 사항들을 나열한다
4. layout > view > component 처럼 레이아웃부터 상위 컴포넌트에서 하위 컴포넌트까지 SFC 내에 정의된 style sheet를 별도의 scss로 분리

아래와 같이 src 내 scss 폴더에 각각 용도별 scss 스타일 그리고 변수 정의

• common : 공통된 스타일 정의, ex> body, font-face등
• layouts : 최상위 레이아웃 스타일 관리하는 스타일 스크립트 scss 정의, ex> home, loot 레이아웃 scss 등
• pages : 각 페이지 별 view 화면 해당하는 스타일 스크립트 scss 정의, ex> main, fail 페이지 등
• componenets : 각 컴포넌트 별로 해당하는 스타일 스크립트 scss 정의, ex> card 컴포넌트, common내 input 컴포넌트 등
• themes : 스타일을 적용할 각 테마별 scss 변수를 재정의하는 파일로 모드 별 적용할 변수를 재정의하여 덮어씌어 줌, ex> low-vision, basic 등
• utils: 공통으로 쓰이는 변수 공통 색상, 폰트, mixins 이나 레이아웃, 페이지, 컴포넌트 별 정의한 변수를 관리하는 디렉토리
• main.scss : 분리한 scss를 모두 import하는 최종 스타일 시트 파일

5. 모든 스타일 시트 분리 및 변수 작성을 마치면 main.ts에서 특정 이벤트, 여기선 모드 버튼을 pinia로 만들어서 관리하도록 하여 액션에 따라 전역 변수 상태를 관찰하여 동적으로 스타일을 추가하고 제거해주는 코드 작성

-main.ts 일부

const mode = useModeStore();

mode.$subscribe((mutation) => {
  const isLowVision = mutation.events.target.isLowVision as boolean;
  const head = document.querySelector("head") as HTMLHeadElement;
  const existingLink = document.querySelector(
    "[rel=stylesheet][href*='low-vision']"
  ) as HTMLLinkElement;

  if (isLowVision) {
    if (!existingLink) {
      const link = document.createElement("link");
      link.setAttribute("rel", "stylesheet");
      link.setAttribute("type", "text/css");
      link.setAttribute("href", "src/scss/themes/low-vision.scss");
      head.appendChild(link);
    }
  } else {
    if (existingLink) {
      head.removeChild(existingLink);
    }
  }
});

해당 액션에 따라 스타일을 동적으로 관리하여 모드 별 스타일 테마를 달리 적용하도록 할 수 있음

끝

1. 숫자 체계

• 그림과 같이 숫자에 대해 64비트 부동 소수점 표현 사용

• 다음 예에서 값은 40으로 부호 비트가 1이면 해당 숫자가 음수 다음 여덞개의 비트는 지수 값 e를 나타내며 마지막으로 나머지 52비트가 분수 값을 나타냄
• 십진분수로 인해 자바스크립트에서 부동소수점 체계가 반오림 오류를 일으킬 수 있는데 0.1과 0.2를 정확히 표현할 수 없어 0.1 + 0.2 === 0.3의 결과는 false임 ```js

0.1 + 0.2 === 0.3; // 'false'

>- 0.1을 64비트 부동수소점 숫자로 제대로 표현할 수 없는 이유 이해를 위해 이진 표기법을 이해해야함
- 이진 표기법으로 십진 수를  표현할 때 문한 개의 수가 필요한 경우 가 많아 이로 인해 이진주사 2^n으로 표현(n은 정수)
- 0.1을 계산하려 할 시 긴 나눗셈이 끝나지않고 계속되어 이진수로 1010은 10인데 0.1(1/10)을 계산하려면 소수점 아래 수가 무한히 생김

# 2. 자바스크립트 숫자 객체
- 자바스크립에는 위 같은 문제 해결 위해 도움되는 Number 객체의 내장된 속성이 있 음

#### 2_1. 정수 반올림
>- 자바스크립트가 모든 숫자를 나타낼 때 부동소수점을 사용하기에 정수 나눗셈은 소용없음
- 예를 들어 자바에선 정수 나눗셈의 결과는 해당 나누기의 몫으로 5/4는 1이 몫이기에 결과는 1이지만 자바스크립트에선 5/4의 결과는 부동소수점인 1.25이다
- 자바에선 명시적으로 정수를 정수형으로 선언해야하기에 결과가 부동소수점이 될 수 없어 정수 나눗셈을 원하면 다음중 하나를 사용
```js
Math.floor(0.9); // 0 - 가장 가까운 정수로 내림
Math.floor(1.1); // 1
Math.round(0.49); // 0 - 가장 가까운 정수로 반올림
Math.round(0.5); // 1
Math.round(2.9); // 3
Math.ceil(0.1); // 1 - 가장 가까운 정수로 올림
Math.ceil(0.9); // 1
Math.ceil(21); // 21
Math.ceil(21.01); // 22

2_2. Number.EPSLION

• Number.EPSLION은 두 개의 표현 가능한 숫자 사이의 가장 작은 간격을 반환해 이는 부동소수점 근사치르 활용해 분수가 제대로 표현되지 않는 문제를 해결하는데 유용

function numberEquals(x, y) {
    return Math.abs(x - y) < Number.EPSILON;
}
0.1 + 0.2 == 0.3 // false due to little difference in floating point
numberEquals(0.1 + 0.2, 0.3); // true

• 위 함수는 두 수의 차이가 Number.EPSLION보다 작은지 검사해 작으면 true를 반환
• Number.EPSLION이 두 개의 표현 가능한 숫자 사이의 최소 차이라는 것을 기억 즉, 0.1+0.2와 0.3의 차이는 Number.EPSLION보다 작음

2_3. 최대치

• Number.MAX_SAFE_INTEGER는 가장 큰 정수 반환

Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true
Number.MAX_SAFE_INTEGER + 1.111 === Number.MAX_SAFE_INTEGER + 2.022; // false

• 두 수는 더 이상 커질 수 없기에 true를 반환하지만 부동소수점에 사용하면 제대로 동작하지 않아 false를 반환

• Number.MAX_VALUE는 가능한 가장 큰 부동 소수점을 반환

Number.MAX_VALUE + 1.111 === Number.MAX_VALUE + 2.022; // true

• Number.MAX_SAFE_INTEGER와 달리 위 코드는 배정밀도 부동소수점 표현을 사용하고 부동소수점에 대해서도 잘 동작

2_4. 최소치

• Number.MIN_SAFE_INTEGER는 가장 작은 정수를 반환

Number.MIN_SAFE_INTEGER - 1 === Number.MIN_SAFE_INTEGER - 2; // true
Number.MIN_SAFE_INTEGER - 1.111 === Number.MIN_SAFE_INTEGER - 2.022; // false

• 두 수가 더이상 작아질 수 없기에 true를 반환하지만 부동소수점과 함께 사용하면 제대로 동작하지 않음

• Number.MIN_VALUE는 가장 작은 부동소수점 수를 반환

• Number.MIN_VALUE가 가능한 가장 작은 부동소수점이기 때문에 음수가 아니라 실제로 Number.MIN_VALUE는 Number.MIN_SAFE_INTEGER보다 크며 Number.MIN_VALUE는 0에 가장 가까운 부동소수점이기에 다음과 같은 코드가 가능

  Number.MIN_VALUE - 1 == -1; // true

• 위 코드가 true인 이유도 0 - 1 === -1과 비슷하기 때문

2_5. 무한

• Number.MAX_VALUE보다 큰 유일한 건 Infinity고 Number.MIN_SAFE_INTEGER보다 작은 유일한 것은 -Infinity

Infinity > Number.MAX_SAFE_INTEGER; // true
-Infinity < Number.MAX_SAFE_INTEGER // true
-Infinity -32323323 == -Infinity -1; // true

• true로 평가되는 이유는 -Infinity보다 작아질 수 없기 때문

2_6. 크기 순서

• 자바스크립트 숫자의 크기를 가장 작은 것부터 큰 것 순으로 요약하면 다음과 같음

-Infinity < Number.MIN_SAFE_INTEGER < Number.MIN_VALUE < 0 < Number.MAX_SAFE_INTEGER < Number.MAX_VALUE < Infinity

2_7. 숫자 알고리즘

• 숫자가 소수, 소인수분해인지 판단하는 알고리즘은 숫자와 관련된 가장 많이 논의되는 알고리즘 중 하나

2_7_1. 소수 테스트

• 숫자가 소수인지 알아보는 방법은 n을 2부터 n-1까지 수로 나눠 나머지가 0인지 확인

function isPrime(n) {
    if (n <= 1) {
        return false
    } 
    for (let i = 2; i < n; i++) {
        if (n % i==0) {
            return false
        }
    }
    return true
}

• 위 코드에 시간 복잡도는 O(n)으로 위 알고리즘은 0부터 n까지 모든 수 확인하기 때문

• 허나 위 알고리즘은 쉽게 개선 가능한 예로 메소드가 2부터 n까지 어떤 식으로 순회되는 생각해보면 알고리즘 수행 방식에서 패턴을 찾아 더 빠르게 만들 수 있음
  • 2의 배수는 무시가능하며 최적화 가능한 부분이 더 있음
  • 소수 나열 2,3,5,7,11,13,17,19,23 ...
    • 2와 3을 제외한 모든 소스는 6k+-1(k정수) 형태를 지님
    • n이 소수인지 알아보기 위해 반복문은 n의 제곱근까지만 확인 가능하는데 n의 제곱근이 소수가 아니면 n은 수학 정의에 의해 소수가 아님

function isPrime(n) {
    if (n <= 1) return false
    if (n <= 3) return true
    // 입력된 수가 2또는 3인 경우 아래 반복문에서 다섯개 숫자 건너 띔
    if(n % 2 ==0 || n % 3 ==0) return false
    for (let i = 5; i*i <= n; i=i+6) {
        if (n % i==0 || n % (i+2) ==0) {
            return false
        }
    }
    return true
}
isPrime(123)
// 6k+-1 optimisation
function is_prime (n) {
  if (n < 3) return n > 1;
  else if (n % 2 === 0 || n % 3 === 0) return false;
  else if (n < 25) return true;
  let i = 5;
  while (i * i <= n ) {
    if (n % i === 0 || n % (i + 2) === 0) return false;
    i += 6;
    //5,7,11,13,17,19,23,25,29,31 ...
  }
  return true;
}

• 개선 된 알고리즘은 시간복잡도를 상당히 줄여 O(sqrt(n))까지 줄여줌
• 참고) 제곱근 관련, https://developerjun2.tistory.com/127

2_7_2. 소인수분해

• 어떤 숫자의 소인수분해를 구하는 알고리즘 역시 유용

• 소수는 암호화와 해싱의 기반이 되며 소인 수 분해는 주어진 숫자를 만들기 위해 어떤 소수들이 곱해져야 하는지 구하는 과정

  function primeFactors(n) {
    // n이 2로 나눠진다면 나눠질 수 있는 수만큼 2가 출력
    while (n % 2 == 0) {
        console.log(2);
        n = n / 2;
    }
    // n은 이 지점에서 홀수가 확실, 따라서 수를 2개씩 증가 시킬 수 있음
    for (var i = 3; i * i <= n; i = i + 2) {
        // i가 n을 나눌 수 있는 한 계속해서 i가 출력되고 n을 i로 나눔
        while (n % i == 0) {
            console.log(i);
            n = n / i;
        }
    }
    // 다음 조건문은 n이 2보다 큰 소수를 처리
    if (n > 2) {
        console.log(n);
    }
  }
  primeFactors(10); // prints '5' and '2'

• 위 알고리즘은 i로 나머지가 없이 나눌 수 있는 모든 수를 출력해 소수가 함수의 입력 값으로 전달된 경우 아무 수도 출력되지 않다가 마지막 조건문에서 n이 2보다 큰지 확인 후 큰 경우 n이 출력

2_7_3. 무작위 수 생성기

• 무작위 수 생성은 어떤 조건이 어떤 식으로 동작하는지 확인하는 데 있어 중요

• 자바스크립트는 숫자 생성을 위한 내장 함수인 Math.random() 존재
• Math.random()은 0과 1 사이 부동소수점 반환하며 1보다 큰 수를 얻기 위해 Math.random()에 범위를 곱하고 나서 곱한 값에 어떤 수를 더하거나 빼서 기준 범위를 만들면 됌

  Math.random() * 100; // 부동 소수점 0 부터 100
  Math.random() * 25 + 5; // 부동 소수점 between 5 부터 30
  Math.random() * 10 - 100; // 부동 소수점 between -100 부터 -90

• 무작위 정수 얻기 위해선 Math.floor()와 Math.round(), Math.ceil()을 사용해 부동소수점을 정수로 만들면 됌

Math.floor(Math.random()) * 100; // integer between 0 and 99
Math.round(Math.random()) * 25 + 5; // integer between 5 and 30
Math.ceil(Math.random()) * 10 - 100; // integer between -100 and -90

연습문제 1번

• x와 y,p 세개 숫자에 대해 (x^y) % p 계산 (= 모듈러 제곱거듭)

• 여기서 x는 기저, y는 지수, p는 모듈러로 모듈러 제곱 거든은 모듈러에 대해 수행하는 종류의 제곱 거듭
• 컴퓨터 과학에 유용하며 공개 키 알고리즘 분야에 사용

  function modularExponentiation(base, exponent, modulus) {
    return Math.pow(base, exponent) % modulus;
  }
  modularExponentiation(4,3,5); // 4

• 위 코드는 큰 지수를 다룰 수 없으며 암호화 알고리즘에 사용된다는 점을 기억 시 강력한 암호의 경우 대개 기저가 최소 256비트(78개 수)
• 가령 기저가 6x10^77이고 지수가 27 모듈러가 497이면 ((6x10)^77)^27은 매우 큰 수로 32비트 부동소수점에 저장할 수 없어 수학을 좀 더 심도있기 활용한 접근법을 사용해야 함

• 임의의 a와 b에 대해 다음 속성 성립

• 위 수학적 속성 활용해 1부터 지수까지 순회하며 현재 모듈러 마지막 모듈러와 곱함으로써 매번 재계산 가능
• 기저 4, 지수 3, 모듈러 5인 경우 c % m = (a b) % m c % m = [(a % m) (b % m)] % m 4 ^ 3 & 5 = 64 % 5 = 4 value = (lastValue x base) % module: value = (1 x 4) % 5 = 4 % 5 = 4 value = (4 x 4) % 5 = 16 % 5 = 1 value = (1 x 4) % 5 = 4 % 5 = 4
• 최종 코드는 아래와 같으며 시간복잡도는 O(n)으로 n은 지수값과 동일

  function modularExponentiation(base, exponent, modulus) {
    if (modulus == 1) return 0;
    var value = 1;
    for (var i = 0; i < exponent; i++) {
        value = (value * base) % modulus;
    }
    return value;
  }

연습문제 2번 - 소수 출력

• n보다 작은 모든 소수 출력 0부터 n까지 순회하면서 isPrime()이 true 평가되는 모든 소수 출력

function allPrimesLessThanN(n) {
    for (var i = 0; i < n; i++) {
        if (isPrime(i)) {
            console.log(i);
        }
    }
}
allPrimesLessThanN(15);

연습문제 3번 - 소인수 집합 확인

• 소인수가 2 또는 3 또는 5뿐인 숫자를 못생긴 숫자라 정의 시 (11개 못생긴 숫자는 1,2,3,4,5,6,8,9,10,12,15 이며 1이 관례상 포함) n개의 못생긴 숫자 찾기

• 숫자가 나머지 없이 나눠질 수 없을 때까지 숫자를 제수(2,3,5)로 나눠보고 숫자가 모든 제수에 의해 나눠질 수 있다면 나눗셈이 끝난 다음 1이 돼야 함

function maxDivide(number, divisor) {
    while (number % divisor == 0) {
        number /= divisor;
    }
    return number;
}
function isUgly(number) {
    number = maxDivide(number, 2);
    number = maxDivide(number, 3);
    number = maxDivide(number, 5);
    return number === 1;
}

• n에 대해 이를 반복하면 못생긴 숫자 목록 반환

  function arrayNUglyNumbers(n) {
    var counter = 0,
        currentNumber = 1,
        uglyNumbers = [];
    while (counter != n) {
        if (isUgly(currentNumber)) {
            counter++;
            uglyNumbers.push(currentNumber);
        }
        currentNumber++;
    }
    return uglyNumbers;
  }
  arrayNUglyNumbers(12); // [ 1, 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 16 ]

요약

• 자바스크립트 모든 숫자는 64비트 부동소수점 형태

• 가장 작은 부동소수점 증가 얻기 위해선 Number.EPSLION을 사용
• 자바스크립트 가장 큰수와 작은 수는 다음 등식과 같이 요약 jsInfinity < Number.MIN_SAFE_INTEGER < Number.MIN_VALUE < 0 < Number.MAX_SAFE_INTEGER < Number.MAX_VALUE < Infinity
• 소수 검증과 소인수분해는 암호화 같이 다양한 컴퓨터 과학 분야에 사용되는 개념
• 무작위 수 생성 위해 Math.random()사용

타인이 정의한 답을 의심합니다.

배움에 열린 태도를 가집니다.

직접 생각하고 또 고민합니다.

클린 코드가 무엇인지를 자바스크립트를 통해 학습합니다.

흔히 알려진 자바스크립트 코드 스타일에 대한 견해를 탐구합니다.

2. JavaScript 특성 파악하기

언어의 특성을 파악하여 실수를 예방합니다.

언어의 예상 실행 결과를 탐구하며 안전한 코드를 작성합니다.

3. 사례를 통해 파악하기

Bad Case와 Better Case로 구체적인 코드를 파악해봅니다.

4. 좋은 코드 작성을 위한 의식적인 수련

의식적인 수련을 유도하여 좋은 습관으로 개선합니다.

코드 리뷰 교육 플랫폼 NEXTSTEP에 참여하시면 배운 내용을 실제로 적용하며 피드백을 받을 수 있습니다.

배울 내용 자바스크립트로 코드를 작성하는 방법에 대해 고민해봅니다. 코드를 작성할 때 위험을 예방하고 관리합니다. JavaScript의 특성을 파악합니다. 흔히 알려진 JavaScript 코드 스타일에 대한 견해를 탐구합니다. 클린 코드가 무엇인지를 JavaScript를 통해 학습합니다.

1. 자바스크립트 범위

• 범위(scope)는 자바스크립트 변수에 대한 접근 권한을 정의

• 자바스크립트에서 변수는 전역범위 또는 지역 범위에 속함

• 전역 변수는 전역 범위에 속하는 변수로 어디에서나 해당 변수에 접근 가능

  1_1 전역 선언 : 전역 범위

  • 자바스크립트에서 연산자 없이 변수를 선언 가능

  test = "sss";
  console.log(test); // prints "sss"

• 위와 코드는 전역 변수를 생성하지만 위 선언 방식은 가장 안좋은 사용법 중 하나

• var, let을 사용해 변수를 선언, 수정하지 않는 변수 선언 시 const로 선언

1_2 var를 사용해 선언: 함수 범위

• var는 변수 선언하는데 사용되는 키워드로 어디에서 선언하든 변수 선언이 함수의 맨 앞으로 이동하는데 이를 호이스팅이라도 함

• 스크립트 실행 시 변수가 스크립트 가장 마지막에 선언되어도 선언 코드가 가장 마지막에 실행되는 게 아님

  function scope1(){
    var top = "top";
    bottom = "bottom";
    console.log(bottom);
    var bottom;
  }
  scope1(); // prints "bottom" - no error
  // 실제 동작하는 방식
  function scope1(){
    var top = "top";
    var bottom;
    bottom = "bottom";
    console.log(bottom);
  }
  scope1(); // prints "bottom" - no error

• scope1() 함수 가장 마지막 줄 위치한 bottom 변수 선언이 맨 앞으로 이동해 변수 출력은 오류 없이 수행
• 즉 var 키워드는 변수 범위가 가장 가까운 함수 범위라는 것을 의미한다

function scope2(print) {
    if (print) {
        var insideIf = '12';
    }
    console.log(insideIf);
}
scope2(true); // prints '12' - no error
// 실제 동작하는 방식
function scope2(print) {
    var insideIf;
    if (print) {
        insideIf = '12';
    }
    console.log(insideIf);
}
scope2(true); // prints '12' - no error

- scope2 함수는 insideIf 변수와 가장 가까운 함수 범위
- 자바에선 위 구문은 오류를 일으키는데 insideIf 변수가 if문 블록 내에서만 사용 가능하고 if문 블록 외부에선 사용할 수 없기 때문

>```js
var a = 1
function four() {
    if (true) {
        var a = 4;
    }
    console.log(a); // prints '4'
}
four();

• 전역변수 값인 1이 아닌 4가 출력되는 건 a 변수가 four 함수 내 재선언되어 사용 가능하기 때문

1_3 let을 사용해 선언: 블록 범위

• 변수 선언 시 let을 사용 해 선언하면 선언된 변수는 가장 가까운 블록 범위를 갖는다 (즉, 변수가 선언 된 {}내에서 유효)

function scope3(print) {
    if (print) {
        let insideIf = '12';
    }
    console.log(insideIf);
}
scope3(true); // prints ''

- 콘솔에 아무것도 출력되지 않는 이유는 insideIf 변수가 if문 블록 내에서만 사용 가능하기에

-- 

## 2. 등가와 형
- 자바스크립트엔 자바와 같은 전통적인 언어와 다른 자료형이 있는데 이런 점이 등가 비교와 같은 것들에 어떤식으로 영향을 미치는지 알아보자

#### 2_1. 변수형
>- 자바스크립트엔 boolean, number, string, undefined, object, function, symbol과 같은 7개의 기본 자료형 존재
- 특이한 점은 선언만 되고 값이 할당되지 않은 변수엔 undefined가 할당 된다는 
```js
var is20 = false; // boolean
typeof is20; // boolean
var age = 19;
typeof age; // number
var lastName = "Bae";
typeof lastName; // string
var fruits = ["Apple", "Banana", "Kiwi"];
typeof fruits; // object
var me = {firstName:"Sammie", lastName:"Bae"};
typeof me; // object
var nullVar = null;
typeof nullVar; // object
var function1 = function(){
    console.log(1);
}
typeof function1 // function
var blank;
typeof blank; // undefined

2_2. 참/거짓 확인

• if문 내에 참/거짓 확인 사용되는데 많은 언어의 경우 if()함수 내 매개변수는 boolean 형이어야하지만 자바스크립트는 더 유연하다

if (node) {
}

• node는 변수로 변수가 비거나 null 또는 undefined면 해당 변수는 false로 평가
• 다음은 false로 평가되는 경우
  • false
  • 0
  • 빈 문자열
  • NaN
  • undefined
  • null
• 다음은 true로 평가되는 경우
  • true
  • 0이 아닌 다른 숫자
  • 비어있지 않은 문자열
  • 비어있지 않은 객체

    var printIfTrue = '';
    if (printIfTrue) {
    console.log('truthy');
    } else {
    console.log('falsey'); // prints 'falsey'
    }

2_3. ===대 ==

• 자바스크립트는 스크립트 언어로 변수 선언 시 변수에 형이 할당되지 않고 대신 코드가 실행 될 때 해당 변수의 형이 해석

• 따라서 ===는 ==보다 등가(양쪽이 같은지 여부)를 더 엄격히 확인
• ==가 값만 확인하는 반면 ===는 형과 값 모두 확인

  "5" == 5 // returns true
  "5" === 5 // returns false

• "5" == 5 는 true를 반환하는데 "5"가 비교 전 숫자로 강제 변환 되기 때문이고 반면 "5" == 5는 문자열과 숫자 타입까지 비교해 false를 반환

2_4. 객체

• 자바와 같은 강 자료형 언어는 isEquals()를 사용해 두 객체가 동일한지 확인하나 자바스크립트에선 두 객체가 동일한지 확인하고자 == 연산자를 써도 true로 평가되지 않는다

var o1 = {};
var o2 = {};
o1 == o2 // returns false
o1 === o2 // returns false

• 위 객체는 동일(동일한 속성과 값을 지님)함에도 두 객체는 동일하지 않은데 두 변수의 메모리상 주소가 다르기 때문
• 이것이 자바스크립트 애플리케이션 lodash나 underscore와 같은 유틸리티 라이브러리를 사용하는 이유로 두 라이브러리엔 두 객체 혹은 두 값을 정확히 확인할 수 있는 isEqual 함수가 존재
• isEqual 함수가 속성 기반 등가 비교 방식으로 구현되어 객체의 각 속성을 비교

  function isEquivalent(a, b) {
    // arrays of property names
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);
    // If their property lengths are different, they're different objects 
    if (aProps.length != bProps.length) {
        return false;
    }
    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];
        // If the values of the property are different, not equal
        if (a[propName] !== b[propName]) {
            return false;
        }
    }
    // If everything matched, correct
    return true;
  }
  isEquivalent({'hi':12},{'hi':12}); // returns true

• isEquivalent 함수는 문자열이나 숫자 하나만을 속성으로 갖는 객체에 대해서 도 잘 동작

  var obj1 = {'prop1': 'test','prop2': function (){} };
  var obj2 = {'prop1': 'test','prop2': function (){} };
  isEquivalent(obj1,obj2); // returns false

• 위 처럼 isEquivalent 함수가 잘 동작하는 이유는 함수와 배열이 등가 비교를 위해 단순히 == 연산자를 사용하는 것이 아니기 때문

  var function1 = function(){console.log(2)};
  var function2 = function(){console.log(2)};
  console.log(function1 == function2); // prints 'false'

• 두 함수가 동일한 연산을 수행하지만 두 함수의 메모리상 주소는 다르기에 등가 연산자는 false를 반환
• 기본 등가 확인 연산자인 ==와 ===는 문자열과 숫자에만 사용 가능하며 객체에 대한 등가 확인을 구현 하려면 객체의 각 속성 확인해야함

요약

• 자바스크립트엔 대부분 프로그래밍 언어들이 사용하지 않는 다른 방식의 변수 선언 방식 존재
  • var는 함수 범위 내 변수 선언
  • let은 블록 범위에서 변수 선언하고 아무 연산자 없이 변수 선언하면 해당 변수는 전역 범위에서 선언 됌(전역 범위로 변수 선언하는 것은 피해야함)

• 형 확인 위해 typeof를 사용해 원하는 형이 맞는지 검증 가능
• 등가 확인 위해 값에 대해선 == 사용 값과 형 모두 같은지 확인하기 위해 === 사용하나 ==와 ===는 숫자, 문자열, 불리언 같은 비객체형만 사용 가능

1. 빅오 표기법 기초

빅오 표기법

• 알고리즘 최악의 경우 복잡도를 측정

• n은 입력의 개수를 나타냄
• 알고리즘 구현 시 빅오 표기법이 해당 알고리즘이 얼마나 효과적인지 나타내기에 빅오 표기법이 중요

일반적인 예시

1. O(1)

• O(1)은 입력 공간에 대해 변하지 않아 상수 시간이라 부름

• 배열에 있는 항목 인덱스 사용해 접근하는 경우가 그 예시

2. O(n)

• 선형 시간이며 최악의 경우 n번의 연산을 수행해야하는 알고리즘에 적용

• 0부터 n-1까지 숫자 출력하는 경우가 그 예시

  function exampleLinear(n) {
    for (var i = 0; i < n; i++) {
        console.log(i);
    }
  }

3. O(n^m)

• m에 2면 2차 사긴이고 3이면 3차 시간

function exampleQuadratic(n) {
    for (var i = 0; i < n; i++) {
        console.log(i);
        for (var j = i; j < n; j++) {
            console.log(j);
        }
    }
}
function exampleCubic(n) {
    for (var i = 0; i < n; i++) {
        console.log(i);
        for (var j = i; j < n; j++) {
            console.log(j);
            for (var k = j; k < n; k++) {
                console.log(k);
            }
        }
    }
}

4. O(log n)

• 로그 시간 복잡도를 지닌 알고리즘 예는 2의 2승부터 n승까지 항목 출력 시

• 로그 시간 복잡도 효율은 백만 개의 항목과 같이 큰 입력이 있는 경우에 분명하여 n이 백만이여도 단 19개의 항목만 출력

  function exampleLogarithmic(n) {
    for (var i = 1; i < n; i=i*2) {
        console.log(i);
    }
  }
  exampleLogarithmic(10)
  // 2,4,8,16,32,64

2. 빅오 표기법 규칙

• 알고리즘의 시간 복잡도를 f(n)이라고 표현하면 n은 입력의 개수, f(n)은 필요한 시간, f(n)space는 필요한 공간(추가적인 메모리)를 나타냄
• 알고리즘 분석 목표는 f(n)을 계산함으로써 알고리즘 효율성 이해

f(n)을 계산하는데 도움되는 규칙

1_1. 계수 법칙

• 상수 k가 0보다 클 때, f(n)이 O(g(n))이면 kf(n)은 O(g(n))이며 이를 계수 법칙이라 함

• 입력 크기 n과 관련되지 않은 계수 제거하고 n이 무한으로 가까워지는 경우 다른 계수는 무시

1_2. "상수 제거하라"

• 입력 크기와 연관되지 않은 상수를 전부 무시

• 빅오에서 입력 크기가 클 시 계수를 무시하여 가장 중요한 법칙 중 하나
• 즉 5f(n)과 f(n) 모두 동일한 O(f(n))이라는 빅오 표기법 지님

function a(n){
    var count =0;
    for (var i=0;i<n;i++){
        count+=1;
    }
    return count

- 위 코드는 f(n)=n으로 count에 숫자를 n번 더하기에 함수의 시간 복잡도는 O(n)
```js
function a(n){
    var count =0;
    for (var i=0;i<5*n;i++){
        count+=1;
    }
    return count;
}

• 위 코드는 f(n)=5n으로 0부터 5n까지 실행되지만 위 두 코드 예시 모두 O(n) 빅오 표기법 지님
• n이 무한대 또는 아주 큰 수에 가까워질 때 네 개의 연산이 추가적으로 존재한다 해서 달라지는 것은 없기 때문
• n이 충분히 클 때 위 코드가 n번 수행되며 빅오 표기법에서 모든 상수는 무시 가능

  function a(n){
    var count =0;
    for (var i=0;i<n;i++){
        count+=1;
    }
    count+=3;
    return count;
  }

• 위 코드는 f(n)=n+1으로 마지막 연산 count+=3으로 인해 +1이 추가되었지만 여전히 O(n)의 빅오 표기법
• 추가된 연산이 입력 n에 영향 받지 않고 n이 무한대로 가까워질수록 추가된 연산 무시

2_1. 합의 법칙

• f(n)이 O(h(n))이면 g(n)은 O(p(n))이면 f(n)+g(n)은 O(h(n)+p(n))임

• 결과값인 시간복잡도가 두 개의 다른 시간 복잡도의 합이라면 결과값인 빅오 표기법 역시 두 개의 다른 표기법 합을 의미

2_2. "빅오를 더하라"

• 시간 복잡도를 더할 수 있는 것으로 두 개의 다른 알고리즘을 포함하는 상위 알고리즘이 있다면 해당 상위 알고리즘의 빅오 표기법은 해당 상위 알고리즘에 포함되는 두개의 알고리즘의 합

• 단, 합의 법칙을 적용한 다음 계수 법칙이 적용된다

function a(n){
    var count =0;
    for (var i=0;i<n;i++){
        count+=1;
    }
    for (var i=0;i<5*n;i++){
        count+=1;
    }
    return count;
}

- 각 루프의 시간 복잡도는 개별적으로 계산된 다음 더해져 f(n)=n, f(n)=5n을 더해 결과값은 6n지만 여기에 계수 법칙을 적용하면 최종적 결과는 O(n)=n

#### 3_1. 곱의 법칙
>- f(n)이 O(h(n))이면 g(n)은 O(p(n))이면 f(n)g(n)은 O(h(n)p(n))임
- 두 개의 다른 시간 복잡도를 곱할 때 빅오 표기법 역시 곱해지는 것을 의미

#### 3_2. "빅오를 곱하라"
>- 빅오가 어떤 식으로 곱해지는지에 관한 것
```js
function (n){
    var count =0;
    for (var i=0;i<n;i++){
        count+=1;
        for (var i=0;i<5*n;i++){
            count+=1;
        }
    }
    return count;
}

• 두 개의 중첩 for 루프를 포함하여 해당 중첩 for 루프에 곱의 법칙이 적용되어 f(n)= n*5n으로 내부 루프에 의해 5n번 실행되고 내부 루프가 외루 루프에 의해 n번 실행되므로 결과는 5n^2번 연산이 일어나고 계수 법칙이 적용되어 O(n)=n^2

4. 전이 법칙

• f(n)이 O(g(n))이면 g(n)은 O(h(n))이면 f(n)은 O(h(n))임

• 동일한 시간 복잡도는 동일한 빅오 표기법을 지님을 타나내기 위한 방법

5_1. 다항 법칙

• f(n)이 k차 다항식이면 f(n)은 O(n^k)임

• 직관적으로 다항 법칙은 다항 시간 복잡도가 동일한 다항 차수의 빅표기법을 지님

5_2. "빅오의 k승"

• 다항 시간 복잡도가 동일한 다항 차수를 지닌 빅오 표기법을 지님을 나타냄

function a(n){
    var count =0;
    for (var i=0;i<n*n;i++){
        count+=1;
    }
    return count;
}

• 2차 시간 복잡도를 지닌 for 루프 존재 시 n*n회 실행되기 때문인데 f(n)=n^2이 된다.

요약

• 빅오는 알고리즘 효율을 분석 및 비교 시 중요

• 빅오 분석 위해서 코드를 살펴보고 빅오 표기법을 단순화하고자 다음 규칙(법칙) 적용
  • 계수/상수 제거(계수 법칙)
  • 빅오 더하기(합의 법칙)
  • 빅오 곱하기(곱의 법칙)
  • 루프 조사해 빅오 표기법 다항 결정(다항 법칙)

2. 빈도 수 세기 패턴 (Frequency Counter)

• 자바스크립트 객체 사용해 다양한 값과 빈도를 수집할 쓰이는 패턴
• 여러 데이터와 입력값이 서로 비슷한 값으로 구성되어 있는지 값이 다른 값에 포함되는지 여부를 비교할 때 등

예시 - 2개의 배열을 허용하는 same 함수 작성, 배열의 모든 값이 두 번째 배열에 해당하는 값을 가지면 true 반환

//same([1,2,3] , [4,1,9])true
//same([1,2,3] , [1,9])fale
//same([1,2,1] , [4,4,1])true

단순 접근법

function same(arr1, arr2){
  // 두개의 배열을 받는데 2번째 배열이 첫 번째 인자의 값에 제곱 값이 되면 true 반환
  let answer = false
  if(arr1.length !== arr2.length) return answer
  for(let i=0; i<arr2.length; i++){
    if(arr1.some(el => el*el===arr2[i])) answer = true
    else answer = false
    // 다른 풀이
    /*
    let correctIndex = arr2.indexOf(arr[i]**2)
    if(correctIndex === -1){
        return false
    }
    arr2.splice(correctIndex,1)
    */
  }
  return answer
}

same([1,2,3] , [4,1,9])
// true
same([1,2,3] , [1,9])
// fale
same([1,2,1] , [4,1,1])
// false

• 이러한 접근법은 O(N^2), 제곱시간이 사용되어 순진한 접근법으로 가능한 않는게 좋다

빈도 카운터 패턴 접근법

• loop를 두개로 나눠 중첩된 개별 루프가 아닌 선형시간인 O(N)으로 수정되도록 하기

function sameForFrequency(arr1, arr2){
  // 두개의 배열을 받는데 2번째 배열이 첫 번째 인자의 값에 제곱 값이 되면 true 반환
  let frequencyCounter1 ={}
  let frequencyCounter2 ={}
  for(let val of arr1){
      frequencyCounter1[val] = (frequencyCounter1[val] || 0)   + 1
  }
 for(let val of arr2){
      frequencyCounter2[val] = (frequencyCounter2[val] || 0)   + 1
 }
             console.log(frequencyCounter1)
           console.log(frequencyCounter2)
  for(let key in frequencyCounter1){
    console.log(key)
         if(!(key ** 2 in frequencyCounter2)){
           // key 제곱이 frequencyCounter2의 키 값인지 확인
           return false
         }
     // if(frequencyCounter2[key ** 2]!==frequencyCounter1[key]){
     //       return false
     //     }
   } 


  return true
}
sameForFrequency([1,2,3,2,5],[9,1,4,4,25])

1. 사람에겐 쉽고 기계는 어려운 '경로 알고리즘'

경로 검색이란

• 출발 지점에서 도착 지점에 도달하기 까지의 경로(루트나 길)를 발견하는 처리를 의미
• 경로 여러개 있을 땐 조건에 맞는 경로를 찾아야 하며 다양한 상황에서 활용 된다
• 가장 비용이 적은 경로를 최단 경로라 하며 이때 비용은 시간, 거리, 횟수, 에너지 등의 물리량 의미
• 여러개 비용이 관련되거나 비용이 시간에 따라 변할 때 최단 거리 경로 구하는 알고리즘 복잡해짐
• 뿐만 아니라 비용이 두 번째, 세 번째인 경로를 검색하는 것도 매우 수준 높은 알고리즘 필요

경로 검색 돕는 그래프 이론

• 그래프는 노드 집합과 엣지 집합을 말하며 결합 구조를 표현하는 모델이므로 노드를 두는 장소 또는 엣지가 직선이지 곡선인지는 고려하지 않음
• 엣지에서 방향성이 있는 그래프를 유향 그래프, 없는 그래프를 무향 그래프라 부르며 방향성 그래프에서 방향을 나타내는 엣지를 화살표로 표현
• 이웃한 노드를 연결한 선은 경로로 경로 검색에서 그래프로 해결한다는 건 출발 지점에서 도착 지점까지 가장 비용이 적은 경로 발견하겠다는 뜻

경로 검색 방법

• 경로 검색 시 시작 노드에서 도착 노드까지 가는 경로의 경우의 수를 다 구하는 방법이 있지만 여기에 엣지 자체에 할당된 비용을 고려해서 가장 적게되는 경로를 골라야한다.

노드나 엣지의 갯수 증가

• 노드나 엣지 개수 증가 시 경로 개수 함께 증가

최단 경로 구하는 데이크스트라 알고리즘

• 가까운 문제부터 해결하고 해결된 결과를 바탕으로 다음 문제를 해결한ㄴ다는 생각으로 최단 거리(최소 비용)와 경로를 찾아 나감

데이크스트라 사고 방식

1> 시작 노드에서 시작 노드로 가는 최단 경로 조사로 시작 2> 시작 노드와 인접한 노드를 조사하는데 최소 비용이 할당된 노드까지로 향하는 최소 비용을 확정 지음 3> 마찬 가지로 같은 작업이 반복

=> 정리하면 데이크스트라 알고리즘은 다음과 같은 작업을 반복해 최단 경로를 구함

1. 시작 노드 0으로 정의
2. 정의 하지 않은 노드 중 비용이 가장 적게 드는 노드를 찾아 비용을 확정
3. 비용 확정한 노드의 경로 체크, 확정 노드까지 비용 엣지 비용을 합친 결곽가 현재 노드 값보다 작으면 갱신

2. 알고리즘의 난적 '조합적 확산'

조합적 확산이란

-경로 검색 같은 알고리즘 설계 시 주의해야할 점이 조합적 확산

• 노드의 수가 많은 경우 단순하게 해결하려다 입력 조합 개수 뿐만 아니라 출력 조합의 개수도 커지는 문제가 발생하여 현실적인 시간 내 끝내기 어려워질 수 있다.
• 효율적인 알고리즘을 찾아낼 수 만 이다면 모든 문제를 열거 했을 때 조합적 확산이 일어날 가능성이 있는 문제도 바로 해결 가능한데 그 예로 도널드 커누스가 개발한 Simple Path 알고리즘이 있다.

• 일상에 있는 다양한 알고리즘 중 대표적인 것 중 하나

처리 속도와 하드웨어의 관계

• 입력받은 데이터를 알고리즘에 따라 유익한 정보로 변화 및 출력하는 것을 데이터 프로세싱이라하는데 컴퓨터가 프로그램으로 구현된 알고리즘에 따라 데이터를 처리하는 데이터 프로세싱 머신이다.
• 알고리즘의 유한성을 만족하려면 효율적인 알고리즘 만들거나 하드웨어의 성능을 더 좋게 해야함

무어의 법칙이 예언하는 미래

• 무어의 법칙은 반도체의 집적도가 18개월 마다 두배가 된다하여 이를 CPU의 속도와 메모리의 용량에도 적용 가능

빅데이터를 위한 처리 성능

• 빅데이터를 효율적으로 처리하기 위해 컴퓨터는 스케일 업 / 아웃으로 처리 성능 높임
  • 스케일 업은 컴퓨터 한대의 CPU나 메모리 보강해 처리 성능 올리는 것, 단 CPU 속도 높이고 메모리 높이는데 물리적 제한 존재
  • 스케일 아웃은 컴퓨터 자체의 대수를 늘려 처리 성능을 높이닌 기법, 물리적 제한 없음

• 스케일 아웃에는 클러스터링 기술 사용되는데 이는 파이버 채널 같은 고속네트워크로 여러대의 컴퓨터를 연결하여 마치 한 대의 컴퓨터처럼 사용하면서 빠르게 처리하는 기술
  • 처리 속도 향상은 물론 가용성 향상에도 기여

맵리듀스를 통한 분사처리

• 빅테이터를 처리하는 시스템, 맵리듀스는 클러스터링된 컴퓨터로 대량의 데이터를 분산 처리하고자 고안한 프로그래밍 모델
• 클러스터링된 컴퓨터를 병렬로 동작시켜 데이터베이스나 파일에 저장돼 있는 빅데이터 처리
  • 입력받은 데이터를 맵 페이즈에서 작은 단위로 쪼개 필요한 정보를 모음 => 결과를 리듀스 페이즈에 묶어 처리 결과를 출력
  • 맵과 리듀스 페이즈는 병렬 처리 가능해 클러스터링한 컴퓨터로 분산시켜 병렬로 실행해 빠른 처리 가능

2. 단순한 검색 알고리즘

1. 선형 검색

• 데이터 여러개에서 데이터가 나올 때까지 처음부터 차례로 검색하는 알고리즘, 리니어 서치라고도 함
• 단점은 데이터 양이 많아질수록 원하는 데이터를 찾기 까지 시간이 걸림
• 선형 검색에서 최악의 경우의 수(끝까지 발견 안되는 경우) 최대 검색 횟수라고 하는데 최대 검색 횟수를 N회로하면 평균 검색 횟수는 n/2회 검색량은 O(n)이 된다.

2. 이진 검색

• 바이너리 서치라고 부르며, 검색 범위를 반으로 나누어 원하는 데이터를 찾을 때까지 계속 검색
• 데이터는 어떤 기준에 따라 오름차순이나 내림차순으로 정렬되어 있어야 함
• 원하는 데이터를 찾을 때까지 검색할 데이터 범위를 반씩 줄여가며 찾는 알고리즘으로 선형 검색보다 효율적이ㅣ만 대소 관꼐를 이용하기에 정렬되지 않은 데이터는 검색 불가
• 이진 검색 최대 검색 횟수는 log2n + 1 회 평균 검색 횟수는 log2n회

3. 더욱 수준 높은 검색과 자료 구조

처리속도를 좌우하는 자료구조

• 선형 검색과 이진 검색이라 기본 검색 알고리즘을 알아보았며, 처리를 하려면 데이터를 저장하는 방법도 중요
• 데이터를 다루기 위해 일정한 형식에 맞춰 체계적으로 저장
  • 어떻게 데이터 저장하는지에 따라 처리 시 효율성이 크게 달라지기 때문
  • 이러한 데이터 저장 형식을 자료구조라 부름

3_1. 트리구조

• 나무 구조라고도 부르며 데이터가 나뭇가지처럼 서로 연결되어있는 구조
• 트리 구조 구성하는 요소는 노드라고 부르면 노드끼리 부모 자식 관계를 갖는다.
  • 부모 노드가 없는 맨 위 노드를 루트 노드, 자식 노드가 없는 가장 아래의 노드를 리프 도르가 부름
  • 부모 자식 관계에 있는 노드는 선으로 열결되며이 선을 엣지라고 하며 루트 노드부터 리프 노드까지 계층을 트리 높이라고
• 트리 구조는 루트 노드에서 여러 개의 엣지를 거쳐 노드를 경유하면서 리프 노드에 도달하는 자료 구조

트리 구조 종류

• 자식 노드의 개수가 2개로 제한된 트리 구조는 이진 트리, 자식 노드가 N개 이상인 트리 구조는 N항 트리라 부름
• 그리고 자식 노드가 3개 이상인 트리 구조를 총칭해서 다중 트리라고 부름

이진 트리 검색의 메커니즘

• 트리 구조가 검색에 어떻게 도움이 되는 지
• 이진 트리 중 왼쪽 자식 노드 값이 부모 노드 값 보다 작고, 오른쪽 자식 노드 값이 부모 노드 값 보다 크게 성 된 트리 구조를 가리켜 이진 탐색 트리라고 부름
• 이진 탐색 트리는 데이터를 크기에 따라 나눈 구조를 가져 이 형식을 활용하면 간단한 절차로 이진 검색 가능

  1. 루트 노드를 비교 대상으 노드로 정하고 검색 시작

2. 비교 대상 노드가 없으면 종료
3. 비교 대상 노드와 검색하려는 데이터 비교하여 값이 같으면 종료(발견)
4. 검색하고자 하는 데이터보다 비교 대상 노드 값이 크면 비교 대상 노드를 왼쪽 자식 노드로 지정하고 그렇지 않으면 비교 대상 노드를 오른쪽 노드로 지정
5. 다시 2로 돌아감

AVL 트리의 메커니즘

• 트리 구조 고안 시 주의해야 하는 사항 있는데 트리 구조 높이에 따라 효율이 달라진다는 점
• 실제 현장에서 트리 구조에 데이터 추가하거나 삭제해야 하는 상황이 자주 발생하는데 맹목적으로 데이터를 추가하거나 삭제하면 효율이 매우 나빠짐
• 높이가 일정하면 스텝의 개수는 줄지만 일정하지 않은 경우 선형을 이루게 되면서 스텝의 개수는 선형 검색과 같은 개수가 되어 효율이 매우 나빠짐
• 따라서 AVL (adelson-velskii and landis' tres)라는 자료구조를 기억해야하는데 AVL 트리는 한 노드를 중심으로 좌우 부분 트리의 높이 차가 1 이하인 이진 탐색 트리로 이진 탐색 트리의 성질을 해치지 않으며 데이터 추가 시 트리 높이가 변경되면 AVL 트리의 조건에 따라 트리를 다시 구성해 트리의 높이를 일정하게 유지 가능
• 이렇게 이진 탐색 트리의 조건을 해치지 않으면서 트리를 변형시키는 작업을 가리켜 트리 회전이라 부름

균형 트리와 B트리

• 루트 노드에서 가장 아래 있는 리프 노드까지 높이가 일정하도록 만들어진 트리 구조를 균형 트리라고 부름
• AVL 트리도 평균 트리며 이진 탐색 트리이기도 하므로 일종의 균형 이진 탐색 트리
• B 트리는 다중 트리이면서 균형 트리 구조를 가진 트리 구조로 노드 하나가 자식 노드(다중 트리) 3개 이상 가질 수 있으며 어떤 리프 노드에서도 트리의 높이가 거의 같다(평균 트리)는 특징 가짐
• 노드의 대소 관계는 이진 트리와 같아 왼쪽 자식 노드 값은 부모 노드 값보다 작고 오른쪽 자식 노드 값은 부모 노드 값보다 큼

데이터 개수가 늘어날수록 빨라지는 B트리

• B 트리의 또 다른 특징으로 데이터 개수가 늘어날수록 빨라진다는 점
• 저장하는 데이터 개수 m으로 하면 오더가 O(logmN)이 되어 B트리는 빠르게 검색할 수 있으므로 데이터베이스나 파일 시스템에 자주 이용

• 참고로 도메인 이름도 트리구조

• 원반 3장을 최단 경로로 옮기는 알고리즘 생각

알고리즘이 만족해야하는 조건

1) 범용성, 정당성, 결정성

• 범용성은 작업자와 상관없이 어떤 환경에서도 같은 결과를 내어야 올바른 알고리즘
• 정당성은 주어진 과제에 대해 올바른 결과, 출력을 얻을 수 있어야 올바른 알고리즘
• 같은 입력 시 반드시 같은 결과가 나와야 올바른 알고리즘

Tip, 알고리즘 용어

• 문제: 알고리즘 해결하려는 내용

• 프로그램 : 알고리즘을 컴퓨터에 실행하기 위해 프로그래밍 언어로 써낸 것
• 입력 : 알고리즘 처리 대상이 되는 데이터
• 출력 : 알고리즘을 실행해서 얻은 결과
• 스텝 : 알고리즘을 구성하는 절차, 복잡하거나 시간 걸리는 알고리즘일 수록 스텝 수 증가
• 최적화 : 알고리즘의 스텝수나 처리 시간 줄여 효율적 처리하도록 개선

2) 유한성

• 알고리즘은 유한성 역시 만족해야함
• 무한으로 반복하는 절차는 문제 해결 할 수 없기에

3) 정지성

• 알고리즘은 언제가 정지해야한다. 그러나 정지 여부를 판정하는 알고리즘은 만들 수 없다.

알고리즘의 실행 시간

알고리즘 실행 시간 판단 위해 '계산량' 지표 사용

• 계산량이란 시간 계산량과 공간 계산량으로 나눔

  • 시간은 얼마만큼의 처리 시간이 필요한지, 공간은 어느정동의 기억 용량, 즉 메모리가 필요한지를 의미

• 알고리즘의 계산량은 걸리는 시간을 뜻하는 게 아니라 스텝의 개수(명령 갯수)를 기준으로 한다. 환경에 따라 스텝 실행에 따른 시간은 바뀌지만 개수는 바뀌지 않기에

조합적 확산

• 처리할 데이터 조합이 방대해져 스텝의 개수가 너무 많아지는 경우
• 조합적 확산이 일어날 때는 다른 알고리즘 사용해 현실적인 시간 내 문제 해결

정리

• 알고리즘 문제풀기 위한 절차

• 알고리즘 주어진 입력에 필요한 출력을 얻는 방법을 간단한 조작이나 절차를 조합해서 명확히 정의
• 프로그램은 프로그래밍 언어로 쓰여진 알고리즘 작업 지시서
• 알고리즘은 범용성, 정당성, 결정성, 유한성, 정지성 갖춰야함
• 조합적 확산일어나면 실행 시간이 엄청걸림
• 알고리즘은 정지해야함

페이지 기능 단위 쪼개기

1. 아이템 목록 화면 그리기

• 재고 있는 경우
• 없는 경우

2. 전체 수량 표시
3. 전체 가격 표시

• 상품을 상태별로 그려주는 함수인 stockItem, outOfStockItem으로 나누고 아이템의 재고 상태를 판단해 어떻게 그려줄 건지 판단하는 item 함수로 분리되어 각각 상태 테스트 하기 용이
• 함수 순수하게 만들고 적절한 크기로 나누기

const stockItem = (item: Item) :string=> {
  const name =    item.name;
  const price = item.price;
  const quantity = item.quantity;
  return `이름: ${name}, 가격 : ${price}, 수량 ${quantity}` 
}

const outOfStockItem = (item: Item): string => {
   const name =    item.name;
  const price = item.price;
  const quantity = item.quantity;
  return `이름: ${name} 품절, 가격 : ${price}, 수량 ${quantity}` 
}

const item = (item: Item): string => {
  if (item.outOfStock) {
    return outOfStockItem(item)
  } else {
    return stockItem(item)
  }
}


const totalCnt = (): string => {
  let totalCnt = 0;
  for (let i = 0; i < cart.length; i++) {
    if (!cart[i].outOfStock) {
      totalCnt += cart[i].quantity;
    }
  }
  return `전체수량: ${totalCnt}`
}


const totalPrice = (): string => {
  let totalPrice = 0;
  for (let i = 0; i < cart.length; i++) {
    if (!cart[i].outOfStock) {
    totalPrice += cart[i].price * cart[i].quantity;
    }
  }
  return `전체수량: ${totalCnt}`
}

• 그러나 여기까지 만든 item, totalCnt, totalPrice는 순수함수로 보기 어려운데 일종의 전역변수인 cart를 묵시적으로 의존하며 아무런 인자를 받고 있지 않기 때문

• 각각의 함수에 list인자 받도록 수정 필요, 내부에 for문과 if문 중복되는 부분은 고차함수로 추상화하기

const totalCal = (list: Array<Item>, getValue: (item: Item) => number) => {
  // 전체 목록 중 재고가 있는 상품만 getValue를 실행하고 그 값을 모두 더함

  list
  // 1, 재고가 있는 상품만 분류 - filter
  .filter(item => item.outOfStock ===false)
  // 2. 분류된 상품에 대해 getValue 실행 - map
  .map(getValue)
  // 3. getValue가 실행된 값 모두 더하기 - reduce
  .reduce((total,value)=> total +value, 0) 

  // let total = 0
  // for (let i = 0; i < list.length; i++) {
  //   if (!list[i].outOfStock) {
  //     total += getValue(list[i]);
  //   }
  // }
  // return total
}

const totalCnt = (list:Array<Item>): string => {
  let totalCnt = totalCal(list, (item)=>item.quantity);
  return `전체수량: ${totalCnt}`
}


const totalPrice = (list:Array<Item>):string => {
  let totalPrice =  totalCal(list, (item)=>item.price);
  return `전체수량: ${totalCnt}`
}

const list = (list: Array<Item>) => { 
// 목록에 있는 아이템 태그 변경
  return `
  ${list
  // 태그 목록을 하나 문자열로 연결
    .map(item)
  .reduce((tags,tag)=>tags+tag,"")
}`
}

• 배열의 메소드 체이닝으로 해결했으나 람다 JS라이브러리를 함수와 함수 합성으로 해결 가능

map 잘못 사용하는 경우

• map 함수 내부에 함수 타입을 익명함수를 쓴 경우, 함수가 값을 반환하라는 오류가 나옴

  • 배열에 메소드 필터, 맵, 폴드 등의 메서드 존재, 콜백함 수내 리턴 문 없으면 실수
  • 만약 리턴문 없다면 대신 ForEach를 쓰라 권장
  • 그러나 forEach는 타입 파라미터를 사용하지 않고 void를 리턴하여 함수 합성이 불가
  • 입력값에 대응되는 의미있는 값을 만들지 못하고 있는 예, 따라서 map이 의미가 없다(부수효과만 있기에)

    const totalCal2 = (list: Array<Item>, getValue: (item: Item) => number) => {
    // 재고가 있는 상품만 getValue를 실행하기 위해 새로운 변수 result추가
    const result:Array<number> = []
    list.forEach(function (item) {
    if (!item.outOfStock) {
    result.push(getValue(item))
    }
    })
    

  return result.reduce((total,value)=> total + value) }

이중 for문

const suits = ["♠", "♥", "♣", "♦"];
const numbers = [
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "10",
  "J",
  "Q",
  "K",
  "A"
];



const cards: Array<string> = []
// 중첩된 for 구무
for (const suit of suits) {
  for (const number of numbers) {
    cards.push(suit+number)
  }
}
// 우리가 원하는 작업 정리

// 모든 카드 목록 아래의 작업이 완료
const card2=
// 아래의 작업을 모든 무늬에 적용
  suits.flatMap((suit)=> // 문자열 배열에 리턴된 함수를 다시 map에 적용해 배열이 중첩된 문자열 리턴
  // 아래의 작업을 모든 숫자에 적용
  numbers.map((number)=> // 최종적 리턴은 문자열의 배열
    // 한장의 카드는 무늬외 숫자를 연결한 문자열
    suit + number))
    // 무늬별로 나누어진 카드를 하나로 합침
// .flat()
cards
card2

고차함수

• 하나 이상의 함수를 인자로 취하거나
• 함수를 반환한다

map

• array의 map함수는 배열에 있는 요소들의 동일한 함수를 적용한 후 그 결과를 돌려주는 함수

• 실제 map 함수 구현 방식 제네릭으로 작성, 인자로 배열과 함수를 받으며 함수는 배열의 원소를 받아 새로운 값을 담은 배열을 리턴

const map =<A, B> (array:Array<A>, f:(a:A)=>B): Array<B> => {
  const result: Array<B> = [];
  for (const value of array) {
    result.push(f(value))
  }  
  return result;
}

함수의 타입 다시보기

• 명령형의 경우 값이 반환되지 않는 경우 예외를 처리해줘야한다

• 타입스크립트의 순수함수에는 예외를 표현하는 데이터 타입이 묵시적으로 존재

type MapType<A, B> = (xs: Array<A>, f: (x: A) => B) => Array<B>;
type MapType1 = MapType<number, number>
type Compose<A, B, C> = (g: (y: B) => C, f: (x: A) => B) => (a: A) => C;
type Compose1 = Compose<string, number, boolean>;

find

• find는 걸러지는 값을 만나면 그 값을 즉시 리턴
• 원하는 값을 찾으면 배열을 빠져나올 수 있는 최적화

  function _find(list, predi){
  let keys = _keys(list)
  for(let i =0, len = keys.length; i<len; i++) {
    var val = list[keys[i]]
    if(predi(val))  return val;
  }
  }
  

_find(users, function(user){ return user.id === 20 })

- find_index는 걸러지는 값을 만나면 그 값의 인덱스를 즉시 리턴

```js
function _find_index(list, predi){
  let keys = _keys(list)
  for(let i =0, len = keys.length; i<len; i++) {
    if(predi(list[keys[i]]))  return i;
  }
  return -1
}
_find_index(users, function(user){
  return user.id === 2
}) 

• get, go로 응용

var _find = _curryr(function _find(list, predi){
  let keys = _keys(list)
  for(let i =0, len = keys.length; i<len; i++) {
    var val = list[keys[i]]
    if(predi(val))  return val;
  }
})

_get(
_find(users, function(user){
  return user.id == 2
}), 'name')

_go(users, 
   _find(function(user){
  return user.id == 2
}),
    _get('name')
   ) 

some

• 하나라도 만족하는 값 나오면 트루 반환

function _some(data, predi){
  predi = predi || _identity 
  return _find_index(data, predi || _identity) != -1;
}
// 하나라도 만족하는 값 나오면 트루 반환

_some([1,2,5,10,20], function(val){
  return val > 10
})

// every - 하나라도 거짓이면 펄스이면 리턴
function _every(data,predi){
  return _find_index(data,_negate(predi || _identity)) == -1
}

_every([1,2,5,10,20], function(val){
  return val > 3
})

// true
_every([1,2,0,10])
// false
_some([null, false, 0])

_some(users, function(user){
      return user.age>20
})

• 함수형 프로그래밍은 이렇게 로직을 조합해나가는 방식
• 모두 고차함수로 사용, 보조함수를 받음

  보조함수를 받아 이 것을 만족하는 것에 대한 값을 찾을 수 있음

정의

• 간단히 말해 문제를 풀기위한 절차

알고리즘과 프로그램의 차이

• 알고리즘은 프로그램보다 더 추상적인 개념
• 알고리즘은 문제 해결을 위한 작업 절차 자체로 그 절차를 실행하는 수단은 언급 안함
• 실제로 문제를 풀기 위해 어떤 수단으로 알고리즘을 실행해야하는데 이를 실행할 수 있는 형태로 구현한 것이 프로그램

알고리즘의 역사

알고리즘의 발견

• 고대 그리스 수학자 유클리드의 저서에 쓰인 알고리즘

  컴퓨터 이전의 알고리즘

• 알고리즘은 처리 절차 그 자체, 고대 그리스 시대 사람의 손으로 알고리즘 실행하는 삼각함수 표 존재

컴퓨터 등장과 알고리즘의 발전

• 컴퓨터의 등장으로 알고리즘 세계는 크게 변하며 현실적인 실행 수단이 없었던 알고리즘이 컴퓨터 프로그램 형태로 실현되어 실행

알고리즘 설계와 실행의 차이

• 알고리즘은 실행자가 해석을 넣을 여지가 없는 명쾌한 절차
• 알고리즘 핵심은 만들어진 알고리즘을 사용하는 주체는 그저 절차를 따르면 된다는 것
• 즉, 의미는 몰라도 언제가 정답에 도달하는 것이 알고리즘

21세기 알고리즘

머신러닝

• 컴퓨터에 지능을 부여, 사람이 학습하듯 컴퓨터에도 데이터를 주고 학습시켜 새로운 지식을 얻는 방법

  영자식 증명

• 지캐시, 암호통화는 영지식 증명이라는 알고리즘으로 완전한 익명성 유지

  유전 알고리즘

• 생물의 진화 과정을 모델로 삼아 이상적인 답을 발견하는 알고리즘

• 여러개의 값을 담을 수 있는 배열, 단 타입스크립에선 임의의 타입 값 배열 지정 안되며 Array 타입의 매개변수에 지정한 타입만 값으로 지정

Array와 List

• 몇개인이 결정할 수 없는 비결정성은 공통이나 Array는 인덱스로 임의 접근 시 최적화되어있고 List는 순차적, 재귀적 구조를 지려 원소들에 대한 순차 처리에 최적화

비결정성

• 몇개의 값이 입력될지 출력될지 알 수 없고 값이 하나로 결정되지 않는 다는 의미에서 비결정적

for문으로 해결하기

• 아이템 목록과 전체 수량 및 가격 계산하도록 for문 작성

const cart = [
  {
    code: "tomato",
    outOfStock: false,
    name: "토마토",
    price: 7000,
    quantity: 2
  },
  {
    code: "orange",
    outOfStock: true,
    name: "오렌지",
    price: 15000,
    quantity: 3
  },
  {
    code: "apple",
    outOfStock: false,
    name: "사과",
    price: 10000,
    quantity: 1
  }
];

let totalPrice = 0;
let totalCnt = 0;

for(let i =0; i<cart.length;i++){
const name =    cart[i].name;
const price = cart[i].price;
const quantity = cart[i].quantity;
totalPrice += cart[i].price *cart[i].quantity;
 totalCnt += cart[i].quantity;
console.log(`이름: ${name}, 가격 : ${price}, 수량 ${quantity}`);

}
console.log(`전체수량: ${totalCnt} 전체 가격 ${totalPrice}`)

• 아이템 목록 출력까진 코드내 관심사가 일치했으나 전체수량 및 가격을 계산하는 코드를 작성하면서 관심사가 분리

• 따라서 계산하는 부분 for문 분리하는 리팩토링 필요

for(let i =0; i<cart.length;i++){
const name =    cart[i].name;
const price = cart[i].price;
const quantity = cart[i].quantity;
console.log(`이름: ${name}, 가격 : ${price}, 수량 ${quantity}`);
}

let totalCnt = 0;
for(let i =0; i<cart.length;i++){
totalPrice += cart[i].price *cart[i].quantity;
}

let totalPrice = 0;
for(let i =0; i<cart.length;i++){
 totalCnt += cart[i].quantity;
}
console.log(`전체수량: ${totalCnt} 전체 가격 ${totalPrice}`)

• 관심사 별로 코드를 분리하긴했지만 중복되는 부분이 생겨버림

• 여기에 추가로 품절된 상품은 따로 이름을 표기하고 가격과 수량에도 제외하는 코드를 작성하려면 if문 추가

for(let i =0; i<cart.length;i++){
 if(!cart[i].outOfStock){
const name =    cart[i].name;
const price = cart[i].price;
const quantity = cart[i].quantity;
console.log(`이름: ${name}, 가격 : ${price}, 수량 ${quantity}`);
 } else {
   const name =    cart[i].name+'{품절}';
const price = cart[i].price;
const quantity = cart[i].quantity;
   console.log(`이름: ${name}, 가격 : ${price}, 수량 ${quantity}`);

 }
}

let totalCnt = 0;
for(let i =0; i<cart.length;i++){
  if(!cart[i].outOfStock){
  totalCnt += cart[i].quantity;
  }
}

let totalPrice = 0; 
for(let i =0; i<cart.length;i++){
    if(!cart[i].outOfStock){
  totalPrice += cart[i].price * cart[i].quantity;
     }
  }
console.log(`전체수량: ${totalCnt} 전체 가격 ${totalPrice}`)

• 분기처리 되는 코드가 마찬가지로 반복되며 요구사항 늘어날 때마다 대응해야하는 코드 많아지고 변경되면 동일한 코드를 다 수정해야하여 실수하기 쉬움

• 이렇게 명령적으로 작성한 코드를 함수형 프로그래밍에선 반복된 부분을 추상화함으로서 동일한 작업을 선언적 방식으로 작성할 수 있게 된다.