분류 전체보기 (399) 썸네일형 리스트형 [react 부트스트랩] 프로그래스 바 사용 설정 참고용 React에서 부트스트랩 프로그래스바를 사용하는 방법은 다음과 같습니다. 1. 설치 먼저 Bootstrap을 설치합니다. npm을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다: npm install react-bootstrap bootstrap 2. Bootstrap CSS import 사용하고자 하는 React 컴포넌트에서 Bootstrap CSS를 가져옵니다. 다음과 같은 코드를 작성합니다: import 'bootstrap/dist/css/bootstrap.min.css'; 3. 컴포넌트를 표시하고자 하는 영역에 사용 Bootstrap 프로그래스바 컴포넌트를 사용하여 프로그래스바를 만듭니다. 다음과 같은 코드를 작성합니다: import React from 'react'; import 'b.. [단순용어] ECMA - 262 ECMA - 262 ECMA-262는 ECMAScript 언어의 규격(standard)을 정의하는 문서입니다. ECMAScript는 자바스크립트의 표준화된 버전을 뜻하며, ECMAScript 규격은 ECMAScript를 구현하는 모든 브라우저, 런타임, 프레임워크 등에서 준수해야하는 규칙과 명세를 제공합니다. 따라서 ECMAScript 규격은 자바스크립트 코드가 어떻게 작동해야 하는지, 어떤 문법과 기능을 사용할 수 있는지 등을 명확하게 정의하고 있습니다. [react] 단순 자동 슬라이드 코드 정리 import { useState, useEffect } from 'react'; function AutoSlide({ images, intervalTime }) { const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { const intervalId = setInterval(() => { setCurrentIndex((currentIndex + 1) % images.length); }, intervalTime); return () => clearInterval(intervalId); }, [currentIndex, images.length, intervalTime]); return ( ); } 위 코드에 대해 설명하자면, useSta.. [java script] Private Class Fields [ ES2019 ~] Private Class Fields 2015년 ES6 에서 처음 등장한 클래스 내에서 필드선언 시 해당 필드 변수의 좌측에 #을 붙임으로써 외부에서 해당 변수에 대한 접근을 차단하는 문법이 ES2019 에 등장했습니다. 즉, '#변수명' 으로 선언된 변수는 외부에서 직접적으로 접근할 수 없고, 해당 변수를 간접적으로 참조하여 접근할 수 있게 가능함으로써 내부 구현을 숨김 으로써 정보은닉 및 보호를 효과적으로 달성토록 도와줍니다. class ExampleClass{ publicField = 10; // Public Class Field 입니다(내/외부 자유롭게 접근 가능). #privaField = 5; // private Class Field 입니다(내부에서만 접근 가능. getPrivateField(.. [java script] Logical Assignment Operators [ ES11 (ECMAScript 2020~) ] : 논리할당연산자 &&= 연산자 (And-Assign) 좌측과 우측 변수가 모두 true 라면 좌측 변수에 우측 변수에 할당된 값을 할당합니다. let a = 5; let b = 10; // a 와 b 변수 모두가 true 라면 b 변수의 값을 a 에 할당합니다. a &&= b; // a는 b와 같은 값인 10이 됩니다. ||= 연산자 (Or-Assign) 좌측 변수가 false 인 경우에만 우측 변수의 값을 좌측 변수에 할당합니다. let a = false; let b = 10; //좌측변수 a 가 false 이므로 b의 값을 a에 할당합니다. a ||= b; // a는 b와 같은 값인 10이 됩니다. ??= 연산자 (Nullish-Assign) 좌측 변수가 null 또는 undefined 인 경우에만 좌측 변수에 우측.. [알고리즘] 퀵 정렬 알고리즘 With JS 퀵 정렬 이 알고리즘은 먼저 배열의 한 요소를 피벗(pivot)으로 선택한 후, 피벗보다 작은 요소는 모두 피벗의 왼쪽에 위치하도록, 피벗보다 큰 요소는 모두 피벗의 오른쪽에 위치하도록 배열을 분할합니다. 그 다음, 분할된 두 하위 배열을 각각 재귀적으로 퀵 정렬을 수행하여 정렬을 완료합니다. 이 알고리즘의 핵심 아이디어는 분할(Divide) 단계에서 피벗을 기준으로 배열을 분할하여 정복(Conquer) 단계에서 각 하위 배열을 정렬하는 것입니다. 이 과정을 반복하여 분할된 배열이 더 이상 분할되지 않을 때까지 정렬을 수행합니다. 피벗 요소를 기준으로 해당 요소보다 작은 요소는 좌측으로, 큰 요소를 우측으로 분할하여, 배열을 분할한다. 그 후 분할 된 배열 내에서 재귀적 퀵 정렬(퀵 정렬 함수를 다시 호.. [react] onLoad(), 이미지가 서버로 부터 받아와 졌는지 확인 후 분기 처리 이미지가 성공적으로 로드되면 onLoad 이벤트 핸들러를 호출하여 isImageLoaded 값을 true로 업데이트합니다. 그리고 isImageLoaded 값에 따라 해당 상태를 표시하는 조건부 렌더링을 수행합니다. 따라서, 이 코드에서는 이미지가 로드되면 "Image loaded successfully!"라는 메시지가 나타나고, 그렇지 않은 경우, "Image is still loading..." 메시지가 표시됩니다. import React, { useState } from 'react'; function Component() { const [isImageLoaded, setIsImageLoaded] = useState(false); const handleImageLoad = () => { setIsI.. [테스팅 라이브러리 ] 테스트 시 참고 용도 사이트 링크 저장 https://testing-library.com/docs/queries/about/ About Queries | Testing Library Overview testing-library.com https://testing-library.com/docs/react-testing-library/cheatsheet/ Cheatsheet | Testing Library Get the printable cheat sheet testing-library.com https://testing-library.com/docs/queries/about/#priority About Queries | Testing Library Overview testing-library.com 이전 1 ··· 28 29 30 31 32 33 34 ··· 50 다음