12일차 - 정렬 알고리즘


추후에 정리가 필요한 문서입니다!!!

10일차

  1. 조알시 - 정렬

1. 조알시

1. 선택 정렬 Selection Sort

min이라는 애를 하나 두고 여기에 하나씩 넣어본다.

지금 min값과 다음 값을 비교해서 더 작은애를 min과 교체하거나 가만히 두면서 한사이클 다 확인해본다.

가장 작은 min 값을 인덱스0번에 자리를 확정해준다.

두번째 값을 min에 넣어주고 확정된 첫번째 데이터를 빼고 이후 부터 다시 한사이클 확인한다

또 가장 작은 값을 min에 넣어주고…자리 확정해주고..빼고 한사이클 돌리고… 끝까지 돌리면 정렬이 된다.

시간복잡도 O(n^2) (쑤레기)

하지만 구현하기가 쉬워서 많이 쓰인다.

2. 삽입 정렬 Insertion Sort

앞에서부터 조금씩 정렬해나간다

4 1 6 3 2 5 가 있을 때

4를 먼저 자리에 두고 1과 4를 비교해본다.

1이 4보다 작으니까 1은 4 앞으로 삽입된다.

1 4 있을 떄 다음숫자인 6을 확인한다

6은 4보다 크니까 4의 다음으로 삽입된다.

1 4 6 이 있을 때 3을 보고 3은 6보다 작으니 앞으로 4보다 작으니 또 앞으로 1보다는 크니까 1과 4 사이에 삽입된다

시간복잡도 O(n^2)

3. 병합(합병) 정렬 Merge sort

쪼갰다가 합쳐서 확인한다.

4 1 6 3 2 5 7 8

둘씩 쪼개서 확인한다.

4 1 6 3 / 2 5 7 8

또 둘씩 쪼갠다

4 1 / 6 3 / 2 5 / 7 8

또 둘씩 쪼갠다

4 / 1 / 6 / 3 / …

두개씩 합쳐서 확인해본다.

4와 1을 봤을 때 1이 더 작으니까 1 4

6 과 3을 봤을 때 3이 더 작으니까 3 6

1 4 / 3 6 을 비교한다

좌 우의 첫번쨰부터 확인해본다

1 과 3을 비교해서 1이 더 작으니까 1은 자리 고정

4와 3을 비교한다

3이 더 작으니까 3 자리 고정

(1 3이 됐다)

2. 쿠키, 세션, 토큰

1. 웹에서 쿠키와 세션

1. 비연결지향(connectionless)

HTTP 프로토콜의 약점 1 한번의 요청과 응답을 하면 연결을 끊어버린다

2. 상태정보유지안함(Stateless)

HTTP 프로토콜의 약점 2 통신이 끝나면 생겼던 상태를 유지하지않는다

연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.

쿠키와 세션을 사용했을 경우, 한 번 로그인을 하면 어떠한 방식에 의해서 그 사용자에 대한 인증을 유지하게되므로 HTTP 프로토콜의 이러한 특성에서오는 약점을 보완할 수 있습니다.

2. 쿠키

아주 작은 정보 파일

계속 요청에다 쿠키를 실어주니까 트래픽 문제가 있다.

이름+값의 한 쌍의 형태로 저장된다

1. 쿠키 프로세스

2. 쿠키 구성요소

3. 쿠키 종류

세션 : 브라우저가 종료될 떄까지 유지된다

4. 쿠키의 단점

5. 쿠키의 사용처

3. 세션

쿠키의 트래픽 문제와 보안적 이슈를 해결하기 위해 등장했다.

1. 세션 프로세스

2. 세션의 장점

실제 그 안에 있는 것은 서버에서 데이터를 볼 수 있게 해주는 세션 아이디 이기 떄문에 쿠키보다 보안에 좋다

3. 세션의 단점

4. 쿠키와 세션의 차이점

세션id를 가지고 있는 쿠키는 무조건 세션쿠키이기 때문에 브라우저가 종료되면 세션쿠키(세션id)도 종료된다.

3. 토큰

1. 세션-쿠키 방식 인증의 문제점

