ryxxn

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

HTML 삽입 미리보기할 수 없는 소스 1. 모바일 기준 /* 모바일 화면에 대한 스타일 */ @media screen and (max-width: 767px) { /* 스타일 작성 */ } 모바일 기기의 경우, 대부분의 스마트폰과 작은 크기의 디바이스를 포함한다. 위의 미디어 쿼리에서는 화면 너비가 767px 이하일 때, 모바일 화면에 대한 스타일을 설정할 수 있다. 2. 태블릿 기준 /* 태블릿 화면에 대한 스타일 */ @media screen and (min-width: 768px) and (max-width: 1023px) { /* 스타일 작성 */ } 태블릿 기기는 일반적으로 화면 너비가 768px부터 1023px까지 범위에 해당한다. 위의 미디어 쿼리에서는 이 범위 내에서 태블릿 화면에 대한 ..

간단한 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..