inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

SK
0

2주차 학습 요약

강의 1 - 따라하며 배우는 자바스크립트 A-Z

https://www.inflearn.com/course/따라하며-배우는-자바스크립트 - John Ahn

강의 2 - 따라하며 배우는 리액트 A-Z

https://www.inflearn.com/course/따라하는-리액트 - John Ahn

6일차 Iterator, Generator, Design Pattern

Symbol type, Iterator, Generator

Symbol type

이 타입의 목적은 유니크한 식별자를 만들기 위해 사용됨

Iterator

Iterable : 배열은 반복 가능한 객체이며, 반복이 가능하다는 것을 iterable 이라고 부른다. for…in 을 사용할 수 있거나 Symbol.iterator() 값을 가지면 iterable 한 것

iterrator : 반복자는 next() 를 호출해서 {value: , done:} 두개의 속성을 가지는 객체를 반환하는 객체

Generator

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

일반 함수 → 단 한번의 실행으로 함수 끝까지 실행된다.

제너레이터 함수 → 사용자의 요구에 따라 일시적으로 정지될 수도 있고, 다시 시작될 수도 있다.

자바스크립트 패턴

프로그래머가 응용 프로그램이나 시스템을 디자인할 때 일반적인 문제를 해결하는데 사용할 수 있는 공식화된 모범 사례

장점

  1. 최고의 솔루션 : 여러번 수정 하면서 완성되었기 때문에 디자인 패턴은 이미 잘 작동한다는 것을 알고 있다.

  2. 재사용 성 : 단일 문제에만 존재할 수 없으므로 여러 문제를 해결하기 위해 특정 상황에서 수정할 수 있는 재사용 가능한 솔루션을 나타냄

  3. 풍부한 표현력 : 큰 문제를 부분적으로 효율적으로 설명할 수 있기 때무에 더 이상의 설명이 필요하지 않음.

  4. 향상된 의사 소통 : 디자인 패턴에 익숙한 개발자는 문제에 대한 공통 목표를 설정하여 잠재적인 문제와 이러한 문제에 대한 솔루션에 대해 서로 의사 소통하는 데 도움이 된다.

  5. 필요없는 코드 리팩토링 : 종종 다양한 문제에 대한 최적의 솔루션으로 불림.

  6. 코드베이스 크기 감소 : 유일한 최적의 솔루션인 디자인 패턴은 공간을 거의 차지하지 않고 몇 줄의 코드로 필요한 솔루션을 구현하여 공간을 보존함.

Singleton Pattern

클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴. 클래스가 존재하지 않는 경우 클래스의 새 인스턴스를 생성하는 메서드로 클래스를 생성하여 구현할 수 있다. 인스턴스가 이미 존재하는 경우 해당 개체에 대한 참조를 반환한다.

Factory Pattern

특수 함수인 팩토리 함수를 사용하여 비슷한 객체를 많이 만들 수 있다. ⇒ 비슷한 객체를 반복적으로 생성해야 하는 경우 사용

Mediator Pattern

객체 그룹에 대한 중앙 권한을 제공한다.

Observer Pattern

event-drivent 시스템을 이용하는 것을 말함.

특정 Subject를 관찰하는 많은 옵저버가 있다. 관찰자는 기본적으로 관심이 있고 해당 주제 내부에 변경 사항이 있을 때 알림을 받기 원한다. 그래서 그들은 그 주제에 스스로를 등록 한다. - youtube 의 구독 및 알림 설정 느낌

Module Pattern

코드를 더 작고 재사용 가능한 조각으로 분할하는 것을 도와준다. 더 큰 파일을 여러 개의 더 작고 재사용 가능한 조각으로 분할 하는 좋은 방법. 또한 모듈 내의 값은 기본적으로 모듈 내에서 비공개로 유지되고 수정할 수 없기 때문에 코드 캡슐화를 촉진한다. export 키워드를 사용하여 명시적으로 내보낸 값만 다른 파일에서 액세스 할 수 있다.

사용하기 위해서 script 선언 할때 type=”module” 을 선언 하면 된다.

엄격 모드 실행, 모듈 레벨 스코프, 한번만 실행,

6번 과제 - 비밀번호 생성 앱

https://pass-create-app.vercel.app/ - 완성 화면

https://github.com/ygvbhy/pass-create-app - 코드

빌드 도구 Vite

CSS Bootstrap 5 (CDN)

js Vanilla

배포도구 Vercel

7일차 프로젝트 만들기 - Stop Watch, Todo App, SpeadSheet App

Stop Watch app

setInterval의 사용법을 배움. setTimeout 과는 또 다른 사용 방식

setTimeout : 설정한 시간 (ex - 1000 ⇒ 1초) 가 지나면 내부에 선언한 함수를 실행

setInterval : 설정한 시간 (ex - 1000 ⇒ 1초) 마다 내부에 선언한 함수를 실행

Todo App

localStorage 사용방법과 프론트엔드에서 사용할 수 있는 기능들이 함축적으로 담겨 있는 앱

localStorage.setItem(’{사용할 아이디 (ex - todos)}’, {저장할 값})

localStorage.getItem(’{설정한 아이디}’)

Array 내용은 String 으로 바꿔주고 저장해야 한다.

JSON.stringify(arr)

