엣지있게 코테풀기오늘 공부한 내용 🌤️
코딩 테스트 문제를 풀 때 유용한 팁들을 얻었다.
그리고 HTML과 CSS, DOM에 대한 기본적인 내용에 대해 배웠다.
새로 알게된 내용 🌱
코테 준비 방법
여러가지를 종합적으로 알려주셨는데 나에게 필요하다 생각하는 사항이 몇 가지 있었다.
엣지 케이스 찾기
테스트 하나만 틀려서 내가 실수를 한건지 로직을 잘못짠 건지 고민하는 상황이 빈번하게 있었다.
문제의 입력값 유형에 따라 어떤 엣지 케이스가 있는지 알아보는 것이 도움이 될 것 같다.
-
입력값의 크기가 최솟값/최댓값 근처인 경우
입력값이 큰 경우
~~(숫자)가 이상한 값이 나오는 경우를 보았다. -
범위가 넓은 경우
-
음수만 입력받는 경우
-
리스트를 입력 받는 상황에서 값이 없거나 하나만 있는 경우
자바스크립트의 경우 빈 배열에서
pop하는 경우도 오류대신undefined를 리턴하는 식으로 그냥 실행되다보니, 코드 쓰기는 편한데 주의하지 않았을 때 문제를 알아채기 힘들었던 경험이 있었다. -
그래프에서 싸이클이 생기는 경우
얜 그래도 무한 루프 도는 걸 알 수 있으니 쉽게 떠올릴 수 있는 것 같다.
-
길 찾기에서 지그재그로 움직이는 경우
-
부동소수점 오차
메모 및 기록
빨리 구현하는 데만 집중하다보니 주석같은 건 코드가 너무 길 경우를 제외하곤 잘 하지 않는 편이다.
그런데 실제 테스트 상황에서 긴장하면 뭘 했었고 뭘 하려고 했는지를 까먹는 경우가 있다는 점은 내가 실제 코딩테스트를 거의 본적이 없다 보니 놓치고 있던 포인트였다.
너무 길게 적는 건 내가 귀찮아해서 이어나가지 못할 것 같으니 커밋 메세지 적는다고 생각하고 최대한 간결하게 부분부분 적어보아야 겠다.
자신의 시행착오를 모두 기록하는 것도 도움이 된다고 한다.
어려운 코테 문제는 푸는 것도 오래 걸리는데 이걸 기록까지 할 수가 있을까 싶긴 하다.
하지만 어제 문제 풀면서 느꼈듯이 제대로 기억에 남기지 않으면 내가 풀던 방식에 정답 로직만 덮어 씌워 비효율적으로 푸는 것 같다.
프로그래머는 부지런해야한다는 것을 새삼 다시 느낀다.
리마인드된 내용 🔨
DOM
추상적인 개념의 HTML 태그가 모델링되어 객체로 만들어진 것
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.
총 4가지의 노드로 이루어져 있다.
- 문서 노드
최상위에 위치한다. - 요소 노드
html 문서의 요소를 그대로 표현한다. - 속성 노드
요소 노드에 붙어 태그에 정의되어 있는 속성을 표현한다. - 텍스트 노드
텍스트 값을 가진다.
Virtual DOM
리액트에서 사용한다고 그동안 배워왔던 가상 DOM이다.
아직 접해보지 못해서 몰랐지만 Vue.js 도 사용한다고 한다.
실제 DOM의 필요한 정보만 담아와서 자바스크립트 객체로 생성한 것을 말한다.
DOM 객체를 수정할 때 마다 렌더링 과정을 거치면 비효율적이기 때문에 사용한다.
가상 DOM을 변형한 뒤 변경 사항을 모아서 실제 DOM에 반영하는 방식으로 렌더링 횟수를 줄인다.
실제 DOM보다 빠르다는 것은 미신이라고 한다.
대부분의 실 사용에서 충분히 빠르고 개발 편의성이 증가하기 때문에 사용한다.
정말 빠른 성능이 필요한 상황에서는 document.createDocumentFragment 를 사용한다고 한다.
DocumentFragment
DOM의 단편적인 부분을 정의할 수 있는 노드로 부모가 없는 최소화된 경량 문서 객체라고도 한다.
DOM과 동일하게 동작하지만 메모리에서만 정의되어 DOM 트리에는 영향을 주지 않는다.
이 때문에 메인 DOM의 조작이 필요할 때 사용하면 성능적 영향을 최소한으로 줄일 수 있다고 한다.DOM에 반영시키면 하위 요소들을 감싸고 있던 fragment 객체는 사라진다.
형제 노드들 만으로 이루어진 트리를 삽입할 때 효율적이다.
삼천포 ⚓
DocumentFragment vs Virtual DOM
위에서 DocumentFragment에 대해 알아보다보니 '이거 Virtual DOM이 하는 역할이랑 똑같지않나'라는 생각이 들어 알아보았다.
결론은 역할은 똑같은 게 맞지만 더 사용하기 편하게 자동화 및 추상화한 것이 Virtual DOM이라고 한다.
덕분에 기존 값의 변화를 추적하지 않아도 되고 각 변화들의 동기화 작업을 거치지 않을 수 있다.
라이브러리화 된 Fragment가 Virtual DOM이라는 생각이 든다.
느낀점 🎬
그동안 코테 문제를 쫓기듯이 풀어나가며 개수를 늘리는 것을 목적으로 했는데 그러면 안될 것 같다.
Fragment는 별 생각없이 찾아본건데 덕분에 Virtual DOM에 대해 좀 더 알 수 있었다. 이래서 궁금하면 찾아보는 습관이 중요하다고 하는 것 같다.
참조
