[TIL] 모던 자바스크립트

Jeris·2023년 4월 12일
0

코드잇 부트캠프 0기

목록 보기
23/107

Topic

모던 자바스크립트



What I Learned

모던 자바스크립트 이해하기

  1. 모던 자바스크립트란?
    • Ecma International: 자바스크립트 국제 표준화 기구
      • 자바스크립트를 사용할 때 준수해야하는 규칙이나 세부 사항들을 ECMA-262라는 이름의 문서로 관리하는데, 이 문서의 내용이 에크마스크립트이다
    • 에크마스크립트(ECMAScript): 자바스크립트 표준 명세서(JavaScript Specification)
    • 모던 자바스크립트(Modern JavaScript): 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트
    • ECMAScript는 JavaScript 뿐만아니라 모든 스크립트 언어(scripting languages)가 지켜야 하는 표준이다
    • JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있다
      • 예를 들어, DOM을 다루는 문법들은 ECMAScript에 표준화된 문법이 아니라 WebIDL에서 표준화된 기술이다

자바스크립트의 동작 원리

  1. 데이터 타입의 특징과 종류
    • 자바스크립트 데이터 타입의 특징
      • 유연하다
        • 암묵적 형 변환이 일어나므로 서로 다른 데이터 타입끼리 연산이 가능하다
        • 변수를 할당할 때 데이터 타입을 정해주지 않으므로 언제든지 다양한 타입의 값으로 재할당이 가능하다
    • 자바스크립트 데이터 타입의 종류
      • 기본형(Primitive Type)
        • Number
        • String
        • Boolean
        • Null
        • Undefined
        • Symbol(ES2015): 변경이 불가능하고 다른 것과 중복되지 않는 고유한 값
          • const variable = Symbol('description');
          • Symbol로 할당된 variable은 다른 어떤 값과 비교해도 false를 리턴한다
        • BigInt(ES2020): Number가 안정적으로 나타낼 수 있는 최대치인 253-1보다 큰 정수를 표현할 수 있는 데이터 타입
          • BigInt 함수를 사용하거나 정수 마지막에 n을 붙여서 BigInt 변수를 만들 수 있다
          • BigInt 타입끼리만 연산할 수 있고, 서로 다른 타입끼리의 연산은 명시적으로 타입 변환을 해야 한다
      • 참조형(Reference Type)
        • Object
  2. typeof 연산자
    • typeof null; // object
      • 자바스크립트가 처음 구현될 때의 특별한 문법 설계 때문에 object를 리턴한다
      • ECMAScript에서 수정이 제안되었지만, 이미 개발된 많은 프로젝트에 버그가 생기는 우려로 인해 반영되지 않고 있다
    • typeof function () {}; // function
      • 자바스크립트에서 함수는 객체로 취급되지만 function을 리턴한다
  3. AND와 OR의 연산 방식
    • AND(&&)와 OR(||) 논리 연산자는 양쪽 값들 중 어느 한쪽을 선택하는 방식으로 동작한다
      • AND 연산자는 왼쪽 값이 falsy 값이면 왼쪽 값을 리턴하고 truthy 값이면 오른쪽 값을 리턴한다
      • OR 연산자는 왼쪽 값이 truthy 값이면 왼쪽 값을 리턴하고 falsy 값이면 오른쪽 값을 리턴한다
    • AND 연산자의 우선순위가 OR 연산자보다 높다
  4. null 병합 연산자(Nullish coalescing operator)
    • null 병합 연산자(??)
      • null 병합 연산자는 왼쪽 값이 null이나 undefined이 아니라면 왼쪽 값을 리턴하고 null이나 undefined라면 오른쪽 값을 리턴한다
      • ES2020에서 새롭게 추가됐다

