"면접 준비" 태그로 연결된 7개 게시물개의 게시물이 있습니다.

TypeScript#

목표#

• TypeScript로 타이핑을 잘하면, 런타임 전에 미리 오류를 알 수 있습니다.

• 코드의 구현자가 사용자에게 의도를 전달할 수 있다.

타입 시스템#

• 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템

• 컴파일러가 자동으로 타입을 추론하는 시스템

☝ 타입스크립트는 타입을 명시적으로 지정할 수 있고 명시적으로 지정하지 않으면컴파일러가 자동으로 타입을 추론한다.

명시적 타입 vs 추론#

// 함수의 리턴 타입은 number로 추론된다.// 하지만 매개변수의 타입을 명시적으로 지정하지 않아서, any로 추론된다.function f(a) {    return a * 38;}
// 사용자는 a가 any 이기 때문에 사용법에 맞게 함수를 실행했지만, 사용자는 예측하지 못한 결과를 얻게 된다.console.log(f(10)); // 380console.log(f('Mark')); // NaN

이것은 noImplicitAny 옵션을 통해 방어할 수 있다. 타입을 명시적으로 지정하지 않은 경우 any 로 추론되는 변수가 있으면 컴파일 에러가 발생한다.

// 매개변수의 타입을 명시적으로 지정했다.// 명시적으로 지정하지 않은 리턴 타입은 number로 추론된다.function f(a: number) {    if (a > 0) {        return a * 38;    }}
// 사용자는 사용법에 맞게 숫자형을 사용해서 함수를 실행했지만,// 실제로는 함수의 리턴이 undefined로, undefined + 5가 실행되어 NaN이 출력된다.
console.log(f(5)); // 190;console.log(f(-5) + 5); // NaN

strictNullChecks 옵션을 켜면 모든 타입에 자동으로 포함되어 있는 null 과 undefined 를 제거해준다.

// 이 함수의 리턴 타입은 number | undefined로 추론된다.function f(a: number) {    if (a > 0) {        return a * 38;    }}
// 해당 함수의 리턴 타입은 number | undefined 이기 때문에,// 타입에 따르면 컴파일 에러가 발생한다.// 컴파일 에러를 고치기 위해 사용자와 작성자가 의논해야 한다.console.log(f(-5) + 5); // error TS2532: Object is possibly 'undefined'

하지만 가급적이면 명시적으로 리턴 타입을 지정하는 것이 좋다.

noImplicitReturns 옵션을 켜면 함수 내의 모든 코드의 줄기가 값을 리턴하지 않으면 컴파일 에러를 발생시킨다.

// error TS7030: Not all code paths return a valuefunction f(a: number) {    if (a > 0) {        return a * 38;    }}

이로 인해 리턴 타입을 명시하고, 모든 줄기에 return 을 직접 하도록 구현자에게강제할 수 있다.

매개변수에 object가 들어오는 경우#

function f(a) {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}
console.log(f({ name: 'Mark', age: 38 })); // 이름은 Mark이고, 연령대는 30대 입니다.console.log(f('Mark')); // 이름은 undefined이고, 연령대는 NaN대 입니다.

JavaScript에서는 제약사항으로 알려주지 않기 때문에 런타임에서 오류를 파악할 수있다.

• Object literal type

function f(a: { name: string, age: number }): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}

• 나만의 타입을 만드는 방법

interface PersonInterface {  name: string;  age: number;}
type PersonTypeAlias = {  name: string;  age: number;}
function f1(a: PersonInterface): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}
function f2(a: PersonTypeAlias): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}

interface vs type alias#

structural vs nominal type system#

타입스크립트는 structural 타입 시스템을 사용한다.

• structural type system : 구조가 같으면, 같은 타입이다.

• nominal type system : 구조가 같아도 이름이 다르면, 다른 타입이다.

interface IPerson {    name: string;    age: number;    speak(): string;}
type PersonType = {    name: string;    age: number;    speak(): string;};

• typescript를 nominal 처럼 쓰는 꼼수 ? - 아직 잘 이해를 못함

  type PersonID = string & {readonly brand: unique symbol};
  function PersonID(id: string): PersonID {    return id as PersonID;}
  function getPersonById(id: PersonID) {}
  getPersonById(PersonID('id-aaaaaa'));getPersonById('id-aaaaaa');

  복사

• function

  type EatType = (food: string) => void;
  interface IEat {    (food: string): void;}

  복사
• array

  type PersonList = string[];
  interface IPersonList {    [index: number]: string;}

  복사
• intersection

  interface ErrorHandling {    success: boolean;    error?: {message: string};}
  interface ArtistsData {    artists: {name: string}[];}
  type ArtistsResponseType = ArtistsData & ErrorHandling;
  interface IArtistsResponse extends ArtistsData, ErrorHandling {}

  복사
• union

  interface Bird {    fly(): void;    layEggs(): void;}
  interface Fish {    swim(): void;    layEggs(): void;}
  type BirdType = {    fly(): void;    layEggs(): void;};
  type FishType = {    swim(): void;    layEggs(): void;};
  // union은 type alias를 사용해야 한다.type PetType = Bird | Fish;
  // 에러 발생interface IPet extends PetType {}class Pet implements PetType {}
  // 가능interface IBird extends BirdType {}class IFish implements FishType {}

  복사

Declaration Merging - interface#

• 중복되는 이름으로 선언되었을 때 머지되는 기능은 interface에서만 제공된다.

• type은 중복시에 에러가 발생한다.

• 이는 외부 유틸에서 사용자가 원하는 타입을 추가해서 사용하는 것이 가능하다.

interface MergingInterface {    a: string;}
interface MergingInterface {    b: string;}
let mi: MergingInterface;// mi: { a: string, b: string }

언제 type을 사용하고 언제 interface를 사용하는가

• 의미적으로, 역할적으로 type alias를 타입에 별칭을 붙일 때 사용한다.

• 즉, 이미 있는 타입에 별칭을 붙여 다른 이름으로 부르고 싶을 때, 이미 있는 타입을 union으로 조합할 때 사용한다.

• 그 외에 새로운 타입을 생성할 때 interface를 사용한다.

  • 실제 동작 상의 차이는 Merging에서의 차이가 가장 중요하다.

서브 타입과 슈퍼 타입#

