하루 30분 모던 자바스크립트 딥 다이브 빌트인 객체

자바스크립트 객체의 분류 표준 빌트인 객체 ECMAScript 사양에 정의된 객체 전역 객체의 프로퍼티로서 제공 호스트 객체 ECMAScript 사양에는 정의 되어있지 않지만, 브라우저 환경 또는 Node.js 환경에서 추가로 제공하는 객체 브라우저 환경에선 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFram, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Web API를 호스트로 제공, node.js 환경에서는 고유의 API를 호스트 객체로 제공 사용자 정의 객체 사용자가 직접 정의한 객체 표준 빌트인 객체 표준 빌트인 객체에는 다양한 생성자 함수가 있음 생성자 함수로 생성한 인스턴스의 ..

• format_list_bulleted 기술 서적/하루 30분 모딥다
• · 2023. 6. 29.
• textsms

하루 30분 모던 자바스크립트 딥 다이브 프로토타입3

instanceof 연산자 좌변은 객체를 가리키는 식별자, 우변에는 생성자 함수를 가리키는 식별자를 피연산자로 받는다. 우변이 함수가 아닌 경우 TypeError 불리언 값은 반환받는다 프로토타입의 constructor 프로퍼티가 가리키는 생성자 함수를 찾는게 아니라, 생성자 함수의 prototype에 바인딩딘 객체가 프로토타입 체인 상에 존재하는지 확인하는 것 Constructor에 영향을 받지 않는다. 직접 상속 Object.create에 의한 직접 상속 Object.create메서드는 프로토타입을 지정하여 새로운 객체를 생성한다. new 연산자 없이 객체 생성 가능 프로토타입을 지정하여 객체 생성 가능 객체 리터럴에 의해 생성된 객체도 상속받을 수 있다. 프로토타입 체인의 종점에 위치하는 객체는 O..

• format_list_bulleted 기술 서적/하루 30분 모딥다
• · 2023. 6. 27.
• textsms

하루 30분 모던 자바스크립트 딥 다이브 프로토타입2

프로토타입의 생성 시점 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. 사용자 정의 생성자 함수 생성자 함수 즉 constructor는 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. non-constructor는 프로토타입이 생성되지 않는다. 함수 선언문은 런타임 이전 JS엔진에 의해 먼저 실행되므로 (호이스팅) 어떤 코드보다 먼저 평가되어 함수 객체가 된다. 이때 프로토타입도 더불어 생성된다. 생성된 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩 된다. 빌트인 생성자 함수 모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성된다. 생성된 프로토타입은 생성된 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩 된다. 객체가 생성되기 이전 생성자 함수와..

• format_list_bulleted 기술 서적/하루 30분 모딥다
• · 2023. 6. 26.
• textsms

React 에서 Swiper.js를 이용하여 캐러셀 Carousel 만들기 TS JS

캐러셀(Carousel) 이란? 캐러셀은 회전목마라는 뜻인데요, 쉽게말해서 슬라이드라고 생각하시면 됩니다. 티빙, 넷플릭스 같은 곳과 핸드폰 화면에서 많이 쓰입니다. Swiper.js를 사용하는 이유? 이전까지는 Framer-motion으로 수동으로 캐러셀을 만들었습니다. 애니메이션을 넣는 것도 여간 힘든일이 아니지만, 제일 큰 이유는 Pagination을 구현하기 위함입니다 수동으로 만들 땐 Pagination 기능을 만들 순 있어도, 애니메이션을 구현하는 것은 굉장히 복잡합니다. (적어도 저는 복잡했습니다..) 슬라이드를 한 장 넘길때의 애니메이션을 구현, 두 장 넘길 때의 애니메이션 구현, … 원하는 만큼의 애니메이션을 각각 구현해야 합니다. (저의 지식에서는 이렇게 하는게 최선이라 생각이 되네요...

• format_list_bulleted Front End/React
• · 2023. 6. 23.
• textsms

React 에서 setInterval 사용하는 법 리액트 JS TS

티빙 홈페이지 배너는 가만히 있으면 이미지가 다음으로 넘어가는 슬라이드 형식의 배너입니다. 위와 같은 기능을 리액트에서 구현하기 위해 setInterval 사용하는 법을 알아보겠습니다 리액트에서 setInterval()함수 사용하는 법 리액트에서 setInterval()을 사용하기 위해선 useEffect를 사용하면 됩니다. function HomeBanner({ backScreenData }: { backScreenData: ITrending[] }) { const [order, setOrder] = useState(1); const [isPlay, setIsPlay] = useState(true); const handleAfterClick = () => { setOrder((prev) => (prev..

• format_list_bulleted Front End/React
• · 2023. 6. 23.
• textsms

백준 JS 7570번 줄세우기 LCS

7570번: 줄 세우기 입력은 2 개의 줄로 이루어져 있다. 첫 줄에는 어린이 수를 나타내는 정수가 주어진다. 둘째 줄에는 처음에 줄서있는 어린이들의 번호가 차례대로 주어진다. 주어진 번호들 사이에는 공백이 하 www.acmicpc.net 꼭 알아야 하는 개념인 LCS를 활용한 문제입니다. LCS는 2차원 DP로 푸는 경우가 많아서 이 문제를 처음 봤을 때 고민을 많이 했습니다. 복습 차원에서 글을 적습니다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n") const N = +input.shift() const dp = Array(N+1).fill(0) let max = 0; fo..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 23.
• textsms