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

HTML 삽입 미리보기할 수 없는 소스 Web Animations API를 사용하면 자바스크립트로 애니메이션을 만들고 제어 할 수 있다. animate({a}, {b}) : 메서드를 사용하며 2개의 객체를 인수로 받으며 다음과 같은 역할을 한다. 매개변수 a : 시작과 종료 값을 포함하는 객체 매개변수 b : 애니메이션 속성을 포함하는 객체 requestAnimationFrame(callback) 화면에 프레임이 실행되기 전에 함수를 호출하며 시간 경과에 따른 지속적인 변화 가능. 한 번만 호출되므로 연속 호출 필요. ✨ will-change will-change: transform; /* will-chage 일어날 동작을 미리 브라우저에게 공지함 웹킷 계열 브라우저의 경우 css transform, a..

브라우저 사이즈에 다른 미디어쿼리를 제어하는 메서드. window.matchMedia(); // 미디어쿼리 객체 반환 matchMedia('(min-width: 768px)'); matchMedia('screen and (min-width: 768px) and (max-width: 1241px)'); matchMedia('(min-width: 768px)').matches; // 범위가 맞는 지 true false로 반환 const mq = matchMedia('(min-width:768px)'); const bgColor = (color) => { document.body.style.background = color; } if(mq.matches) { //브라우저 너비가 768px 이상이면 true, ..

재귀(recursion) 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴 문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있는데 함수가 자기 자신을 호출하는 것이 재귀. x를 n제곱하는 함수 만들기 [ for 반복문으로 만들기 ] [ 재귀적 사고로 만들기 ] pow(x, n)함수는 ( n이 1이 아닐 때)의 경우에서 내부에 있는 자기 자신을 반복 호출하면서 값을 찾아간다. x = 2 n = 5 n이 1이 아니기 때문에 함수는 2 * pow(2, 4)를 실행하는데 n이 1이 될 때 까지 반복해서 호출한다. n이 1이 되는 순간의 식은 2 * 2 * 2 * 2 * pow(2, 1) 이며 pow(2,1)은 2를 반환하므로 결과적으로 2 * 2 * ..

빈 객체를 생성하면 이 객체의 [[Prototype]]은 누굴 참조할까 obj = {}; 이 코드를 풀어보면 obj = new Object(); 이 코드와 같다. 내장 객체 생성자 함수 Object로 생성자 함수를 통해 객체를 생성하면 그 객체의 [[Prototype]]은 생성자 함수의 prototype 프로퍼티를 참조한다. 배열(Array), 함수(Function), 객체(Object), 날짜(Date) 등의 내장 객체들 모두 상속받는 객체를 위한 메서드를 포함하고 있고, 새로운 배열, 함수, 객체를 생성하면 [[Prototype]]이 되는 내장 객체에서 디폴트 생성자가 동작해서 생성이 된다. 이 과정은 메모리의 효율을 높여주는데 자바스크립트 명세서에 모든 내장 프로토타입의 꼭대기에는 Object.pr..

생성자 함수를 사용해 생성한 객체는 생성자 함수의 prototype을 사용해 [[Prototype]]을 설정한다. 모든 함수는 prototype이라는 일반 프로퍼티를 기본적으로 갖고 있으며 이 값의 디폴트는 'constructor'로 함수 자신이다. 여기서, 생성자 함수로 객체를 생성하면 그 객체가 참조하는 대상을 나타내는 [[Prototype]]은 함수의 prototype = constructor가 된다. 근데 생성자 함수의 일반 프로퍼티인 prototype에 다른 객체를 복사한 뒤에 객체를 생성하면 그 객체는 어떤 대상을 [[Prototype]]으로 참조할까? 생성자 함수의 prototype 프로퍼티는 함수를 호출할 때만 (new F) 사용되기 때문에 호출 후 prototype을 변경하면 전과 후에 ..

객체의 프로퍼티 종류 데이터 프로퍼티 : 키, 값 등의 데이터를 담은 프로퍼티 접근자 프로퍼티 : 함수이며 값을 획득(get)하고 설정(set)하는 역할이지만 외부 코드에서는 일반 프로퍼티처럼 보임. 접근자 프로퍼티의 설명자는 데이터 프로퍼티가 갖고 있는 설명자 중 value(값)와 writable(수정여부)가 없는 대신 get과 set 메서드를 갖고 있으며 서로의 기능을 대체한다. 데이터 프로퍼티의 설명자를 설정할 때와 같이 Object.defineProperty로 get과 set 메서드를 전달할 수 있으며 value 설명자는 존재하지 않기 때문에 한 프로퍼티 내에서 value와 value의 역할을 하는 get을 동시에 설정할 수는 없다. getter / setter 접근자 프로퍼티는 getter와 s..

DOM 객체 속성 제어 .setAttribute('속성', '값') 속성 값 설정 container.setAttribute("data-style", "teal"); .getAttribute('속성', '값') 속성 값 얻음 console.log(container.getAttribute("id")); // wrapper .hasAttribute('속성', '값') 속성 존재 확인 (true, false로 반환) console.log(container.hasAttribute('data-style')); // true .removeAttribute('속성', '값') 속성값 제거 li[2].removeAttribute('class'); li.forEach(a => a.removeAttribute('id')) ..

DOM객체에서 HTML을 이루는 모든 태그는 객체다. 태그 내 자식 태그는 '중첩 태그'라고 부르며 텍스트 처럼 태그 내의 단순 텍스트도 객체다. 이 모든 객체는 자바스크립트를 통해 접근할 수 있으며, 페이지를 조작할 때도 객체를 통한다. document.body == DOM구조 DOM객체로 HTML을 제어하기 위해선 태그들이 어떻게 나타나는 지 알아야 한다. HTML의 모든 태그는 요소의 소속(부모, 자식)등을 모두 반영한 노드로 표현하며, 노드는 모두 객체다. 단순히 줄바꿈해서 쓰거나 띄어쓰기로 생긴 공백도 모두 유효한 문자이며 노드. 텍스트에서 p노드가 있고 그 하위 노드로 '텍스트' 노드가 있다. 단 두가지 예외가 있는데 1. ) -> contents (, , ...) ※ 만약 자바스크립트가 DO..

자바스크립트는 웹을 위한 언어로 만들어져 다양한 발전을 거쳐 여러 플랫폼에 지원 가능한 언어가 되었다. 자바스크립트가 돌아가는 플랫폼을 '호스트'라고 하며 각 플랫폼의 환경(호스트 환경)마다 특정되는 객체와 함수를 제공한다. window 객체 (최상위 루트 객체) 자바스크립트로 웹 브라우저를 제어할 때 사용할 수 있는 기능, 함수, 객체를 알아보면 최상단에 window라는 '루트' 객체가 있고 window 객체는 2가지 역할을 한다. 자바스크립트 코드의 전역 객체이다. 브라우저 창을 대변하고, 이를 제어할 수 있는 메서드를 제공한다. 즉, 전역 함수, 전역 객체로 사용하는 함수들도 window 하위의 메서드이자 객체다. function hello() { alert("Hello JavaScript!"); ..

scrollTo, scrollBy, scrollIntoView 스크롤 제어_ scrollBy : 현재 스크롤 위치를 기준으로 제어. (상대값) - scrollBy(10px, 20px) 현재 스크롤이 위치한 곳에서 가로로 10px, 세로로 20px만큼 스크롤 이동 scrollTo : 브라우저의 top, left를 기준으로 스크롤 제어 (절대값) - scrollBy(0, 20) 브라우저의 left, top에서 20px만큼 세로 스크롤 이동. - scrollBy(20, 0) 브라우저의 left, top에서 20px만큼 가로 스크롤 이동. scrollIntoView : 해당 요소가 보이는 위치로 스크롤 이동 인수로 받은 값이 true면 요소의 top을 기준, false면 요소의 bottom을 기준으로 이동 (기..