[DAY-2] JS 주요 문법(2)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
공부량이 어제보다 5배는 늘었습니다.
모르는 내용 파티라서 계속 반복 재생했습니다.. (아련..
근데 너무 재밌어요 프론트 최고야..열심히 해야지!

기존에 공부했던 CS 네트워크 분야랑 겹치는 부분이 많아서 초반에는 수월했는데
뒤로 갈수로 머리 싸매고 있는 저를 발견할 수 있었습니다..

왕왕 긴 정리 글이지만, 읽고 잘못된 부분이 있을 시 (또는 오타가 있을 시)
댓글로 마구마구 알려주세요 😫

[1] 네트워크 기초

브라우저에 URL을 입력하면?

1. URL을 해석합니다.
2. DNS(Domain Name System) 조회로 도메인 → IP주소 변환
   1. www.jiyoung.do 에서 도메인은 jiyoung.do
3. 찾은 IP가 할당된 서버가 존재하는 대역으로 이동
4. ARP(Address Resolution Protocol)를 이용하여 IP(논리 주소) → MAC 주소(물리 주소) 변환
   1. 해당 IP를 가지고 있는 기기가 고유한 MAC 주소 반환
   2. MAC 주소로 기기가 실제로 위치한 곳을 알 수 있다.
5. TCP 통신을 위해 Socket 열기
   1. 3 Way handshake로 연결 요청
6. HTTP 프로토콜로 들어온 패킷 읽고 처리 → 서버에서 적절한 응답 반환
7. 받은 HTML 렌더링
   1. HTML 읽어 DOM Tree → Render Tree → Paint 과정

😊 이전 정리 글 ↓

TCP 프로토콜이란? https://jungjjeong.github.io/cs/network/Network04/
브라우저의 작동 원리 https://jungjjeong.github.io/cs/web/frontend/Browser/

[1-1] http ? https?

http(HyperText Transfer Protocol)는 서버와 클라이언트 사이의 요청과 응답을 주고받는 프로토콜로,
흔히 웹 브라우저 주소창에 입력하는 웹 주소인 URL을 통해 요청과 응답이 이루어집니다.

그렇다면 https는 무엇일까요?

우선 https와 http는 둘 다 서버와 클라이언트 사이의 요청, 응답을 주고받는 프로토콜이라는 것은 같습니다.

하지만, http는 암호화를 지원하지 않기 때문에, 제3자가 중요한 정보를 조회하는 문제가 생깁니다.

이를 보완하기 위해 나온 것이 바로 https입니다!

https(HyperText Transfer Protocol Secure)란 기존의 http에 데이터 암호화가 추가된 프로토콜입니다.

80번 포트를 사용하는 http와 다르게, https는 443번 포트를 사용하며, 암호화를 지원합니다.

암호화 방식에는 대칭키 암호화, 비대칭키 암호화가 있습니다.

→ 나중에 https에 따로 자세히 공부해서 게시글을 올려보도록 하겠습니다. 😊

😊 이전 정리 글 ↓

HTTP 프로토콜 https://jungjjeong.github.io/cs/network/Network02/

[2] 컴퓨터 시간 원리

• 컴퓨터 시간 표현을 위해 하드웨어의 시스템 클럭 이용
  • RTC(Real Time Clock) 모듈 사용
• 시스템 시간을 값으로 표현한 것은 Timestamp

포인트는 시간을 어떤 기준으로 사용해야 할지 잘 고려해야 한다는 것!

서비스에서 사용되는 시간을 용도별로 맞춰서 기록할 필요가 있습니다.

[3] 암호화

평문을 암호문으로 변환하는 것

단방향 암호화

1. 복호화가 불가능하게 해시 알고리즘으로 암호화하는 방법
2. Rainbow Table을 통해 원문을 알아낼 수도 있으니 Salt, Key stretching등으로 조치를 취한다.

Salt : 평문에 임의의 문자열 추가하여 암호화
Key stretching : 해시를 여러 번 반복하여 알기 힘들게 만드는 방법

양방향 암호화

1. 평문을 복호화할 수 있는 형태로 대칭키/비대칭키 알고리즘으로 암호화하는 방법

대칭키 암호 알고리즘 : 같은 키를 사용하여 암호화, 복호화 가능 (ex. AES)
비대칭키 암호 알고리즘 : 공개키와 개인키를 사용하여 암호화, 복호화 (ex. RSA)

[4] 함수형 프로그래밍

함수형 패러다임에는 함수가 최소 단위입니다!

함수 단위로 나누어지면, 재사용성이 굉장히 높겠죠

Q. “12345”를 합해서 출력하는 프로그램

function sum(str) {
  console.log(
    str
      .split("")
      .map((x) => parseInt(x))
      .reduce((x, y) => {
        return x + y;
      }, 0)
  );
}

sum("12345"); // 15

😣 이게 뭔 코드람

저는 함수형 프로그래밍에 익숙해서 내부 로직은 비슷하게 짠 것 같지만, 뜬금 생성자 함수라..
보완해야 할 부분이 너무 많다는 것이 보입니다.

[4-1] 특징

• 상태가 없으므로 사이드 이펙트가 없습니다.
• 재사용성이 높습니다.
• 코드가 짧고 간결합니다.

[4-2] 선언형 프로그래밍

설계에 대한 패러다임보다는 사고에 대한 패러다임에 가깝습니다.

→ 무엇을 해결해야 할지에 집중합니다.

선언형 프로그래밍에서 함수형 프로그래밍이 빛을 발합니다!

→ 데이터의 제어 없이 필요한 함수만 조합하여 문제를 해결할 수 있습니다.

[5] 객체지향과 프로토타입

[5-1] 객체 지향

객체 지향의 ‘객체’란 현실에 있는 것을 추상화 한 것이라 할 수 있습니다.

‘추상’이란 사물이 지니고 있는 여러 측면 중 특정한 부분만 보는 것이라 할 수 있습니다.

그렇다면 객체 지향이란 무엇일까요?

객체 지향이란 객체 위주로 프로그래밍하는 패러다임입니다. 최소 단위는 객체가 되겠죠.

JS는 프로토타입을 통해 객체 지향을 표현합니다.

[5-2] 프로토타입

JS에서 객체를 생성하는 방법은 3가지가 있습니다.

1. 객체 리터럴
2. Object 생성자 함수
3. 생성자 함수

EX) JS의 객체만으로 객체 지향 프로그래밍을 짜봅시다.

