STUDY 📒/React

이미지 파일을 React 프로젝트에 추가하는 방법에는 Import를 통한 경로 설정과 public 폴더를 사용하는 방법이 있다. 1. 'import'를 통한 경로 설정 import React from 'react'; import myImage from './images/myImage.jpg'; const MyComponent = () => { return ( ); }; 장점 : - 모듈 시스템 활용이 가능 : 'import'를 사용하면 모듈 시스템의 일부로 이미지를 포함할 수 있다. - webpack 등의 번들러를 사용할 경우, 이미지를 최적화하고 관리할 수 있다. 단점 : - 이미지 파일이 큰 경우 번들 크기가 증가할 수 있다. - 동적으로 이미지를 관리하기 어려울 수 있다. - 모듈 시스템 모듈 시스..

상수 데이터란 변하지 않는 데이터 ( 정적인 데이터 ) ui 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있다. 상수 데이터를 사용하는 이유 가독성 및 유지보수성 향상: 상수는 대문자 + 스네이크 케이스(_)를 활용하여 가독성을 높이고 유지보수를 쉽게 만든다. 코드에서 특정 값이 상수로 정의되어 있으면, 해당 값의 의미가 명확해지며 코드를 이해하기 쉬워진다. 오타 및 실수 방지: 상수를 사용하면 특정 값을 여러 곳에서 사용할 때 일관성을 유지할 수 있다. 그리고 상수는 수정이 불가능하므로 ( 추가는 OK ) 다른 곳에서 값이 실수로 변경되는 것을 방지할 수 있다. 중복된 코드 제거: 상수를 사용..

DOM (Document Object Model)을 다룰 때 사용되는 closest이나 querySelector와 같은 메서드를 사용하면 코드가 특정 HTML 구조에 의존적이 되어 유지보수가 어려워질 수 있다. element.closest 메서드는 특정한 속성을 가진 가장 가까운 부모를 반환 element.querySelector 메서드는 현재 Element에서 우리가 특정한 조상을 가진 child(children)을 반환 이런 메서드들은 특정 요소를 찾을 때 HTML 구조에 의존하게 된다. 만약 HTML 구조가 변경되면, 관련된 코드도 수정되어야 할 가능성이 높다. 구조에 종속적이지 않게 가져올 수 있는 방법은 코드를 작성할 때 HTML 구조에 대한 의존성을 최소화하고, 변경이 일어났을 때 영향을 최소..