프로그래밍 잡동사니

Next.js + TypeScript + styled-components 환경에서 위와 같은 텍스트 슬라이드업 캐러셀을 구현해보자! [components/Home/HomeAnimation.tsx] import { useState, useEffect, useRef } from 'react'; import { ... CarouselContainer, CarouselRotator, CarouselRotatorItem, } from './HomeAnimation.styled'; export default function HomeAnimation() { const [count, setCount] = useState(0); const intervalRef: { current: NodeJS.Timeout | null..

react-animated-cursor🔽 GitHub - stephenscaff/react-animated-cursor: An animated custom cursor React component. An animated custom cursor React component. Contribute to stephenscaff/react-animated-cursor development by creating an account on GitHub. github.com 사용 예시🔽 Animated Custon Cursor - React stephenscaff.github.io Next.js + TypeScript 환경에서 react-animated-cursor 라이브러리로 커서 디자인을 적용해보자! npm i r..

보호되어 있는 글입니다.

TypeScript 프로젝트를 설정하고 블록체인 PoC(개념증명)를 객체지향으로 구현해보자! * CRA나 Next.js의 타입스크립트 템플릿 등을 사용한다면 직접 설정하는 경우는 많지 않다 Targets npm init -y 터미널에 위 명령어를 입력해 새로운 package.json 파일을 기본값으로 생성한다 npm install -D typescript 터미널에 위 명령어를 입력해 devDependencies에 typescript를 설치해준다 [package.json] { "name": "typechain", "version": "1.0.0", "description": "", "scripts": { "build": "tsc" }, "keywords": [], "author": "", "license"..

다항식 시간에 해결하지 못하는 문제가 근사해도 구하기 힘들다면 해 탐색 알고리즘을 사용한다 1. 백트래킹 기법 (Backtracking) 해를 찾는 도중에 막히면 (= 해가 아니면) 되돌아가서 다시 해를 찾는 기법으로, 최적화(optimization) 문제와 결정(decision) 문제를 해결할 수 있다 * 최적화 문제: 문제의 조건을 만족하는 해의 최대값 or 최솟값 등을 구하는 문제 * 결정 문제: 문제의 조건을 만족하는 해의 존재 여부를 답하는 문제 여행자 문제 (Traveling Salesman Problem, TSP) 백트래킹 알고리즘 최악의 경우 2^n개의 노드를 모두 탐색해야 하는 지수 시간이 걸리며, 이는 모든 경우를 다 검사하여 해를 찾는 완결 탐색 (Exhaustive Search)의 ..

Classes TypeScript는 JavaScript 객체 지향 프로그래밍(OOP)을 위한 다양한 기능을 지원한다 class Player { constructor( private firstName: string, private lastName: string, public nickName: string ) {} } 이렇게 TS에서 클래스의 private/public 속성(property), 타입을 정의하는 것 만으로.. class Player { constructor(firstName, lastName, nickName) { this.firstName = firstName; this.lastName = lastName; this.nickName = nickName; } } JS 상에서 클래스의 prope..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Call Signatures type Add = { (a: number, b: number): number; } // type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b Call(=Function) Signature란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다 * React에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계 가능! Overloading Function(=Method) Overloading은 직접 작성하기보다 외부 패키지/라이브러리에 자주 보이는 형태로, 하나의 함수가 복수의 Call Signature를 가질 때 발생한다 type Add = { (a: numbe..