[인프런 워밍업 클럽 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 {result} } 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 기능을 사용함후기이번주는 특히 바쁜 주였다. 현업도 진행 중이고 스터디도 진행 하려 하다보니 몸이 힘들었는지 영 집중이 되질않고 잠을 많이 잤다.. ;몸 상태를 핑계로 미루고 미루다가 일요일에 허겁지겁 하는 결과를 낳았다. 다음주에는 빠릿빠릿하게 하고 싶긴 한데 앞으로 휴일이 없다 ㅎㅎ

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

[인프런 워밍업 클럽 2기] FE 1주차 발자국1주차 학습 요약강의 - 따라하며 배우는 자바스크립트 A-Zhttps://www.inflearn.com/course/따라하며-배우는-자바스크립트 - John Ahn1일차 OT 2일차 JS 기초, window, DOM, EventJS 기초 강의에서는 console 객체들, 변수 선언, 호이스팅, 타입, 타입 변환, 연산, 반복, window 객체, DOM, Event 등을 배움중요호이스팅var, let, const 가 모두 호이스팅 된다.예시 코드console.log(a) // undefined var a = 123 console.log(a) // 123JS 는 위에서 부터 순차적으로 읽어 내려오는 방식으로 코드를 읽는다. 위의 코드 같은 경우 var 의 선언된 a 를 메모리에 먼저 undefined 로 할당된 뒤 console.log(a) 를 읽어온다. 그러므로 undefined 라는 결과가 출력이 되고 그 뒤에 a 에 123이 할당된다.반대로 let과 const 는 어떨까.console.log(a) // ReferenceError: a is not defined let a = 123 // let 이나 const console.log(a) // 위의 log 에서 에러가 나므로 접근 안됨메모리에 먼저 a 를 할당 하는건 var 와 방식이 같다. 하지만 var 는 undefined 를 할당 하지만 let 과 const 는 undefined를 할당하지 않는다. 그러므로 변수 선언 위에 있는 log 에서 오류가 발생 한다.직접 보고 싶을 경우 about:blank 로 접속해서 개발자 모드의 콘솔창에 입력해보기 바란다.필자가 애용하는 브라우저 콘솔 테스트 환경1번 과제 - Food Menu Apphttps://food-menu-app-kappa.vercel.app/ - 완성본.. title 안바꿧네https://github.com/ygvbhy/food-menu-app.git - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercel해결 과정디자인은 똑같이 안했고 엇비슷하게 진행. css 보단 js 가 더 중요했으므로 css 는 신경 쓰지않음.메뉴 리스트는 데이터로 활용이 가능함. 그래서 json 파일로 따로 정리 import 해오는 방식으로 진행. 추후 api 도 json 방식으로 object 값이 반환 되는 경우가 많기 때문에 이런 방식으로 진행기초 틀 작업 - bootstrap 5 를 활용하여 전체적인 틀을 잡은 뒤 내부에 들어가는 메뉴정보를 js 에서 반복하여 작성 후 innerHTML 를 활용하여 내용 삽입All 과 각 메뉴의 구분 필요하고 로딩시 All 을 기준으로 메뉴들을 표기 해야 하므로 script 로딩 될때 해당 함수 실행. window.onload 사용해도 됨.3일차 자바스크립트 중급 1 ~ 8this, bind, call, apply, 삼항 연산자, Event loop, Closure, 구조 분해 할당, 전개 연산자, map, filter, reducethis 메소드 ⇒ 해당 객체를 가리킨다.(참조한다.) 함수 ⇒ window 객체를 참조 constructor ⇒ 빈 객체를 가리킨다.화살표 함수 (Arrow Function) 은 항상 상위 스코프의 this 를 참조함.삼항 연산자if (a) a = 'a' else a = 'b' // => a ? a = 'a' : a = 'b' Event Loop// 두 번째 인수가 시간 값. 밀리세컨드 값으로 1초 = 1000 으로 생각 하면 된다. // 내부 함수는 비동기이다. setTimeout(() => {}, 1000) 동기/비동기동기 ⇒ 시간을 맞춤비동기 ⇒ 시간을 맞추지 않음차이 : 동기는 먼저 이전의 것이 끝나야 다음 것을 함. 비동기는 1번을 하면서 2번도 가능하고 3, 4번도 가능함.JS 는 동기 언어임 그래서 JS 이외의 도움을 받는다. 브라우저 실행 → 브라우저 api 를 사용 (window object) Node 에서 실행 → Node api 사용 (global object)비동기 처리 과정브라우저 내부 : JS 엔진, web APIs, Callback Queue, Event LoopJS 엔진 : 메모리 힙, Call Stack메모리 힙 : 변수 저장 창고Call Stack : 함수 호출시 함수가 줄 서는 곳Closure다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수 (outerFunction) 가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스 할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있다.function outerFunction(outerVariable) { return function innerFunction (innerVariable) { console.log('Outer Variable: ', outerVariable) // Outer Variable: outside console.log('Inner Variable: ', innerVariable) // Inner Variable: inside } } const newFunction = outerFunction('outside'); newFunction('inside') outerFunction(’outside’) 은 변수 “newFunction” 에 할당되는 즉시 호출호출되면 outerFunction 은 변수 “newFunction” 을 outerFunction(outerVariable) 대신 innerFunction(innerVariable)을 반환 한다.그럼 다음 변수 newFunction(’inside’)으로 호출하여 innerFunction(’inside’)을 호출한다. 클로저는 innerFunction 이 원래 outerFunction(’outside’) 으로 설정한 outerVariable 매개변수를 기억하고 액세스 할 수 있는 것. 따라서 ‘inside’로만 호출되었더라도 ‘outside’와 ‘inside’ 를 모두 console.log() 할 수있다.구조 분해 할당let address = { city: '1234', zipCode: '12345' } const {city, zipCode} = address let a = [1, 2, 3, 4, 5] const [n1, n2, n3, n4, n5] = a 전개 연산자let a = [1, 2, 3, 4, 5] [...a, 123] // [1, 2, 3, 4, 5, 123] // 문자열도 가능 let a = "askdjhfqkwejhr" [...a] // ['a', 's', 'k', 'd', 'j', 'h', 'f', 'q', 'k', 'w', 'e', 'j', 'h', 'r'] // 문자열 분할 함수 - 위와 같은 효과 (배열에는 사용 못함) a.split('') // ['a', 's', 'k', 'd', 'j', 'h', 'f', 'q', 'k', 'w', 'e', 'j', 'h', 'r'] map, filter, reducemap → 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환filter → 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환reduce → 배열의 각 요소에 대해 주어진 리듀서 함수를 실행 하고, 하나의 결괏값을 반환 4개의 인자 ⇒ 누산기 (acc), 현재 값 (cur), 현재 인덱스 (idx), 원본 배열 (src)2번 과제 - 가위바위보 게임https://rsp-game-five.vercel.app/ - 완성 화면https://github.com/ygvbhy/rsp-game.git - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercel해결 과정 전 과제와는 다르게 js 작동이 많아서 TODO 파일에 작동을 하나하나 작성 하면서 작업컴퓨터가 고른 가위 바위 보는 Math.random() 함수를 이용해 3가지중 랜덤값을 뽑아서 진행1,2,3중 1이면 가위 2면 바위 3이면 보사용자가 고른 값을 id 에 저장 해 두고 이 값과 랜덤으로 가져온 값을 비교 하여 판단.4일차 자바스크립트 중급 9 ~ 17undefined, null, 얕은 비교, 깊은 비교, 얕은 복사, 깊은 복사, 함수 표현식, 함수 선언문, IIFE(Immediately Invoked Function Expression), Intersection observer, 순수 함수, 커링, strict modestructuredClone : 깊은 복사를 지원하는 내부 함수IIFE(Immediately Invoked Function Expression) 정의되자마자 즉시 실행되는 함수( function () { } )() // 첫번째 소괄호 => 전역 선언 막고, IIFE 내부 안으로 다른 변수 접근 막기 // 두번째 소괄호 => 즉시 실행 함수를 생성하는 괄호 이를 통해 js 엔진은 함수를 즉시 해석 및 실행 목적 : 전역으로 선언하는 것을 피하기 위해. 또한 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수도 있다.Intersection observer기본적으로 viewport 와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지 구별하는 기능무한 스크롤 또는 이미지 레이지 로딩에 사용 됨순수 함수함수형 프로그래밍 패러다임의 한 부분이며, 순수 함수는 두 가지 규칙을 가지고 있다.같은 입력값이 주어졌을 때, 언제나 같은 결과값을 리턴사이드 이펙트를 만들지 않는다.사용 하는 이유클린 코드를 위해테스트를 쉽게 하기 위해디버그를 쉽게 하기 위해독립적인 코드를 위해커링 (Currying)f(a,b,c) 처럼 단일 호출로 처리하는 함수를f(a)(b)(c) 와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것커링은 함수를 호출하는 것이 아닌 변환 하는 것3번 과제 - 퀴즈 앱https://quiz-app-mauve-beta.vercel.app/ - 완성 화면https://github.com/ygvbhy/quiz-app - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercel해결 과정 TODO 에 동작을 하나하나 써가며 작업문제는 3개 정답은 2 ~ 3개 로 나눠져서 json 으로 데이터를 정리 해서 사용각 문제를 반복하여 innerHTML 로 문제를 삽입한 뒤 id 값으로 정답 값 구분정답의 구분을 위해 각 문제가 담긴 배열을 반복을 돌려 확인.이후 정답 버튼들은 각 정답 여부에 맞게 색상 입히고 배경은 정답일 경우 초록, 오답일경우 빨강으로 색 변경다음 문제 클릭시 색상 및 문제, 정답 버튼 새롭게 로딩5일차 OOP, 비동기OOP, 다형성, js prototype, ES6 classes, Sub Class(Inheritance), super(), Callbacks, ES6 Promise, Async, AwiatOOP : object oriented programming - 객체 지향 프로그래밍프로그래밍 언어의 기본이 되는 프로그래밍의 패러다임. 여러개의 독립된 단위 객체들의 모임특징자료 추상화불필요한 정보는 숨기고 중요한 정보만을 표현함으로써 프로그램을 간단히 만드는것. 객체안의 자세한 내용을 몰라도 중요 정보를 이용해서 해당 객체를 사용할 수 있게 됨.상속새로운 클래스가 기존의 클래스의 자료와 연산을 이용할 수 있게 하는 기능다형성다형성. 다양한 형태를 가질 수 있다.어떤 한 요소에 여러 개념을 넣어 놓은 것.캡슐화클래스 안에 관련 메서드, 변수 등을 하나로 묶어줌. 이 매커니즘을 이용해서 바깥에서의 접근을 막아 보안이 강화되고 잘 관리되는 코드를 제공.prototypejs 객체가 다른 객체로부터 메서드와 속성을 상속받는 매커니즘을 말한다. 이것을 프로토타입 체인이라 한다. 이렇게 하므로 인해 더 적은 메모리를 사용하고 코드를 재사용 할 수 있다.callbacksjs 는 싱글 스레드. 하나의 일을 할때 다른 일은 하지 못함.데이터를 가져오는데 10초가 걸린다면 10초동안 페이지에선 아무것도 못함. 그래서 이러한 문제를 해결하기 위해 비동기 요청을 사용함. 병렬작업 가능Promisejs 비동기 처리에 사용 되는 객체new 키워드와 생성자를 사용해 만든다. 생성자는 매개변수로 “실행 함수” 를 받는다. 이 함수는 매개 변수로 두 가지 함수를 받아야 하는데 첫 번째 함수(resolve) 는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출해야 하고, 두 번째 함수는(reject) 작업이 실패하여 오류의 원인을 반환할 때 호출하면 된다. 두 번째 함수는 주로 오류 객체를 받는다.Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.4번 과제 - 책 리스트 나열 앱https://book-list-app-three.vercel.app/ - 완성 화면https://github.com/ygvbhy/book-list-app - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercel해결 과정책 리스트를 저장 하는 방법으로 배열을 선택. 로컬 스토리지와 고민 하다가 1회성으로 보여주는 방향으로 결정삭제 버튼 클릭 부분에서 헷갈렸지만, 부모 요소를 선택하여 이벤트를 추가하는 걸로 해결알림 출력 부분도 출력 후 지우는건 가능한데 연속적으로 진행 했을 경우 나타나지 않는 오류로 인해 Math 함수를 사용해 임의 숫자를 id 값으로 부여 한 뒤 setTimeout 으로 랜덤 숫자의 id 를 찾아 해당 부분을 삭제하는 것으로 진행알림은 없지만 아무런 정보를 입력하지 않고 저장시 함수에서 return5번 과제 - Github Finder 앱https://github-finder-app-rose.vercel.app/- 완성 화면https://github.com/ygvbhy/github-finder-app - 코드빌드 도구 ViteCSS Bootstrap 5 (CDN)js Vanilla배포도구 Vercellibrary Axios해결 과정GitHub API 를 활용 하여 데이터를 받아와서 화면에 표기해주는 작업api 는 axios 를 사용하여 동기/비동기 작업 진행작업 도중 도중 ip 에 할당된 api 사용횟수 초과로 인해 힘들었다.. 같은 내용이지만 노션 정리 내용https://skpost.notion.site/2-FE-1-1103a6f79dfb80da94ffd00752c9f9dd