프론트엔드 공부한 거 정리하기

DOM 객체 문서 객체 모델 (The Document Object Model)을 말하며, HTML, XML 문서의 프로그래밍 인터페이스이다. 자바스크립트가 DOM구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 함. DOM은 웹페이지 내 모든 콘텐츠를 객체로 나타내주며 document 객체를 사용해 수정이 가능하다. { document 객체 } 웹 페이지의 진입점 역할을 하며 document 지시자를 작성해 페이지 내 모든 것을 수정할 수 있음. 페이지 내 특정 노드 탐색 script내에서 사용하기 위해 HTML 구조에 있는 요소를 불러와야하는데, 아래 코드를 통해 불러올 수 있음. 변수나 상수에 대입해서 사용하는 것을 권장. document.getElementById('id') : id ..

모듈 (module) 애플리케이션이나 웹 개발에 필요한 문서의 크기가 커지면 여러 개로 분리할 필요가 있는데 이 때 분리한 각 파일을 모듈이라고 함. 모듈 = 하나의 파일 = 하나의 스크립트 = ... 모듈은 항상 엄격 모드 (use strict)로 실행 됨. 외부 모듈(파일)을 불러오기 html파일에 외부 스크립트를 불러오기 외부 모듈의 기능을 불러오는 지시자 // 외부 js 문서 불러오기 // css : @import // JavaScript : import // ----------------module1.js----------------- import { fn1, fn2 } from "./module2.js"; import basic1 from "./module2.js"; import basic2 ..

클로저 (closure) 함수와 함수가 선언된 어휘적 환경의 조합. 외부 함수의 지역 변수에 접근할 수 있는 함수의 환경. click 변수의 유효 범위 지정 (Lexical scoping)

전개 구문 배열이나 문자열 객체 등 반복 가능한 값을 복사해서 키-값을 가지는 객체로 반환. ...뒤에 프로퍼티를 추가하여 확장 반환도 가능 '...'을 앞에다 붙여 구문 작성 배열 리터럴과 문자열 [...iterableObj, '4', 'five', 6]; 객체 리터럴 let objClone = { ...obj }; const dog = { name: "Mark", age: 3, weight: 5 + "kg", } const animal1 = {...dog} const animal2 = {...dog, hobby: "walking", age: 4}; console.log(animal1); // {name: 'Mark', age: 3, weight: '5kg'} console.log(animal2); /..

Array.prototype.find(); 배열의 값을 순차적으로 콜백 함수의 매개변수로 전달해 함수를 만족하는 첫 번째 값만 반환하며 요소가 없으면 undefined 반환. 배열.find(callback[, thisArg]) callback : 콜백 함수 element : 콜백 함수에서 처리할 현재 요소index : 콜백 함수에서 처리할 현재 인덱스 (생략 가능)array : find를 호출한 배열 (생략 가능) thisArg : 콜백 함수가 this로 사용할 값 const arr = [10, 20, 30, 40, 50]; const data = [ { id: 1, coffee: "아메리카노" }, { id: 2, coffee: "카페라떼" }, { id: 3, coffee: "바닐라라떼" }, { i..

객체에 담긴 자료를 프로퍼티라고 하고 프로퍼티는 '키: 값'의 구조를 가짐. 하지만 객체 프로퍼티는 값(value)과 함께 플래그(flag)라 불리는 속성 세 가지를 가짐. - 평범한 방식으로 프로퍼티를 만들면 해당 프로퍼티의 플래그는 모두 true이며 언제든 수정이 가능하다. 플래그를 얻는 메서드 Object.getOwnPropertyDescriptor(obj, propertyName); // obj : 정보를 얻고자 하는 객체 // propertyName : 정보를 얻고자 하는 객체 내 프로퍼티 메서드를 호출하면 프로퍼티 설명자"desriptor"라고 불리는 객체가 반환되고 여기에 프로퍼티 값과 플래그 정보가 있음. - let user = { name: "friday" }; let descriptor..

기존 객체에서 프로퍼티와 메서드를 상속 받아 유사한 역할을 하는 객체를 만들 수 있음 코드의 중복을 막고 재사용을 위해 주로 사용 부모 객체인 프로토타입을 동적으로 변경할 수 있음 객체에서 프로퍼티를 읽으려 할 때 객체 내에 해당 프로퍼티가 없으면 자바스크립트가 자동으로 프로토타입에서 프로퍼티를 찾는데, 이런 동작 방식을 '프로토타입 상속'이라고 함. 자바스크립트의 객체는 prototype이라는 숨겨진 프로퍼티를 갖는데 이 값은 null이지만 __proto__ 키워드를 사용해 값을 설정할 수 있고 다른 객체에 대한 참조가 가능하다. 다른 객체를 참조하는 경우 참조 대상을 '프로토타입'이라고 부른다. [[Prototype]] 객체 내부에 숨겨져 있는 숨김 프로퍼티로 아래 메서드나 키워드를 사용해 값을 설정..

배열 (Array) 여러 개의 데이터를 담을 수 있는 특별한 변수, 0부터 시작되는 인덱스 번호로 관리하며 배열의 값은 변할 수 있음. 배열 작성 -> [0, 1, 2, 3]; 배열 접근(읽기) -> 배열명[인덱스번호]; // 리터럴 방식 const a = {}; 객체 표현식 const b = () => {} 함수 표현식 let arr1 = []; // 빈 배열 생성. 배열로 초기화 console.log(arr1[0]); // undefined. // 빈 배열이기 때문에 인덱스 0은 할당되지 않은 값 배열이 가지고 있는 요소의 수를 호출하는 .length console.log(arr1.length); // 0 요소가 없음 배열의 생성과 값 할당. let arr2 = [1, 2, 3]; // 배열에 1, ..

구조분해 할당 == 비구조 할당 == 구조분해 객체나 배열의 데이터를 해체해서 변수에 전달하는 것.

수학과 함수를 위한 프로퍼티와 메서드를 제공하는 내장 객체. .abs() : 절대값으로 반환. 0 혹은 양수 console.log(Math.PI); // 3.141592653589793 // .abs() let abs = Math.abs(4); // 4 abs = Math.abs(3.141592653589793); // 3.141592653589793 abs = Math.abs(-3.141592653589793); // 3.141592653589793 abs = Math.abs("-1"); // 1 -> 숫자형 문자열도 양수로 반환 abs = Math.abs(""); // 0 abs = Math.abs(null); // 0 abs = Math.abs(undefined); // NaN abs = Math...