이후 getItem 으로 가져온건 String 이 된 Array 이기 때문에 다시 Array 로 바꿔준다.

JSON.parse(data)

SpewadSheet App

난이도가 난이도 인 만큼 제일 길었던 강의

간단한 듯 하면서 간단하지 않는 프로젝트

Blob(Binary Large Object, 블랍)

이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다.

데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용한다.

Blob 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다. 텍스트와 이진 데이터의 형태로 읽을 수 있으며, ReadableStream으로 변환한 후 스트림 메서드를 사용해 데이터를 처리할 수도 있다.

여기까지가 따라하며 배우는 자바스크립트 A-Z 강의의 마지막이다.

강의를 다 듣고 이전 과제들의 코드를 살펴봤을때 정말 못했다는 느낌을 받았다. 이번 리액트까지 정규 과정이 끝나면 리팩토링을 한번 해볼 생각이다.

7번 과제 - 타이핑 테스트 앱

https://typing-test-henna.vercel.app/ - 완성 화면

https://github.com/ygvbhy/typing_test - 코드

빌드 도구 Vite

CSS Bootstrap 5 (CDN)

js Vanilla

배포도구 Vercel

8일차 중간 점검

9일차 리액트 기본 및 Todo 앱 만들기

여기서 부터 리액트 강의가 시작 된다.

https://www.inflearn.com/course/따라하는-리액트/dashboard - John Ahn

리액트란?

리액트는 프레임워크가 아닌 라이브러리이다.

프레임워크 vs 라이브러리

프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것.

라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것

리액트가 라이브러리인 이유는 리액트는 전적으로 UI 를 렌더링 하는 데 관여하기 때문.

리액트를 도와주는 라이브러리

라우팅 : react-router-dom

상태 관리 : redux

테스트 : jest

리액트 컴포넌트

컴포넌트 : 리액트로 만들어진 앱을 이루는 최소한의 단위

클래스형과 함수형 두가지로 컴포넌트를 나눌 수 있다.

리액트의 Hooks 가 나온 뒤론 클래스형 보다 함수형으로 개발이 많아짐

npx create-react-app 이 오류가 나서 해결 했다.

오류 내용중에 캐시문제가 있어서 캐시를 전부 삭제 한 뒤 다시 실행 했더니 오류 없이 설치가 되었다.

sudo npm cache clean -f

SPA ( Single Page Application )

하나의 HTML 페이지로 구성된 웹 애플리케이션을 의미한다.

장점

  1. 빠른 사용자 경험

  2. 더 나은 성능

  3. 모바일 친화적

  4. 클라이언트 측 라우팅

JSX ( JavaScript extension )

자바스크립트의 확장 문법. jsx 를 이용해서 ui 작업이 가능하다.

React State

리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React State 를 사용해야 한다.

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체. State가 변경되면 컴포넌트는 리랜더링된다. 또한 State 는 컴포넌트 안에서 관리된다.

React Hooks

class 없이 state 를 사용할 수 있는 새로운 기능

State 와 Props

state : 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달 하는 방식

props: 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 전달하는 방법

React.memo

강의에서 진행중인 Todo App 에서 컴포넌트들은 App, Lists, List, Form 이렇게 4개 존재 하는데 Form 에서 input에서의 input 이벤트를 받았을 경우 input 만 재랜더링 하면 되지만 현재 모든 컴포넌트가 렌더링 되고 있다. 이 문제를 해결 하기 위해선 적용해야 하는 컴포넌트에 React.memo 를 감싸주면 된다.

useCallback

위의 예시와 마찬가지로 App 컴포넌트에서 생성된 함수를 Lists 를 거쳐 List 까지 Props 로 내려온다면 App 컴포넌트가 재 렌더링 될때 마다 함수가 새롭게 선언 되고 그로인해 Props 로 받아가는 Lists 와 List 까지 재렌더링 된다. 그러므로 useCallback 을 감싸주고 타겟을 정한 뒤 선언 하면 타겟이 바뀌지 않는한 함수를 새로 생성되지 않는다.

useMemo 를 이용한 결과 값 최적화

메모이제이션(Memoization)은 비용이 많이 드는 함수 호춣의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 프로그램의 속도를 높이는 데 줄로 사용되는 최적화 기술

Component 내의 compute 함수가 만약 복잡한 연산을 수행하면 결과 값을 리턴하는데 오랜 시간이 걸리게 된다. 이럴 시에 컴포넌트가 계속 리 렌더린 된다면 계속 수행하는데 오랜 시간이 걸려서 성능 저하가 발생 한다. 이걸 해결 하는게 useMemo . compute 함수에 넘겨주는 값은 이전과 동일 하다면 리 렌더링이 되더라도 연산을 다시 하지 않는다.

function Component({a, b}) {
	const result = useMemo(() => compute(a,b), [a, b])
	return <div>{result}</div>
}

8번 과제 - 예산 계산기 앱

https://cal-app-vert.vercel.app/ - 완성 화면

https://github.com/ygvbhy/cal-app - 코드

빌드 도구 Vite

CSS tailwind css

js React

배포도구 Vercel

Library izitoast, react-beautiful-dnd

프론트엔드 워밍업클럽 프론트엔트 2주차 발자국

답변 0