효니 TIL

컴포넌트 import 및 export 하기리액트 컴포넌트의 import와 export는 자바스크립트 ES6 모듈 시스템을 사용하여다른 파일에서 컴포넌트를 가져오거나 내보내는 방법입니다.이를 통해 코드의 모듈화와 재사용성이 높아집니다.  1. Default Export와 Import Default Export 기본 내보내기(default export)는 파일당 하나의 주요 컴포넌트를 내보낼 때 사용됩니다.기본 내보내기를 할 때는 export default를 사용합니다.// 컴포넌트 파일 MyComponent.jsfunction MyComponent() { return Hello, World!;}export default MyComponent;위의 코드에서 MyComponent 컴포넌트를 기본으로 내보내..

Create React App(CRA)초기 환경을 일일이 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 완료해 놓은 틀이라고 보면 된다. React 앱을 만들 때는 React 라이브러리뿐 아니라 Webpack, Babel 등의 라이브러리들이 필요하다.Webpack은 리액트 프로젝트에서 사용되는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들러이며,Babel은 프로젝트에서 JSX 문법을 사용할 수 있게 해 준다. 이외에도 다양한 라이브러리를 사용하는데,이런 부수적인 모듈을 개발자가 일일이 다운로드하기는 번거로운 일이다. (아래 화면과 같은 세팅은 매우 번거롭다.) 이렇게 패키지 등 번거로운 react 초기 세팅 작업을 미리 하고,그 환경을 다시 패키징 한 것이 바로 create-rea..

parentNode와 parentElement 차이점 parentNode정의 모든 노드 타입의 부모를 반환합니다.반환 값부모 노드가 Document, DocumentFragment, Element 등의 타입일 수 있습니다.만약 부모가 없으면 null을 반환합니다.적용 대상모든 노드 (예: 요소 노드, 텍스트 노드, 주석 노드 등).parentElement정의부모가 Element일 경우에만 부모 요소를 반환합니다.반환 값부모 노드가 Element 타입일 때만 반환하고, 그렇지 않으면 null을 반환합니다.적용 대상주로 요소 노드에 사용됩니다. Click me button.parentNode와 button.parentElement 모두 요..

특정 요소 찾기 getElementById(): 주어진 ID를 가진 요소를 반환합니다.let element = document.getElementById('elementId');   getElementsByClassName(): 주어진 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.let elements = document.getElementsByClassName('className');   getElementsByTagName(): 주어진 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.let elements = document.getElementsByTagName('tagName');   querySelector(): 주어진 CSS 셀렉터와 일치하는 ..

DOM(Document Object Model)은 웹 페이지의 구조를 프로그래밍적으로 접근하고조작할 수 있게 해주는 인터페이스입니다.  부모 노드 찾기 parentNode: 해당 요소의 부모 노드를 반환합니다.let parent = element.parentNode;   closest(): 지정한 셀렉터와 일치하는 가장 가까운 조상 요소를 반환합니다.let closestParent = element.closest('selector');  자식 노드 찾기 childNodes: 해당 요소의 모든 자식 노드를 NodeList로 반환합니다.let children = element.childNodes;   children: 해당 요소의 자식 요소만을 HTMLCollection으로 반환합니다.let childEle..

객체 프로퍼티(속성)에 접근하기 1. 점 표기법 (Dot notation) 객체 내에 캡슐화되어 있는 것에 접근하려면 먼저 점을 입력해야 합니다. 그다음 접근하고자 하는 항목을 적습니다.person.name; // "John"person.age; // 30person.sayHello(); // Hi! I'm John  2. 대괄호 표기법 (Bracket notation)대괄호 표기법은 프로퍼티 이름을 문자열로 사용하여 접근하는 방법입니다.점 표기법으로는 사용할 수 없는 프로퍼티 이름이거나 동적으로 프로퍼티를 선택해야 할 때 유용합니다.console.log(person["name"]); // "John"console.log(person["age"]); // 30  점 표기법과 대괄호 표기법의 차이점점 표기..

객체(Object)자바스크립트에서 객체는 데이터를 구조화하고 저장하는 데 사용되는 중요한 요소입니다. 객체는 키(key)와 값(value)으로 이루어진 속성들의 모음입니다.쉽게 말해 사람 객체를 만든다면 이름, 나이, 직업 등의 속성을 가질 수 있습니다. 키는 문자열이고, 값은 다양한 데이터 타입을 가질 수 있습니다.객체는 다른 객체를 포함할 수도 있고, 함수를 값으로 가질 수도 있습니다.객체의 키는 유일해야 하지만, 값은 중복될 수 있습니다.let objectName = { key: value, key: value,};  객체 생성하기1. 객체 리터럴 사용하기가장 간단한 객체 생성 방법은 객체 리터럴을 사용하는 것입니다.중괄호 {} 안에 키와 값을 넣어서 객체를 생성합니다.let person = {..

filter()자바스크립트의 filter 메서드는 주어진 함수의 조건을 만족하는 요소들만을 모아 새로운 배열로 반환합니다.원래 배열을 변경하지 않으며, 특정 조건에 맞는 요소들만 걸러내 새로운 배열을 반환합니다. filter 메서드는 콜백 함수를 인자로 받습니다.이 콜백 함수는 배열의 각 요소에 대해 호출되며,요소가 조건을 만족하면 true를,만족하지 않으면 false를 반환합니다.const newArray = oldArray.filter((element, index, array) => { // 조건을 만족하면 true 반환}); element: 현재 처리 중인 배열의 요소index(선택): 현재 처리 중인 배열 요소의 인덱스array(선택): filter 메서드를 호출한 배열 자체 예제 1: 짝수만 ..

map() map 메서드는 자바스크립트에서 배열의 각 요소를 주어진 함수로 처리한 결과를 모아 새로운 배열을 반환하는 데 사용됩니다.이 메서드는 원래 배열을 변경하지 않고, 항상 새로운 배열을 반환합니다. map 메서드는 콜백 함수를 인자로 받습니다.이 콜백 함수는 배열의 각 요소와 그 인덱스, 그리고 배열 자체를 매개변수로 받습니다.const newArray = oldArray.map((element, index, array) => { // 새로운 요소를 반환});element: 현재 처리 중인 배열의 요소index(선택): 현재 처리 중인 배열 요소의 인덱스array(선택): map 메서드를 호출한 배열 예제 1: 배열의 각 요소에 2를 곱한 새로운 배열 생성const numbers = [1, 2,..

배열에 특정 요소가 존재하는지 확인하는 방법을 알아보겠습니다. const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];  indexOf 메서드 사용하기indexOf 메서드는 배열에서 특정 요소를 찾아 그 인덱스를 반환합니다.요소가 존재하지 않으면 -1을 반환합니다.const index = fruits.indexOf('Apple');console.log(index); // 2   includes 메서드 사용하기includes 메서드는 배열에 특정 요소가 존재하는지 여부를 불리언 값으로 반환합니다.const isExist = fruits.includes('Apple');console.log(isExist); // true   findIndex 메서드 사용하기findI..