BFS, DFS
너비 우선 탐색 (BFS)
- 그래프 탐색 알고리즘
- 같은 깊이에 해당하는 정점부터 탐색하는 알고리즘
시작 지점에서 가까운 정점부터 탐색 - Queue 를 이용하여 구현
- V (정점의 수), E (간선의 수) ... 시간복잡도 O(V + E)
깊이 우선 탐색 (DFS)
- 그래프 탐색 알고리즘
- 최대한 깊은 정점부터 탐색하는 알고리즘
시작 정점에서 깊은 것 부터 탐색 - Stack 을 이용하여 구현
- V (정점의 수), E (간선의 수) ... 시간복잡도 O(V + E)
라이브 코딩 문제풀이
그리디
- 매 선택에서 가장 최적인 답을 선택하는 알고리즘 (최적해를 보장해주지 않음)
- 최적해를 구하는 알고리즘보다 보통 빠름 (보통 O(n) 내로 끝나는 경우가 많음)
- 크루스칼, 다익스트라 알고리즘 등에 사용
- 직관적인 문제 풀이에 적합
- ex) 거스름돈 반환 문제 (큰 단위부터 차례로 돈을 선택하는 문제)
라이브 코딩 문제풀이
HTML과 CSS
HTML
- Hyper Text Markup Language
- 기존 html 문서 양식에 수정 사항이 발생 하였을 때, 문서들을 한번에 수정하지 못하였음
- css 라는 별도의 양식을 만들어 html 문서에 대한 표현을 분리하여 모든 문서를 한번에 수정 할 수 있게 되었음
CSS
- Cascading Style Sheets
- CSS 가 스타일을 담당하도록 개발 문화가 바뀌면서 html 에서 표현 용도로 사용되던 태그들이 사라지게 됨
- CSS 로 인해 HTML 은 문서의 구조(Structure) 와 의미(Semantic) 로만 남게 되었음
- reset.css : 기본으로 적용되어 있는 태그 스타일을 제거한다.
- normalize.css : 브라우저마다 조금씩 다른 스타일의 차이점을 통일시킨다.
HTML 5
- 기존 HTML 이 발전하는 웹을 따라잡지 못해 생긴 새로운 표준안
- 멀티미디어 요소 추가 (영상, 음성 등...)
- 구조적인 요소 추가 (header, nav, article, section, aside, footer, ...)
- 표현을 담당하던 태그가 삭제되고 의미를 담은 태그가 추가
DOM
- Document Object Model (문서 객체 모델)
- Model
현실에 있는 것을 특정 관점에서 바라보아 객체로 만드는 것 ... 추상화 (모델링)
이런 과정을 거쳐 만들어진 것을 모델 - 모델링되어 객체로 만들어진 것이 DOM
- key, value로 구성
- 트리구조
DOM 선택
- GetElementById ... DOM Tree 에서 요소 노드를 id 로 찾는다. 제일 먼저 찾은 요소 하나를 반환
- GetElementsByClassName ... DOM Tree 에서 요소 노드를 class 로 찾는다. 일치하는 모든 요소를 반환
- GetElementsByTagName ... DOM Tree 에서 요소 노드를 태그 이름으로 찾는다. 일치하는 모든 요소를 반환
- querySelector ... DOM Tree 에서 요소 노드를 CSS Selector 문법으로 찾는다. 제일 먼저 찾은 요소 하나를 반환
- querySelectorAll ... DOM Tree 에서 요소 노드를 CSS Selector 문법으로 찾는다. 일치하는 모든 요소를 반환
- window.[id] ... id 가 있는 요소는 window 객체를 통해 찾을 수 있다. 일치하는 모든 요소를 반환
DOM 탐색
- parentNode ... 선택한 요소 노드의 부모 노드를 불러옴. document의 부모 노드는 null
- firstElementNode ... 선택한 요소 노드의 자식 요소 노드 중 첫번째를 불러옴. 없을 경우 null / lastElementNode
- children ... 선택한 요소 노드의 자식 요소 노드를 불러온다. 없을 경우 빈 배열 반환
- nextElementSibling ... 선택한 요소 노드의 다음 형제 요소 노드를 불러온다. 없을 경우 null / previousElementSibling
DOM 조작
- class 접근 ... 선택한 요소 노드에서 className 과 classList 로 요소의 class 속성을 불러오고 변경할 수 있음
- hasAttribute ... 선택한 요소 노드가 속성을 가지고 있는지 확인
- getAttribute ... 선택한 요소 노드에서 속성의 값을 반환. 없을 경우 null
- setAttribute ... 선택한 요소 노드에서 속성을 정의
- removeAttribute ... 선택한 요소 노드에서 속성을 제거
- textContent ... 선택한 요소 노드에서 텍스트 노드에 접근, 변경
- innerHTML ... 선택한 요소 내부 HTML 을 수정. XSS 위험이 있으므로 사용을 추천하지 않음
- createElement ... 요소 노드를 태그 이름으로 생성할 수 있음.
- appendChild ... 선택한 요소 노드 마지막 자식 요소로 추가
- removeChild ... 선택한 요소 노드의 자식 노드 중 해당하는 요소를 제거
Virtual DOM
- 실제 DOM tree 를 JS 객체로 만든 것으로, 필요한 정보를 담아 만들어짐.
- 직접 DOM 을 수정하지 않고, 가상 DOM 을 바뀌는 부분만 수정한 후 렌더링하면 브라우저 렌더링 프로세스가 줄어들게 됨
- React, Vue.js 에서도 가상 DOM 을 사용하고 있음
- 브라우저 렌더링 횟수를 줄여줄 뿐, 더 빠르다는 보장은 없음
- 알아두면 좋은 것
document.createDocumentFragment ... 정말 빠른 성능이 필요하여 가상 DOM 을 쓰지 않고 최적화 하려면?
간단한 에디터 구현하기
- data-command:
data-로 시작하는 데이터 속성으로command를 통해 명령을 전달 할 수 있다. contenteditable="true"... 영역 내에서 수정이 가능하다.input과 비슷한 에디터 영역을 만든다.
느낀점
오늘은 BFS / DFS, 그리디, HTML / CSS, DOM / Virtual DOM, 에디터 구현 실습 강의를 수강하였다.
CSS 가 등장하게 된 배경이 어떠하였는지, 웹이 발전하면서 어떤 변화가 발생하였는지 대략적으로 배울 수 있는 시간이었다.
DOM 은 아직 완벽하게 이해할 수 없었다. 따로 시간을 내어 공부를 해야 할 부분이다.
에디터를 구현해보는 실습을 진행하였는데, 기능을 하는 버튼마다 따로 Event Listener 를 만들어 주는 것은 좋은 방법이 아닐 것이다.
하나의 단순한 예시를 구성해 본 것이지만, 각각의 기능을 하는 스크립트를 한번에 묶어 관리하게끔 코드를 짜는 방식을 배울 수 있었다.
각각의 상황에 맞게끔 코드를 최적화 하는건 아직 많이 배워야 할 것 같다.
프론트엔드