SW Academy 2기 프론트엔드 과정

4 minute read

Day08

1. 모듈

  • JavaScript는 파일들을 각각 별개의 프로그램으로 취급한다.
  • 옛날에는 전역 스코프를 통해 스크립트간 통신을 진행하였다.
  • 스크립트간 의존도와 실행 순서를 제어해야하는 문제점이 발생하였다.

  • 모듈을 사용하면 스크립트간 의존도를 파악할 수 있고 실행 순서를 쉽게 제어할 수 있게 되었다.

모듈 컴포넌트
설계 시점에 의미있는 요소 런타임시 의미있는 요소
  • JavaScript가 지원하는 모듈은 로컬 실행으로는 동작하지 않음. -> http or https 프로토콜을 통해서만 동작한다.
  • 모듈 기초 사용 방법 모듈 기초 사용 방법
  • 모듈의 특징
    1. 항상 use strict로 실행된다. : let,const,var 키워드 없는 변수 선언은 불가능
    2. 모듈 레벨 스코프가 있다. : 일반 스크립트에선 최상위에 변수를 선언하면 전역 스코프에 추가되어 다른 스크립트에서 참조가 가능하지만 모듈 스크립트에선 import 하지 않는한 서로 참조가 불가능하다.
    3. 단 한번만 평가된다. : 두 번 import 하더라도 한 번만 사용된다.
    4. 지연 실행된다. : 모든 DOM이 만들어진 후에 실행된다.
  • webpack등을 사용하면 type=”module”을 사용할 일이 별로 없다.

2. 유니코드

  • 기본 개념
    • CCS(Coded Character Set) : 문자들을 Code Point에 대응시켜 만든 코드화된 문자들의 집합
      • 표현 범위 : 0x0 ~ 0x10FFFF
      • 표현 방법 : Surrogate Pair 방법을 이용해 2바이트보다 큰 문자를 표현한다.
    • CES(Character Encoding Scheme) : CCS와 octet(8bit) 집합에 대응시키는 것, CCS와 CES는 1:1로 대응된다. ex) UTF-8, UTF-16, …
      • Big-Endian : 큰 쪽에서 작은 쪽으로 저장됨
      • Little-Endian : 작은 쪽에서 큰 쪽으로 저장됨
      • BOM(Byte Order Mark) : 문서 제일 앞에 U+FEFF를 삽입하여 어플리케이션이 바이트 순서를 알 수 있게 해준다.
      • 2.png
    • TES(Transfer Encoding Syntax) : 인코딩된 문자가 특정한 프로토콜을 타고 전송되도록 변환하는 것
  • 유니코드
    • 다양한 나라가 서로 다른 인코딩 방식을 사용함으로써 호환성 및 확장성에 문제를 일으켰다. → 전 세계가 다룰 수 있는 표준 시스템 개발!
    • 이모지는 4byte로 구성되어 있다.
    • 유니코드에서는 영어든 한글이든 2byte로 읽힌다. 따라서 한 글자당 길이는 1을 차지한다.

3. 정규표현식

  • 정규표현식의 목적 : 문자 검색(search), 대체(replace), 추출(extract)
  • 성능은 느리지만 매우 편하다.
  • 3.png
  • (...) : 캡쳐
  • 정규 표현식 연습1
  • 정규 표현식 연습2
  • JavaScript는 RegExp 객체로 정규표현식 기능을 제공한다.
  • 선언 방법

4.png

  • test 5.png
  • exec 6.png
  • match 7.png
  • replace 8.png
  • search : 처음 매칭된 것만 반환하기에 매칭된 모든 부분을 알고 싶다면 matchAll함수를 사용해야됨. 9.png
  • capture 10.png
  • Run-length Encoding : 연속적인 문자열을 개수 + 문자로 묶는 방식 ex) AAAAAABBBDFFFFFFFKK → 6A3B1D7F2K

  • 11.png

  • 선택 과제
    • 개미 수열을 정규표현식을 이용하여 풀어보라!
    • 5를 입력받으면 111221이 나와야 함.

4. 쿠키와 세션, 웹 스토리지

    • 클라이언트에서 저장, 관리하는 데이터들
    • 브라우저를 닫아도 데이터를 유지할 수 있다
    • 각 상태에 수명을 정할 수 있다
    • Set-Cookie : 키 = 값 ; 옵션
    • 옵션 종류
      • Expires : 쿠키 만료 날짜를 지정한다.
      • Secure : HTTPS에서만 쿠키를 전송한다.
      • HttpOnly : JavaScript에서 쿠키에 접근 못하도록 막는다.
      • Max-Age : 쿠키 수명을 정한다. 이때 Expires는 무시된다.
      • Domain : 도메인이 일치하는 요청만 쿠키가 전송된다.
      • Path : 패스와 일치하는 요청만 쿠키가 전송된다.
    • 쿠키의 취약점 : XSS 공격을 당할 수 있다.

  • Session

    • HTTP Session Id를 식별자로 사용자를 구분한다.
    • 클라이언트는 HTTP Session Id를 쿠키 형태로 저장한다.
    • 서버 자체적으로 관리하고 기록한다.
    • 서버의 문제점
      • 세션은 서버에 저장되는데 사용자가 많아진다면?
      • 서버가 2대라면 어느 서버에 session을 저장할까?
  • 이제 서버와 클라이언트간 인증은 별도 토큰을 사용하고 쿠키는 클라이언트의 지속적인 데이터 관리 용도로 많이 사용된다.

  • 웹 스토리지

    • 쿠키 대신 local data를 관리하는 새로운 방법
    • 로컬 스토리지
      • 데이터가 반영구적으로 저장된다.
      • 브라우저를 종료해도 데이터가 남는다.
      • 저장했던 도메인과 이용하는 도메인이 다른 경우 접근이 불가능함
      • 쿠키와 마찬가지로 Key-Value 형태로 저장한다.
    • 세션 스토리지
      • 새 창마다 개별적으로 관리되는 데이터를 저장한다.
      • 브라우저를 닫는 순간 사라진다.
      • 같은 도메인이어도 세션이 다르면 데이터에 접근할 수 없다.
      • 쿠키와 마찬가지로 key-value 형태로 저장된다.
      • 12.png

  • IndexedDB

    • 웹 스토리지처럼 로컬 데이터를 관리하기 위해 등장하였다.

