JavaScript 주요 문법 (2)

조혜준·2023년 10월 20일
JavaScript 주요 문법

프로그래머스 프론트엔드 미니 데브코스

목록 보기
9/14

[1] 네트워크 기초

브라우저에 URL을 입력하면 무슨 일이 발생할까?

  • Step 1) URL을 해석한다
    • scheme://< user >:< password >@< host >:< port >/< url-path >
    • 예시
      • http:// example.com:8761/members
      • ftp:// admin:1q2w3e4r@example.com/image.png
      • mailto: kciter@naver.com
      • http:// programmers.co.kr
  • Step 2) DNS를 조회한다
    • DNS : Domain Name System
    • DNS는 도메인과 IP주소를 서로 변환
    • DNS로 요청을 보내기 전에 브라우저 캐시와 hosts 파일을 참조함
    • DNS는 보통 통신사(ISP)에서 제공하는 것을 사용
    • DNS를 운영하는 서버를 보통 Name Server라고 함
    • present.do, www.present.do, gateway.dev.present.do 전부 도메인은 present.do임
  • Step 3) 해당 IP가 존재하는 서버로 이동한다
    • 네트워크 장비 라우터를 통해 이동
    • 동적 라우팅을 통해 이동
  • Step 4) ARP를 이용해 MAC 주소 변환을 합니다
    • ARP : Address Resolution Protocol
    • 논리주소인 IP주소를 물리주소인 MAC 주소로 변환하는 프로토콜
    • 실제 통신을 통해 변하지 않는 고유한 MAC 주소가 필요
    • 네트워크 내에 ARO를 Broadcasting하면 해당 IP 주소를 가지고 있는 기기가 MAC 주소를 반환
  • Step 4-1) IP주소와 MAC 주소
    • IP는 논리적인 주소, MAC은 물리적인 주소
    • 기계의 실제 위치를 알기 위해서는 MAC 주소가 필요
  • Step 5) TCP 통신을 통해 Socket을 열어야 합니다.
    • 네트워크를 통해 해당 기기로 패킷을 전달
    • 3 way handshake로 연결을 요청
    • 요청이 수락되면 기기는 패킷을 받아 처리
  • Step 6) 서버는 응답을 반환합니다
    • HTTP 프로토콜로 들어온 패킷을 읽고 처리
    • 요청에 따라 적절한 응답값을 반환
  • Step 7) 브라우저는 렌더링합니다
    • HTML을 읽어 DOM Tree를 구축
    • 만들어진 Dom Tree를 이용하여 화면에 글미
    • 스크립트를 실행

[2] 컴퓨터 시간 원리

컴퓨터 시간 : 현실 시간을 전산화한 것

시간이 결정되는 물리법칙 3가지

  • 물리량
    • 시간은 물리학 관점에서 봤을 때 시간과 시각 사이 간격을 표현하는 단위를 뜻함
    • ex) 지금 이 순간(Instance)은 빅뱅(Epoch) 이후 시간이 얼마나 흘렀는가?
  • 위치
    • 시간은 위치에 따라 다르게 표현할 수 있음
    • ex) 경도 0도(UTC)가 정오일 때, 동경 135도의 시각은? (경도상 위치)
    • ex) 런던이 정오일 때, 미국의 시간은? (국가, 지역)
  • 천문 현상
    • 지구 자전속도의 불규칙성, 지구의 자전주기와 공전주기 등 천문 현상으로 인한 시간 보정이 필요
    • ex) 윤초, 윤달, 윤년

시간이 결정되는 물리법칙이 아닌 협의 3가지

  • 문화
    • 문화에 따라 시간 표현이 다를 수 있음
    • ex) 태양력, 태음력, 이슬람력, 에티오피아력 등
  • 역사
    • 역사적 사건에 의해 시간은 다르게 표현될 수 있음
    • ex) 1592년 10월 4일 다음날은 그레고리력을 사용해 10월 5일부터 14일까지 달력에 존재x
  • 사회
    • 사회적 제도에 의해 시간은 변할 수 있음
    • ex) 일광 시간 절약제(Summer Time)

-> 꽤 많은 조건을 고려하여 시간을 표시해야 함


