코드노트

영화검색 사이트를 만들면서 무한스크롤을 구현하는데 Intersection Observer API를 사용했다. 일반적으로는 addEventListener를 사용해서 구현하지만 문제점이 꽤 많았다. - 스크롤을 할때마다 이벤트가 발생하는 문제점 - 스크롤 이벤트가 무거워질수록 위험하다는 점 등등 여러 문제점들이 있기에 다른방법을 찾다가 Intersection Observer API를 알게 되었다! Movie Search strong-rolypoly-f45a54.netlify.app 위 사이트에서 구현해보았는데 사용법도 어렵지 않고 활용도가 많을 것 같다. 이번에 사용하면서 막히던 부분들이 있었기 때문에 Intersection Observer API에 대해서 정리해보려고 한다. See the Pen Untit..

super키워드는 클래스에서 빠질 수 없는 키워드이다. 자바스크립트를 공부하다보면서 느낀건 호출, 참조에 대해서 참 헷갈리게 정리되어있는거 같다.( 나만 이해 못하는거겠지만..) 이 부분만 이해하기 시작하면 어느정도의 동작원리나 코드 명령어의 이해도가 빠르게 높아진다. 객체부터 시작해서 이 사고가 어느정도 진행되는 순간 학습능력이 올라가는거 같다. 클래스를 사용하면서 필요한 super키워드를 빠르게 이해해보자. super - super 키워드는 함수처럼 호출할 수 있다.(constructor 내에서) - this와 같이 식별자처럼 참조할 수 있는 특수한 키워드 * super를 호출하면 수퍼클래스(부모 클래스)의 constructor를 호출 * super를 참조하면 수퍼클래스(부모 클래스)의 메서드를 호출..

function scroll() { const header = document.querySelector("header"); // const maxheight = header.clientHeight; // document.addEventListener("scroll", onScroll, { passive: true }); function onScroll() { const scrollLocation = document.documentElement.scrollTop; const bar = document.querySelector(".scroll_search"); if (maxheight

let t = "3141592"; let p = "271"; 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요. 예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다. - 문제를 해석하면 쉬운 문제다. 간단하게 말하면! - p의 길이는 3이다. t의 문자를 3개씩 순차적으로 자른다. - 314, 141, 415, 159, 592 - 이 5가지 수를 p=272..

클래스 - 클래스는 생성자 함수와 유사하게 동작하지만 몇 가지의 차이를 가지고 있다. - 클래스는 class 키워드를 사용하여 정의 // 클래스 선언문 class Person{} // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; - 클래스는 표현식으로 정의할 수 있다. * 무명의 리터럴로 생성할 수 있고 런타임에 생성 가능 * 변수, 자료구조(객체, 배열) 저장 가능 * 함수의 매개변수에 전달 가능 * 함수의 반환값으로 사용 1. 클래스를 new 연산자 없이 호출하면 에러가 발생 - 생성자 함수를 new 연산자 없이 호출하면 일반 함수로 호출 2. 클래스는 상속을 지원하는 extends와 super 키..

실행 컨텍스트 Execution context - 자바스크립트 동작 원리를 담고 있는 개념 실행 컨텍스트를 이해해야하는 이유 - 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인당된 값을 관리하는 방식 - 호이스팅이 발생 - 클로저의 동작 방식 - 테스트 큐와 함께 동작하는 이벤트 핸들러 - 비동기 처리의 동장 방식 실행 컨텍스트 구성 - 전역공간은 자동으로 컨텍스트로 구성 - 함수를 실행 - eval()함수를 실행 - block을 만든다. 소스코드 타입 소스코드 타입 설명 전역 코드 global coad 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않음 함수 코드 function code 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 ..

자바스크립트를 지금까지 공부하면서 겉핥기로 계속 넘어갔던 부분들을 공부하려고 했다. 그 중에서도 정말로 이해안되던 프로토타입... MDN은 역시나 이해안되는 단어 문장들로 되어있다.. 책을 봐도 어렵게 풀어놨다... 약간 논문을 보는 느낌이라고 해야하나? 일부로 어렵게 설명해놓은듯한 느낌.. 코딩애플을 보고 역시나 10분만에 이해해버렸다.. 자바스크립트는 프로토타입 기반의 객체지향 언어이다. - 원시 타입의 값을 제외한 함수, 배열, 정규표현식 등 모두 객체이다. * 인스턴스 - 인스턴스(instance)란 클래스에 의해 생성되어 메모리에 저장된 실체를 말한다. - 클래스 또는 프로토타입을 사용하여 만들어 낸 결과물 프로토타입 이것만 알자! 프로토타입은 객체를 생성하게 되면 만들어진다. - prototy..

Object 생성자 함수 - new 연산자와 Object 생성자 함수를 호출하게 되면 빈 객체를 생성하여 반환 - 빈 객체를 생성한 후 프로퍼티, 메서드를 추가해 객체를 완성 - 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다. const tranvel = new Object(); tranvel.first = "곽튜브"; tranvel.hello = function () { console.log(`Hi! ${this.first}`); }; console.log(tranvel); // { first: '곽튜브', hello: [Function] } tranvel.hello(); // Hi! 곽튜브 - new 연산자로 객체를 생성하고 프로퍼티를 추가할 수 있다. - Object 외에도 S..

- 내부슬롯, 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되고 JS 엔진에서 동작한다. 그러나 개발자가 직접 접근할 수 없다. - 내부 슬롯, 내부 메서드는 JS 엔진의 구현 알고리즘을 설명하기 위해 사용하는 의사 프로퍼티( pseudo property )와 의사 메서드( pseudo method ) 이다. *JS 엔진의 내부 로직 - 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공 * [[...]] 로 감싼 이름들이 내부 슬롯과 내부 메서드 ex) 모든 객체는 [[ Prototype ]]이라는 내부 슬롯을 갖는다. - 내부 슬롯은 JS 엔진의 내부 로직이기 때문에 직접 접근할 수 없지만 [[ Prototype ]] 내부 슬롯의 경우, __proto__를..

즉시 실행 함수 (Immediately Invoked Function Expression) - 함수 정의와 동시에 즉시 호출되는 함수 - 단 한번만 호출 되며 다시 호출할 수 없다. * 즉시 실행 함수는 ( ... ) 감싸주어야 한다. 그렇지 않으면 Error가 발생한다. 그리고 그 뒤에 ()를! function () {...}(); // SyntaxError: Function statements require a function name - 만약 (...)로 감싸주지 않으면 선언문 형식에도 맞지 않기 때문이다. ??? 그럼 기명함수로 호출하게 되면 Error가 발생하지 않을까? function foo() {...}(); // SyntaxError: Unexpected token ')' // functi..