집합의 관계에서 포함되는 쪽이 서브 타입, 포함하는 쪽이 슈퍼 타입이다.

let sub1: 1 = 1;let sup1: number = sub1;sub1 = sup1; // error! Type 'number' is not assignable to type '1'.
let sub2: number[] = [1];let sup2: object = sub2;sub2 = sup2; // error! Type '{}' is missing the following the properties from type 'number[]': length, pop, push, concat, and 16 more.
let sub3: [number, number] = [1, 2];let sup3: number[] = sub3;sub3 = sup3; // error! Type 'number[]' is not assignable to type '[number, number]'. Target requires 2 element(s) but source may have fewer.
let sub4: number = 1;let sup4: any = sub4;sub4 = sup4;
let sub5: never = 0 as never;let sup5: number = sub5;sub5 = sup5; // Type 'number' is not assignable to type 'never'.
class Animal {}class Dog extends Animal {    eat() {}}
let sub6: Dog = new Dog();let sup6: Animal = sub6;sub6 = sup6; // Property 'eat' is missing in type 'Animal' but required in type 'Dog'.

☝ any 와 never 는 추후에 다시 학습

같거나 서브 타입인 경우 할당이 가능하다. ⇒ 공변#

let sub7: string = '';let sup7: string | number = sub7;
// object - 각각의 프로퍼티가 대응하는 프로퍼티와 같거나 서브타입이어야 한다.let sub8: {a: string; b: number} = {a: '', b: 1};let sup8: {a: string | number; b: number} = sub8;
// array - object와 마찬가지let sub9: Array<{a: string; b: number}> = [{a: '', b: 1}];let sup9: Array<{a: string | number; b: number}> = sub9;

함수의 매개변수 타입만 같거나 슈퍼타입인 경우, 할당이 가능하다 ⇒ 반병#

class Person {}class Developer extends Person {    coding() {}}class StartupDeveloper extends Developer {    burning() {}}
function tellme(f: (d: Developer) => Developer) {}
// Developer => Developer 에다가 Developer => Developer 를 할당하는 경우tellme(function dToD(d: Developer): Developer {    return new Developer();});
// Developer => Developer 에다가 Person => Developer 를 할당하는 경우// 반병tellme(function pToD(d: Person): Developer {    return new Developer();});
// Developer => Developer 에다가 StartupDeveloper => Developer 를 할당하는 경우// strictFunctionType으로 에러 표시 가능tellme(function sToD(d: StartupDeveloper): Developer {    return new Developer();});

any#

• 입력은 마음대로

• 함수 구현이 자유롭게 ⇒ 자유가 항상 좋은 건 아니다.

unknown#

• 입력은 마음대로

• 함수 구현은 문제 없도록

타입 추론 이해하기#

• let과 const의 타입 추론 (+ as const)

• as const

let a = 'Mark'; // stringconst b = 'Mark'; // 'Mark' => literal type
let c = 38; // numberconst d = 38; // 38 => literal type
let e = false; // booleanconst f = false; // false => literal type
let g = ['Mark', 'Haeun']; // string[]const h = ['Mark', 'Haeun']; // string[]
const i = ['Mark', 'Haeun', 'Bokdang'] as const; // readonly ['Mark', 'Haeun', 'Bokdang']

• best common type (가장 공통적인 타입을 추론해낸다)

let j = [0, 1, null]; // (number | null)[]const k = [0, 1, null]; // (number | null)[]
class Animal {}class Rhino extends Animal {}class Elephant extends Animal {}class Snake extends Animal {}
let l = [new Rhino(), new Elephant(), new Snake()]; // (Rhino | Elephant | Snake)[]const m = [new Rhino(), new Elephant(), new Snake()]; // (Rhino | Elephant | Snake)[]const n = [new Animal(), new Rhino(), new Elephant(), new Snake()]; // Animal[]const o: Animal[] = [new Rhino(), new Elephant(), new Snake()]; // Animal[]

• Contextual Typing - 위치에 따라 추론이 다름