협정 세계시 (UTC)

  • 원자 시계와 윤초 보정을 기반으로 표준화한 시각
  • 모든 시간대는 UTC+0을 기준으로 환산
  • 대한민국의 시간은 UTC+9
    • 예를 들어, 영국(UTC+0)이 오전 1시라면 대한민국은 오전 10시가 됨
  • 표기법은 ISO 8601을 따름
    • 2021-03-20T09:00:00.000Z
      //UTC+0기준 2021년 3월 20일 9시
    • 2021-03-20T09:00:00.000+09:00
      //UTC+9(한국시간)기준 2021년 3월 20일 9시
    • 가운데 T는 Time, 시간 뒤 Z는 Zulu Time을 의미
      • 경도 0(Zero)의 앞글자 z를 나타내고, z는 무선 통신 용어로 Zulu 라고 표현됨

컴퓨터가 시간을 표현하는 방법

  • 하드웨어의 시스템 클럭을 이용
  • 특정 시간(Epoch)을 기준으로 시스템 클럭의 틱을 세는 것으로 구현됨
  • 이를 시스템 시간이라고 부름
  • 시스템 시간을 값으로 표현한 것을 타임스탬프(Timestamp)라고 부름
  • 타임스탬프는 운영체제마다 기준시간과 단위가 다를 수 있음
  • 유닉스 계열 운영체제에서 시간을 표시하는 방법을 Unix Time이라고 부름

시스템 클럭의 원리

  • RTC(Real Time Clock)이라는 모듈을 사용
  • RTC는 메인보드에 붙어있어 전원을 끄더라도 계속 작동됨
  • RTC는 카운터 회로를 통해 클럭을 발생시킴
    • 카운터 회로의 핵심 부품인 결정 진동자가 만드는 정확한 주파수를 이용함
    • 보통 1클럭에 32.768kHZ가 발생
    • 32.768kHz인 이유는 계산하기 편해서

Unix Time

  • 1970년 1월 1일 0시 0분 0초가 기준 시각
  • 1970년 1월 1일인 이유는 유닉스를 개발한 데니스 리치가 아무 이유 없이 정한 날짜
  • 1970년 이전 시간은 음수로 표현됨
  • 초 단위로 시간이 증가

현재 시간을 어떻게 알아낼까?

  • 컴퓨터를 키면 자동으로 현재 시간을 보여줌
  • 시스템 시간을 네트워크 타임 프로토콜(NTP)를 통해 동기화할 수 있음
  • NTP 서버에 네트워크 요청을 하여 현재 시간을 받을 수 있음
  • NTP 서버는 계층으로 이루어져 있으며, 그 계층을 Stratum이라고 부름
  • 최상위 계층을 PRC(Primary Reference Clock)이라고 부름

시간대를 어떻게 고려해야 할까?

  • 국가, 지역별로 시간이 다를 수 있고, 한 국가에 시간대가 여러개인 경우도 있으며, 일광 시간 절약제가 시행된다면?
  • Time Zone 데이터를 이용할 수 있음
  • 현실 세계에 이벤트가 발생되면 업데이트 됨
  • 표기법 : 대륙/도시의 형태를 따름 (예 : Asial/Seoul, America/New_York)
  • 이 값을 Zoneld라고 부름

시간을 어떤 기준으로 사용해야 하는가?

  • 글로벌 서비스를 운영한다면 시간이 매우 중요해짐
  • 전부 TimeZone을 적용하면 되는 것이 아니라 서비스에서 사용되는 시간을 용도에 맞춰 기록할 필요가 있음

순수한 시간

  • 시간대와 지역, 문화, 사회를 고려하지 않고 순수하게 시간만을 기록해야하는 경우가 있음
    • 생일, 기업 설립일, 기념일, 국경일 등

UTC

  • 역사, 사회, 문화에 대한 맥락없이 사건이 발생한 시각만을 고려할 때 사용
    • 로깅, 감사, 시계열 데이터

TimeZone이 적용된 시간

  • 역사, 사회, 문화르 ㄹ고려하여 사용자가 이용한 시각을 정확히 알아야할 때 사용
  • UI에 표시되는 시간을 기준으로 보여줄 때 사용
    • 결제 시각, 푸시 알림 시간, UI 시각 표시, 캘린더

JavaScript에서 사용법

  • 간단하게 사용하면 Date 객체를 사용할 수 있음
  • 가장 유명한 moment.js는 deprecated 됨
    • 대체 라이브러리로 date-fns, luxon을 사용할 수 있음

