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

SK 1개월 전

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

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

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

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

자바스크립트 패턴

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

장점

최고의 솔루션 : 여러번 수정 하면서 완성되었기 때문에 디자인 패턴은 이미 잘 작동한다는 것을 알고 있다.
재사용 성 : 단일 문제에만 존재할 수 없으므로 여러 문제를 해결하기 위해 특정 상황에서 수정할 수 있는 재사용 가능한 솔루션을 나타냄
풍부한 표현력 : 큰 문제를 부분적으로 효율적으로 설명할 수 있기 때무에 더 이상의 설명이 필요하지 않음.
향상된 의사 소통 : 디자인 패턴에 익숙한 개발자는 문제에 대한 공통 목표를 설정하여 잠재적인 문제와 이러한 문제에 대한 솔루션에 대해 서로 의사 소통하는 데 도움이 된다.
필요없는 코드 리팩토링 : 종종 다양한 문제에 대한 최적의 솔루션으로 불림.
코드베이스 크기 감소 : 유일한 최적의 솔루션인 디자인 패턴은 공간을 거의 차지하지 않고 몇 줄의 코드로 필요한 솔루션을 구현하여 공간을 보존함.

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

해결 과정
- 체크박스를 기준으로 비밀번호를 생성 해야 하는 문제
- 체크 박스가 없으면 비밀번호 생성이 안되므로 number의 체크박스는 강제 선택하게 진행
- form 으로 감싼 데이터는 기본적인 동작을 수행함. length 에 required 옵션을 넣으면 min 값과 max 값에 의하여 1차적으로 걸러지며 안내 메시지가 출력됨. 범위 사이 라면 event.preventDefault() 를 넣어줘서 기본 동작을 막는다.
- 각 체크 박스 마다 비밀번호를 랜덤하게 생성 해줘야 함. 그래서 해당 체크 박스마다 String 값을 따로 설정 하여 문자열을 만들어 주고 생성하기 버튼을 클릭 했을때 체크된 항목을 찾아서 문자열을 만들어준다. ex) “abcdefghijklmnopqrstuvwxyz0123456789” 이런식
- 이제 이걸 Math.random 함수를 이용해 length 의 길이에서 숫자를 뽑고 해당 숫자에 있는 문자열을 가져온다. → 이걸 입력한 length 만큼 반복
- 출력 된 비밀번호를 복사 버튼을 클릭하면 클립보드로 복사가 된다. navigator.clipboard api 활용 → 복사에 성공하면 alert 창이 뜨며 복사된 항목이 출력됨.

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으로 변환한 후 스트림 메서드를 사용해 데이터를 처리할 수도 있다.

출처
https://developer.mozilla.org/ko/docs/Web/API/Blob

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

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

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

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

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

빌드 도구 Vite

CSS Bootstrap 5 (CDN)

js Vanilla

배포도구 Vercel

해결 과정
- 여태까지의 과제중에 제일 생각을 많이 한 과제
- 아래의 식을 참고함.
```
WPM : (타이핑한 총 문자 수 / 5) / 경과 시간(분 단위)
CPM : 타이핑한 총 문자 수 / 경과 시간(분 단위)
ACC : (모든 글자수 - 틀린 글자수) / 모든 글자수 * 100

모든 식은 공백 포함
```
- 테스트 문자열은 html 공부 할때 많이 나오는 “Lorem ipsum dolor sit amet…” 이 문자열로 진행. html 에서 Lorem 을 치면 vsc 에서 자동완성을 제공. ~~얼마나 많이쓰면~~
- 해당 문자열을 split 으로 자른 뒤 각 문자마다 span 으로 감싸고 진행함.
- textarea 에 input 이벤트를 넣고 입력 될때마다 정답과 비교 하여 정답이면 초록색 글씨, 오답이면 빨간 글씨로 변경

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 페이지로 구성된 웹 애플리케이션을 의미한다.

장점

빠른 사용자 경험
더 나은 성능
모바일 친화적
클라이언트 측 라우팅

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

해결 과정
- 강의인 Todo 만들기와 매우 흡사한 과제이며 방식이 비슷함.
- 강의 에선 webpack 을 썻지만 과제는 vite를 사용해서 jsx 로 작업 해서 추가적으로 요구 하는 사항이 있다보니 거기서 시간이 오래 걸렸음 ( propTypes 등등 )
- 총 지출 금액 계산에서 아직 배우진 않았지만 useEffect 기능을 사용함

후기
이번주는 특히 바쁜 주였다. 현업도 진행 중이고 스터디도 진행 하려 하다보니 몸이 힘들었는지 영 집중이 되질않고 잠을 많이 잤다.. ;
몸 상태를 핑계로 미루고 미루다가 일요일에 허겁지겁 하는 결과를 낳았다. 다음주에는 빠릿빠릿하게 하고 싶긴 한데 앞으로 휴일이 없다 ㅎㅎ