본문 바로가기
728x90
반응형
SMALL

분류 전체보기155

DOM 요소 선택 메서드 총정리 1. getElementByIdHTML 문서에서 특정 ID를 가진 요소를 찾아 반환하는 JavaScript 메서드document.getElementById('elementId')ID로만 요소 선택가장 빠른 성능단일 요소 반환 (또는 null)ID는 문서에서 고유해야 함예시1 )// 기본 선택const element = document.getElementById('myId');// 스타일 변경document.getElementById('myId').style.backgroundColor = 'red';// 클래스 조작const element = document.getElementById('myId');element.classList.add('active'); // 클래스 추가element.classL.. 2025. 2. 12.
데이터 처리 [JSON 형식의 API에서 데이터를 불러올 때 주로 사용되는 데이터 처리 방법]이 과정은 API 호출, 데이터 변환, 상태 관리 및 오류 처리 등을 포함1. API 호출API를 호출할 때는 fetch API나 axios와 같은 라이브러리를 사용함1.1. Fetch API 사용fetch('') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON 데이터로 변환 }) .then(data => { console.log(data); // 데이터를 처리 }) .. 2025. 2. 12.
JSON 기본 구조 1. JSON 기본 구조객체: { "key": "value" } 형태로, 키와 값의 쌍으로 이루어져 있음배열: [ { "key": "value" }, { "key": "value" } ] 형태로, 여러 개의 객체를 포함할 수 있음2. 일반적인 API 응답 구조API 응답은 여러 가지 형태를 가질 수 있지만, 다음과 같은 구조가 일반적1. 단일 객체 응답{ "id": 1, "name": "John Doe", "email": "john@example.com"}2. 배열 응답[ { "id": 1, "name": "John Doe" }, { "id": 2, "name": "Jane Smith" }]3. 메타데이터 포함{ "data": [ { "id": 1, "name.. 2025. 2. 12.
이미지 파일첨부 / 프로필 사진 이미지 파일 첨부 기능1. 구현 방법파일 입력 요소: HTML의 ****를 사용하여 이미지 파일만 선택할 수 있도록 제한파일 선택 및 상태 관리: 사용자가 파일을 선택하면 상태를 업데이트하여 선택된 파일을 저장미리보기 기능: 선택된 파일의 미리보기를 제공하기 위해 URL.createObjectURL 메서드를 사용합니다.파일 업로드 처리: FormData 객체를 사용하여 선택된 파일을 서버에 업로드 이미지와 함께 데이터를 보낼 때, 이미지가 아닌 항목들도 반드시 FormData로 보내야 함.2. 예시 코드import React, { useState, useRef } from 'react';import axios from 'axios';const FileUpload = () => { const [sel.. 2025. 2. 11.
새로운 창으로 띄우기 const openChatInNewWindow = () => { window.open("/chat", "_blank", "width=600,height=400");};// 버튼 클릭 시 새로운 창 열기새 창으로 채팅 열기 2025. 2. 11.
리액트 Hook 1. React 상태 (State)상태는 컴포넌트의 동적인 데이터를 관리하며, 상태가 변경되면 컴포넌트가 다시 렌더링됨.이 과정에서 React는 변경된 상태를 기반으로 새로운 UI를 계산한다.상태는 주로 다음과 같은 경우에 사용된다:사용자 입력 처리API 호출 결과 저장UI의 동적인 부분 관리상태 사용 예시import React, { useState } from 'react';const Counter = () => { const [count, setCount] = useState(0); // 상태 초기화 const increment = () => { setCount(count + 1); // 상태 변경 }; return ( 현재 카운트:.. 2025. 1. 3.
728x90
반응형
LIST

티스토리툴바