프로그래밍 숲

DOM 트리 이해 DOM(Document Object Model) 트리는 웹 개발의 기본 개념으로 HTML 또는 XML 문서의 표현 및 조작에 중요한 역할을 합니다. 문서 요소에 대한 구조적이고 계층적으로 볼 수 있도록 함으로써 개발자가 문서 요소에 쉽게 액세스하고 수정할 수 있도록 합니다. 프레임워크와 라이브러리를 사용하면 추상화 및 최적화를 제공하여 향상된 웹 개발을 위한 DOM 조작을 단순화할 수도 있습니다. DOM 트리의 계층 구조 및 구조 DOM 트리는 각 노드가 문서의 특정 부분을 나타내는 가계도와 유사한 계층 구조를 따릅니다. 트리 맨 위에는 전체 문서 자체에 해당하는 루트 노드가 있습니다. 루트 노드는 문서 구조를 탐색하고 조작하기 위한 시작점 역할을 합니다. 루트 노드 아래에는 과 같은 ..

개발자 도구 단축키 크롬 브라우저의 개발자 도구는 Window(Ctrl+Shift+I), MacOS(Cmd+Option+I)로 접근할 수 있습니다. 생략된 부분 개발자 도구를 이용해서 DOM 구조를 볼 때는 생략된 부분이 있을 수 있습니다. 예를 들어, 텍스트 노드는 그냥 텍스트로만 표현되고, 띄어쓰기만 있는 빈 노드는 나타나지 않습니다. 개발 중에는 대부분 요소 노드만 다루기 때문에 문제가 되지는 않지만, 우리 개발자들은 알고 있어야 하는 내용입니다. 하위 패널 Styles(스타일) 스타일 하위 패널은 선택한 요소에 적용된 CSS 스타일을 표시합니다. 해당 요소에 직접 적용된 스타일과 부모 요소나 CSS 규칙에서 상속된 스타일을 모두 보여줍니다. 여기서 스타일을 확인하고 수정할 수 있으며, 새로운 스타..

Window 객체의 역할 1. 자바스크립트 코드의 전역 객체 2. 브라우저 창(browser window)를 대체하고, 이를 제어할 수 있는 메서드 제공 1번 예시. 전역 객체 // 윈도우 전역 객체의 예시 프로퍼티 설정 window.myProperty = 'Hello, World!'; // 윈도우 전역 객체의 예시 메서드 정의 window.myMethod = function () { console.log('This is a method on the global object.'); }; // 윈도우 전역 객체의 프로퍼티 접근 및 메서드 호출 console.log(window.myProperty); window.myMethod(); 2번 예시. 브라우저 창 대체 // 윈도우 전역 객체의 예시 프로퍼티 설정..

LG 외장 모니터가 생겨서 맥북과 연결해서 사용하던 중, 평소에 밝기 조절을 많이 하던 저는 수동으로 외장 모니터의 밝기를 조절하는 것에 대해 답답함을 느꼈습니다. 그래서 편하게 밝기 조정을 할 수 있는 방법이 없나 찾아보았고, 이미 좋은 앱이 있었습니다. 역시나 훌륭하신 개발자 분들이 많습니다. 밝기 조절 앱 다운받기 바로 Monitor Control이라는 앱입니다. GitHub - MonitorControl/MonitorControl: 🖥 Control your display's brightness & volume on your Mac as if it was a native Apple 🖥 Control your display's brightness & volume on your Mac as if it..

벡터(vector) 벡터: 요소가 추가되거나 제거될 때 크기가 커지거나 줄어들 수 있는 동적 배열 유형 C++ 및 Java와 같은 많은 프로그래밍 언어의 핵심 개념 python이나 javascript의 경우 ‘벡터’라는 용어는 직접 사용되지 않지만 동적 배열과 같은 데이터 구조의 개념과 기능은 존재 시간 복잡도 특정 인덱스에 있는 요소에 접근: O(1) 원소 찾기: O(N) 끝에 요소 삽입 또는 삭제: 평균 O(1) (amortized 시간 복잡도) 특정 인덱스에 요소 삽입 또는 삭제: O(N) amortized 시간 복잡도 (분할 상환 시간 복잡도 = 할부) 끝에 요소 삽입 또는 삭제: O(1) 그러나 종종 배열(메모리)이 가득 차게 될 수 있으며 새 요소를 push() 할때 O(N)과 같이 더 많은 ..