Javascript

[TypeScript] Difference between type and interface

1. 확장(상속)하는 법 interface extends 키워드를 이용해서 확장할 수 있다. interface Person { name: string; age: number; } interface Student extends Person { // 확장(상속) school: string; } const mark: Student = { name: 'mark', age: 31, school: 'harvard' } type & 기호를 이용해서 확장할 수 있다. type Person = { name: string, age: number } type Student = Person & { // 확장(상속) school: string } const mark: Student = { name: 'mark', age: 31..

[JS] 모니터/브라우저 기준 팝업창 가운데 띄우기 (window.open)

1. 단일 모니터 function open_win(url, name, width, height) { // name : 팝업윈도우_이름 // width : 팝업창 가로 크기 // height : 팝업창 세로 크기 var popupWidth = width; var popupHeight = height; // window.screen.width : 윈도우의 가로 크기 // window.screen.height : 윈도우의 세로 크기 var popupX = Math.round((window.screen.width/2) - (popupWidth/2)); var popupY = Math.round((window.screen.height/2) - (popupHeight/2)); // 윈도우 팝업창의 스타일 지정 va..

1K 1천 1.1천 같이 숫자를 포맷하기

1천, 1만, 1.1만 숫자 표기가 길어질 때가 있다. 짧게 단위를 붙여서 표기해보자 const compactNumberFormatter = new Intl.NumberFormat('ko', { notation: 'compact', }); function compactNumber(number: number): string { return compactNumberFormatter.format(number); }

JavaScript 접속기기 모바일/웹 여부 확인

const isMobile = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); }; 모바일일 경우 true, 아닐 경우 false

글 작성 경과 시간 표시 / elapsedTime (방금 전, 몇 분 전 작성) / Javascript

코드 function elapsedTime(date) { const start = new Date(date); const end = new Date(); const diff = (end - start) / 1000; const times = [ { name: '년', milliSeconds: 60 * 60 * 24 * 365 }, { name: '개월', milliSeconds: 60 * 60 * 24 * 30 }, { name: '일', milliSeconds: 60 * 60 * 24 }, { name: '시간', milliSeconds: 60 * 60 }, { name: '분', milliSeconds: 60 }, ]; for (const value of times) { const betweenTim..

[node.js] JavaScript heap out of memory

build 하던 중 에러 발생 $ yarn run build yarn run build yarn run v1.22.19 $ tsc ll[7385:0x55e7520] 16439 ms: Mark-sweep (reduce) 486.9 (495.9) -> 485.7 (496.1) MB, 394.6 / 0.0 ms (+ 63.3 ms in 15 steps since start of marking, biggest step 18.9 ms, walltime since start of marking 493 ms) (average mu = 0.237, current mu = 0.247) allo[7385:0x55e7520] 17047 ms: Mark-sweep (reduce) 486.7 (496.1) -> 486.1 (4..

[TypeScript] 추상 클래스(Abstract Class)

추상화(Abstraction) 추상화는 객체 지향 프로그래밍(OOP:Object-Oriented Programming)의 핵심 아이이디어 중 하나이다. 복잡성을 최소화하고 고급 아키텍처 문제를 해결하는데 도움이 되는 기술이며, 하위 수준의 세부 사항을 미리 구현할 필요가 없다. 상위 수준에 집중하고 나중에 세부 사항을 구현한다. OOP에서는 두 가지 유형의 클래스가 존재한다. 추상 클래스와 구체 클래스이다. 위에서 말한 상위 수준은 추상 클래스이며 하위 수준은 구체 클래스이다. 구체 클래스 new 키워드를 사용하여 생성할 수 있다. 추상 클래스 추상 클래스는 구체 클래스가 가져야 하는 속성과 함수를 설정하는 클래스 추상 클래스는 클래스 앞에 abstract 키워드를 사용하여 선언 new 키워드를 사용하여..

[Javascript] 자료구조 (Data Structure)

자료구조란 데이터 값들을 저장하거나 조직하는 방법. 각 원소들이 논리적으로 정의된 규칙에 의해 나열되며 자료에 대한 처리를 효율적으로 수행할 수 있도록 자료를 구분하여 표현한 것. 연산에 사용되는 컴퓨터의 메모리 자원은 매우 한정적인데 반해 처리해야 할 데이터는 무수히 많을 수 있다. 따라서 이 메모리 공간을 효율적으로 사용해야 하는데 필요한 것이 자료 구조이다. 효율적인 자료 구조의 선택 → 효율적인 알고리즘의 선택이 된다. 1) 단순 구조(Primitive Data Structure) 프로그래밍에서 사용되는 기본 데이터 타입 Javascript에는 6개의 원시 타입(Number, String, Boolean, null, undefined, Symbol)이 있다. (Symbol - ES6 버전의 Jav..

[Javascript] Lazy evaluation(지연 평가)

컴퓨터 프로그래밍에서 Lazy evaluation은 계산의 결과 값이 필요할 때까지 계산을 늦추는 기법. Javascript에서는 배열 데이터 구조를 많이 쓰는데, 연산의 성능을 끌어올리기 위해 필요한 기법 중 하나이다. 예시 1. 엄격한 평가 Array(100000).fill().map((v, i) => i) .map((v) => v + 1) .filter((v) => v % 3 === 0) .slice(0, 10); //[ 3, 6, 9, 12, 15, 18, 21, 24, 27, 30 ] 0부터 10만까지의 숫자가 담긴 배열 각각의 요소에 1씩을 더해서 3의 배수가 되는 숫자 10개만 추리는 코드. map에서 10만 filter에서 10만 slice에서 10해서 총 200010번의 연산을 해야한다...

[Javascript] Generator Function

단 한 번의 실행으로 함수의 끝까지 실행이 완료되는 일반 함수와는 달리, 제너레이터 함수는 사용자의 요구에 따라 (yield와 next를 통해) 일시적으로 정지될 수도 있고, 다시 시작될 수도 있다. 또한, 제너레이터 함수의 반환으로는 제너레이터가 반환된다. Generator / yield Generator는 이 제너레이터 함수의 반환으로 iterable 프로토콜과 iterator 프로토콜을 따르는 객체이다. 이 때, 제너레이터의 이터러블에서 반환하는 이터레이터는 자기 자신이다. function* generator(params) { yield 'hello'; yield 'world'; // statements return 'hi'; } const resultGenerator = generator(); c..