ryxxn

간단한 Timer 컴포넌트의 예시를 보자. import React, { useState, useEffect } from 'react'; const Timer = () => { const [count, setCount] = useState(0); useEffect(() => { const intervalId = setInterval(() => { // count 상태 갱신 setCount(prevCount => prevCount + 1); }, 1000); // 1초마다 실행 // 컴포넌트가 언마운트되면 setInterval 정리(cleanup) return () => clearInterval(intervalId); }, []); return ( Timer: {count} ); }; export defau..

HTML 삽입 미리보기할 수 없는 소스 1.setInterval setInterval 함수는 일정한 시간 간격마다 콜백 함수를 반복적으로 실행한다. 아래는 setInterval의 사용법이다 const intervalId = setInterval(callback, delay); callback: 반복적으로 실행할 콜백 함수이다. delay: 콜백 함수를 실행하기 전에 기다리는 시간 간격 (밀리초)이다. setInterval을 사용하여 반복적인 작업을 수행하거나 주기적으로 코드를 실행할 수 있다. 예를 들어, 주기적으로 데이터를 가져오는 작업이나 애니메이션 효과를 구현하는 데에 사용할 수 있다. const intervalId = setInterval(() => { console.log('이 메시지는 3초 후..

HTML 삽입 미리보기할 수 없는 소스 1. toLocaleString() toLocaleString() 메서드는 숫자를 현재 로케일에 맞는 문자열로 변환하여 반환한다. 이를 사용하여 세 자리 단위로 콤마를 찍을 수 있다. const number = 1234567.89; const formattedNumber = number.toLocaleString(); console.log(formattedNumber); // "1,234,567.89" (현재 언어에 맞는 포맷) 2. 정규 표현식 사용 정규 표현식을 사용하여 세 자리 단위로 콤마를 찍을 수도 있다. const number = 1234567.89; const formattedNumber = number.toString().replace(/\B(?=(\..

HTML 삽입 미리보기할 수 없는 소스 1. 숫자 표현하기 const n = 1234567; const formatter = new Intl.NumberFormat('ko'); formatter.format(n) // '1,234,567' const formatter = new Intl.NumberFormat('ko', {notation: 'compact'}); formatter.format(n) // '123만' const formatter = new Intl.NumberFormat('en', {notation: 'compact'}); formatter.format(n) // '1.2M' const formatter = new Intl.NumberFormat('en', { notation: 'compa..

HTML 삽입 미리보기할 수 없는 소스 1. Date 객체 생성 // 현재 날짜와 시간을 가지고 있는 Date 객체 생성 const currentDate = new Date(); // 특정 날짜와 시간을 가지고 있는 Date 객체 생성 const customDate = new Date('2023-07-31T12:30:00'); // 특정 날짜를 가지고 있는 Date 객체 생성 (월은 0부터 시작) const specificDate = new Date(2023, 6, 31); // 2023년 7월 31일 2. 날짜 정보 추출 const date = new Date('2023-07-31T12:30:00'); const year = date.getFullYear(); // 2023 const month = d..

HTML 삽입 미리보기할 수 없는 소스 배열 슬라이싱 배열에서 일부 요소를 추출하거나 새로운 배열을 생성할 때, slice() 메서드를 사용할 수 있다. // 원본 배열 const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi']; // 인덱스 1부터 3까지의 요소를 추출하여 새로운 배열 생성 const slicedFruits = fruits.slice(1, 4); console.log(slicedFruits); // ['banana', 'orange', 'grape'] // 원본 배열은 변경되지 않음 console.log(fruits); // ['apple', 'banana', 'orange', 'grape', 'kiwi'] slice() 메서드는 첫 ..

코드의 구조를 개선하고 유지보수성을 높이기 위해 디자인 패턴을 사용한다. 그래서 자바스크립트에서 사용하는 다양한 디자인 패턴에 대해 정리해보고자 한다. HTML 삽입미리보기할 수 없는 소스1. 모듈 패턴 (Module Pattern) 모듈 패턴은 전역 스코프의 오염을 방지하고 코드를 모듈화하는데 사용된다. 자바스크립트는 기본적으로 전역 스코프를 가지고 있으므로 모듈 패턴을 사용하여 변수와 함수를 캡슐화하고 함수명 충돌을 피할 수 있다. const MyModule = (function() { let privateVariable = 'I am private'; function privateFunction() { console.log('This is a private function'); } return { ..

HTML 삽입미리보기할 수 없는 소스1. indexOf(): 값의 위치 확인indexOf() 메소드는 배열 내에서 특정 값의 첫 번째 인덱스를 찾아준다. 만약 값이 배열 내에 존재하지 않을 경우 -1을 반환한다. const fruits = ['apple', 'banana', 'orange', 'grape']; const index = fruits.indexOf('banana'); console.log(index); // 1 const notFoundIndex = fruits.indexOf('watermelon'); console.log(notFoundIndex); // -12. includes(): 값의 존재 여부 확인includes() 메소드는 배열에 특정 값이 존재하는지 확인하는 데 사용한다. 값이 ..

HTML 삽입 미리보기할 수 없는 소스 1. filter() 메소드를 이용한 값 삭제 filter() 메소드를 사용하면 특정 값을 제외한 새로운 배열을 생성할 수 있다. 원하는 값을 삭제하고 싶다면 해당 값을 제외하도록 filter() 메소드를 활용할 수 있다. ※ filter() 메소드를 사용하면 원본 배열은 변경하지 않고 원하는 값을 삭제한 새로운 배열을 생성할 수 있다. const numbers = [1, 2, 3, 4, 5]; // 값이 3인 요소를 삭제하고 새로운 배열 생성 const filteredNumbers = numbers.filter((num) => num !== 3); console.log(filteredNumbers); // [1, 2, 4, 5] ※ object 배열에서도 사용할 ..

HTML 삽입 미리보기할 수 없는 소스 1. forEach forEach 메서드는 배열의 각 요소들을 순회하며 콜백 함수를 실행한다. arr.forEach(callback(element, index, array) { // 실행될 코드 }); 예시 const numbers = [1, 2, 3, 4]; numbers.forEach((number, index) => { console.log(`Index ${index}: ${number}`); }); // 결과: Index 0: 1, Index 1: 2, Index 2: 3, Index 3: 4 2. map map 메서드는 배열의 각 요소들을 순회하며 콜백 함수의 반환값으로 새로운 배열을 생성한다. const newArray = arr.map(callback(..