[인프런 워밍업 스터디 클럽 2기 FE] 정지형 1주차 발자국
💡 1주차 회고강의를 듣기만 하고 따로 적어두진 않아서 정리하는데 오래걸렸다...! 다음주부터는 들으면서 해야겠다.미션같은 경우 순수 js로 구현해본적이 없어서 어려울거라 생각했는데 막상 해보니 괜찮았다.단 효율적인 코드로 작성한건지는 모르겠다...! 일단 기능만 구현하고 스타일은 꾸미지 않았는데 시간 나는 대로 틈틈히 스타일도 추가로 작업해야겠다.역시 스타일이 안들어가니 허전해.. 🤔 직장인이라서 진도를 따라갈 수 있을까 했는데 이번주와 다음주에 공휴일이 있어서 다행이다. 럭키비키잖아🍀다음주도 열심히 뚠뚠 🐜 가보자고!📝 강의 내용 요약 섹션 2 자바스크립트 기초console객체브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공log뿐만 아닌 time, table, clear...다양한 메서드가 있음.var, let, const변수 선언 방식var - 중복 선언과 재할당 가능 let(ES6) - 중복 선언 불가, 재할당 가능const(ES6) - 중복 선언과 재할당 불가유효한 참조 범위(scope)함수 레벨 스코프(function-level scope) - var블록 레벨 스코프(block-level-scope) - let, const호이스팅(Hoisting)코드가 실행되기 전 변수 및 함수 선언이 로컬 범위의 맨 위로 끌어올려지는 경우를 말함.변수생성 과정선언단계 =[ TDZ(일시적 사각지대) ] => 초기화단계(undefined값 할당) => 할당 단계 (값 할당)타입별 변수 호이스팅var - 선언, 초기화함수 선언문 : 선언, 초기화, 할당let, const - 선언 (선언 전 접근시 TDZ로 오류발생)자바스크립트 타입 (동적 타입)원시 타입 (number, string, boolean,undefined, null, symbol• bigInt)고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당참조 타입 (object, arrays, functions, classes, ...)데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당 타입변환js 변수는 새 변수 및 다른 데이터 유형으로 변환할 수 있습니다.1. js 함수를 사용하여,2. js 자체에 의해 자동으로 • 문자열과 숫자: + 연산 시 숫자가 문자열로 변환됨. • 숫자 연산: -, *, /에서 문자열이 숫자로 변환됨.• 비교: == 연산 시 두 값 중 하나가 다른 타입으로 변환됨. • Boolean 컨텍스트: if나 while 같은 논리적 평가 시 다양한 값이 true나 false로 변환됨. • 숫자와 불리언: 숫자 연산 시 true는 1, false는 0으로 변환됨.Math객체Template Literals - backtick(`) 줄바꿈을 쉽게할 수 있고 문자열 내부에 표현식 포함할 수 있게됨.Loops루프의 종류for - 코드 블록 여러번 반복for/in - 객체의 속성을 따라 반복while - 지정된 조건이 true인 동안 코드 블록 반복do/while - 조건이 true인지 검사하기 전 코드 블록 한 번 실행 이후 조건이 true인 동안 루프 반복섹션 3 Window 객체 및 DOMwindow Object브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)를 나타냅니다.또한 window는 브라우저의 객체이지 js의 객체가 아닙니다.이 window 객체를 이용해서 1.이 브라우저 창에 대한 정보와 제어를 할 수 있고 2.var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 됨.dom(문서 객체 모델) - 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줌.웹 페이지 빌드 과정(Critical Rendering Path CRP)웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정document object브라우저 내에서 콘텐츠를 보여주는 웹페이지 자체객체 사용시 웹 페이지의 상태와 모든 HTML 태그에 접근 가능요소 탐색요소 생성 createElement요소 삭제 removeChild요소 교체 replaceChild섹션 4 EventEventListener - 이벤트가 발생했을때 어떠한 액션을 위한 함수를 호출. 해당 함수가 이벤트 리스너addEventListerner() - 이벤트 리스너를 객체나 요소에 등록해야 사용가능. 등록해주는 함수Event 종류UI 이벤트키보드 이벤트마우스 이벤트포커스 이벤트폼 이벤트Event Bubbling가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]Event Capturing제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]이벤트의 3단계 흐름1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]Event Delegation - 하위요소의 이벤트를 상위 요소에 위임(제어)하는 것[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]섹션 5 자바스크립트 중급자바스크립트 this함수에서 this 사용 => Window 객체를 가리킴메소드에서 this 사용=>해당 객체를 가리킴constructor 함수에서 this 사용 =>빈 객체를 가리킴forEach(callback, thisArg)화살표 함수에서 this 사용 => 상위 스코프의 this를 가리킴(Lexical this)bind, call, apply 메소드함수의 this 컨텍스트를 제어const person1 = { firstName: “John”, lastName: “Doe” } ------------------------------------- const fullName = function() { console.log(this.firstName + “ “ + this.lastName); } //call() fullName.call(person1); ------------------------------------- const fullName = function (city, country) { console.log(`${this.firstName}, ${this.lastName}, ${city}, ${country}`); } fullName.call(person1, "Oslo", "Norway"); // 인수 넣어 사용 가능 //apply() fullName.apply(person1, ["Oslo", "Norway"]); // call 메서드와 비슷하지만 인수에 배열넣어야 함. ------------------------------------- //bind() function func(language) { if (language === “kor”) { console.log(`language: ${this.korGreeting}`); } else { console.log( (`language: ${this.engGreeting}`); } } Const greeting = { korGreeting: “안녕 “, engGreeting: “Hello “, }; Const boundFunc = func.bind(greeting); boundFunc(‘kor’); //call, apply와 다른 점 직접 함수를 실행하지 않고 반환 ㅁ 조건부 삼항 연산자 (result ? result = "" : result = "")Event Loop자바 스크립트 동기 코드인데 비동기 코드를 작성하기 위해 브라우저에서 사용한다면 브라우저 api (window object)Node에서 사용한다면 Node api(global object) 사용.web API 실행시 내부 진행[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #4 자바스크립트 중급, 인프런 강의]자바스크립트 엔진메모리 힙 - 메모리 할당이 발생 (변수를 정의하면 저장되는 창고)호출 스택 - 코드가 실행될 때 스택들이 이곳에 쌓임.[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #4 자바스크립트 중급, 인프런 강의]undefined vs null둘다 원시 자료형undefined = 아무 값도 할당받지 않은 상태null = 비어있는, 존재하지 않는 값 Map, Filter, ReduceClosure다른 함수 내부에 정의딘 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있음.Destucturing배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js 표현식let { accessory, animal, color } = animalData;전개 연산자특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용.const arr = [...arr1, ...arr2];얕은 비교 vs 깊은 비교얕은 비교숫자, 문자열 등 원시 자료형은 값을 비교배열, 객체 등 참조 자료형은 값 혹은 속성을 비교하지 않고, 참조디는 위치를 비교깊은 비교객체의 경우에도 값으로 비교Object depth가 깊지 않은 경우 : JSON.stringfy() 사용Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용얕은 복사 vs 깊은 복사얕은 복사중첩된 배열이나 객체가 있다면 따라서 변경됨.spread operator, Object assign, Array.from(), slice, shallow copyObject.freeze() - 얕은 동결 : 객체를 동결합니다. 중첩된 구조에서 올바른 역할을 수행하지 못함.깊은 복사중첨된 곳에 따로 spread operator 사용lodash 라이브러리를 이용한 deepCopystructuredCloneconst 참조 타입 데이터 변경const array = ["A", "B", "C"];array.push("D");call stack에 reference ID는 같고 heap memory값만 바뀌어서 에러가 나지 않음.함수 표현식 vs 함수 선언문예시// 함수 표현식 function funcDeclaration() { return '함수 선언문'; } // 함수 선언문 let funcDeclaration = function () { return '함수 표현식'; }함수 선언식은 호이스팅에 영향을 받지만 표현식은 받지 안음.strict mode엄격모드는 제한된 버전을 선택하여 암묵적인 느슨한 모드를 해제하기 위한 방법적용방법파일에 "use strict" 지시자 입력함수 안에 "use strict" 사용해서 그 함수만을 위해서 strict mode를 적용class를 사용하면 자동으로 strict mode가 적용됨Intersection observer기본적으로 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지 구별Pure Function순수 함수의 규칙1. 같은 입력값이 주어졌을 때, 언제나 같은 결과값을 리턴한다. (same input => same output)2. 사이드 이펙트를 만들지 않는다. (no dise effects)사용하는 이유1. 클린 코드를 위해서2. 테스트를 쉽게하기 위해서3. 디버그를 쉽게 하기 위해서4. 독립적인 코드를 위해서(Decoupled / Independent)Curry functionf(a,b,c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것자바스크립트 엔진자바스크립트를 실행하려면 자바스크립트 엔진이 필요.브라우저에는 자바스크립트 엔진이 있어서 실행 가능.IIFE(Immediately Invoked Function Expression)정의되자마자 즉시 실행되는 함수를 말한다.사용하는 주된 이유는 변수를 전역으로 선언하는 것을 피하기 위함.내부 안으로 다른 변수들이 접근하는 것을 막을 수도 있음.첫 번째() 소괄호 => 전역 선언 막고, IIFE 내부 안으로 다른 변수 접근두번 째() 소괄호 => 즉시 실행 함수를 생성하는 괄호( function() { // Do fun stuff } )() 섹션 6 OOP ( 객체 지향 프로그래밍) 하나의 문제 해결을 위한 독립된 단위 "객체"들의 모임알아보기 쉽고 재사용성이 높아짐특징자료 추상화불필요한 정보는 숨기고 중요한 정보만 표현해 프로그램 간단히 만드는 것상속기존 클래스의 자료와 연산을 이용할 수 있게 하는 기능다형성한 요소에 여러개념을 넣어 놓는 것 같은 메소드라도 각 인스턴스에 따라 다양한 형태를 가질 수 있는 것.클래스 & 오버 라이딩 - 자식 클래스의 메서드가 부모 클래스의 메서드와 다르게 동작하거나 변수가 다른 값으로 지정될 수 있음.캡슐화클래스 안에 관련 메서드, 변수를 하나로 묶어줌바깥에서의 접근을 막아 보안이 강화되고 잘 관리되는 코드 제공prototype & prototype chain자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘.sub class(Inheritance) - extends 키워드를 사용해 부모클래스 기능 그대로 자식 클래스를 만들 수 있음super() - 부모 생성자 호출ES6 classesstatic 정적 메서드 사용 - "prototype"이 아닌 클래스 함수 자체에 메서드를 설정할 수도 있습니다.사용 예시class Person { // 생성자(constructor)는 클래스의 인스턴스가 생성될 때 호출됩니다. constructor(name, age, job) { this.name = name; // 클래스의 속성 설정 this.email = email; this.birthday = new Date(birthday); } // 메서드 정의: 클래스 내의 함수 introduce() { return `Hello my name is ${this.name}`; } static multipleNumbers(x, y) { return x * y; } } console.log(Person.multipleNumbers(2, 9); 섹션 7 비동기시간이 오래 걸리는 작업을 먼저 시작하고, 그 작업이 끝나지 않아도 다음 작업을 먼저 처리.(<->) 동기 - 작업이 순차적으로 진행되어, 앞선 작업이 끝날 때까지 다음 작업을 실행하지 않음. callback, promise 그리고 Async/Await비동기 요청이 여러개 있을 때 하나의 요청이 다른 요청의 결과에 의존해야하는 경우 사용[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #6 비동기,인프런 강의 ] 👩🏻💻 미션1번 (Day2)음식 메뉴 앱2번 (Day3)가위 바위 보 앱3번(Day4)퀴즈 앱4번(Day5)책 리스트 나열 앱 5번(Day5)Github Finder 앱