[3] 암호화

암호화

  • 평문(Plaintext)을 해독할 수 없는 암호문(Ciphertext)로 변환하는 것을 의미
  • 단방향(해싱)과 양방향 암호화가 존재

단방향 암호화

  • 해시 알고리즘을 이용하여 복호화할 수 없는 형태로 암호화함
  • 대표적으로 MD5와 SHA 알고리즘이 있음
  • 사용자 비밀번호 등을 저장할 때 주로 사용
  • MD5와 SHA-0, SHA-1은 해시 충돌이 발생할 수 있는 취약점이 있기 때문에 사용을 권하지는 않음

단방향 암호화에서 고려할 점

  • 복호화가 불가능하지만, Rainbow Table을 통해 원문을 알아낼 수도 있음
    • Rainbow Table은 평문과 해시 함수로 만든 문자열을 모두 저장시켜놓은 표를 말함
  • 따라서 불의의 사고로 암호화된 데이터를 탈취당하더라도 원문을 알아낼 수 없도록 조치를 해야 함
  • Salt, Key stretching을 이용하여 해결할 수 있음

Salt

  • 평문에 임의의 문자열을 추가하여 암호화하는 방법
  • 재료에 소금을 곁들여 먹는 것에 비유한 방법
  • Salt는 128bit 이상으로 만들 것을 권장
  • 사용자마다 다른 Salt를 사용하게 하면 더 안전함

Key stretching

  • 해시를 여러번 반복하여 원문을 알기 힘들게 만드는 방법
  • 일반적인 시스템에서 0.2초 이상 반복되면 안전하다고 함

Salt와 Key stretching을 이용하는 알고리즘

  • 직접 구현하는 것보다 이미 검증받은 알고리즘을 사용하는 것이 안전
  • PBKDF2
    • NIST(미국표준기술연구소)에서 승인된 알고리즘
    • DIGEST = PBKDF2(PRF, Password, Salt, c, DLen)
  • bcrypt
    • 비밀번호 저장을 목적으로 탄생
    • OpenBSD에서 기본으로 사용하고 있는 알고리즘

양방향 암호화

  • 평문을 복호화할 수 있는 형태로 암호화하는 방법
  • 대칭키와 비대칭키 알고리즘으로 나뉨
  • 대표적으로 대칭키를 이용하는 AES와 비대칭키를 이용하는 RSA로 나뉨

대칭키 암호 알고리즘

  • 대표적으로 AES(Advanced Encryption Standard)가 있음
  • 같은 키를 이용하여 암호화, 복호화가 가능

비대칭키 암호 알고리즘

  • 대표적으로 RSA(Rivest, Shamir and Adleman)가 있음
  • 이름이 특이한데 RSA알고리즘을 만든 사람들 3명 이름을 따서 만들었기 때문
  • 공개키와 개인키 두가지 키가 존재
  • RSA는 소인수 분해를 기반으로 만들어진 알고리즘

JavaScript에서 이 모든 것을 이용하는 방법


[4] 함수형 프로그래밍

프로그램은 순차, 분기, 반복, 참조로 구성됨
패러다임을 위 4가지 요소를 어떻게 이용할 것인가를 다름


함수형 패러다임

  • 객체지향 추상화의 최소 단위가 객체인 것처럼 함수형은 함수가 최소 단위
  • 함수 단위로 나눠지므로 재사용성이 높음
  • 불변성을 지향하기에 동작을 예측하기 쉽고 사이드 이펙트를 방지
    • 사이드 이펙트를 방지한다는 것은 동시성의 문제도 해결된다는 의미
  • 객체지향은 제어 흐름의 간접적인 전환에 부과되는 규율
  • 함수형은 변수 할당에 부과되는 규율

함수형 프로그래밍의 장점/단점

  • 상태가 없기 때문에 사이드 이펙트가 없음 > 변수 조작이 안됨
  • 재사용성이 높음 > 함수를 잘게 쪼개야 함(복잡해짐)
  • 코드가 짧고 간결함 > 많은 숙련도를 요구