함수 다루기

  1. 함수를 만드는 방법

    • 함수 선언식(Function declaration)
      function func_name(parameters) {
        [statements]
      }
    • 함수 표현식(function expression): 함수 선언을 값처럼 사용하는 방식
      const variable = function (parameters) {
        [statements]
      }
    • 기명 함수 표현식(Named function expression)
      const variable = {
        key: function func_name(parameters) {
        [statements]
        },
      }
      • 객체 형태가 아닌 하나의 함수만 할당해도 된다
      • 함수 이름(func_name)을 생략할 수 있다
      • 재귀 함수일 경우 함수 이름을 작성해주는 것이 안전하다
    • 함수 표현식이 함수 선언식과 다른 점
      • 호이스팅 되지 않는다
      • 함수 선언식은 함수 스코프를 갖지만 함수 표현식은 할당된 변수에 따라 스코프가 결정된다
    • 즉시 실행 함수 표현식(Immediately Invoked Function Expression)
      (function (parameters) {
        [statements]
      })(arguments);
      • 함수가 선언된 순간 실행된다
      • 함수 이름을 지어주더라도 외부에서 재사용할 수 없다
  2. 값으로서의 함수

    • 일급 함수(First Class Function): 다른 변수와 동일하게 다룰 수 있는 함수
      • 변수나 다른 데이터 구조 안에 할당될 수 있다
      • 다른 함수의 파라미터로 전달될 수 있다 (Callback function)
      • 다른 함수의 리턴값이 될 수 있다 (higher-order function)
        • 소괄호를 연속적으로 써서 호출할 수도 있다
  3. Parameter

    • Parameter vs Argument
      • 매개변수(parameter)는 함수와 메서드 입력 변수(variable)이다
      • 인자(argument)는 함수와 메서드의 입력 값(value)이다
    • Argument를 전달받지 못한 parameter는 undefined 값을 갖는다
    • Optional parameter(ES2015)를 활용해 default value를 설정할 수 있다
    • 기본값(Default value)는 argument를 전달받지 못할 때 뿐만 아니라 undefined 값을 argument로 전달받았을 때도 동작한다
    • 뒤쪽의 파라미터의 기본값을 설정할 때 앞쪽에 정의된 파라미터를 활용할 수 있다
  4. Arguments

    • 함수의 프로퍼티 arguments
      • 전달받은 argument들을 요소로 갖는 유사 배열 객체다
      • length, indexing, for...of문을 사용할 수 있다
      • 파라미터명, 함수 내 변수명과 함수명을 arguments로 짓지 않는 것이 좋다
  5. Rest Parameter(ES2015)

    • ...args 정의된 parameter에 argument를 모두 할당한 후 남는 argument들을 요소로 갖는 배열이다
      function name(parameters, ...args){
        for (const arg of args) {
          console.log(arg);
        }
      };
    • 많은 스타일가이드에서 가급적이면 arguments 프로퍼티보다 Rest parameter를 우선적으로 활용하기를 권장한다
  6. Arrow Function(ES2015)

    (parameters) => {
      [statements]
    }
    • 이름이 없는 익명 함수이기 때문에 변수에 할당하거나 다른 함수의 argument를 선언할 때 주로 활용한다
    const getTwice = number => {
      return number * 2;
    }
    const myBtn = document.querySelector('#myBtn');
    
    myBtn.addEventListener('click', () => {
      console.log('button is clicked!');
    });
    • parameter가 하나라면 parameter를 감싼 소괄호를 생략할 수 있다
    • parameter가 하나가 아니라면 소괄호를 반드시 작성해야 한다
    • statement가 return문 하나로만 이루어져 있다면 return과 중괄호를 생략하고 다음과 같이 작성할 수 있다
    // short version
    const getTwice = number => number * 2;
    • return과 중괄호를 생략할 때 return 값이 객체인 경우 중괄호때문에 에러가 발생하므로 중괄호를 소괄호로 감싸줘야 한다
    • arguments 프로퍼티가 없다
    • this가 가리키는 값이 일반 함수와 다르다
  7. this

    • this 함수를 호출한 객체를 가리키는 키워드
    • 코드를 작성할 때 값이 미리 결정되는 게 아니라 함수가 호출될 때 어떤 객체가 그 함수를 호출했는지에 따라 상대적으로 값이 변하게 된다
    console.log(this);
    
    function printThis() {
      console.log(this);
    }
    
    const myObj = {
      content: 'myObj',
      printThis: printThis,
    };
    
    const otherObj = {
      content: 'otherObj',
      printThis: printThis,
    };
    
    myObj.printThis();
    otherObj.printThis();
    Window {window: Window, ...}
    {content: "myObj", printThis: f}
    {content: "otherObj", printThis: f}
    • Arrow function 내부의 this는 상대적으로 값이 변하는 게 아니라 Arrow function이 선언되기 직전인 그 때의 유효한 this 값과 동일한 값을 가리킨다
    • 그러므로 객체에 메소드를 만들 때는 Arrow Function보다는 일반 함수가 좀 더 권장된다
    • 객체 내의 메소드에서 해당 객체의 프로퍼티를 사용할 때에도 this를 활용할 수 있다
    const user = {
      firstName: 'Tess',
      lastName: 'Jang',
      getFullName: function () {
        return `$(this.firstName) $(this.lastName)`;
      },
    };

