[인프런 워밍업 클럽 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
