리액트에서 타이핑 이벤트 만들기

요즘 리액트를 열심히 공부했는데, 포트폴리오도 리액트로 만들면 좋겠다 해서 리액트로 리메이크하고 있습니다.원래 포트폴리오 main 페이지에서 사용하는 타이핑 이벤트를 적용하고자 해요.일단 먼저, 어떻게 작용하는지 확인해봅시다! main.js// 타이핑 이벤트const firstContent = "안녕하세요! 저는 프론트엔드 개발자 전유빈입니다.";const firstText = document.querySelector(".text-1");let i = 0;function FirstTyping() { if (i  결과 다 되었으면, 이것을 이제 리액트로 변환해 봅시다! Typing.jsximport React from "react";// 타이핑 이벤트const firstContent = "안녕하세요! 저..

• format_list_bulleted Front-End Study/React
• · 2024. 6. 19.
• textsms

DOM

DOM 1. DOM DOM(Document Object Model)에 대해 알아봅시다. 여기서 DOM이란? HTML, XHTML 또는 XML 문서의 프로그래밍 인터페이스를 나타냅니다. 이는 웹 페이지의 구조화된 표현을 나타내며, 프로그래밍 언어가 해당 구조를 조작할 수 있는 방법을 제공합니다. 2. 특정요소 찾기 그러면 DOM을 다뤄봅시다! DOM에서 특정 요소를 찾는 데 사용되는 주요 메서드로는 다음과 같이 있습니다. document.getElementById('아이디') : 해당 ID를 가진 요소를 찾습니다. document.querySelecter('css') : CSS 선택자를 사용하여, 첫 번째 일치하는 요소를 반환합니다. document.getElementsByClassName('class')..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 22.
• textsms