39장 DOM(3.노드 탐색 ~ 5.요소 노드의 텍스트 조작) 3. 노드 탐색 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색해야 할 때가 있다. DOM 트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다. parentNode, previousSibling, firstChild, childNodes 프로퍼티는 Node.prototype이 제공하고, 프로퍼티 키에 Element가 포함된 previousElementSibling, nextElementSibling과 children 프로퍼티는 Element.prototype이 제공한다. 노드 탐색 프로퍼티는 모두 접근자 프로퍼티다...
UI/UX 디자인 시스템 디자인 시스템 디자인 시스템은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미합니다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와줍니다. 디자인 시스템은 단순한 '디자인' 가이드가 아니라, 디자인 팀과 개발팀이 업무 전반 프로세스와 방식을 일관되게 가져갈 수 있도록 도와주는 협업 '시스템'에 가깝습니다. 이를 통해 제품 개발에 관련된 인원들이 통일된 규칙하에 사용자에게 일관된 디자인과 사용성을 제공할 수 있습니다. 디자인 시스템은 제품의 특성이나 규모 혹은 구성원들의 상황에 따라, 작은 규모에서 디자인 시스템은 컴포넌트 라이브러리 역할로 충분할 수 있지만 큰 규모의 서비스의 경우 더욱 다양한 복잡한 디자인 및 개발 프..
39장 DOM(1.노드~2.요소 노드 취득) DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 노드 1. HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 가진다. 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성된다. 이러한 요소 간의 부자 관..
SWEA View 접근법 왼쪽과 오른쪽 모두 2개 이상 공간이 확보되어야 조망권이 확보된다. 이 말은 현재 건물을 기준으로 좌우 2개 건물, 총 4개의 건물에서 가장 높은 건물보다 크면 된다는 의미다. 문제 풀이 T = 10 # 여러개의 테스트 케이스가 주어지므로, 각각을 처리합니다. for test_case in range(1, T + 1): N = int(input()) b_list = list(map(int,input().split())) answer=0 for idx in range(2,len(b_list)-2) : # 좌우 2개 건물에서 최댓값을 구하고, 현재 건물과의 차이를 구한다. max_b = max(b_list[idx-2:idx] + b_list[idx+1:idx+3]) sub = b_l..
React Hook Hook은 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메서드를 의미합니다. Hook은 class가 아닌 function으로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형 컴포넌트에서는 동작하지 않습니다. Hook 사용 규칙 리액트 함수의 최상위에만 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있습니다. 오직 리액트 함수 내에서만 사용되어야 한다. 이는 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 된다는 의미입니다. useMemo 렌더링 최적화를 위한 Hook으로, 특정 값을 재사용하고자 할 때 사용합니다. funct..
Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual Dom 이라는 가상의 DIM 객체를 활용합니다. React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용합니다. Real DOM(Dom, Document Object Model) DOM은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델입니다. DOM의 조작 속도가 느려지는 이유 DOM이 변경되고 업데이트가 된다는 것은 결국 브라우저의 렌더링 엔진 또한 리플로우한다는 것을 의미합니다. 브라우저는 렌더링 과정에 DOM 트리와 Render 트리를 생성하고 각 요소가 배치될 공간을 계산한 ..
트리 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태입니다. 하나의 방향으로만 연결된 계층적 자료구조입니다. 하나의 데이터 아래에 여러 개의 데이터가 존재하는 비선형 구조입니다. 루트(Root)라는 하나의 꼭짓점 데이터를 시작으로 여러 개의 데이터(Node)를 간선(edge)으로 연결합니다. 트리 용어 노드 종류 루트노드 : 트리의 최상위에 있는 노드 리프노드 : 트리가 더 뻗어 나갈 수 없는 가장 마지막에 있는 노드 부모노드 : 자식노드를 갖고 있는 상대적으로 루트노드에 가까운 상위노드 자식노드 : 부모ㄷ노드에 달려 있는 상대적으로 루트노드에서 먼 하위노드 서브트리 : 트리 안에 있는 특정 노드를 루트노드로 하는 트리 깊이 : 루트로부터 하위 계층의 특정 노드까지의 깊이(dep..
동적 계획법(Dynamic Programming, DP) 최적화 이론의 한 기술이며, 하나의 큰 문제를 여러 개의 작은 문제로 나누어서 그 결과를 저장하여 다시 큰 문제를 해결할 때 사용하는 알고리즘 설계 기법입니다. 동적 계획법을 사용하여 중복되는 계산을 피하면서 효율적으로 문제를 해결할 수 있습니다. 사용 조건 중복 부분 문제 구조(Overlapping Subproblems) DP는 기본적으로 문제를 작게 나누고 그 결과 값을 재활용해서 전체 답을 구합니다. 그래서 동일한 작은 문제들이 반복하여 나타나는 경우에 사용이 가능합니다. 최적 부분 문제 구조(Optimal Substructure) 부분 문제의 최적 결과 값을 사용해 전체 문제의 최적 결과를 나타낼 수 있는 경우를 의미합니다. 구현 방법 1...
