* 참고 문서 https://swiperjs.com/swiper-api#autoplay Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Autoplay를 모듈에 작성해준다. - disableOnInteraction -> 내가 만약 임의로 페이지를 넘겼을 때 (기본값이 true) true : 자동 재생이 멈춤 (재생버튼이 있으면 재생버튼을 눌러줘야지 다시 autoplay가 된다) false : 내가 임의로 넘긴 페이지부터 자동재생이 계속된다. 자동 재생 버튼 컴포넌트 만들기 아래 stackoverflow..

리액트에서 Swiper 모듈 사용하기 * 일단 Swiper를 npm install 했다는 전제하에 1. swiper를 import 해준다. import React, { useRef, useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Autoplay, FreeMode, Pagination, Navigation, A11y, } from 'swiper'; 2. swiper 컴포넌트 사용하기 swiper props로 공식문서를 확인하면서 필요한 것을 추가하면된다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern f..

JQuery에서 attr() vs .prop() 차이점 ✅ attr() .attr()은 HTML 요소의 속성 값을 가져오거나 설정하는 데 사용 이미지의 src 속성값을 가져오거나 설정할 때 사용 ✅ prop() .prop()은 HTML 요소의 프로퍼티 값을 가져오거나 설정하는 데 사용 요소의 checked 프로퍼티 값을 가져오거나 설정할 때 사용 💡 대부분의 경우 두 메소드 중 어느 것을 사용해도 상관 없음, 그러나 .prop()을 사용하는 것이 더 안정적 속성값과 프로퍼티 값의 차이점 1. 속성값은 HTML 문서에서 태그에 지정된 속성 예를 들어, http://example.com"> 에서 href는 속성 -> 이 속성은 HTML 문서에 명시되어 있으며, HTML 요소가 DOM에 로드될 때 속성 값이 ..

JavaScript에서 전략 패턴(Strategy Pattern)은 알고리즘의 집합을 정의하는 인터페이스와 그 인터페이스를 구현하는 클래스로 구성됩니다. 클래스는 인터페이스를 상속받아 구현합니다. 이 알고리즘은 런타임에 쉽게 변경할 수 있습니다. 전략 패턴은 알고리즘을 구조적으로 분리하여 각각의 알고리즘을 독립적으로 변경할 수 있도록 하는 디자인 패턴입니다. 이 패턴을 사용하면 각각의 알고리즘을 쉽게 교체할 수 있어 개발 및 유지보수의 효율성이 높아집니다. 전략 패턴은 프로그램의 구조를 변경하지 않으면서 알고리즘을 변경할 수 있는 기능을 제공합니다. 이 패턴을 사용하면 높은 유연성을 가진 알고리즘을 쉽게 구현할 수 있습니다. - 알고리즘의 집합을 정의하는 인터페이스?? "알고리즘"이란, 특정 문제를 해결..

전체 선택 첫번째 항목 두번째 항목 세번째 항목 JavaScript 작성 // 전체 선택 체크박스의 이벤트 핸들러 document.getElementById("check-all").addEventListener("change", function() { // 전체 선택 체크박스가 선택되었을 때 if (this.checked) { // 모든 개별 체크박스를 선택 상태로 변경 Array.from(document.getElementsByClassName("check-item")).forEach(function(item) { item.checked = true; }); } // 전체 선택 체크박스가 선택 해제되었을 때 else { // 모든 개별 체크박스를 선택 해제 상태로 변경 Array.from(documen..

import React, { useState } from 'react'; function ProductItem({ name, rank, onClick }) { const isSelected = rank > 0; const remainingCount = 3 - rank; const countText = isSelected ? `(${rank}/3)` : ``; const buttonLabel = isSelected ? '취소' : '상품 비교'; return ( {name} {countText} {buttonLabel} {!isSelected && remainingCount === 0 && ( 3개 이상 선택할 수 없습니다. )} ); } export function App(props) { const [r..

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML Element.insertAdjacentHTML() - Web API | MDN insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하 developer.mozilla.org foo beforebegin : Element 앞에 afterbegin : Element 안 첫번째 beforeend : Element 안 마지막 afterend : Element 뒤에

JS에서 '없음'을 나타내는 값이 2개가 있음nullundefined↳ 두개의 의미는 비슷할지라도, 사용되는 목적과 장소가 다름 JS에서 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환함let foo;console.log(foo); // undefinedconst obj = {};console.log(obj); // undefined null은 '객체가 없음'을 나타냄 typeof null // 'object'tpyeof undefined // 'undefined' '없음'을 나타내기 위해 어떤걸 사용해야할까?=> null을 사용하는 것이 좋음 undefined 사용 안하는 이유는? 그 의미가 불분명하기 때문에let foo;let bar = undefined;foo; // ..

리액트를 웹사이트에서 연습해보자 This is a static template, there is no bundler or bundling involved! JSX를 사용하기 위해서 // 바벨을 추가해주고 // 타입을 지정해줘야한다!!