상추의 IT저장소

이벤트 리스너 & 이벤트 핸들러 이벤트 리스너와 이벤트 핸들러를 합쳐 이벤트 리스너 혹은 이벤트 핸들러라고 한다.하지만, 이를 정확하게 말하자면 이벤트 리스너에 등록된 콜백함수가 이벤트 핸들러이다.div.onClick(() => {});div.addEventListener('click', () => {}); 이벤트이벤트 속성 (이벤트 리스너)이벤트 핸들러clickaddEventListener(), onClick()function(){}  이벤트 핸들러의 호출 과정 1. 하위 요소에 이벤트 저나 캡쳐링2. 타깃요소에 이벤트 전달3. 상위 요소로 다시 이벤트 전파 버블링 이벤트 버블링 (Event Bubbling)- 특정 요소에서 이벤트가 발생됐을 때, 해당 이벤트가 상위 요소들로 전달되어 가는 특성을 말한..

자바스크립트에서 length 속성은 다음과 같은 세가지 용도로 사용된다.1. 문자열의 길이를 반환2. 배열의 길이를 반환3. 유사 배열 객체의 길이를 반환 1. 문자열의 길이를 반환 문자열에서 length 속성은 문자열에 포함된 문자의 개수를 반환한다.const greeting = "환영합니다. 반값습니다!";console.log(greeting.length); // 13const emptyStr = "";console.log(emptyStr.length); // 0 2. 배열의 길이를 반환배열에서 length 속성은 배열에 포함된 요소의 개수를 반환한다.const fruits = ["apple", "orange", "banana"];console.log(fruits.length); // 3const e..

Rendering Environments어플리케이션 코드를 렌더링할 수 있는 환경에는 두 가지 환경이 있다. 바로 클라이언트와 서버이다.client어플리케이션 코드에 대한 요청을 서버로 보내는 유저 디바이스의 브라우저를 말한다.그런 다음 서버의 응답을 사용자가 상호 작용할 수 있는 인터페이스로 변환한다.server서버는 어플리케이션 코드를 저장하고, 클라이언트의 요청을 수신하고, 일부 computation을 수행한 후 적절한 응답을 보내는 data center의 컴퓨터를 말한다. Next.js - Server/Client ComponentReact 18 버전 이전까지는 React를 사용하여 어플리케이션을 렌더링하는 주요한 방법이 전적으로 클라이언트에 있었다.Next.js는 HTML을 생성하고 React에..

pnpm?pnpm은 2017년에 Zoltan Kochan이라는 개발자가 내놓은 패키지 매니저로 "performant npm"의 약자이기도 하다.즉, 효율적인 npm이라는 의미인데 말 그대로 효율성이라는 장점이자 특징을 가진 패키지 매니저다. npm과 pnpm의 차이점- 저장 방식npm은 각 패키지를 설치할 때마다 패키지를 별도의 디렉토리에 저장한다. 이는 디스크 공간을 많이 차지할 수 있다. pnpm은 각 패키지를 한 번만 설치하고, 나머지 프로젝트에서는 해당 패키지를 공유하는 방식으로 저장하여 이로 인해 디스크 공간을 효율적으로 사용할 수 있다.다만, 주의할 점은 특정 패키지를 한 번만 설치하기 때문에 프로젝트별로 연결을 해놓으면 호환 문제가 발생할 수 있다. 따라서 프로젝트끼리 호한 문제가 발생하지 ..

fetch API - HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. - fetch 함수는 HTTP 요청 전송 기능을 제공하는 Web API다. - fetch 함수는 HTTP response 객체를 래핑한 Promise 객체를 반환한다. 따라서 프로미스의 후속 처리 메서드인 then을 사용하여 resolve한 객체를 전달받을 수 있다. fetch 함수로 HTTP 요청하기 - fetch 함수에는 HTTP 요청을 전송할 URL, HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다. 1. GET : 서버로 부터 데이터를 취득 GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에..

추상화(Abstraction) - 추상화는 객체지향 프로그래밍의 핵심아이디어 중 하나이다. 복잡성을 최소화하고 하위 수준의 세부사항을 미리 구현할 필요가 없이 상위 수준에 집중하고 나중에 세부 사항을 구현할 수 있게 해준다. - OOP에서는 두가지 유형의 클래스가 존재한다. 추상클래스와 구체 클래스이다. - 구체 클래스는 new 키워드를 통해 객체를 생성할 수 있다. - 반면에 추상 클래스는 구체 클래스가 가져야 하는 속성과 함수를 설정하는 클래스이다. - 추상클래스는 클래스 앞에 'abstract' 키워드를 붙여 선언한다. - 하지만 추상 클래스는 구체 클래스의 설계서이므로 인스턴스를 생성할 수 없다. TypeScript의 추상클래스 - 타입스크립트에서 추상 클래스를 사용하는 가장 일반적인 용도는 구체..

타입 단언(Type Assertion) 이란? - 타입스크립트가 추론하지 못하는 타입을 as 키워드를 통해 명시해주는 것 - as 뒤에 명시하고자 하는 데이터 타입을 작성 해주면 된다. - 실제 데이터 타입을 변경하지 않고 타입 에러가 나지 않게끔 한다. Type Casting과 Type Assertion의 차이점 - Type casting : 데이터의 타입을 변환 -> 실제 타입이 변한다. - Type assertion : 데이터의 타입을 명시 -> 데이터 타입에 영향을 주지 않는다. Type Assertion 사용법 // as 를 활용한 type assert let str : unknown = "String"; let strLength : number = (str as string).length; /..

instanceof 란? - instanceof는 비교 연산자로 결과로 true/false를 리턴한다. - instanceof 연산자를 사용하면 객체가 특정 클래스에 속하는지 아닌지를 확인할 수 있다. - instanceof 는 상속 관계도 확인해준다. 예시)) class Animal {} let rabbit = new Animal(); console.log(rabbit instanceof Animal); // true - Array와 같은 내장클래스에도 사용 가능하다. let arr = [1,2,3]; console.log(arr instanceof Array); // true console.log(arr instanceof Object); // true 참조 : https://ko.javascript..