시작하는 중

const [stepContentRef, setStepContentRef] = useState([useRef(null)]); const [stepImgFileRef, setStepImgFileRef] = useState([useRef(null)]); const addStepBtnHandler = () => { const lastIdx = orderArr.length + 1; setStepContentRef((prev) => { const newRefs = [...prev]; newRefs.push(useRef(null)); return newRefs; }); setStepImgFileRef((prev) => { const newRefs = [...prev]; newRefs.push(useRef(null)..

에러가 난 부분 .. 1 2 3 4 Visible, non-interactive elements with click handlers must have at least one keyboard listener. 해석하면, 클릭 핸들러가 있는 비대화형 요소에는 키보드 리스너가 하나 이상 있어야 합니다. https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/click-events-have-key-events.md GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elem..

div 안의 버튼 4개에 이벤트 리스너를 달아두고 버튼을 누를때마다 class를 조정하며 글자와 테두리를 파란색으로 바꿔줘야하는 상황이었다. // in component const [cookingTime, setCookingTime] = useState(null); const cookingTimeRefArr = [ useRef(null), useRef(null), useRef(null), useRef(null), ]; const cookingTimeBtnHandler = (idx) => { cookingTimeRefArr.forEach((ref) => { ref.current.classList.remove("border-#2F80ED"); ref.current.classList.remove("text-#..

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer.mozilla.org DOM - The Document Object Model HTML 문서의 프로그래밍 interface이다. DOM은 구조화된 표현을 제공하고 DOM 구조에 접근하고 변경할 수 있는 방법을 제공한다. 즉, 웹 페이지는 일종의 문서이다. 웹 페이지라는 문서는 웹 브라우저를 통..