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

2주차 발자국

📍2024.05.03 ~ 2924.05.10

🏁 2주차 미션

강의 요약

#7 Iterator, Generator

Symbol 은 ES6 에서 추가된 원시 타입이며 생성자 함수를 이용해서만 생성할 수 있다.

Symbol 을 사용하면 유일한 식별자를 만들 수 있다. for/in 과 getOwnPropertyNames 에서 제외된다.

Iterator 는 next( )를 호출하여 두 개의 속성(value, done)을 가지는 객체를 반환하는 객체이다.

Generator 는 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있다.

yield 는 Generator 함수의 실행을 일시적으로 정지시키며 일반 함수의 return 과 유사하다.

#8 Design Pattern

디자인 패턴은 응용 프로그램이나 시스템을 디자인의 일반적인 문제를 해결할 때 사용할 수 있는 공식화된 모범 사례이다.

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

싱글톤 패턴 : 클래스의 인스턴스를 한 개의 객체로 제한한다.
팩토리 디자인 패턴 : 팩토리 함수를 사용하여 비슷한 객체를 여러 개 만들 수 있다.
중재자 패턴 : 객체 그룹에 대한 중앙 권한을 제공한다.
상태 패턴 : 특정 상태를 나타내는 객체 집합에 상태별 논리를 제공하여 객체가 내부 상태에 따라 행동을 변경할 수 있다.
모듈 패턴 : 큰 파일을 여러 개의 작고 재사용 가능한 조각으로 분할할 수 있게 돕는다.
관찰자 패턴 : 주체에 변경 사항이 생기면 주체를 관찰하는 관찰자가 알 수 있다.

#1 리액트란?

리액트는 뷰, 앵글러 프레임워크와 달리 자바스크립트 라이브러리이다.

배우기 쉽고, 라이브러리 환경, 사용성이 검증됨 등의 이유로 리액트를 많이 사용한다.

리액트는 실제 DOM 을 복사하여 메모리에 저장한 가상 DOM 을 사용한다. 가상 DOM 끼리의 비교하는 과정인 Diffing 을 통해 변경된 부분을 파악하고 변경된 부분을 Batch Update 로 실제 DOM 에 한 번에 적용시키는 Reconciliation 을 통해 DOM 을 조작한다.

리액트 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위이며 클래스형 컴포넌트, 함수형 컴포넌트가 있다.

리액트를 사용하기 위해서는 웹팩, 바벨 라이브러리가 필요하다.

웹팩은 여러 개의 파일을 하나의 자바스크립트 코드로 압축하고 최적화 하는 라이브러리이다.

바벨은 최신 자바스크립트 문법을 지원하지 않는 구형 브라우저에서도 작동할 수 있게 변환시켜주는 라이브러리이다.

#2 To-Do 앱으로 리액트 익히기

packages.json 에는 해당 프로젝트의 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들과 앱 시작, 빌드, 테스트할 때 사용할 스크립트가 명시되어있다.

SPA란 페이지마다 html 을 가지는 MPA와 달리 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을 말한다.

SPA의 화면 변경은 History API 를 이용한다.

JSX 는 자바스크립트의 확장 문법이며 UI 표현 시에 자바스크립트와 HTML 을 같이 사용할 수 있어 스크립트 내에서 UI 작업이 편리하다.

리액트에서 요소의 리스트를 나열할 경우에 필요한 Key 는 리액트가 변경, 추가, 제거된 항목을 식별하는 데 사용된다. Key 를 이용해서 가상 DOM 에서 바뀐 부분을 인식할 수 있다.

리액트 State 란 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 가진 객체이다. State 가 변경되면 컴포넌트가 Re-rendering 되며 State 는 컴포넌트 내에서 관리된다.

#3 To-Do 앱 최적화

React Hooks 란 class 없이 state 를 사용할 수 있는 새로운 기능이다.

클래스 컴포넌트: 많은 기능, 긴 코드, 복잡한 코드, 더딘 성능

함수형 컴포넌트: 적은 기능, 짧은 코드, 간결한 코드, 빠른 성능

React Hooks 의 장점

함수형 컴포넌트에서도 리액트 생명주기를 사용할 수 있다.
코드가 간결해진다.
HOC (Higher Order Component) 컴포넌트를 Custom React Hooks 로 대체하여 Wrapper 컴포넌트를 줄인다.

State

컴포넌트 내부에서 데이터 전달 시 사용한다. 변경이 가능하다. 변경되면 리렌더링 된다.

Props

Properties 의 줄임말. 부모 컴포넌트로부터 자녀 컴포넌트에 데이터를 전달할 때 사용한다. 읽기 전용이므로 자녀 컴포넌트에서는 변하지 않는다. 변경할 경우 부모 컴포넌트에서 State 를 변경시켜줘야 한다.

TailWindCSS

HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크이다.

