회고 53

[멋쟁이 사자처럼 프론트엔드 스쿨] 37일차 TIL - DOM, querySelector, closest, textContent

🍰 드디어 DOM 파트!🍴 DOM(Document Object Model): 웹 페이지의 구조화된 표현을 정의하는 프로그래밍 인터페이스. HTML 또는 XML 문서의 모든 요소를 객체로 나타냄자바스크립트를 통해 이 객체들을 조작할 수 있게 함웹 페이지의 내용, 구조, 스타일 동적으로 변경 가능트리 구조로 구성됨각 노드는 문서의 한 부분을 나타냄🍴 자식 노드 탐색childNodes현재 노드의 모든 자식 노드(NodeList) 반환요소 노드, 텍스트 노드, 주석 노드 포함firstChild현재 노드의 첫 번째 자식 노드 반환lastChild현재 노드의 마지막 자식 노드 반환🍴 DOM 컬렉션: HTML 문서에서 여러 요소를 그룹으로 다루기 위해 제공되는 객체들의 집합for...of를 사용할 수 있음배열..

[멋쟁이 사자처럼 프론트엔드 스쿨] 36일차 TIL - try...catch, BOM

🍰 난 여전히 실력이 부족하고, 진도는 멀리 멀리 떠나 버리고. 우울하던 차에 팀원 분이 지금은 이런 게 있다- 정도로 공부하고, 이후에 필요할 때 찾아서 쓰다 보면 저절로 외워지고 익혀지니까 너무 완벽히 하려고 하지 않아도 된다고 해서 위로가 되었다. 안 그래도 수업 없던 3일 간 지지난주 금요일 진도부터 복습 했는데 절반 정도를 끝냈어서 자괴감이 들었다. 오늘 스프린트 회고 시간에 들은 효과적인 공부법들을 적용 해봐야지! 🍮 어쨌든 나아가자고.🍴 try...catch: 예외 처리를 위해 사용되는 구조.try { // 예외가 발생할 수 있는 코드 블록 throw new Error('예외 발생 예시'); // 강제로 예외 발생} catch (error) { // 예외가 발생했을 때 ..

[멋쟁이 사자처럼 프론트엔드 스쿨] 35일차 TIL - 배열, 큐, 스택, 배열 메서드

🍰 큰일 큰일. 약간 넋 놓고 들은 파트가 있어서 얼른 따라잡아야 한다.🍴 배열[]를 사용해 선언, 초기값 설정 가능인덱스를 사용해 배열 요소에 접근/수정 가능push, pop, shift, unshift 메서드를 사용해 배열에 요소를 추가/제거배열은 객체임, 키가 숫자인 특수한 형태로 동작for, for...of, forEach 등을 통해 배열 순회🍴 큐(Queue)먼저 들어온 데이터가 먼저 나가는 FIFO(First In, First Out) 구조데이터가 한쪽 끝에서 들어가고 다른 쪽 끝에서 나옴주로 enqueue로 추가, dequeue로 제거🍴 스택(Stack)나중에 들어온 데이터가 먼저 나가는 LIFO(Last In, First Out) 구조데이터가 한쪽 끝에서만 들어가고 나옴주로 push..

[멋쟁이 사자처럼 프론트엔드 스쿨] 34일차 TIL - 클로저, 커링 함수, 옵셔널 체이닝, 동기/비동기, 원시값의 메서드

🍰 오늘은 어제보다 훨씬 나았다. 어제는 진짜... (절레 절레)🍴 클로저(closure): 함수와 그 함수가 선언된 렉시컬 환경과의 조합(MDN 정의)자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정함 => 렉시컬 스코프(정적 스코프)라고 함클로저 특징함수가 선언된 렉시컬 스코프를 기억함함수가 반환된 후에도 상태 유지함 function createCounter() { let count = 0; return function() { count++; return count; };}const counter = createCounter();console.log(counter()); // 1console.log(counter()); // 2cons..

[멋쟁이 사자처럼 프론트엔드 스쿨] 33일차 TIL - this, 프로토타입, 생성자 함수, call/apply/bind, instance/static method, class

🍰 오늘도... 어려웠다... 한 열 번은 반복해서 보면 이해될 것 같은 느낌? 그래서 일단은 키워드만 적어놓고 이해한 후 다시 내용 추가하러 올 지도...🍴 this: this 값은 런타임에 결정됨. 컨텍스트에 따라 달라짐.🍴 프로토타입자바스크립트는 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어.객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있게 하는 메커니즘자바스크립트 객체는 [[Prototype]]이라는 숨김 프로퍼티를 가짐이 프로퍼티 값은 null이거나 다른 객체에 대한 참조가 됨다른 객체를 참조하는 경우 => 참조 대상을 프로토타입(prototype)이라고 부름🍴 생성자 함수모든 프로토타입은 constructor 프로퍼티를 가짐.이 construc..

[멋쟁이 사자처럼 프론트엔드 스쿨] 32일차 TIL - 객체, 구조 분해 할당, 객체 복사, 가비지 컬렉션

🍰 목감기 3일 째, 수업 도중 뜨거운 물을 계속 들이켰다. 🍴 객체: key: value 쌍으로 구성된 엔티티(entity) 데이터 구조const authUser = { uid: 'user-09077', name: 'lee', email: 'lee@naver.com', isSignIn: false, permission: 'paid', // paid | free};// 점 표기법으로 객체의 프로퍼티 출력console.log(authUser.uid);// 대괄호 표기법으로 출력console.log(authUser['uid']);🍴 프로퍼티 제거(remove) / 삭제(delete): 제거 - 비워둠, 삭제 - 메모리까지 날림🍴 구조 분해 할당(destructuring assignments)..

[멋쟁이 사자처럼 프론트엔드 스쿨] 31일차 TIL - rest parameter, 함수의 기능, this, 재귀

🍴 rest parameter: 함수 매개변수 목록에서 남은 인수들을 배열로 모으는 방법. 함수가 가변 인수를 받아 처리할 수 있게 해줌.function sum(...numbers) { return numbers.reduce((acc, current) => acc + current, 0);}console.log(sum(1, 2, 3)); // 6console.log(sum(1, 2, 3, 4, 5)); // 15🍴 함수의 두 가지 기능1. 일반 함수함수 이름 직접 호출하여 실행this 바인딩: 호출 맥락에 따라 다르게 바인딩. 기본적으로 전역 객체 참조, 객체의 메서드로 호출 시 해당 객체 참조.명시적으로 return 문 사용하지 않을 시 undefined 반환2. 생성자 함수객체 인스턴스를 생성하..

[멋쟁이 사자처럼 프론트엔드 스쿨] 30일차 TIL - getComputedStyle, 함수 표현식, 콜백 함수, 배열 메서드(reduce, map, filter, forEach)

🍰 오늘 진짜 최악... 한 달에 한 번 오는 그 통증이 진짜 레전드급으로 와서 수업에 집중을 못 했다. 중요하지 않은 개념이 없는데... 😢🍴 getComputedStyle: 요소의 계산된 스타일 속성 가져옴. 계산된 스타일 - 모든 스타일시트, 스타일 요소, 인라인 스타일 적용 후 최종적으로 브라우저가 화면에 렌더링하기 위해 사용하는 CSS 속성 값.let style = window.getComputedStyle(element[, pseudoElement]);element: 스타일을 가져오려는 요소. pseudoElement(선택): 매칭할 가상 요소 지정하는 문자열. 생략 시 요소 자체의 스타일 반환.반환 값: CSSStyleDeclaration 인터페이스의 객체 반환. 지정된 요소의 모든 C..

[멋쟁이 사자처럼 프론트엔드 스쿨] 29일차 TIL - for문, 함수, 프로퍼티 존재 확인

🍰 공부할 게 너무너무너무너무너무너무너무너무너무 많아서 블로그는 키워드 중심으로만 작성 중...🍴 in 연산자: 객체 내에 특정 프로퍼티 존재 여부 확인확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인하므로 주의 필요🍴 Object.prototype.hasOwnProperty 메서드: 인수로 전달 받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true 반환console.log(person.hasOwnProperty('toString')); // false🍴 Function.prototype.call(): call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출함이미 할당되어있는 다른 객체의 함수/메소드를 호출한는 해당 객체에 재할당 할 때 사용다른 메서..

[멋쟁이 사자처럼 프론트엔드 스쿨] 28일차 TIL - switch, ??, while, do-while, for, nextSibling, node, nodeType

🍰 자바스크립트 진도와 간단한 테스트 진행!🍴 switch 문: 복수의 if 조건문 => switch로 바꿀 수 있음. case는 일치 연산자 같이 타입까지 동일해야 함.switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break]}🍴 nullish 병합 연산자 '??': null이나 undefined인 지 아닌 지 확인함🍴 while 문: 조건이 true인 동안 본문이 실행됨. 무한 루프에 빠지는 것 주의!while (condition) { // 코드}🍴 do-while 문: 조..