function Jiyoung(name, phone) {
  this.name = name;
  this.phone = phone;
  this.getName = function () {
    return this.name;
  };
  this.setName = function (name) {
    this.name = name;
  };
}

const info = new Jiyoung("정지영", "0101234");
const info2 = new Jiyoung("해윰", "0109876");

console.log(info);
console.log(info2);

두 객체 모두 다 메소드가 각각 정의되어 있습니다.

→ 메모리 낭비가 일어나게 되죠.

따라서 기존의 객체를 복사하여 새로운 객체를 생성하는 방식인 ‘프로토타입’을 이용합니다.

function Jiyoung(name, phone) {
  this.name = name;
  this.phone = phone;

  Jiyoung.prototype.getName = function () {
    return this.name;
  };
  Jiyoung.prototype.setName = function (name) {
    this.name = name;
  };
}

const info = new Jiyoung("정지영", "0101234");
const info2 = new Jiyoung("해윰", "0109876");

console.log(info);
console.log(info2);
console.log(Jiyoung.constructor);
console.log(Jiyoung.__proto__);
console.log(info.constructor);
console.log(info.__proto__);

객체들은 각각 프로토라는 내부적인 객체를 가지게 되고, 내부에서 상위 객체를 링크합니다.

이와 같이 프로토타입은 기존 객체를 효율적으로 사용할 수 있는 방법이라 할 수 있습니다.

→ 메모리 낭비가 일어나지 않겠죠.

[5-3] 효율적인 프로토타입 사용

• 상속 흉내내기 (1)

부모 객체를 이용하여 프로토타입 함수를 정의하는 방법입니다.

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

Person.prototype.getName = function () {
  return this.name || "Jiyoung";
};

function JYCompany(name) {}
JYCompany.prototype = new Person();

const jy1 = new Person("Jung Jiyoung");
const jy2 = new JYCompany("Lee Jiyoung");

console.log(jy1.getName());
console.log(jy2.getName());

상위 객체의 함수(getName)가 링크되어 하위 객체에서 이용하는 모습을 확인할 수 있습니다.

• 상속 흉내내기 (2)

내부적으로 생성된 프로토타입 변수를 사용할 수 있는 방법입니다.

apply 함수를 통해 부모 생성자를 사용할 수 있습니다.

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

Person.prototype.getName = function () {
  return this.name || "Jiyoung";
};

function JYCompany(name) {
  Person.apply(this, arguments);
  // this를 바인딩하여 arguments(배열 객체) 형태로 호출된 객체에 전달합니다.
}

JYCompany.prototype = new Person();
JYCompany.prototype.setName = function (name) {
  this.name = name;
};

const jy1 = new Person("Jung Jiyoung");
const jy2 = new JYCompany("Lee Jiyoung");

console.log(jy1.getName());
console.log(jy2.getName());

