용로그

Module Pattern모듈 패턴은 더 큰 파일을 여러 개의 더 작고 재사용 가능한 조각으로 분할하는 좋은 방법이다. 또한 모듈 내의 값은 기본적으로 모듈 내에서 비공개로 유지되고, 수정할 수 없기 때문에 코드 캡슐화를 촉진한다. export 키워드를 사용하여 명시적으로 내보낸 값만 다른 파일에서 액세스 할 수 있다.     예시function validateInput(input){ if (typeof input !== 'number'){ throw new Error('Invalid input'); }}function sum(x,y){ return x + y;}function multiply(x,y){ return x * y;}function subtract(x,y){ return x -..

클래스 문법이란?조금 더 자바스럽게, 객체 지향적으로 표현하기 위해 ES6버전부터 추가된 새로운 문법이다. 다만 생김새만 클래스 구조이고, 엔진 내부적으로는 프로토타입 방식으로 작동된다. class Person{ constructor(name, email, birthday){ this.name = name; this.email = email; this.birthday = birthday; } introduce(){ return `Hello my name is ${this.name}` }}const lee = new Person('Lee', 'Lee@example.com', '2000-01-01');    constructor 인스턴스를 생성하고 클래스 필드를 초기화하기 위한 ..

시작let user = { name : 'Lee', age: 25}console.log(user.name); // Leeconsole.log(user.hasOwnProperty('email')); // falseuser라는 객체 변수에는 name과 age라는 속성만 있는데, hasOwnProperty라는 메서드를 사용해도 에러가 나오지 않는다. 이 메서드는 어디서 온 것일까?    모든 객체는 위와 같이 global Object prototype을 가진다. 이 prototype안에 hasOwnPropert 메서드가 존재하기에 에러가 나오지 않고 결괏값이 반환되었던 것이다.     Prototype이란? 프로토타입은 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘을 말한다. 이를 프로..

비동기 요청이 여러 개 있는 상황에서, 하나의 요청이 다른 요청 결과에 의존할 때const response1 = request(‘https://example.com’)const response2 = request(‘https://example.com’, response1) 만약 위처럼 둘 다 비동기 요청을 보내는데, 두 번째 요청을 보낼 때 첫 번째 요청의 결과가 필요할 수 있다. 이런 경우 둘 다 병렬적으로 요청을 보내기 때문에, response1을 가지기 전에 두 번째 요청이 보내진다. 이런 부분을 해결하기 위해 콜백, Promise, Async/Await를 사용할 수 있다.     콜백함수콜백 함수는 특정 함수에 매개변수로 전달된 함수를 의미한다. 그리고 그 콜백함수는 함수를 전달받은 함수 안에서 ..

순수함수함수형 프로그래밍 패러다임의 한 부분이며, 두 가지 규칙을 가진다.   1. 같은 입력값이 주어졌을 때, 언제나 같은 결괏값을 리턴한다.const add = (x,y) => x + y;console.log(add(10,20)); // 30   2. 사이드 이펙트를 만들지 않는다.const z = 1;const sum = (x,y) => x + y + z;console.log(sum(10,20));사이드 이펙트는 없지만, 이렇게 함수 밖의 스코프에 접근하는 것도 이 함수를 inpure함수로 만든다.     inpure 함수의 예예시 1let x = 0;const numberUp = () => x += 1;console.log(numberUp()); // 1console.log(x); // 1외부에서..

Intersection observer기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지 구별하는 기능을 제공한다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나, 이벤트 연속 호출같은 문제가 발생할 일 없이 사용할 수 있다.    사용자가 아래로 스크롤하다가 타깃 요소와 뷰포트(intersection root)가 겹칠 때, 이 중첩 또는 교차의 양을 intersection observer api가 관찰하는 것이다. target element: 말 그대로 타깃(대상) 요소이다.intersection..