// Parameter 'e' implicitly has an 'any' type.const click = (e) => {    e; // any};
document.addEventListener('click', click);document.addEventListener('click', (e) => {    e; // MouseEvent});

Type Guard로 안전함을 파악하기#

typeof Type Guard - 보통 Primitive 타입일 경우#

• typeof로 primitive 타입을 걸러낼 수 있다.

function getNumber(value: number | string): number {    value; // number | string    if (typeof value == 'number') {        return value;    }    value; // string    return -1;}

instanceof Type Guard - Error 객체 구분에 많이 쓰인다.#

class NegativeNumberError extends Error {}
function getNumber(value: number): number | NegativeNumberError {    if (value < 0) return new NegativeNumberError();
    return value;}
function main() {    const num = getNumber(-10);
    if (num instanceof NegativeNumberError) {        return;    }
    num; // number}

in operator Type Guard - object의 프로퍼티 유무로 처리하는 경우#

interface Admin {    id: string;    role: string;}
interface User {    id: string;    emain: string;}
function redirect(user: Admin | User) {    if ('role' in user) {        routeToAdminPage(user.role);    } else {        routeToHomePage(user.email);    }}

literal Type Guard - object의 프로퍼티가 같고, 타입이 다른 경우#

interface IMachine {    type: string;}
class Car implements IMachine {    type: 'CAR';    wheel: number;}
class Boat implements IMachine {    type: 'BOAT';    motor: number;}
function getWheelOrMotor(machine: Car | Boat): number {    if (machine.type === 'CAR') {        return machine.wheel;    } else {        return machine.motor;    }}

custom Type Guard#

function getWheelOrMoter(machine: any): number {    if (isCar(machine)) {        return machine.wheel;    } else if (isBoat(machine)) {        return machine.motor;    } else {        return -1;    }}
function isCar(arg: any): arg is Car {    return arg.type === 'CAR';}
function isBoat(arg: any): arg is Boat {    return arg.type === 'BOAT';}

Conditional Type#

• `Item T`

  interface StringContainer {    value: string;    format(): string;    split(): string[];}
  interface NumberContainer {    value: number;    nearestPrime: number;    round(): number;}
  type Item1<T> = {    id: T;    container: any;};
  const item1: Item1<string> = {    id: 'aaaaaa',    container: null, // container type에 any를 사용했기 때문에 null을 넣는 것도 가능하다.};

  복사
• `Item T` - T가 string이면 StringContainer, 아니면 NumberContainer

  type Item2<T> = {    id: T;    container: T extends string ? StringContainer : NumberContainer;};
  const item2: Item2<string> = {    id: 'aaaaaa',    container: null, // Type 'null' is not assignable to type 'StringContainer'.};

  복사
• `Item T` - T가 string이면 StringContainer, number면 NumberContainer, 아니면 사용 불가

  type Item3<T> = {    id: T extends string | number ? T : never;    container: T extends string        ? StringContainer        : T extends number        ? NumberContainer        : never;};
  const item3: Item3<boolean> = {    id: true, // Type 'boolean' is not assignable to type 'never'.    container: null, // Type 'null' is not assignable to type 'never'.};

  복사
• `ArrayFilter T`

  type ArrayFilter<T> = T extends any[] ? T : never;type StringsOrNumbers = ArrayFilter<string | number | string[] | number[]>;

  복사

  
  

1:11:12 까지 시청 ...

SSR and Next.js#

서버 사이드 렌더링(SSR)이란 서버에서 코드를 실행해서 렌더링하는 것을 말한다.

다음의 장점을 가진다.

• 검색 엔진 최적화(SEO)

• 빠른 첫 페이지 렌더링

짧은 히스토리#

• (AJAX가 없던 시절) 서버에서 전체 HTML을 만드는 방식

• AJAX의 등장

  • 비동기적으로 서버와 브라우저가 데이터를 교환하여 페이지 전체를 다시 렌더링하지 않고, 갱신이 필요한 일부만 렌더링할 수 있게 됨.

  • 동적으로 HTML을 만들면서 JavaScript의 역할이 늘어나게 됨.

• SPA로..

• JavaScript MVC Framework의 등장

  • Backbone.js, Ember, Knockout ...

  • MVC Framework의 끝판왕 AngularJS

• React의 등장

  • Virtual DOM을 이용

  • Flux 아키텍쳐

  • 서버 사이드 렌더링 지원

    • (배경) V8 엔진, Node.js 등으로 서버에서도 JS 기반의 클라이언트의 라이브러리를 동작할 수 있음

서버 사이드 렌더링은 두 번 렌더링 한다. 서버 사이드에서 생성된 HTML에는 이벤트 속성이 없다. 두 번째 렌더링할 때 이미 서버 사이드 렌더링이 되어 있다면, 생성된 DOM에 오직 이벤트 속성만 추가한다.

왜 React와 서버 사이드 렌더링인가?

리액트와 서버 사이드 렌더링#

• renderToString : 문자열을 반환하여 HTML에 DOM을 추가한다.

• hydrate : 돔 요소에 필요한 이벤트 처리 함수를 연결한다.

📌 나중에 직접 해봐야겠다..!

Next.js#

Next는 서버사이드 렌더링에 특화된 프레임워크다.

• 서버사이드 렌더링의 장점

  • SEO

  • 초기 로딩 성능 개선

• 이미지 리소스 최적화

• 정적 파일 서빙

  • 배너 이미지, 아이콘 등등에서 사용함

• 코드 스플리팅 자동화

• 웹팩 기반 환경 (create-react-app과 달리 웹팩 설정 변경이 쉽다.)

서버에서 생성된 데이터 전달하기#

• getInitialProps : 구버전에서 사용한 data fetching 방식

• getStaticProps : 빌드 시 고정되는 값으로 빌드 이후에는 변경이 불가능하다.

  • static data를 위해 (변경되지 않을 데이터. 블로그 포스트 등등 ...)

• getServerSideProps : 빌드와 상관없이 매 요청마다 데이터를 서버로부터 가져온다.

  • 매번 변경될 수 있는 데이터를 위해 (상품 목록. 실시간 뉴스 등등 ...)

• getStaticPaths : 빌드 타임 때 정적으로 렌더링할 경로 설정.

모바일 사파리 디버깅#

• 아이폰을 맥북에 연결한다.

• 아이폰에서 디버깅하고자 하는 웹페이지를 Safari에 띄운다.

• 맥북에서 Safari를 실행한다.

• 개발자용 > iPhone > Safari 웹 페이지 선택

  

• 요소, 콘솔, 소스, 네트워크 등 사파리의 개발자 도구로 디버깅할 수 있다.

  

Debugging Your iPhone Mobile Web App With Safari Dev Tools

모바일 사파리를 맥의 Chrome에서 디버깅하기#

모바일 Safari를 맥의 Chrome에서 디버깅하는 방법은 다음에 알아봐야겠다.

Jon Sadka - How to debug an issue in Chrome for iOS using remote debugging

리액트#

• 리액트는 내부적으로 컴포넌트가 반환하는 엘리먼트들을 트리 형태로 관리하고 표현한다.

• 이를 Virtual-DOM으로 부르는데, 이는 JavaScript 일반 객체이다. (Plain Object)

• 기존 VanillaJS는 UI를 명령형으로 작성해야 하지만, React는 선언형으로 UI를 작성할 수 있다.

컴포넌트#

• 컴포넌트는 내부에서 관리하는 상태 값인 state 와 부모 컴포넌트에서 내려 주는속성 값 props 를 가진다.

• 컴포넌트는 state , props 가 변경되면 render() 함수가 실행되어 화면을 갱신한다.

• UI 데이터(상태값과 속성값)로 뷰를 렌더링하는 것이 리액트의 핵심이다.

• setState 는 비동기로 동작한다.

리액트의 렌더링 과정#

• 컴포넌트의 Props나 State의 변경이 있을 때, 컴포넌트의 이전 상태 엘리먼트와 새로 만들어진 엘리먼트를 비교하고 실제 DOM의 업데이트 여부를 결정한다. 비교하여찾은 변경 점에 대해서만 갱신한다.

• 컴포넌트의 setState 메서드가 수행되면, 해당 컴포넌트를 Dirty 체크하고, 다음이벤트 루프에서 배치 작업으로 대상 컴포넌트들의 엘리먼트를 렌더링한다. (비동기 )

• 이러한 리액트의 렌더링 과정을 다음과 같이 쪼갤 수 있다.

  • 변경 점을 찾는 Reconciliation의 Diffing 알고리즘 (render or reconciliation phase)

  • 변경 점을 실제 UI에 적용하는 ReactDOMComponent.updateComponent (commit phase)

Reconciliation: The diffing algorithm#

Reconciliation은 어떤 변경에 대한 전/후 엘리먼트 트리를 비교(Diff)하여, 갱신이필요한 부분만을 찾아 업데이트하는 것을 의미한다. 이를 통해 브라우저의 DOM 조작을최소화시킨다.

다시 정리

• render() 에서 새로운 엘리먼트 트리를 생성

• 이전 엘리먼트 트리와 비교하여 변경 점을 찾아 업데이트

그런데 Diff 알고리즘은 O(n^3)의 시간복잡도를 가지고 있다. 리액트는 다음의 방법으로 O(n)에 근사한 휴리스틱 알고리즘을 구현하였다.

• 다른 타입의 두 엘리먼트는 다른 트리를 만들 것이다.

• 같은 레벨의 엘리먼트에 key 프로퍼티를 통해 변경되지 않아야 할 엘리먼트를 표시한다.

☝ 휴리스틱 알고리즘 : 직관에 의존하는 알고리즘. 즉 휴리스틱은 보통 합리적인실행 시간을 가지지만 그것이 항상 그렇다는 어떠한 추론 과정이나 증명이 없다.

같은 위치에서 엘리먼트의 타입이 다른 경우

1. 기존 트리를 제거 후 새로운 트리를 만든다.

2. 기존 트리 제거 시 트리 내부(하위)의 엘리먼트/컴포넌트들은 모두 제거한다. (컴포넌트의 경우 제거되면서 componentWillUnmount() 가 실행됨.) 이전 트리의 모든 state가 사라진다.

3. 새로운 트리를 만들 때 내부 엘리먼트/컴포넌트들도 모두 새로 만든다. (컴포넌트의 경우 componentDidMount() 가 실행됨.)

같은 위치에서 엘리먼트의 타입이 같은 경우

1. 엘리먼트의 attributes 를 비교한다.

2. 변경된 attributes 만 업데이트한다.

3. 자식 엘리먼트들에 diff 알고리즘을 재귀적으로 적용한다.

같은 위치에서 엘리먼트가 컴포넌트를 표현하고 그 타입이 같은 경우

1. 컴포넌트 인스턴스 자체는 변하지 않는다. (state가 유지된다.)

2. 컴포넌트 인스턴스의 업데이트 전 라이프사이클 메서드 들이 호출되며 props가 업데이트 된다.

3. render() 를 호출하고 컴포넌트의 이전 엘리먼트 트리와 다음 엘리먼트 트리에대해 diff 알고리즘을 재귀적으로 적용한다.

자식 엘리먼트 재귀

• 리액트는 자식 엘리먼트에 대한 반복적인 비교를 할 때 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다.

• 정렬과 같은 상황에 취약하다.

keys

• 이를 해결하기 위해 자식 엘리먼트들이 key를 가지고 있다면 key를 통해 기존 트리와 이후 트리의 자식 들이 일치하는지 확인한다.

Avoid Reconciliation#

• 컴포넌트의 불필요한 렌더링을 피하기 위해 사용한다.

  • ShouldComponentUpdate 함수가 return false 하도록 한다.

  • 컴포넌트가 PureComponent 를 상속받도록 한다.

  • 함수형 컴포넌트를 React.memo() 로 감싸서 export 한다.

☝ 핵심은 해당 컴포넌트가 state , props 가 변경 되었을 때만 렌더링하도록하는 것이다. 이것이 가능한 것은 리액트가 컴포넌트 렌더링 결과를 메모이징하는것이다.

가장 좋은 케이스는 같은 부모 컴포넌트에 의해 같은 props 로 자주 렌더링 될때이다. 이전 메모이징 결과와 props 가 같다면 내부를 비교하지 않고 메모이징된결과를 사용한다.

하지만 반대로 props 가 다른 경우가 대부분이라면, 이전 props 와 다음 props 비교를 하고, 컴포넌트 렌더링을 하기 때문에 불필요한 props 비교를 하게 만든다. 또한 메모이징은 메모리를 사용하기 때문에 남용해선 안된다.

처음부터 성능에 최적화된 애플리케이션을 설계하는 것 자체가 비효율적이다. 하지만 컴포넌트를 적절히 분리하는 것은 중요하다. 컴포넌트를 적절히 분리하여 이슈를빠르게 파악하고 대응할 수 있도록 하는 것이 전략이다.

UI 런타임으로서의 React

재조정 (Reconciliation) - React

성능 최적화 - React

React 렌더링과 성능 알아보기 : TOAST Meetup

React.memo() 현명하게 사용하기

리액트 훅(Hook)#

훅(Hook)이란?#

• 함수 컴포넌트에서 React state를 연동(hook into)할 수 있게 해주는 함수.

• 즉 상태를 함수 컴포넌트에 동기화 해준다. (이 말은 상태가 함수 컴포넌트 외부에서 관리되고 있다는 의미를 내포함.)

동기#

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.

  • render props, HOC와 같은 패턴은 래퍼를 깊게 만든다.

• 라이프사이클 메서드 들이 컴포넌트를 복잡하고 이해하기 어렵게 만든다.

• 클래스보다 함수가 직관적이다. this 바인딩

훅의 규칙#

☝ 리액트는 훅이 호출되는 순서에 의존한다. (상태를 식별하기 위해 호출 순서를 사용하는 것으로 보인다.)

• 최상위(at the Top Level)에서만 훅을 호출해야 한다. (반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하지 말라)

  // 🔴 조건문에 Hook을 사용함으로써 첫 번째 규칙을 깼습니다if (name !== '') {    useEffect(function persistForm() {        localStorage.setItem('formData', name);    });}

  복사

• 오직 React 함수 내에서 Hook을 호출해야 한다. (일반 JS 함수에서 호출하지 말라)

☝ 리액트의 훅은 렌더링 되는 개별 컴포넌트의 한 수준 위의 외부 공간(실행 컨텍스트)에 연결 리스트(배열)형태로 저장되는 데이터( state , setter )이다. 다른 컴포넌트와 공유되지 않고, 리렌더링되는 컴포넌트에서 엑세스할 수 있다.

useState#

useState에서 반환된 setter 함수를 사용하면, React에게 내부적으로 액션을 dispatch 하게 되고, 이 컴포넌트가 new state를 가지고 있고, 업데이트 해야 된다는 것을 알린다.

React hooks: not magic, just arrays

useEffect#

• 렌더링 이후(DOM 업데이트 후)에 수행할 "side effect"를 수행할 수 있다.

Fiber#

• virtualDOM의 증분 렌더링을 활성화하기 위함.

• requestIdleCallback 을 활용.

• 컴포넌트 트리에 대한 추가 정보를 포함하기 위한 내부 객체

• 내장 스택에 의존한 동기식 재귀 모델에서 링크드 리스트와 포인터가 있는 비동기식모델로 알고리즘을 재구현함.

  • 호출 스택을 마음대로 중단하고 스택 프레임을 수동으로 조작하기 위해

React Fiber Architecture - A Deep Dive

웹팩#

• 웹팩은 static module bundler이다.

• 웹팩은 엔트리 포인트부터 프로세스하여, 의존하고 있는 모듈에 대해 내부적으로 dependency graph를 구성하고, 최종적으로 하나의 번들 파일을 구성한다 .

  • Entry : dependency graph를 구성하기 시작할 진입점

  • Output : 번들된 결과 파일

  • Loader : 기본적으로 js, json 파일만 가져올 수 있지만, loader는 웹팩이 다른유형의 파일도 모듈로서 가져오고 dependency graph를 구성할 수 있도록 해준다. ex) jpg 이미지, 폰트, ...

  • Plugin : 번들링 최적화, 자원 관리, 환경 변수의 주입 등 다양한 목적의 환경 설정을 위해 사용.

  • Mode : production | development 등 환경에 따라 웹팩을 설정할 수 있다.

HTTP#

HTTP 버전별 차이점#

HTTP의 진화

HTTP/0.9#

• 초기 버전

• GET 이 유일한 메서드

• HTTP 헤더가 없었고 HTML 파일만 전송될 수 있었음.

• 상태나 오류 코드도 없었다.

HTTP/1.0#

• 버전 정보가 요청으로 전송되기 시작 ex) GET /mypage.html HTTP/1.0

• 상태 코드가 응답의 시작 부분에 붙어 전송됨.

• HTTP 헤더 개념이 도입됨.

  • HTML 파일 외에 다른 문서를 전송할 수 있게 됨.

HTTP/1.1#

• HTTP의 첫 번째 표준 버전

• 커넥션을 재사용할 수 있게 됨.

  • 원본 문서 내에 임베드된 리소스를 위해서, 기존에 연결된 커넥션을 다시 사용할수 있음.

• 파이프라이닝으로 첫 번째 요청에 대한 응답이 완전히 전송되기 전에 두 번째 요청전송을 가능하게 했다.

HTTP/2#

• 이진 프로토콜 (1.1은 텍스트 프로토콜)

• Multiplexing

☝ multiplexing vs pipelining

• pipelining은 순서가 중요하다 → Head Of Line blocking 문제

• multiplexing은 순서가 중요하지 않다.

HTTP 1.1 vs HTTP.2 vs HTTP/2 with Push - Manning

HTTP 상태 코드#

1xx : 정보 응답#

2xx : 성공 응답#

• 200 : OK. 요청 성공

• 201 : Created. 생성 요청 성공

• 202 : Accepted. 요청 수락

• 204 : 성공했으나 반환할 것이 없음

3xx : 리다이렉션 메시지#

• 300 : Multiple choices. 여러 리소스에 대한 요청 결과 목록

• 301 , 302 , 303 : Redirect. 리소스 위치가 변경된 상태

• 304 : Not modified. 리소스가 수정되지 않았음

4xx : 클라이언트 에러 응답#

• 400 : Bad Request. 요청 오류

• 401 : Unauthorized. 권한 없음

• 403 : Forbidden. 요청 거부

• 404 : Not Fount. 리소스가 없는 상태

5xx : 서버 에러 응답#

• 500 : 서버가 요청을 처리 못함

• 501 : Not Implemented. 서버가 지원하지 않는 요청

• 503 : Service Unavailable. 과부하 등으로 당장 서비스가 불가능한 상태

브라우저 렌더링 과정#

• DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성합니다.

• 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만( 메타 태그, 스크립트태그, display: none 등이 제외됨. )포함됩니다.

  ☝ visibility: hidden , display: none 은 다르다.

• 레이아웃은 각 객체의 정확한 위치 및 크기를 계산합니다. (경우에 따라 "리플로우" 라고도 한다.)

• 마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링합니다. (경우에 따라 "리페인트"라고도 한다.)

브라우저 렌더링 최적화#

오늘날 대부분의 기기는 초당 60회(60fps)의 빈도로 화면을 새로 고친다. 따라서각 프레임에는 16ms 가량의 시간만 할당된다. (1초 / 60 = 16.66ms) 실제로 브라우저가 실행 준비를 하는 시간이 있기 때문에 10ms 내에 모든 작업을 완료해야 한다.

픽셀 파이프라인#

• 자바스크립트 : 자바스크립트로 시각적 변화를 일으키는 작업. CSS Animation, Transitions, Web Animation API 역시 포함.

• 스타일 계산 : 어떤 스타일 규칙(CSS)을 어떤 요소에 적용할지 계산하는 프로세스

• 레이아웃 : 화면에서 얼마의 공간을 차지하고 어디에 배치되는지 계산하기 시작할 수 있다.

• 페인트 : 픽셀을 채우는 프로세스. 텍스트, 색, 이미지, 경계 및 그림자 등 모든 시각적 부분을 그리는 작업. 레이어라고 하는 다수의 표면에서 수행

• 합성 : 페이지의 여러 부분이 여러 레이어로 그려졌기 때문에 페이지가 정확히렌더링 되려면 정확한 순서로 화면에 그려야 한다.

☝ 코드가 파이프라인의 어떤 부분을 트리거 하는지 정확히 이해하는 것이 중요

1. JS / CSS > 스타일 > 레이아웃 > 페인트 > 합성#

레이아웃 너비, 높이, 왼쪽 또는 상단 위치 등 요소의 기하학적 형태에 영향을 주는 "layout" 속성을 변경하면 브라우저가 다른 모든 요소를 확인하고 페이지에 대해 "리플로우"를 수행해야 한다. 영향을 받은 영역이 있으면 다시 페인트하고, 다시합성해야 한다.

2. JS / CSS > 스타일 > 페인트 > 합성#

페이지의 레이아웃에 영향을 주지 않는 배경 이미지, 텍스트 색상, 그림자 등의 "paint only" 속성을 변경하면 브라우저가 레이아웃을 건너뛰고 페인트 작업, 합성 작업을 수행한다.

3. JS / CSS > 스타일 > 합성#

레이아웃과 페인트가 필요 없는 속성을 변경하면 브라우저가 합성 단계로 건너 뛴다. 가장 이상적이고 비용이 가장 적게 드는 버전이다. ( 현재 부합되는 속성은 transform , opacity 2가지 뿐이다. )

☝ CSS 속성이 어떤 버전을 트리거할 지 알고 싶은 경우 CSS 트리거를 참조. 또는 이 링크 참조

참고자료#

• https://twitter.com/lydiahallie/status/1231255327032541185

Rendering Performance | Web Fundamentals | Google Developers

이미지 레이지로드#

Lazy-loading images

The Complete Guide to Lazy Loading Images | CSS-Tricks

성능 측정#

브라우저 기준#

DOMContentLoaded 이벤트#

• HTML과 CSS 파싱이 끝나는 시점

• 렌더 트리를 구성할 준비가 된(DOM 및 CSSOM 구성이 끝난) 상황

load 이벤트#

• HTML 상에 필요한 모든 리소스가 로드된 시점

그리고 이 두 이벤트가 발생하는 시점은 내비게이션 타이밍 API를 사용하거나 크롬 개발자 도구를 통해 확인할 수 있다.

사용자 기준#

FP(First Paint)#

• 흰 화면에서 화면에 무언가가 처음으로 그려지기 시작하는 순간이다.

FCP(First Contentful Paint)#

• 텍스트나 이미지가 출력되기 시작하는 순간이다.

FMP(First Meaningful Paint)#

• 사용자에게 의미 있는 콘텐츠가 그려지기 시작하는 첫 순간이다. 콘텐츠를 노출하는데 필요한 CSS, 자바스크립트 로드가 시작되고 스타일이 적용되어 주요 콘텐츠를 읽을 수 있다.

TTI(Time to Interactive)#

• 자바스크립트의 초기 실행이 완료되어서 사용자가 직접 행동을 취할 수 있는 순간이다.

성능 최적화

로딩 최적화#

블록 리소스(또는 렌더링 차단 리소스) 최적화#

브라우저 로딩 과정에서 파싱 중 블록 리소스가 발생할 수 있다. 블록 리소스에는 CSS 와 JavaScript가 포함된다.

CSS 최적화#

• DOM 트리는 파싱하면서 순차적으로 구성된다.

• CSSOM 트리는 CSS를 모두 해석해야 구성할 수 있다.

• 즉 CSSOM 트리가 구성되지 않으면 렌더 트리를 만들지 못하고, 렌더링이 차단되어있다.

• 따라서 CSS는 항상 HTML 문서 최상단에 배치하는 것이 좋다.

• 또한 특정 조건(세로 모드, 인쇄 모드 등)에서만 필요한 CSS는, 해당 경우에만 로드할 수 있도록 미디어 쿼리를 사용하여 최적화한다.

  미디어 쿼리를 사용하지 않는 경우 (최적화 전)

  <link href="style.css" rel="stylesheet" /><link href="print.css" rel="stylesheet" /><link href="portrait.css" rel="stylesheet" />

  복사

  미디어 쿼리를 사용하는 경우 (최적화 후)

  <link href="style.css" rel="stylesheet" /><link href="print.css" rel="stylesheet" media="print" /><link href="portrait.css" rel="stylesheet" media="orientation:portrait" />

  복사

• 외부 스타일시트를 가져올 때 사용하는 @import 문은 스타일시트를 병렬로 다운로드 할 수 없기 때문에 로드 시간이 늘어날 수 있다.

JavaScript 최적화#

• JavaScript는 DOM트리와 CSSOM 트리를 동적으로 변경할 수 있기 때문에 HTML 파싱을차단하는 블록 리소스이다.

• <script> 태그를 만나면 스크립트가 실행되며 그 이전까지 생성된 DOM에만 접근할수 있다.

• 그리고 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단된다.

• 이러한 이유로 JavaScript를 렌더링 차단 리소스라고 한다.

리소스 요청 수 줄이기#

이미지 스프라이트#

• 웹 페이지에서 아이콘 마다 다른 이미지를 사용할 경우 리소스 요청이 아이콘 마다발생

• 여러 아이콘을 묶어 하나의 이미지로 만들고, CSS의 background-position 속성을사용해 부분 이미지를 사용하는 방법으로 리소스 요청 수를 줄일 수 있다.

CSS, JavaScript 번들링#

• 모듈 기반 개발 이전에는 여러 리소스 파일을 분리해서 가져왔었다.

• Webpack, Rollup 등의 번들러를 사용하여 여러 개의 모듈 파일을 하나로 묶어서 1개파일로 만들어 리소스 요청 수를 줄일 수 있다.

내부 스타일 시트 ?#

☝ 내부 스타일 시트는 리소스 요청 횟수를 줄일 수 있는 방법이지만, 리소스 캐시를 사용할 수 없어서 HTML에 CSS가 매번 포함된다.

작은 이미지를 HTML, CSS로 대체#

• 아이콘 이미지 개수가 적은 경우, 이미지를 Base64로 변환한 URI를 사용하여 HTML, CSS에 포함해서 사용할 수 있다.

  <img    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAAXNSR0IArs4c6QAAAHBJREFUKBVjYBimICwsLAaEsXmPGV0QqnAeUNxfW1v7/tWrVy8hq0HRgKQ4CahoIxDPQ9cE14CseNWqVUtAJoMUo2tiBFkXGRmp9/fv3zNAZhJIMUgMBmAGMTMzmyxfvhzhPJAmmCJ0Gp8cutqhwAcASWgwk+79LiQAAAAASUVORK5CYII="/>

  복사

라이브러리의 필요한 함수만 가져오기#

import _ from 'lodash';
_.array(...);_.object(...);

⇒

import array from 'lodash/array';import object from 'lodash/fp/object';
array(...);object(...);

HTML 마크업 최적화#

• 중첩을 단순하게 구성한다.

Avoid an excessive DOM size

압축(Minify)하여 사용#

• 웹팩 플러그인과 같은 도구의 도움으로 불필요한 주석이나 공백을 모두 삭제하고, 난독화 하는 등 코드의 용량을 압축할 수 있다.

렌더링 최적화#

requestAnimationFrame#

• 시각적 변화가 브라우저에서 정확한 시간(프레임 시작 시)에 수행되길 원한다.

• 이를 보장하는 유일한 방법은 requestAnimationFrame 을 사용하는 것이다.

• setTimeout 또는 setInterval 은 콜백이 정확한 시간에 수행되는 것을 보장하지않는다.

☝ setTimeout 과 setInterval 의 콜백은 (macro)Task queue 를 사용. requestAnimationFrame 은 AnimationFrame 사용.

스타일 계산의 범위와 복잡성 줄이기#

• DOM 변경, 요소 추가 및 제거, 속성 변경, 클래스 또는 애니메이션은 모두 브라우저가 요소 스타일을 재계산하고 많은 경우에 레이아웃 단계(리플로우)를 거치게 만든다.

• 스타일 계산 단계의 첫 부분은 매칭 선택기 집합을 생성하는 것이다. (요소, 클래스 , ID, pseudo 선택자 등등)

• 스타일 계산의 두 번째 단계는 매칭된 선택기에서 스타일 규칙을 가져와서 요소의마지막 스타일을 계산하는 과정이 포함된다.

• 따라서 선택기의 복잡성을 줄이고 (BEM 등의 방법론 적용) 스타일을 계산해야 하는요소의 수를 줄여야 한다.

크고 복잡한 레이아웃 및 스래싱 피하기#

• 레이아웃의 범위는 일반적으로 전체 문서로 지정된다.

  • 너비, 높이, 왼쪽 또는 상단 등 "기하학적 속성"의 변경은 모두 레이아웃이필요하다.

  • flexbox 를 사용한 레이아웃이 float 를 사용한 레이아웃 보다 비용이 적다.

• DOM 요소의 수는 성능에 영향을 주므로 가급적 레이아웃 트리거를 피해야 한다.

• 강제 동기식 레이아웃 및 레이아웃 스래싱을 피해야 한다.

  ☝ 원래 레이아웃은 비동기이나, 특정 상황에서 동기적으로 레이아웃이 발생할 수있다. 이것을 강제 동기식 레이아웃 이라 한다.

  function logBoxHeight() {    box.classList.add('super-big');
      // Gets the height of the box in pixels    // and logs it out.    console.log(box.offsetHeight);}

  복사

  • 위의 함수는 스타일을 변경한 후에, 높이를 요청한다.

  • 높이를 구하는 것 역시 레이아웃을 실행해야 하는 것이다.

  • 스타일 계산과 레이아웃을 동시에 실행하면 잠재적 병목 현상이 발생할 수 있으므로 일반적으로 바람직하지 않다.

  function resizeAllParagraphsToMatchBlockWidth() {    // Puts the browser into a read-write-read-write cycle.    for (var i = 0; i < paragraphs.length; i++) {        paragraphs[i].style.width = box.offsetWidth + 'px';    }}

  복사

  • 위의 함수는 각 루프의 반복이 스타일 값 box.offsetWidth 를 읽은 다음, 즉시 paragraphs[i].style.width 를 업데이트 한다.

  • 이전 반복에서 레이아웃이 변경되었기 때문에 box.offsetWidth 을 조회하는 것역시 강제 동기식 레이아웃을 유발한다. 이를 아래와 같이 수정할 수 있다.

  // Read.var width = box.offsetWidth;
  function resizeAllParagraphsToMatchBlockWidth() {    for (var i = 0; i < paragraphs.length; i++) {        // Now write.        paragraphs[i].style.width = width + 'px';    }}

  복사

페인트 복잡성 단순화 및 페인트 영역 줄이기#

• transform 또는 opacity 를 제외한 모든 속성 변경은 항상 페인트를 트리거 한다.

• 가능한 하위 노드의 DOM을 조작하고 스타일을 변경

  • DOM이 작고 깊이가 얕을수록 계산이 빠르다.

  • 불필요한 래퍼 엘리먼트를 제거한다.

• 영향 받는 엘리먼트 제한

Strict Mode#

• ES5 부터 지원

• 전역 또는 함수 body의 선두에 use strict 추가

• 암묵적 전역 변수 방지

• 변수, 함수, 매개변수의 삭제 방지

  function foo(a) {    'use strict';
      delete a;    // SyntaxError: Delete of an unqualified identifier in strict mode.}

  복사

• 매개변수 이름의 중복 방지

• with 문의 사용

• 일반 함수의 this 에 undefined 바인딩

  'use strict';
  function foo() {    console.log(this);}
  foo(); // undefined

  복사

  function foo() {    console.log(this);}
  foo(); // Window

  복사

DOCTYPE#

Document Type의 약자로 문서가 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바로 표시할 수 있도록 해주는 것이다.

☝ DOCTYPE 은 레거시한 이유로 필요하다. 생략하면 브라우저가 문서를 quirks mode(호환 모드) 로 렌더링하고, 포함하면 브라우저가 문서를 no-quirks-mode(또는 standard mode) 로 렌더링 한다.

quirks mode vs standard mode#

quirks mode#

• 오래된 문서가 최신 브라우저에서 "비표준 모드"(과거 Navigator 4 or IE 5)를 적용해서 동작한다.

• 최신 브라우저에서 깨지지 않고 보여지게 되지만, 브라우저 별로 다르게 보여지게된다.

standard mode#

• 표준 HTML, CSS를 적용하여 렌더링한다.

DTD (Document Type Definition)#

문서 형식을 정의한 것으로 DOCTYPE 을 명시할 때 사용할 수 있다. DTD 에는 다음과 같은 것들이 있다. 모든 타입의 특성을 다 파악하는 것은 무리가 있을 것 같고, 현재 시점에서 HTML5 문서를 작성하기 위해 <!DOCTYPE html> 을 사용하는 것이 최선이다.

• XHTML 1.1

• XHTML 1.0

  • Strict DTD

  • Transitional DTD

  • Frameset DTD

• HTML 4.01

  • Strict DTD

  • Transitional DTD

  • Frameset DTD

• HTML 5

크로스 브라우징#

바벨#

• 바벨은 현재 및 이전 브라우저 또는 환경에서 ES6 이상의 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는데 사용되는 도구 모음(toolchain)이다.

• 바벨은 세 단계로 빌드를 진행한다.

  1. 파싱 (Parsing) : 코드를 읽고 추상 구문트리(AST)로 변환하는 단계

  2. 변환 (Transforming) : 바벨 플러그인이 추상 구문 트리를 변경하는 단계

  3. 출력 (Printing) : 변경된 결과물을 출력하는 단계

• 컴파일러로써 바벨 플러그인(구문 변형)과 폴리필이 하는 일(내장된 함수/객체 구현 )을 구분하는 것이 중요하다.

  • 화살표 함수

    구문 변형으로 이전 버전의 코드로 만들 수 있다.

    // 컴파일 전const sum = (a, b) => a + b;

    복사

    // 컴파일 후'use strict';
    var sum = function sum(a, b) {    return a + b;};

    복사

  • Promise

    Promise 는 ES6에서 추가된 표준 내장 객체(standard built-in object)이다. 따라서 구문 변형으로 이전 버전의 코드로 만드는 것이 불가능하기 때문에, 이를 위한 폴리필을 추가해주어야 한다.

• 바벨의 useBuiltIns 옵션

  • 기본적으로 import 'core-js' 는 core-js 의 모든 폴리필 가져옴

  • useBuiltIns: entry 옵션을 주면 import 'core-js' 에서 "대상 브라우저에 필요한" 폴리필을 모두 가져옴

  • useBuiltIns: usage 옵션을 주면 import 를 하지 않아도 코드를 정적 분석하여, 코드에서 사용하고 있는 폴리필만 가져온다.

    • 지원하려는 "브라우저 마다" 필요한 폴리필만 import 하려면 어떻게 해야하는가? ex) ie, chrome이 타겟인 경우 promise를 사용하면, promise 폴리필을 import 해야하지만, 이는 chrome에게는 불필요하다.

    • 번들에 포함시키는 것까지 최적화 하려면 런타임 검사기를 사용하거나 User-agent 기반 감지를 해야 되는데, 이는 리소스랑 시간이 많이 든다.

      zloirock/core-js

      [Feature Request] Polyfill using dynamic import. · Issue #518 · zloirock/core-js

    • module , nomodule 의 지원 여부에 따라 번들링을 나눠 최적화하는 방법도있다.

      Serve modern code to modern browsers for faster page loads

일반 함수 vs 화살표 함수#

const shape = {    radius: 10,    diameter() {        return this.radius * 2;    },    arrowDiameter: () => {        return this.radius * 2;    },};
console.log(shape.diameter());// 20console.log(shape.arrowDiameter());// NaN
const diameter = shape.diameter;const arrowDiameter = shape.arrowDiameter;
console.log(diameter());// NaNconsole.log(arrowDiameter());// NaN

function Shape() {    this.radius = 10;    this.diameter = function () {        return this.radius * 2;    };    this.arrowDiameter = () => {        return this.radius * 2;    };}
const shape = new Shape();
console.log(shape.diameter());// 20console.log(shape.arrowDiameter());// 20
const diameter = shape.diameter;const arrowDiameter = shape.arrowDiameter;
console.log(diameter());// NaNconsole.log(arrowDiameter());// 20

• 일반 함수는 호출할 때 동적으로 this 를 바인딩한다.

• 화살표 함수는 선언할 때 정적으로 this 를 바인딩한다. (언제나 상위 스코프의 this 를 가리킨다.)

• 일반 함수는 prototype 프로퍼티를 가진다. ⇒ constructor 함수로 사용될 수 있다.

• 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다. ⇒ constructor 함수로사용될 수 없다.

생성자 함수(constructor)와 프로토타입(prototype)#

function Person(name, age) {    this.name = name;    this.age = age;}
// Person.prototype = { constructor: function Person(...) { ... } }// Person.prototype.constructor = function Person(...) { ... }
const foo = new Person('foo', 30);// foo: Person { name: 'foo', age: 30 }// foo.__proto__: { constructor: function Person(...) { ... } }// foo.__proto__.constructor = function Person(...) { ... }

☝ __proto__ 는 ECMAScript의 스펙이 아닌 일부 모던 브라우저가 구현한 것으로, [[Prototype]] 를 접근하는 속성이다.

function Person(name) {    this.name = name;    this.getName = function () {        return this.name;    };}
console.log(Person.prototype); // { constructor: function Person(name) { ... } }
function Child(name, age) {    Person.call(this, name);    this.age = age;    this.getAge = function () {        return this.age;    };}
console.log(Child.prototype); // { constructor: function Child(name, age) { ... } }
Child.prototype = Object.create(Person.prototype);
console.log(Object.create(Person.prototype)); // Person {}console.log(Child.prototype); // Person {}console.log(Child.prototype.constructor); // function Person(name) { ... }
Child.prototype.constructor = Child;
console.log(Child.prototype);// Person { constructor: function Child(name, age) { ... } }
var child = new Child('foo', 20);
console.log(child.getName()); // 'foo'console.log(child.getAge()); // 20

클래스 문법은 단지 "구문적 설탕" 인가?#

class User {    constructor(name) {        this.name = name;    }
    sayHi() {        alert(this.name);    }}
let user = new User('John');user.sayHi();

function User(name) {    this.name = name;}
User.prototype.sayHi = function () {    alert(this.name);};
let user = new User('John');user.sayHi();

ES6의 클래스 문법을 사용하는 것과 일치한 결과를 기존 function + prototype 문법의 조합으로 만들 수 있기 때문에 일부 사람들은 단지 클래스 문법을 "구문적 설탕" (syntax sugar)라고 말한다.

하지만 몇 가지 중요한 차이가 있다.

1. class 문법을 사용해서 만든 함수엔 특수 내부 프로퍼티인 [[FunctionKind]]: "classConstructor" 가 이름표처럼 붙어서, 이 클래스 생성자를 new 와 함께 호출하지 않으면 에러가 발생한다.

2. 클래스의 메소드는 non-enumerable 로, for ... in 구문 등의 객체 순회에서메소드는 순회하지 않는다. (enumerable 플래그가 false 이다.)

3. 클래스는 항상 use strict 모드이다.

4. 이외에도 getter, setter, 믹스인 등의 기능이 있다.

클래스와 함수에서의 new 연산자 동작#