CSS 프레임워크는 레이아웃 및 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 프로젝트에 적용할 수 있는 CSS 파일 모음이다.

장점: 빠른 스타일링, class/id 작성에 대한 어려움 감소, IntelliSense 플러그인으로 익숙해지기 쉬움

리액트 불변성

원시 타입: 불변성O, 고정된 크기로 call stack 메모리에 저장, 실제 데이터가 변수에 할당됨

참조 타입: 불변성X, 정해지지 않은 크기로 call stack 메모리에 저장, 데이터의 값은 heap 에 저장되며 heap 메모리의 주소값이 변수에 할당됨

불변성을 지켜야 프로그래밍의 복잡도가 감소하고, 리액트가 변경사항을 확인하여 업데이트할 수 있다.

불변성을 지키는 방법

참조 타입의 값을 바꾸는 경우 새로운 배열을 반환하는 메소드(spread operator, map, filter, slice, reduce)를 사용한다.

cf. splice, push 는 원본 데이터를 변경하는 메소드이다.

HTML Drag and Drop API 을 쉽게 구현할 수 있게 도와주는 모듈: react-beautiful-dnd

React.memo 를 사용함으로써 불필요한 렌더링을 막을 수 있다.

useCallback 을 이용하여 컴포넌트 렌더링 시 함수도 새로 만들게 되는데 이 같은 현상(리렌더링-함수 재생성-자식 컴포넌트 리렌더링) 을 막아 함수 최적화를 할 수 있다.

useMemo 를 이용하여 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력 발생 시 캐시된 결과를 반환하여 컴퓨터의 속도를 높일 수 있는 메모이제이션을 사용할 수 있다. 컴포넌트가 리렌더링 되더라도 동일한 입력이라면 이전 렌더링 때 저장된 값을 재활용한다.

localStorage 를 이용하면 페이지가 새로고침되어도 데이터가 남아있게 할 수 있다.

객체나 배열을 저장할 경우 JSON.stringify 를 사용해야 한다.

#4 Netflix 앱 - 1

Axios 란 브라우저, node.js 를 위한 promise API 를 활용하는 HTTP 비동기 통신 라이브러리

인스턴스화하면 중복된 부분을 계속 입력하지 않고 사용할 수 있다.

Styled Component 란 Css-In-JS 라고 하는 자바스크립트 파일 안에서 CSS를 처리할 수 있게 해주는 라이브러리이다.

Iframe 은 HTML Inline Frame 요소이다. 다른 HTML 을 해당 웹페이지 내부에 제한 없이 다른 페이지를 삽입할 수 있다.

#5 Netflix 앱 - 2

Element.scrollLeft 속성은 요소의 콘텐츠가 왼쪽 가장자리에서 스크롤되는 픽셀 수를 가져오거나 설정한다.

innerWidth 는 브라우저 내부의 가로 길이이다.

React Router DOM

React Router DOM 을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있고, 컴포넌트 기반 라우팅이 용이하다.

Routes : 앱에서 생성될 모든 개별 경로에 대한 컨테이너 역할이며 가장 첫번째 Route 를 렌더링한다.

Route : 단일 경로를 만드는 데 사용한다. path 와 element 속성을 가진다.

path 는 원하는 컴포넌트의 URL 이고, 원하는대로 이름을 정할 수 있다.

element 에는 경로에 맞게 렌더링 되어야 하는 컴포넌트를 지정한다.

React Router DOM APIs

중첩 라우팅 : 대부분의 레이아웃을 URL 세그먼트에 연결할 수 있다.

Outlet : 자식 경로 요소를 렌더링 하기 위해서 부모 요소에서 사용해야 한다.

useNavigate : 경로를 바꾼다.

useParams : :style 문법을 path 경로에 사용한 경우 useParams 로 읽을 수 있다.

useLocation : 현재 위치 객체를 반환한다.

useRoutes : <Routes> 와 기능적으로 동일하나 <Route> 대신 자바스크립트 객체로 경로를 정의한다.

useRef : 특정 DOM 을 선택할 때 사용한다.

Debounce function 을 사용하면 미리 결정한 시간 동안 이벤트의 처리를 지연시킬 수 있다.

swiper 모듈을 사용하면 터치 슬라이드를 쉽게 구현할 수 있다.

느낀 점

예전에 다른 강의로 리액트 클론 코딩을 했었으나 자바스크립트를 잘 모를 때라 코드에 대한 이해 없이 따라쓰기를 했었다. 자바스크립트를 선행한 상태에서 리액트를 배우니 좀 더 쉽게 배우고 이해할 수 있었다. 동작의 원리가 궁금한 부분들이 있어 리액트 공식 문서를 읽어 추가로 정리할 예정이다. 아직 JSX 문법이나 state, prop 에 익숙하지 않아 미션을 수행하면서 직접 사용해봐야겠다.