[인프런 워밍업 클럽 2기] FE 2주차 발자국
2주차 학습 요약강의 1 - 따라하며 배우는 자바스크립트 A-Zhttps://www.inflearn.com/course/따라하며-배우는-자바스크립트 - John Ahn강의 2 - 따라하며 배우는 리액트 A-Zhttps://www.inflearn.com/course/따라하는-리액트 - John Ahn6일차 Iterator, Generator, Design PatternSymbol type, Iterator, GeneratorSymbol type이 타입의 목적은 유니크한 식별자를 만들기 위해 사용됨IteratorIterable : 배열은 반복 가능한 객체이며, 반복이 가능하다는 것을 iterable 이라고 부른다. for…in 을 사용할 수 있거나 Symbol.iterator() 값을 가지면 iterable 한 것iterrator : 반복자는 next() 를 호출해서 {value: , done:} 두개의 속성을 가지는 객체를 반환하는 객체Generator사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있다.일반 함수 → 단 한번의 실행으로 함수 끝까지 실행된다.제너레이터 함수 → 사용자의 요구에 따라 일시적으로 정지될 수도 있고, 다시 시작될 수도 있다.자바스크립트 패턴프로그래머가 응용 프로그램이나 시스템을 디자인할 때 일반적인 문제를 해결하는데 사용할 수 있는 공식화된 모범 사례장점최고의 솔루션 : 여러번 수정 하면서 완성되었기 때문에 디자인 패턴은 이미 잘 작동한다는 것을 알고 있다.재사용 성 : 단일 문제에만 존재할 수 없으므로 여러 문제를 해결하기 위해 특정 상황에서 수정할 수 있는 재사용 가능한 솔루션을 나타냄풍부한 표현력 : 큰 문제를 부분적으로 효율적으로 설명할 수 있기 때무에 더 이상의 설명이 필요하지 않음.향상된 의사 소통 : 디자인 패턴에 익숙한 개발자는 문제에 대한 공통 목표를 설정하여 잠재적인 문제와 이러한 문제에 대한 솔루션에 대해 서로 의사 소통하는 데 도움이 된다.필요없는 코드 리팩토링 : 종종 다양한 문제에 대한 최적의 솔루션으로 불림.코드베이스 크기 감소 : 유일한 최적의 솔루션인 디자인 패턴은 공간을 거의 차지하지 않고 몇 줄의 코드로 필요한 솔루션을 구현하여 공간을 보존함.Singleton Pattern클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴. 클래스가 존재하지 않는 경우 클래스의 새 인스턴스를 생성하는 메서드로 클래스를 생성하여 구현할 수 있다. 인스턴스가 이미 존재하는 경우 해당 개체에 대한 참조를 반환한다.Factory Pattern특수 함수인 팩토리 함수를 사용하여 비슷한 객체를 많이 만들 수 있다. ⇒ 비슷한 객체를 반복적으로 생성해야 하는 경우 사용Mediator Pattern객체 그룹에 대한 중앙 권한을 제공한다.Observer Patternevent-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 AppStop Watch appsetInterval의 사용법을 배움. setTimeout 과는 또 다른 사용 방식setTimeout : 설정한 시간 (ex - 1000 ⇒ 1초) 가 지나면 내부에 선언한 함수를 실행setInterval : 설정한 시간 (ex - 1000 ⇒ 1초) 마다 내부에 선언한 함수를 실행Todo ApplocalStorage 사용방법과 프론트엔드에서 사용할 수 있는 기능들이 함축적으로 담겨 있는 앱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 Hooksclass 없이 state 를 사용할 수 있는 새로운 기능State 와 Propsstate : 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달 하는 방식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 기능을 사용함후기이번주는 특히 바쁜 주였다. 현업도 진행 중이고 스터디도 진행 하려 하다보니 몸이 힘들었는지 영 집중이 되질않고 잠을 많이 잤다.. ;몸 상태를 핑계로 미루고 미루다가 일요일에 허겁지겁 하는 결과를 낳았다. 다음주에는 빠릿빠릿하게 하고 싶긴 한데 앞으로 휴일이 없다 ㅎㅎ