5. HTML과 CSS

  • HTML : Hyper Text Markup Language
  • CSS : Cascading Style Sheets
  • HTML은 이제 문서 구조(Structure)와 의미(Semantics)로만 남게 되었다!
  • 기존 HTML이 감당하지 못하던 것을 감당하기 위해 HTML5가 등장함.
  • 브라우저마다 미묘하게 기본 스타일이 다르다 13.png
  • Reset.css : 모든 css 기본 속성을 없앤다.
  • Normalize.css : 브라우저간 css 차이를 통일시켜준다.
  • HTML과 CSS의 최고의 공부 방법은 사례를 외우는 것이다!
  • CSS 사례들

6. DOM

  • DOM(Document Object Model)
  • document는 DOM tree의 시작점이다.
  • 요소 노드 : HTML 문서 구조를 그대로 표현
  • 속성 노드 : 요소 노드에 붙어있는 노드(태그)
  • 텍스트 노드 : 요소에 텍스트를 표현하고 자식 노드를 가질 수 없음.
  • DOM의 각 객체는 Prototype 객체로 정의되어 있음.
  • DOM tree에서 요소를 찾을 때는 PreOrder(전위순회)순으로 탐색된다.
  • DOM tree 랜더링 과정
    1. Browser가 HTML을 읽어서 DOM tree로 변환함.
    2. Browser가 CSS를 읽어서 Style rules를 만들고 dom 요소에 style을 입힌다.(Attachment)
    3. Render Tree를 만들어서 각 요소가 화면에 어디에 배치될지를 결정함.
    4. 실제 화면에 그려줌.
  • DOM tree + CSSOM tree = Render Tree
  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • querySelector
  • querySelectorAll
  • window.[id]
  • parentNode : 선택한 요소의 부모 노드를 불러옴.
  • firstElementNode : 선택한 요소의 첫 번쨰 자식 노드를 불러옴. 없으면 null 반환
  • lastElementNode : 선택한 요소의 마지막 자식 노드를 불러옴. 없으면 null 반환
  • children : 선택한 요소 노드의 자식 요소 노드를 불러옴. 없으면 빈 배열 반환
  • nextElementSibling : 선택한 요소의 다음 형제 노드를 불러옴. 없으면 null 반환
  • previousElementSibling : 선택한 요소의 이전 형제 노드를 불러옴. 없으면 null 반환
  • hasAttribute : 선택한 요소 노드가 해당 속성을 가지고 있는지 확인
  • getAttribute : 선택한 요소 노드에서 해당 속성의 값을 반환, 없다면 null 반환
  • setAttribute : 선택한 요소 노드에 속성을 정의
  • removeAttribute : 선택한 요소 노드의 해당 속성을 제거
  • textContent : 선택한 요소 노드의 텍스트 노드
  • innerHTML : 선택한 요소 노드의 HTML을 수정한다. XSS 위험이 있다.(추천x)
  • createElement : 요소 노드를 태그 이름으로 생성할 수 있다.
  • appendChild : 선택한 요소 노드의 마지막에 요소를 추가한다.
  • removeChild : 선택한 요소 노드를 제거한다.

7. Virtual DOM

  • 한 번에 여러개의 DOM 객체를 수정한다면?
  • DOM tree 랜더링 과정은 DOM 요소가 수정될 때마다 실행되기 때문에 많은 비용이 요구됨.
  • 실제 DOM tree를 javascript 객체로 만든 것이다. 필요한 정보만 담아 만들어진다.
  • 이벤트나 DOM이 수정되는 한 틱 내에 직접 DOM을 수정하지 않고 virtual dom에서 바뀌는 부분만 수정하고 렌더링 한다.
  • 최적화 및 편의성을 위해 활용함.
  • virtual dom은 느리고 메모리도 2배로 먹는다.
  • document.createDocumentFragment

Categories:

Updated:

You may also enjoy

Nextjs

less than 1 minute read

* 본 강의는 Udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths!)를 바탕으로 제작된 내용입니다. *

Ds06

less than 1 minute read

DS06

Dl06

2 minute read

DL06