어렸을 때 사진

이성열 yeolyi

배우고 익히는 재미로 사는 프론트엔드 개발자입니다. 제가 배운 것과 경험한 것들을 다듬어 여기에 공유해요.

프로젝트

  • cse.snu.ac.kr

    서울대학교 컴퓨터공학부 홈페이지 리뉴얼에 프론트엔드 개발자로 참여했어요.

    보러가기

    @yeolyii

    인스타그램 개발 계정에 개발 일상을 나눠요. 최근에 팔로워 1만명을 넘었습니다 🎉

    보러가기

자바스크립트 공부 기록. 예제 코드를 수정하고 실행해보세요.

  • 소개

    JS를 복습하며 기초적인 내용보다는 흥미롭고 지엽적인 내용 위주로 기록했습니다. 아래 책으로 공부했어요.

    자바스크립트 책 표지
  • 다양한 종류의 값들을 살펴보고 이들간에 변환은 어떻게하는지 공부했습니다.

    보러가기
    let n = 123.4567;
    console.log(n.toFixed(5));

    배운 것들

    타입, 값, 변수, 형변환

  • 연산자

    값들을 연산자로 조합해 새로운 값을 만드는 방법을 공부했습니다.

    보러가기
    console.log(2 + 2);
    console.log('2' + '2');
    console.log(2 + 2 - 1);
    console.log('2' + '2' - '2');

    배운 것들

    산술, 비교, 논리, 할당 연산자

  • 구문

    여러 구문을 모아 프로그램을 만드는 방법을 공부했습니다.

    보러가기
    for (let i = 0; i < 5; i++) {
        console.log('x'.repeat(i));
    }

    배운 것들

    if, for, while, 선언문

  • 객체

    자바스크립트의 가장 중요한 주제인 객체를 공부했습니다.

    보러가기
    let obj2 = Object.create(null);
    console.log(String(obj2));

    배운 것들

    프로퍼티, 프로토타입, 직렬화

  • 배열

    다른 언어들과 미묘하게 다른 자바스크립트의 배열을 공부했습니다.

    보러가기
    let a = [1, 2, 3];
    delete a[2];
    console.log(2 in a);
    console.log(a[2]);
    console.log(a.length);

    배운 것들

    희소 배열, 배열의 순회, 유사 배열

  • 함수

    맥락에 따라 다르게 동작하는 자바스크립트의 함수와 this 키워드를 공부했습니다.

    보러가기
    function f() {
      console.log(this);
    }
    
    f();
    f.call({ x: 123 }, 1, 2);

    배운 것들

    클로저, this, 생성자

  • 클래스

    클래스의 성질이 자바스크립트에서 어떻게 구현되는지 공부했습니다.

    보러가기
    class A {
      static foo() {
        console.log('foo');
      }
    }
    
    console.log('foo' in A.prototype)

    배운 것들

    프로토타입, 생성자, 클래스

  • 모듈

    모듈이 왜 필요한지, 자바스크립트에 어떤 종류의 모듈 시스템이 있는지 공부했습니다.

    보러가기

    배운 것들

    CJS, ESM

  • 라이브러리

    자바스크립트 표준 라이브러리에 어떤 것들이 있는지 공부했습니다.

    보러가기
    let a = new Uint8Array(1);
    a[0] = -1;
    console.log(a[0]);

    배운 것들

    Set, Map, ArrayBuffer, Date, Intl...

  • 이터레이터

    데이터에 순서대로 접근하는 과정을 어떻게 추상화했는지 공부했습니다.

    보러가기
    function* foo() {
      yield* [1, 2];
    }
    function* bar() {
      yield* foo();
    }
    console.log(...bar());

    배운 것들

    iterator, iterable, generator, yield

  • 비동기 프로그래밍

    자바스크립트가 비동기 작업을 어떻게 표현하며 어떻게 처리하도록하는지 공부했습니다.

    보러가기
    Promise.resolve()
      .then(() => console.log(1))
      .then(() => console.log(2))
      .then(() => console.log(3));

    배운 것들

    callback, promise, async/await

  • 메타 프로그래밍

    코드를 수정하는 코드인 메타 프로그래밍에 관련된 API들을 공부했습니다.

    보러가기
    function accessDB() {}
    
    let { proxy, revoke } 
      = Proxy.revocable(accessDB, {});
    
    proxy();
    revoke();
    proxy()

    배운 것들

    Property Attributes, Template Tags, Reflect, Proxy

게시글

방명록 🙌