jy2.setName("Park Jiyoung");
console.log(jy2.getName());

변수도 그대로 담기게 되는 모습을 확인할 수 있습니다.

• Object.create

기존 객체를 재활용할 수 있는 방법입니다.

const jy1 = {
  name: "Jung Jiyoung",
  getName: function () {
    return this.name;
  },
};

const jy2 = Object.create(jy1);
// jy1을 복제해서 만들어졌습니다 -> jy2의 상위 객체는 jy1 !!
jy2.name = "Park Jiyoung";

console.log(jy1.getName());
console.log(jy2.getName());
console.log(jy1.__proto__);
console.log(jy2.__proto__);

[6] 이벤트 루프

JS의 Call Stack은 하나만 존재합니다 (원시 타입이 들어가게 된다고 저번 시간에 배웠던 영역이죠)

→ 싱글 스레드로 동작합니다. 즉 동시에 하나의 작업만을 처리할 수 있습니다,

Call Stack
코드가 실행될 때 쌓이는 곳, Stack 형태로 쌓이게 됩니다.

그렇다면 스크립트는 어떻게 비동기적으로 동작할까요?

이는 브라우저의 이벤트 루프를 사용하기 때문입니다. (😲 브라우저의 힘을 빌려요!)

브라우저는 멀티 스레드로 동작하기 때문에 비동기적 작업이 가능합니다.

[6-1] 동작 원리 (Task Queue)

1. 스크립트가 실행되면 Global Scope에서 실행
2. 코드가 순차적으로 실행
3. Call stack에 쌓임과 동시에 Web API 실행 (콜백 함수)
   1. 함수가 종료되면 Call stack에서 나가고, 다음 함수가 쌓입니다.
4. Web API에서 콜백 함수를 Task Queue에 밀어넣고,
   Call stack이 비어있으면 Task Queue에서 나와 해당 함수들이 쌓입니다. (Tick : 틱)
5. 다시 Call stack이 비면 다음 콜백 함수가 Call stack에 쌓이게 됩니다.

Web API : 브라우저에서 제공하는 API / 콜백 함수를 Queue에 넣어주는 역할
Task Queue : 비동기로 실행된 콜백 함수가 보관되는 영역

[6-2] 동작 원리 (Microtask Queue)

이벤트 루프가 Task Queue보다 우선으로 확인하는 곳이 Microtask Queue입니다.

만약 Microtask Queue에 콜백 함수가 있다면, 이를 먼저 Call Stack에 넣어줍니다.

더 이상 Microtask Queue에 처리해야 할 콜백 함수가 없다면, Task Queue를 확인하고 처리합니다.

대표적으로 Promise의 then()의 콜백(프로미스의 비동기 호출)은 Task Queue가 아닌 Microtask Queue에 담기게 됩니다.

[6-3] 동작 원리 (Animation Queue)

Animation Queue (= Animation Frames)는 requestAnimationFrame에 의해 등록됩니다.

requestAnimationFrame(function () {
  console.log("animation");
});

Task Queue, Microtask Queue와 같은 역할이며, 우선순위는

Microtask Queue > Animation Queue > Task Queue 순으로 실행됩니다.
(크롬 기준, 때로는 Animation Queue가 Vsync에 맞춰 호출되느라 Task보다 후에 호출될 수 있습니다.)

😊 정리
JS는 비동기 작업을 수행할 때, Web API를 통해 여러 Queue에 등록된 작업들을 우선순위에 따라 꺼내서 처리합니다.

[7] 모듈

스크립트 간 의존도를 파악할 수 있고, 실행 순서를 쉽게 제어할 수 있어 모듈을 사용합니다.

모듈과 컴포넌트
모듈은 설계 시점에 의미 있는 요소이며 (의식적으로 나눠놓은 요소)
컴포넌트는 런타임 시점에 의미 있는 요소입니다. (실행되는 요소)

→ 하지만 JS의 모듈은 직접 런타임에 실행이 됩니다 😮
→ 용어의 의미만 정확히 파악해 놓으면 될 듯!

[7-1] JS에서의 모듈

1. use strict(엄격 모드) 실행
   1. 일반 script에서는 let이나 var을 제외하고 변수 선언 가능(Global Scope 저장)
   2. 하지만 모듈로 사용하게 되면 이를 허용하지 않습니다.
2. 자체적인 모듈 레벨 스코프
   1. import, export 하지 않는 한 서로 참조할 수 없습니다.
3. 단 한번만 평가
   1. 한 파일에서 2번 이상 import 되더라도, 실행은 한번만!
4. 지연 실행
   1. 모든 DOM이 만들어 진 후에 실행이 됩니다.

[8] 유니코드

