본문 바로가기

JavaScript47

[React] useId():: 컴포넌트 별 고유한 아이디 생성 import { useId } from 'react-id-generator'; function List({ items }) { const id = useId(); return ( {items.map((item, index) => ( {item} ))} ); } function App() { const items = ['Item 1', 'Item 2', 'Item 3']; return ; } 2023. 4. 8.
Non-Null assertion:: exclamation mark (!) after variable. 변수 뒤 ! 느낌표 The exclamation mark (!) is the non-null assertion operator in TypeScript. It tells the compiler that we are sure that the value returned by document.getElementById('root') is not null or undefined. const dom = document.getElementById('root')! // dom is not null 2023. 4. 8.
[event] window.matchMedia - mobile detecting: 모바일 확인 하기 + React Hook 1. javascript window.innerWidth and window.innerHeight: to get size of mobile device navigator.userAgent : To check if a device is a mobile device function isMobileDevice() { const userAgent = navigator.userAgent; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); } function getScreenSize() { const width = window.innerWidth || document.documentElement.client.. 2023. 4. 6.
[sort] Quick sort, 퀵 소트- 1 pivot function quickSort(arr) { quickSortRecursivley(arr, 0, arr.length - 1); return arr; } function quickSortRecursivley(arr, s, e) { if (s >= e) return; const pivotIndex = partition(arr, s, e); quickSortRecursivley(arr, pivotIndex + 1, e); quickSortRecursivley(arr, s, pivotIndex - 1); } function partition(arr, s, e) { let pivot = e; let left = s; let right = e; let pointer = left; let pivotNumber = .. 2023. 4. 5.
[Quill] 툴바에 호버 시 tooltip 보여주기 import Quill from "quill"; interface TooltipOptions { tooltips?: { [key: string]: string }; } class TooltipModule { private quill: Quill; private options: TooltipOptions; constructor(quill: Quill, options: TooltipOptions = {}) { this.quill = quill; this.options = options; // Set default tooltips if not provided if (!this.options.tooltips) { this.options.tooltips = { bold: 'Bold', italic:.. 2023. 4. 5.
[javascript] iterable, iterator 뜻 정의 간단한 정의 iterable한 객체 객체[symbol.iterator] = 함수 이 구현된 객체 iterator 객체 iterable한 객체symbol.iterator 실행했을 때 얻는 객체 내부에 있는 데이터를 lazy하게 (원하는 시점에 ) next를 호출해 순차적으로 꺼낼 수 있는 객체 아까 설명에 추가 합니다 ㅎㅎ 추가 정리 반복 가능한 객체는 특정 프로토콜을 사용하여 반복하거나 반복할 수 있는 JavaScript의 객체입니다. 이는 개체에 Symbol.iterator 메서드를 구현하여 달성됩니다. Symbol.iterator는 객체의 기본 반복자를 나타내는 JavaScript의 내장 기호입니다. 반복 가능한 객체의 [Symbol.iterator] 함수는 반복자 객체를 반환해야 합니다. 반복자 객.. 2023. 4. 5.
앱은 상태 머신 그리고 함수형 프로그래밍과 RxJS는 상태를 어떻게 관리해 개발을 할 수 있을까? 앱은 상태 머신이다 데이터를 입력 받고 데이터를 상태로 저장하고 저장된 상태를 가공해서 원하는 결과를 출력 상태 머신 내 변수, 반복문, 분기문은 오류를 생산하는 주요 원인들 오류를 줄이기 위해선 이 변수, 반복문, 분기문을 상태머신에서 제거해야 한다. 어떻게 제거할 수 있을까? RxJS를 사용해 오류를 줄일 수 있다. 입력데이터 오류 rxjs는 동기, 비동기 데이터 입력을 시간축을 가진 하나의 Observable 단일 방식으로 입력 데이터 처리 한다. -> 입력되는 데이터를 시간 순으로 관리한다 상태 전파 오류 상태 전파를 기존 옵저버 패턴을 개선해 오류를 줄인다 RxJS Observer는 next, error, complete 세 가지 패턴을 가진다 RxJS Observable은 읽기 전용이며 단 방.. 2023. 3. 31.
npm ci vs npm i npm ci CI stands for clean install and npm ci is used to install all exact version dependencies or devDependencies from a package-lock.json file. npm i install all dependencies or devDependencies from a package.json file. 2023. 3. 23.
[디자인 패턴] Observer pattern export interface Observer { update(): void; } export interface Observable { count: number; map: Record; addObserver(observer: Observer): number; removeObserver(id: number): void; notifyAll(): void; } export class Subject implements Observable { count: number = 0; public map: Record = {}; constructor() {} notifyAll(): void { for (const observer of Object.values(this.map)) { if (observer === undef.. 2023. 3. 5.
[Node] execute command line with argument:: process.argv.slice(2) Search:: node execute with arguments How do I pass command line arguments to a Node.js program? To normalize the arguments like a regular javascript function would receive, I do this in my node.js shell scripts: var args = process.argv.slice(2); Note that the first arg is usually the path to nodejs, and the second arg is the location of the script you're executing. 2023. 1. 13.

티스토리툴바