이러한 문제점들 때문에 토큰이 나왔습니당!

저장공간

확장성

CORS

2. 특징

이런 일련의 문제점을 보완하고자, 요즘은 토큰 방식의 인증 시스템이 훨씬 더 많이 쓰이고 있는 것 같습니다. 그럼 JWT라고 불리는 JSON Web Token은 뭘까요? JWT는 간단히 말하자면 토큰 기반 인증 시스템의 구현체라고 볼 수 있습니다. JWT는 아래와 같은 특징이 있습니다.

  • JSON Web Token (JWT) 은 웹표준 (RFC 7519) 으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 (self-contained) 방식으로 정보를 안전성 있게 전달해줍니다.

  • 수많은 프로그래밍 언어에서 지원됩니다. JWT 는 C, Java, Python, C++, R, C#, PHP, JavaScript, Ruby, Go, Swift 등 대부분의 주류 프로그래밍 언어에서 지원됩니다.

  • 자가 수용적 (self-contained) 입니다. JWT는 필요한 모든 정보를 자체적으로 지니고 있습니다. JWT 시스템에서 발급된 토큰은, 토큰에 대한 기본정보, 전달 할 정보 그리고 토큰이 검증 됐다는것을 증명해주는 signature 를 포함하고있습니다.

  • 쉽게 전달 될 수 있습니다. JWT 는 자가 수용적이므로 두 개체 사이에서 손쉽게 전달 될 수 있습니다. 웹서버의 경우 HTTP의 헤더에 넣어서 전달 할 수도 있고, URL의 파라미터로 전달 할 수도 있습니다.

토큰 프로세스

3. 토큰 프로세스

4. 토큰의 구성

payload

signature

최종적인 결과

5. 토큰의 장점

서버의 확장성

토큰 사용의 확장성

CORS

6. 토큰의 단점

7. Access Token & Refresh Token

JWT의 강화버전

4. 쿠키와 웹스토리지

1. 웹스토리지

5. 토큰은 어디에 저장되면 좋을까 ?

1. 웹스토리지

2. 쿠키

3. 디버깅

프로그래밍 코드에는 시맨틱 에러가 포함되기 쉬운데, 이런 오류는 대부분 진단하기가 어렵습니다. 프로그래밍 코드에는 분명 오류가 있지만 아무 일도 일어나지 않는 경우가 많기 때문입니다. 이런 시맨틱 에러는 오류 메시지가 없으므로 오류를 검색할 위치를 바로 알 수 없습니다. 우리의 코드에서 이런 오류를 찾고, 수정하는 것을 코드 디버깅이라고 합니다.

1. console.log()와 커스텀 에러

1. console API

console.assert(표현식, 오류객체)

평가된 표현식이 false이면 콘솔에 오류를 기록합니다.

function greaterThan(a, b) {
  console.assert(a > b, { message: "a is not greater than b", a: a, b: b });
}
greaterThan(5, 6);

console.count('원하는 메세지')

count() 메소드가 스코프 내에서 호출된 횟수를 기록합니다.

function login(name) {
  console.count(name + " logged in");
}

console.dir(객체)

지정된 객체의 자바스크립트 표현을 출력합니다. 로그 중인 객체가 HTML 요소인 경우 DOM 표현의 속성이 아애롸 같이 출력됩니다.

console.dir(document.body);

console.group(객체[,객체, ...]) & console.groupEnd()

console.group(객체[, 객체, …]) : 선택적 제목을 사용하여 새로운 로깅 그룹을 시작합니다. console.group() 후와 console.groupEnd() 전에 발생하는 모든 콘솔 출력은 시각적으로 그룹화됩니다.

console.groupEnd() : 로깅 그룹을 닫습니다.

function name(obj) {
  console.group("name");
  console.log("first: ", obj.first);
  console.log("middle: ", obj.middle);
  console.log("last: ", obj.last);
  console.groupEnd();
}

name({ first: "Wile", middle: "E", last: "Coyote" });

console.trace(객체)

메소드를 호출한 지점에서 스택 추적을 출력합니다.

console.trace();

2. 자바스크립트 디버거