자바스크립트의 문법과 표현

  1. 문장과 표현식

    • 문장(statements): 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리
    • 표현식(expressions): 결과적으로 하나의 값이 되는 모든 코드
    • 표현식이면서 문장, 문장이면서 표현식
    // 할당식은 문장인 표현식이다
    title = 'JavaScript'; // JavaScript
    
    // 함수 호출은 함수를 실행하는 동작도 하지만,
    // 실행한 함수의 리턴 값을 가지는 표현식이다.
    sayHi(); // sayHi 함수의 리턴 값
    
    // console.log 메소드는 콘솔에 argument를 출력하는 동작도 하지만,
    // undefined 값을 가지는 표현식이다.
    console.log('hi'); // undefined
    • 표현식인 문장 vs 표현식이 아닌 문장
      • 이 둘을 구분하는 가장 간단한 방법은 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것이다
      • 조건문이나 반복문은 값으로 평가되지 않고 오로지 문장으로만 평가된다
    • 일반적으로 표현식인 문장은 세미콜론으로 마무리 짓는다
  2. 조건을 다루는 표현식

    • 조건 연산자(Conditional operator)
    조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
    • 삼항 연산자(Ternary operator)라고도 부른다
    • if 동작문이 리턴문밖에 없다면 조건연산자로 짧게 작성할 수 있다
  3. Spread 구문(ES2015)

    • 전개 구문(Spread syntax): 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-밸류 쌍으로 객체를 확장시킬 수 있다
    const numbers = [1, 2, 3];
    
    console.log(numbers);
    console.log(...numbers);
    (3) [1, 2, 3]
    1 2 3
    • 배열을 깊은 복사할 때 사용된다
    const webPublishing = ['HTML', 'CSS'];
    const interactiveWeb = [...webPublishing, 'JavaScript'];
    
    console.log(webPublishing);
    console.log(interactiveWeb);
    (2) ["HTML", "CSS"]
    (3) ["HTML", "CSS", "JavaScript"]
    • 두 배열을 합칠 수 있다
    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];
    
    const arr3 = [...arr1, ...arr2];
    console.log(arr3);
    (6) [1, 2, 3, 4, 5, 6]
    • 배열을 인자로 전달할 때 활용할 수 있다
    const introduce = (name, birth, job) => {
      console.log(`저는 $(name)이고 $(birth)년 생이고, 직업은 $(job)입니다.`);
    };
    
    const myArr = ['제리', 1995, '웹 개발자']
    introduce(...myArr);
    저는 제리이고 1995년 생이고, 직업은 웹 개발자입니다.
    • 하나의 값이 아니라 여러 값을 펼친 목록으로 평가된다
    • 객체 Spread(ES2018)로 객체를 복사하면 실제값을 복사하지만 객체 프로퍼티가 있을 경우 객체 프로퍼티는 같은 주소값을 가리키게된다
    const obj = {
      name: 'obj_name',
      obj2: {},
    };
    
    const objClone = {
      ...obj,
    }
    objClone.name = 'objClone_name';
    objClone.obj2.key_name = 'value_name';
    console.log(obj); // {name: "obj_name", obj2: {key_name: 'value_nmae'}}
    console.log(objClone); // {name: "objClone_name", obj2: {key_name: 'value_nmae'}}
  4. 모던한 프로퍼티 표기법(ES2015)

    • 프로퍼티 네임이 프로퍼티 밸류에 해당하는 변수나 함수 이름과 같다면 프로퍼티 밸류를 생략할 수 있다
    • 객체에 메소드를 쓸 경우 콜론(:)과 function 키워드를 생략할 수 있다
    • 계산된 속성명(computed property name): 프로퍼티 네임에 변수나 함수의 리턴값을 사용할 수 있다
  5. 옵셔널 체이닝(ES2020)

    • 옵셔널 체이닝(Optional Chaining) 연산자(?.)
      • 객체의 프로퍼티를 다룰 때, 존재하는 프로퍼티 값인지 검증이 필요한 경우 간결하게 쓸 수 있는 표현식
      • 옵셔널 체이닝 연산자 왼쪽의 프로퍼티 값이 undefined 또는 null이 아니라면 왼쪽 프로퍼티의 오른쪽 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환한다
      function printCatName(user) {
        console.log(user.cat?.name);
        // ((user.cat === null || user.cat ===undefined) ? undefined : user.cat.name);
      }
      • null 병합 연산자와 함께 응용할 수 있다
      function printCatName(user) {
        console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
      }
  6. 구조 분해(Destructuring)(ES2015)

    • 배열 구조 분해

      • const [parameters, ...rest] = array;
      • 배열의 길이보다 parameter의 갯수가 많을 경우 할당되지 못한 parameter들은 undefined 값을 갖는다
      • Rest parameter, Optional parameter를 활용할 수 있다
      • 변수의 값을 교환할 때도 활용할 수 있다
        • [a, b] = [b, a];
    • 객체 구조 분해

      • const { keys, ...rest } = object;
      • 할당 연산자 왼쪽에 선언된 변수의 이름과 같은 프로퍼티 네임이 객체에 있다면 왼쪽의 변수에 해당 프로퍼티 값이 할당되고 없다면 undefined가 할당된다
      • Rest parameter, Optional parameter를 활용할 수 있다
      • 콜론(:)으로 프로퍼티 값을 할당받을 변수 이름을 다르게 지정할 수 있다
        • const { key:variable } = object;
          // const variable = object.key;
        • 프로퍼티 네임에 하이픈, 띄어쓰기 등이 있어서 변수로는 사용할 수 없는 이름일 때에는 반드시 할당받을 변수 이름을 다르게 지정해야 한다
      • 대괄호([propertyName])를 통해서 computed property name을 활용할 수 있다
    • 중첩 객체 구조 분해(Nested Object Destructuring) 객체 안의 객체가 있을 때 더 깊게 구조 분해를 하는 것

      const btn = document.querySelector('#btn');
      
      btn.addEventListener('click', ({ target: { classList } }) => {
        classList.toggle('checked');
      });
      // classList = event.target.classList;
  7. 에러와 에러 객체

    • 에러 객체(Error Object): 코드가 실행되는 도중에 에러가 발생하면 자동으로 생성된다
      • ReferenceError: 존재하지 않는 변수나 함수를 호출할 때 발생한다
      • TypeError: 잘못된 방식으로 자료형을 다루려고 할 때 발생한다
      • SyntaxError: 문법에 맞지 않는 코드가 있을 때 발생한다
        • 신택스에러는 코드 실행 전에 발생한다
      • 에러 객체 종류 참고
    • 에러 객체를 생성하는 법
      const error = new TypeError('타입 에러가 발생했습니다.');
      console.log(error.name);
      console.log(error.message);
      /*
      TypeError
      타입 에러가 발생했습니다.
      */
      • throw error; 생성한 에러 객체로 에러를 발생시킨다
    • console의 error() 메소드를 사용하면 실제 에러처럼 출력할 수 있다
  8. try catch문

    try {
      [statements]
    } catch (err) {
      [statements] // 에러가 발생했을 때 동작할 코드
    } finally {
      [statements] // 항상 실행할 코드
    }
    • try문에서 에러가 발생하면 catch문의 파라미터로 해당 에러 객체가 전달된다
    • finally문
      • try catch문이 모두 실행된 다음 항상 실행된다
      • try catch문에서 return문이 실행되더라도 항상 실행된다
      • finally문에서 에러가 발생해도 위에 있는 catch문으로 넘어가지 않고, finally문 내부에서 try catch문을 다시 써야 에러 객체를 다룰 수 있다
    • 함수 내부에서 try catch문을 활용하면 함수를 실행하다가 에러가 발생해도 외부의 코드 실행이 멈추지 않는다
    • try catch 문은 예외 처리(Exceiption Handling)만 가능하다
      • 예외(Exceiption): 실행 가능한 코드에서 발생한 에러(ReferenceError, TypeError, ...)
      • SyntaxError는 예외가 아니므로 try catch 문에서 처리할 수 없다

