하루 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 개발관련/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 개발관련/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

알고리즘 LCS 최장공통부분서열

알고리즘 문제를 푸는데, LCS문제가 종종 나와서 이번에 한번 개념을 확실하게 잡고자 글을 적어봅니다. LCS (Longest Common Subsequence) 두 개의 문자 서열 X,Y가 주어졌을 때, X와 Y에서 공통으로 나타나는 부분 문자 서열을 찾는 알고리즘. 부분 서열의 길이가 최대가 되도록 하는 문자서열을 찾는다. 문제를 푸는 방법? 단순하게 풀기 브루트 포스(Brute-Force Approach) X의 모든 부분 서열에서 Y의 부분 서열인 것의 길이를 구한다음 최댓값을 구한다. X의 부분 서열의 개수는 지수 시간 복잡도를 가진다 따라서 이렇게 푸는 방법은 옳지않다. X = { x1, x2, x3 … x(m-1), x(m) } Y ={ y1, y2, y3 … y(n-1), y(n) } Z =..

• format_list_bulleted 개발관련/백준
• · 2023. 6. 23.
• textsms