[인프런 워밍업 스터디 클럽 2기 FE] 2주차 발자국

Symbol

• symbol은 유니크한 식별자를 위해 사용 (보여지는게 같더라도 내부에서는 다른 값을 가진다)

• 설명을 넣을수도 있다.(설명이 없다면 어떠한 심볼인지 알기가 어렵다)

• getOwnPropertyNames와 for/in에서는 기본적으로 속성이 숨겨진다

Iterator & Generator

• Iterable === 반복가능, for..of, Symbol.iterator 값을 가지면 가능

• Iterator next()를 호출해서 두 개의 속성을 가진 객체를 반환하는 객체

• Generator는 사용자의 요구에 따라 여러 값을 반환할 수 있음 함수 실행 중에 일시적으로 정지, 재시작이 가능

  • 제너레이터를 사용한 라이브러리는 Node.js의 프레임워크 Koa, 비동기 처리를 위한 리덕스 미들웨어 Redux Saga 등이 존재

Design Pattern

• 디자인 패턴의 장점

  • 최고의 솔루션, 재사용성, 풍부한 표현력, 향상된 의사 소통, 코드 리팩토링 필요 없음, 코드베이스 크기 감소

  • 싱글톤 : 클래스의 인스턴스화를 하나의 객체로 제한

  • 팩토리 : 비슷한 객체를 반복적으로 사용하는 경우(유사한 여러 객체를 많이 찍어내기 위함..?)

  • 중재자 : 객체 그룹에 대한 중앙 권한을 제공

  • 상태 : 객체가 특정 상태를 나타내는 객체 집합에 상태별 논리를 제공(스스로 행동을 변경할 수 있게 허가)

  • 모듈 : 코드를 파일을 더 작고 재사용 가능한 조각으로 분할

  • 옵저버 : 옵저버들이 특정 Subject들을 관찰 후 알림

  ---

  React

  • 리액트는 UI를 랜더링하는데 관여하기 때문에 프레임워크가 아닌 라이브러리이다

  • 리액트는 여러 컴포넌트 조각으로 이루어져있음

    • 여러개의 컴포넌트가 모여서 하나의 페이지를 이룬다(클래스형, 함수형 컴포넌트 2개가 존재)

  • 가상돔을 사용해 바뀐 부분만 브라우저 돔에 적용한다(돔을 조작하는 비용을 줄일 수 있게 됨)

Misson

https://github.com/Sungw0o/JS-React/tree/main/frontend/mission/chap6

비밀번호 만들기

https://github.com/Sungw0o/JS-React/tree/main/frontend/mission/chap7

타이핑 측정기

리액트 미션은 아직 jsx가 익숙치 않아서 4,5 섹션을 복습 한 뒤에 해봐야겠다..