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

인프런 워밍업 클럽 2주차 발자국

스터디 첫 모임에서 예산 계산기 앱 코드리뷰를 했는데 확실히 다른 사람들 코드를 보면서 배우는 것들이 있는 것 같다.

강의 요약

• 리액트란?

  • React 는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다

  • React는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다

• Framework vs Library

  • Framework는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 갖고 있다

  • Library는 어떠한 특정 기능을 모듈화 해놓은 것이다

• 리액트를 사용하는 이유?

  • 상대적으로 배우기 쉬운 라이브러리

  • 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경이 많음

  • 많은 기업들의 사용으로 검증이 된 라이브러리

• 컴포넌트?

  • 리액트로 만들어진 앱을 이루는 최소한의 단위

• 브라우저가 그려지는 원리와 가상돔

  • 리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것이다

  • Critical Rendering Path

    • Dom tree 생성

    • Render tree 생성

    • Layout

    • Paint

  • 가상돔이 작동되는 방식?

    • 리액트에서는 항상 렌더링 이전의 객체(가상돔)와 렌더링 이후의 객체(가상돔)를 가지고 있다

    • 리액트에서는 어떠한 State(데이터)가 바뀌면 가상돔이 새로 생성된다

      • Diffing: 바뀐 부분을 찾는 과정

      • Reconciliation: 바뀐 부분만 실제 돔에 적용시켜주는 것

• SPA

  • 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것

• JSX

  • 자바스크립트의 확장 문법

  • 리액트에서는 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다

  • Key 속성?

    • key는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 된다

    • key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다

• Array.prototype.map

  • 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드

• Array.prototype.filter

  • 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 한다

• state

  • 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체

• Spread Operator(`...`)

  • ES6에 새롭게 추가되었으며, 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다

• React Hooks

  • ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 기능

  • 필요한 이유?

    • Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해 개발됨

• Props

  • properties의 줄임말

  • props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법

  • props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다

• 구조 분해 할당

  • 배열이나 객체의 속성을 해체하며 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

스스로 칭찬하고 싶은 점

평일 낮에는 시간이 거의 없음에도 불구하고 금요일 스터디에 참여하기 위해 어떻게든 예산 계산기 앱 을 완성시켰다.

아쉬웠던 점

2주차 발자국을 제때 작성해서 올리지 못한 것과 주말에 시간이 있음에도 밀린 강의를 듣는 거에 시간을 많이 투자하지 못했다.

다음주 목표

• 발자국 마감기한에 맞춰 올리기!

• 포켓몬 도감 앱 완성하기!