CS23 [html] 공백과 의 차이 배경html에서 같은 공백인데도 ' '면 줄바꿈이 되지만 면 자리만 차지하고 줄바꿈이 되지 않는 것을 확인했다. 공백과 의 차이점 공백 병합(Collapsing):일반 공백: HTML에서 여러 개의 연속된 일반 공백 문자는 하나의 공백으로 처리되거나 "병합"됩니다. 즉, 코드 상에서 여러 개의 공백을 넣더라도 화면상에서는 하나의 공백으로만 보입니다. : 반면, 는 non-breaking space로, 여러 개를 연속해서 사용하더라도 각각이 병합되지 않고 모두 화면상에 표시됩니다. 이를 통해 여러 개의 공백을 화면상에 나타낼 수 있습니다.줄 바꿈(Word Wrap):일반 공백: 단어 사이에 있는 일반 공백은 줄 바꿈 지점으로 사용될 수 있습니다. 즉, 화면 폭이 .. 2024. 4. 29. DB Buffer buffer란 말그대로 양동이 역할을 하는 것이다.보통 DB를 물탱크에, buffer를 물양동이에 비교한다. DB 버퍼는 데이터베이스 시스템에서 캐시처럼 작동하여 데이터 접근 속도를 향상시키고, 디스크 I/O를 최소화하는 역할역할1. 시간 절약을 위해 한 번에 모아서 처리 (디스크 I/O 최소화)Disk output 거리가 멀기 때문에, Disk에서 정보를 가져와서 -> 출력, 가져와서 -> 출력하는 것보단Disk에서 필요한 정보를 buffer에다 저장해놓은 다음에 한번에 -> 출력 하는 것이 전체적인 시간으로 봤을 땐 이득(java의 bufferedReader)만약 buffer가 다 안 찼는데도 운반하고 싶다면 flush를 써서 남은 쪼가리도 옮겨주면 된다. 위의 예시로 예를 들자면, 물을 한 손에 .. 2024. 4. 27. B-Tree와 DB index index: DB에서 데이터를 찾을 때 full scan 말고, index를 사용하여 빠르게 한번에 접근할 수 있다page: 디스크와 메모리에 데이터를 읽고 쓰는 최소 작업 단위= 한 번 읽을 때 page만큼을 읽어옴index와 B-Tree인덱스 자체가 B-Tree로 구성되어 있다.]루트 노드에서 찾을 인덱스 키가 어딨는지 page단위로 이동하며 찾는다.DB에서 BST대신 BTree를 쓰는 이유여러 키를 하나의 노드에 저장하기 때문에 노드 수가 적어 더 적은 디스크 I/O를 발생 시킨다디스크 I/O란, 한 지점에서 다른 지점으로 점프, 위치를 찾아가는 것DB 성능 개선 혹은 쿼리 튜닝은 디스크 I/O 자체를 줄이는 것이 핵심인 경우가 많다자기가 알아서 균형을 맞추기 때문에, 각 데이터 별로 접근 시간이 .. 2024. 4. 27. Binary Tree, Binary Search Tree, B-Tree DB 공부하다 B-Tree와 Binary tree들이 헷갈려서 정리할 겸 쓰는 글 Binary Tree (이진 트리) : 자식이 최대 2개인 트리Complete Binary Tree (완전 이진 트리) : 앞에서부터 순서대로 채워지는 트리Full Binary Tree : 모든 depth가 다 채워진 트리Balanced Binary Tree : 모든 leaf node의 depth 차이가 1 이내Binary Search Tree (이진탐색 트리, BST) : 왼쪽엔 현재 노드보다 작은 거, 오른쪽은 큰거Heap (Binary Heap)Max Heap: 부모 노드의 키 값이 자식 노드의 키 값보다 항상 큼Min Heap: 반대Complete Binary Tree의 성질을 가짐추가: 맨 끝에(complete b.. 2024. 4. 27. [javascript] 이벤트 위임 event delegation + bind(this) 정의 1 2 3 6 5 4 이런 table의 td에 접근할 때, 각각의 td에 event handler를 할당하는 것이 아닌 table자체에 event handler 하나만 할당함으로써 여러 요소의 event handler를 한꺼번에 다룰 수 있음! (캡처링, 버블링 베이스: https://kyj0032.tistory.com/125) 활용하기 1) menu의 button에 알맞은 함수 실행하기 menu안 button 각각에 event handler를 할당하는 대신, menu에서 button에 발생한 event를 받아서 맞는 함수를 처리할 수 있다. 저장하기 불러오기 검색하기 * js class의 인스턴스 변수: https://kyj0032.tistory.com/126 this._elem = elem; *.. 2024. 4. 19. [html] html의 data-* 속성 https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 표준이 아닌 속성이나, 추가적인 DOM 속성과 같이 다른 조작을 하지 않고도 HTML 태그에 추가 정보를 저장할 수 있도록 도와줌 속성 할당 2024. 4. 19. [javascript] 생성자 안에서 인스턴스 변수 초기화 배경 https://ko.javascript.info/event-delegation 이벤트 위임 ko.javascript.info 저장하기 불러오기 검색하기 이벤트 위임을 공부하던 중, 낯선 class 개념이 나왔다. class Menu { constructor(elem) { this._elem = elem; elem.onclick = this.onClick.bind(this); // (*) } 생성자 안에서 두번째 statement는 elem의 onclick을 현재 객체에 있는 onClick함수에 바인딩하기 위함이라고 이해했다. this._elem = elem; 그렇지만 첫번째 statement는 대체 무슨 역할을 하는 걸까? _elem이란 변수를 쓰지도 않는데 .. 답변 1. 일단 언더바(_)는 ja.. 2024. 4. 19. [javascript] 이벤트 버블링, 캡처링 EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. HTML 삽입 미리보기할 수 없는 소스 안에 있는 , 를 눌러도 div에 할당된 onclick 이벤트 핸들러가 작동한다. 처음엔 그냥 div가 div 안 전체 영역을 포함하는 것(트리구조)이라 그런 게 아닐까?라고 생각했지만.. 그거랑 별개로 이벤트 버블링이 동작하는 거라 그런 거였다. 이벤트 버블링으로 내가 생각한 "포함하는 구조"라는 직관적 개념이 구현되는 듯 1. 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 부모 요소의 핸들러가 동작한다. 부모의 부모를 거슬러 가면서 최상단의 요소까지 모든 할당된 이벤트 핸들러를 실행한다.' FORM DIV P HTML 삽입 미리보기할 수 없는 소스 가장 안 쪽의 를 클릭하.. 2024. 4. 19. [javascript] 이벤트 1. 이벤트란 무언가 일어났다는 것 자주 쓰는 DOM 이벤트 예시 click, mouseover, mousedown, mouseup submit, focus keydown, keyup 등등 이벤트 핸들러 이벤트에 반응하기 위해, 이벤트가 발생했을 때 실행되는 함수 2. 이벤트 핸들러 구현 1) HTML 속성 HTML 삽입 미리보기할 수 없는 소스 해당 버튼을 누르면 onclick 안의 함수가 주어진다. + 이때, "" 안은 ''여야 한다. 그래야 헷갈리지 않고 코드가 제대로 실행된다. + 속성값은 대소문자 상관 없다. 2) DOM property + HTML attribute와 DOM property의 차이점 HTML attribute는 HTML에 존재, 문자열 DOM property는 DOM에 존재, .. 2024. 4. 18. 이전 1 2 3 다음