자바스크립트의 유용한 내부 기능

  1. 배열 메소드

    • foreach 각 배열 요소들을 하나씩 전달 받아서 반복 실행하는 메소드

      • 형식

        array.forEach(function (element, [index], [arr]) {statements})
        • element 배열의 각 요소가 할당된다
        • index 요소의 인덱스가 할당된다
        • arr 실행되고 있는 배열이 할당된다
      • 예시

        const members = ['A', 'B', 'C', 'D'];
        
        members.forEach((member) => { 
          console.log(`${member}님이 입장하셨습니다.`);
        });
        /*
        for (let member of members) {
          console.log(`${member}님이 입장하셨습니다.`);
        }
        */
        /*
        A님이 입장하셨습니다.
        B님이 입장하셨습니다.
        C님이 입장하셨습니다.
        D님이 입장하셨습니다.
        */
    • map foreach와 작성 문법은 똑같지만 map 메소드는 호출할 때 작성한 콜백 함수의 리턴값들을 요소로 하는 배열을 리턴한다

    • foreach, map의 특징

      • 반복 중에 해당 배열의 길이가 늘어나도 초기의 배열 길이만큼만 반복된다
      • 반복 중에 해당 배열의 길이가 줄어들면 반복 횟수도 그만큼 줄어든다
    • filter 조건에 맞는 요소들만 추려내서 새로운 배열을 리턴하는 메소드

      const variable = array.fliter((element, [index]) => condition);
      • 콜백함수가 true를 리턴하는 요소들만으로 구성된 배열을 리턴한다
    • find 조건에 맞는 요소의 값을 리턴한다

      const variable = array.find((element, [index]) => condition);
      • 콜백함수가 true를 리턴하는 요소가 여러개일 경우에도 조건을 만족하는 첫 요소의 값만 리턴하고 반복이 종료된다
      • 콜백함수가 true를 리턴하는 요소가 없다면 undefined를 리턴한다
    • some 조건을 만족하는 요소가 1개 이상 있는지 확인하는 메소드

      const variable = array.some((element, [index]) => condition);
      • 조건을 만족하는 요소가 있다면 true를 리턴하고 아니라면 false를 리턴한다
      • 콜백함수가 true를 리턴한다면 true를 리턴하고 반복이 종료된다
    • every 조건을 만족하지 않는 요소가 1개 이상 있는지 확인하는 메소드

      const variable = array.every((element, [index]) => condition);
      • 조건을 만족하지 않는 요소가 있다면 false를 리턴하고 아니라면 true를 리턴한다
      • 콜백함수가 false를 리턴한다면 false를 리턴하고 반복이 종료된다
    • reduce

      array.reduce((acc, el, i, arr) => {
        return nextAccValue;
      }, [initialAccValue]);
      • acc 누산기(Accumulator)
        - 매번 콜백 함수가 반복해서 동작할 때, 직전에 동작한 콜백 함수가 리턴한 값을 전달 받는 파라미터
      • 마지막에 실행되는 콜백 함수의 리턴값을 그대로 리턴한다
      • 첫 번째 accumulator의 값을 reduce 메소드의 두 번째 아규먼트(initialAccValue)로 전달해줄 수 있다
      • reduce 메소드의 두 번째 아규먼트를 생략한다면 첫 번째 콜백 함수는 실행되지 않고, 두 번째 콜백 함수의 accumulator는 array[0]의 값을 갖는다
    • array.sort() 배열 정렬 메소드

      • 아무런 아규먼트도 전달하지 않을 때 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬된다
      • 숫자를 정렬하고 싶다면 다음과 같이 작성하면 된다
      const numbers = [1, 10, 4, 21, 36000];
      
      // 오름차순 정렬
      numbers.sort((a, b) => a - b);
      
      // 내림차순 정렬
      numbers.sort((a, b) => b - a);
    • array.reverse() 배열의 순서를 뒤집는 메소드

    • sort(), reverse() 메소드는 원본 배열의 요소들의 순서를 정렬해주기 때문에 원래의 순서로 되돌릴 수 없다

  2. Map, Set(ES2015)

    • Map 이름이 있는 데이터를 저장하고 메소드를 통해서 프로퍼티 값에 접근할 수 있는 데이터 구조

      // Map 생성
      const newMap = new Map();
      
      // set 메소드
      // newMap.set(key, value);
      newMap.set('title', '문자열 key');
      newMap.set(2017, '숫자형 key');
      newMap.set(true, '불린형 key');
      
      // get 메소드
      // newMap.get(key)
      console.log(newMap.get(2017)); // 숫자형 key
      console.log(newMap.get(true)); // 불린형 key
      console.log(newMap.get('title')); // 문자열 key
      console.log(newMap.get('name')); // undefined
      
      // has 메소드
      // newMap.has(key)
      console.log(newMap.has('title')); // true
      console.log(newMap.has('name')); // false
      
      // size 프로퍼티
      console.log(newMap.size); // 3
      
      // delete 메소드
      // newMap.delete(key)
      newMap.delete(true);
      console.log(newMap.get(true)); // undefined
      console.log(newMap.size); // 2
      
      // clear 메소드
      newMap.clear();
      console.log(newMap.get(2017)); // undefined
      console.log(newMap.size); // 0
    • Set 여러 개의 값을 순서대로 저장하고 자체 메소드를 통해서 값을 다루는 데이터 구조

      // Set 생성
      const members = new Set();
      
      // add 메소드
      members.add('A'); // Set(1) {"A"}
      members.add('B'); // Set(2) {"A", "B"}
      members.add('C'); // Set(3) {"A", "B", "C"}
      members.add('D'); // Set(4) {"A", "B", "C", "D"}
      
      // has 메소드
      console.log(members.has('C')); // true
      console.log(members.has('E')); // false
      
      // size 프로퍼티
      console.log(members.size); // 4
      
      // delete 메소드
      members.delete('E'); // false
      console.log(members.size); // 4
      members.delete('D'); // true
      console.log(members.size); // 3
      
      // clear 메소드
      members.clear();
      console.log(members.size); // 0
      • 개별 값에 바로 접근하는 방법이 없다
      • for...of 반복문처럼 전체 요소를 한꺼번에 다룰 때, 반복되는 그 순간에 개별 값에 접근할 수 있다
      • 집합처럼 요소끼리 중복되는 값을 허용하지 않는다
      • 중복된 값을 추가하려고 하면 그 값은 무시된다
      • 처음 Set을 생성할 때 아규먼트로 배열을 전달해 배열 내에서 중복을 제거한 값들의 묶음을 만들 수도 있다