선언형 프로그래밍

  • 기존 명령형 프로그래밍은 문제를 어떻게 해결해야 하는지 컴퓨터에게 명령을 내리는 방법
  • 선언형 프로그래밍은 무엇을 해결해야 할지에 집중하고 해결 방법은 컴퓨터에게 위임하는 방법
  • Control Flow
    • Goto, If/Then/Else, Switch/Case, For/While
  • Data Flow
    • Stateless, Recursion, Pipe

JavaScript는 멀티 패러다임이 가능하다.
굳이 객체지향과 함수형으로 나눌 필요없이 둘다 쓰자!


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

객체지향의 객체는 현실에 있는 것을 추상화한 것
현실에 존재하는 것을 코드로 옮기는 것이 아님!

추상이란 사물이 지니고 있는 여러 측면 중 특정한 부분만 보는 것
그 외의 필요없는 부분은 전부 버림!


객체지향이란?

  • 객체 위주로 설계하고 프로그래밍하는 패러다임
  • 객체지향 언어에선 추상화의 최소 단위가 객체
  • 각각의 객체는 메시지를 주고받을 수 있음

객체지향의 오해1

  • 객체지향은 패러다임일 뿐 언어와는 관계가 없음
  • 언어는 지향하는 것을 조금 더 편하게 구현할 수 있게 도와줄 뿐임
  • 따라서 클래스가 없는 JavaScript, Go, C언어로도 객체지향 프로그래밍을 할 수 있음
  • 자바스크립트는 프로토타입을 통해 객체지향을 표현함

객체지향의 오해2

  • 절차지향보다 객체지향이 무조건 더 좋은 것은 아님
  • 만들어야하는 프로그램에 따라 절차지향이 더 적합할 수 있음
    • 비교적 간단한 프로그램일 수록 절차지향이 더 만들기 쉽고 직관적
  • 객체지향은 객체간 통신하기 때문에 흐름이 더 직관적이어서 더 복잡한 프로그램에 적합

자바스크립트의 객체
: 클래스 기반 언어처럼 속성(Attribute)과 행위(Method)를 정의할 수 있음


객체 생성 방법

  • 객체 리터럴, Object, 생성자 함수 세가지 방법을 이용할 수 있음

프로토타입

  • 기존의 객체를 복사하여 새로운 객체를 생성하는 방식
  • 기존 객체를 효율적으로 사용할 수 있는 방법이라 할 수 있음

Effective Prototype (프로토타입을 더 효과적으로 사용하기)

  • 상속 흉내내기
    • 부모 객체를 이용하여 프로토타입 함수 정의하기
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function () {
  return this.name || "선협";
};
function Korean(name) {}
Korean.prototype = new Person();

const lee = new Person("이선협");
const kim = new Korean("김선협");
console.log(lee.getName());    //이선협
console.log(kim.getName());    //선협

  • 상속 흉내내기
    • 부모 생성자를 빌려 쓸 수 있음
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function () {
  return this.name || "선협";
};
function Korean(name) {
  Person.apply(this, arguments);
}

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

const lee = new Person("이선협");
const kim = new Korean("김선협");
console.log(lee.getName());    //이선협
console.log(kim.getName());    //김선협
kim.setName("박선협");
console.log(kim.getName());    //박선협

  • Object.create
    • 기존 객체를 재활용할 수 있음
const lee = {
  name: "이선협",
  getName: function () {
    return this.name;
  },
};

const kim = Object.create(lee);
kim.name = "김선협";

console.log(lee.getName());    //이선협
console.log(kim.getName());    //김선협
console.log(lee.__proto__);    //{}
console.log(kim.__proto__);    //{ name: '이선협', getName: ƒ getName() }

[6] 이벤트 루프

JavaScript의 Call Stack은 하나만 존재하기 때문에 JavaScript는 Single Thread로 동작
-> Event Loop는 그림에서 보이는 것과 같이 자바스크립트의 엔진이 아님


위의 그림의 과정들은 Multi Thread로 동작

  • 자바스크립트의 엔진이 Single Thread일 뿐, 브라우저는 Multi Thread로 동작하기 때문에 위의 과정이 가능함

비동기작업은 Task Queue 뿐만 아니라 Microtask Queue, Animation frames에도 등록됨

profile
조혜준
안녕하세요
이전 포스트

JavaScript 주요 문법 (1)

다음 포스트

JavaScript 주요 문법 (3)

0개의 댓글