유니코드는 왜 생겼을까요?

→ 다양한 나라가 서로 다른 인코딩 방식을 사용함으로써, 호환성 및 확장성에 문제를 일으켰기 때문입니다.

→ 따라서 전 세계 문자를 컴퓨터에서 다룰 수 있도록 표준 시스템(=유니코드)이 나왔습니다.

[9] 정규표현식

정규표현식을 이용하면 패턴을 이용하여 원하는 문자를 검색/대체/추출 할 수 있습니다.

성능은 매우 느리지만, 너무 편합니다.

정규 표현식 에디터 : https://rubular.com/

😣 실습해 보았습니다.

대략적인 문법만 알아두면 해당 에디터를 사용해서 쉽게 정규 표현식을 만들 수 있습니다.

JS에서는 RegExp 객체로 정규 표현식 기능을 제공합니다.

• test : 입력받은 문자열에 찾는 패턴이 있는지 확인 후, 있다면 true / 없다면 false
• exec : 입력받은 문자열에 찾는 패턴이 있는지 확인 후, 있다면 패턴 정보(문자열) / 없다면 null
• match : String 객체에서의 exec 함수 (matchAll도 있어요)
• replace : String 객체에서 패턴을 찾은 후, 일치한 패턴 정보를 문자열로 변환
• search : String 객체에서 패턴을 찾을 후, 일치한 패턴 정보의 위치 반환
• capture : () 로 감싸며 사용 / match 반환값의 첫 번째 인덱스부터 캡쳐 결과 포함

[9-1] 개미 수열 풀어보기

→ 😣 푸는중 추가 예정

[10] 쿠키와 세션, 웹 스토리지

HTTP 통신은 기본적으로 상태가 존재하지 않습니다. (단발성)

따라서 서버는 요청이 어떤 브라우저에서 온 것인지 알 수 없겠죠.

이때 헤더에 쿠키를 담으면 서버가 쿠키를 어디서 읽어 온 것인지 알 수 있습니다.

[10-1] 쿠키

쿠키는 프론트엔드(클라이언트)에서 저장하고 관리하는 데이터입니다.

서버에서 Set-Cookie를 Response 헤더로 내려주면 클라이언트는 받은 값(Key-Value 형태)을 파싱하여 저장할 수 있습니다.

😮 쿠키의 옵션

• Expires : 쿠키 만료 날짜 지정
• Secure : HTTPS에서만 쿠키 전송
• HttpOnly : JS에서 쿠키에 접근하지 못하도록 막습니다.
• Max-Age : 쿠키 수명을 정합니다. (Expires 무시)
• Domain : 도메인이 일치하는 요청만 쿠키가 전송됩니다.
• Path : 경로와 일치하는 요청만 쿠키가 전송됩니다.

하지만 쿠키에는 여러 단점이 있습니다.

• XSS(Cross-Site Script) 공격을 당할 수 있습니다.
• 쿠키를 암호화하지 않을 경우, 중간에 탈취당할 수 있습니다.
• 서버에서는 어떤 클라이언트에서 쿠키를 보냈는지(쿠키 주인을) 알지 못합니다.

XSS
JS를 이용해 악의적인 사용자가 다른 사용자의 쿠키 값 탈취

[10-2] 세션

쿠키에 HTTP 세션 ID를 식별자로 담아 사용자를 구분할 수 있습니다.

하지만 세션에는 치명적인 단점이 있습니다.

• 세션은 서버에 파일로 저장되어 과부하를 일으킬 수 있습니다.
• 서버의 수가 많다면, 세션 관리가 어렵습니다.

따라서 서버와 클라이언트 간 인증은 별도 토큰을 사용하며
쿠키는 클라이언트 자체적인 지속적인 데이터 관리 용도로 많이 사용합니다.

[10-3] 웹 스토리지

쿠키 대신 클라이언트의 데이터를 저장하기 위한 새로운 방법인 웹 스토리지가 있습니다.

웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있습니다.

쿠키와 마찬가지로 Key-Value 형태로 저장됩니다.

• 로컬 스토리지

로컬 스토리지는 데이터를 저장할 경우, 반영구적으로 데이터가 저장됩니다.

• 세션 스토리지

새 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리합니다.

로컬 스토리지와 다르게 브라우저를 닫는 순간 사라집니다. (휘발성)

[10-4] IndexedDB

트렌젝션이 가능한 로컬 데이터베이스입니다.

IndexedDB는 많은 양의 데이터를 구조화해서 저장하는데 유용합니다.

인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다.

---

출처

프로그래머스

https://resilient-923.tistory.com/308

https://velog.io/@thms200/Event-Loop-이벤트-루프

https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API