자바스크립트 모듈

  1. 모듈화(ES2015)
    • 모듈화(Modularization): 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정
    • 모듈(Module): 모듈화 과정에서 분리된 파일
  2. 모듈 파일의 조건
    • 파일만의 독립적인 스코프를 가져야 한다(Module Scope)
    • Module Scope를 만드려면 script 태그에 type="module" 속성을 지정해줘야 한다
  3. 모듈 문법
    • import { parameters } from 'PATH/JS'; parameters에 다른 파일에서 export된 변수나 함수들을 넣어 import할 수 있다
      • as 키워드로 alias를 설정하여 가져올 수 있다
        import { export1 as alias1, export2 } from 'PATH/JS';
      • Wildcard Character(*)로 모듈 전체를 가져올 수 있다
        import * as name from 'PATH/JS';
        • name이라는 객체 형태로 사용한다
    • export export1 변수나 함수 앞에 export 키워드를 붙여주면 다른 모듈 파일에서 import할 수 있게 된다(named export
      • export { export1 as alias1, export2 as alias2 } 형식으로 한꺼번에, alias를 활용해서 export할 수 있다
      • export default export1 default 키워드로 하나의 대상만을 export할 수 있다(default export)
      • default 값을 import할 때에는 alias를 필수적으로 지정해야 한다
      • import default_alias, { parameters } from 'PATH/JS'; 형식으로 imprt할 수 있다
      • 모듈 전체를 import한 경우 name.default로 default 값에 접근할 수 있다
      • export default { export1, export2, ... }; 모듈 내 여러 개의 값을 객체 형태로 default export할 수 있다
    • HTML 문서에는 자바스크립트 코드의 진입점 역할을하는 파일 하나만 불러와도 된다



Feedback

  • 내용이 많아서 가독성이 안좋고 한 가지 주제에 집중하거나 더 많은 내용을 담기가 힘들었다. 긴 강의는 글을 나눠서 정리하는 것이 좋을 것 같다
  • prototype, class, closure, Execution Context와 같은 개념들은 따로 공부해야겠다
  • 에키마스크립트의 새로운 문법이 등장할 때마다 공부하는 것이 좋겠다
  • 브라우저가 어떤 ES버전을 지원하는지 염두해두고 개발해야겠다
  • 다음으로 '자바스크립트 웹 개발 기본기' 코드잇 콘텐츠를 수강할 예정이다



Reference

profile
job's done

0개의 댓글