목록전체 글 (100)

하얀 코딩

[DOM - 6] Element 추가 / 삭제

Document API document.createElement() 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환됨 Element API .appendChild(인자) 추가할 element를 인자로 받아 호출된 element의 자식으로 인자를 추가함 .removeChild(인자) 삭제할 element를 인자로 받아 호출된 element의 자식중에서 해당 element를 삭제 .insertBefore(인자1, 인자2) 특정 요소를 다른 요소 앞에 삽입할 때 주로 활용됩니다. 이 메서드는 두 개의 매개변수를 받으며, 첫 번째 매개변수는 삽입하려는 요소를, 두 번째 매개변수는 참조 요소를 나타냅니다. .cloneNode() 호출된 element를 복사해서 반환함
DOM 2023. 12. 12. 23:20
[DOM - 5] querySelectorAll

querySelectorAll는 JavaScript를 사용하여 웹 페이지에서 CSS 선택자에 맞는 모든 HTML 요소를 선택하는 메서드입니다. 이 메서드를 사용하면 여러 개의 요소를 선택하고 NodeList(요소 목록)을 반환합니다. 문법 let elements = document.querySelectorAll("CSS_선택자"); 동작 querySelectorAll은 문서에서 CSS 선택자에 맞는 모든 요소를 선택하고 NodeList를 반환합니다. NodeList는 배열 유사 객체이므로 배열처럼 인덱스를 사용하여 각 요소에 액세스할 수 있습니다. 예시 클래스 이름으로 요소 선택 let buttons = document.querySelectorAll(".button"); // 클래스가 "button"인 ..
DOM 2023. 12. 12. 23:10
[DOM - 4] querySelector

querySelector는 JavaScript를 사용하여 웹 페이지에서 원하는 HTML 요소를 선택하는 메서드입니다. 이 메서드는 CSS 선택자를 사용하여 요소를 찾고 선택할 수 있으며, 선택한 요소를 JavaScript로 조작하거나 정보를 가져올 수 있습니다. 문법 let element = document.querySelector("CSS_선택자"); 동작 querySelector는 문서에서 첫 번째로 일치하는 요소를 선택합니다. 따라서 여러 요소가 일치하는 경우 첫 번째 요소만 선택됩니다. 일치하는 요소가 없으면 null이 반환됩니다. 예시 클래스 이름으로 요소 선택 let firstButton = document.querySelector(".button"); // 클래스가 "button"인 첫 번째..
DOM 2023. 12. 12. 23:03
[DOM - 3] 단일 Element 선택

DOM API를 활용해 문서에서 엘리먼트를 선택하는 방법 (구식) 1. document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드 getElementById 지정된 id 속성 값과 일치하는 단일 요소를 반환합니다. id 속성은 문서 내에서 고유해야 합니다. getElementsByClassName 지정된 클래스 이름과 일치하는 모든 요소를 선택하고 HTMLCollection(요소의 컬렉션)을 반환합니다. getElementsByTagName 지정된 HTML 태그 이름과 일치하는 모든 요소를 선택하고 HTMLCollection을 반환합니다. getElementsByName 지정된 name 속성 값과 일치하는 모든 요소를 선택하고 NodeList(요소의 목록)을 반환합니다. 이는 주로 폼 ..
DOM 2023. 12. 12. 22:53
[DOM - 2] 탐색 API

자식, 부모 엘리먼트에 접근하는 방법 .children : 해당 object의 자식 노드에 대한 배열 .parentNode : 부모 노드 .firstElementChild : 첫 자식 엘리먼트 .lastElementChild : 마지막 자식 엘리먼트 같은 레벨의 형제 엘리먼트에 접근하는 방법 .nextElementSibling .previousElementSibling
DOM 2023. 12. 12. 22:22
[Redux - 5] Action

리덕스의 action은 애플리케이션의 상태를 변경하기 위해 스토어에 보내는 신호입니다. 액션은 애플리케이션의 어떤 사건이 일어나는 것을 설명하는 객체입니다. 액션의 구조 기본적으로 액션은 type 필드를 필수로 갖는 객체입니다. type은 액션의 종류를 나타내는 문자열입니다. { type: 'INCREMENT' } 또한 추가적인 데이터를 포함할 수도 있습니다. 이런 추가적인 데이터를 "payload" 또는 "meta" 데이터라고 부르기도 합니다. { type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' } } 액션의 생성자 액션 생성자는 액션 객체를 생성하는 함수입니다. 액션 생성자는 애플리케이션 로직에서 액션 객체를 쉽게 만들기 위해 사용됩니다. funct..
Redux 2023. 9. 23. 18:59
[Redux - 4] Reducer

리덕스의 reducer는 애플리케이션의 상태를 변경하는 데 핵심적인 역할을 하는 함수입니다. 액션 객체를 받아 상태의 변화를 정의하는 역할을 합니다. 기본 원칙 1. 순수 함수 Reducer는 순수 함수여야 합니다. 같은 인풋에 대해서는 항상 같은 아웃풋을 반환하며, 외부의 상태나 변수에 의존하지 않아야 합니다. 2. 불변성 유지 Reducer 내에서는 상태를 직접 수정하면 안 됩니다. 대신, 상태의 변화를 나타내는 새로운 객체를 생성하여 반환해야 합니다. 함수의 구조 가장 기본적인 다음과 같은 형태를 가지고 있습니다. function reducer(state = initialState, action) { // 상태 업데이트 로직 return newState; } state 현재의 상태입니다. 리듀서의 ..
Redux 2023. 9. 23. 18:03
[Redux - 3] Store

리덕스의 Store는 리덕스 애플리케이션의 상태를 저장하고 관리하는 핵심적인 객체입니다. 리덕스에서는 애플리케이션의 모든 상태가 이 하나의 스토어 내에 집중되어 있습니다. 이를 통해 일관성 있는 상태 관리와 시간 여행 디버깅, 상태의 불변성 유지 등의 이점을 얻을 수 있습니다. 생성 createStore 함수를 사용하여 스토어를 생성합니다. 이 함수는 리듀서와 초기 상태, 그리고 미들웨어나 enhancer와 같은 옵셔널 인자를 받을 수 있습니다. import { legacy_createStore as createStore } from 'redux'; // 현재 공식문서에서는 createStore를 사용하려면 legacy_createStore를 임포트 해야합니다. // as 문법을 써서 옛날처럼 creat..
Redux 2023. 9. 23. 17:51
이전 Prev 1 2 3 4 ··· 13 Next 다음