DOM은 Document Object Model읠 줄임말로, 트리구조로 되어있는 객체 모델이다. 트리구조로 되어있어 이해하기 쉽다는 장점이 있지만, 이런 구조 때문에 거대한 DOM트리에서 잦은 DOM 업데이트는 성능을 저하시키고, 찾고자하는 DOM을 제대로 찾지 못하면 다시 거대한 html을 뜯어봐야 한다는 단점이 있다. Virtual DOM은 실제 DOM을 추상화한 개념으로, 변화가 많은 실제 DOM에서 직접처리하는 방식이 아닌, Virtual DOM과 메모리에서 미리 처리하고 저장한 후, 실제 DOM과 동기화 하는 프로그래밍 개념인 것이다. 예들 들어서 red apple yellow banana yellow mango 위와 같은 코드를 one two three 으로 변경해야 한다고 생각해보자. 비효율..

Reflow 생성된 DOM 노드의 레이아웃 속성 (너비, 높이, 위치) 등 변경 시, 영향 받은 모든 노드의 (자신, 자식, 부모, 조상) 수치를 다시 계산(recalculate)하여, 렌더 트리를 재생성하는 과정이며, 또한, reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 repaint 라고한다. reflow/repaint 가 발생하는 순서 클릭 이벤트 핸들러 실행 변경된 스타일 수치 계산 실행 (recalculate) Layout (Reflow 과정 수행) Paint (Repaint 과정 수행) reflow가 일어나는 속성들은 다음과 같다. position width height left top right bottom margin padding border borde..

console.time(''); // 동작 console.timeEnd('');

자바스크립트는 프로토타입 기반 언어이다. 최근 ECMA6에 있는 class 문법은 문법이 추가되었다는 것이지, 자바스크립트가 클래스 기반 언어로 바뀌었다는 뜻이 아니다. 그저 프로토타입을 기반으로 흉내내도록 구현된것이다. function Person() { this.eyes = 2; this.nose = 1; } const kim = new Person(); const park = new Person(); 위 코드를 생각해보자. kim, park은 eyes, nose를 공통적으로 가지고 있다. 그리고 메모리에는 eyes, nose가 2개씩 할당될 것이다. 그럼 인스턴스를 100개 만든다면 200개의 변수가 메모리에 할당될 것이다. function Person() {} Person.prototype.eye..

button 태그의 type으로는 submit, reset, button이 있다. submit은 전송기능, reset은 내용을 초기화, button은 자바스크립트 실행을 목적으로 한다. button에 type 속성을 지정하지 않으면 브라우저마다 각기 다른 기본값을 사용할 수 있어서 명시해주는 것이 좋다. 여기서 submit, reset은 form태그안의 값을 다루는 용도로 쓰이기 때문에, 단순히 자바스크립트 동작을 목적으로 한다면 button type을 사용하는 것이 좋다.

(수정) 제가 NTS를 퇴사한지 1년이 살짝 넘었는데요. 이 후기글을 정리하는것을 미루고미루다가 기억들이 많이 소실되었습니다 ㅎ.ㅎ;; 게다가 개발자로 직종변경을해서 qa이론 관련지식들도 잘 기억이 나지않아요..! 제대로된 답변을 못해드릴 수 있는점 양해부탁드립니다. 그래서 이 글은 더이상 수정하지 않구요. 댓글로 질문주시면 최대한 기억나는대로 다 답변드리겠습니다..! - 입사를 결심하게 된 계기 대학교 3학년 2학기, 꾸준히 개발 공부를 해왔다고 생각했으나, 코딩테스트는 연습이 영 부족했는지 코딩테스트만 만나면 나에게 서류 불합격이 날아왔다. 그렇게 진지하게 진로에 대한 고민을 했다. "내가 나아갈 수 있는 방법이 정녕 없는 것일까?" 그러던 도중 네이버 자회사인 엔테크서비스 QA에 대한 입사공고를 보..

leetcode.com/problems/symmetric-tree/ Symmetric Tree - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 핵심 아이디어 tree를 순회하되, 좌우가 대칭인 트리인지 검증하는 프로그램을 짜야한다. 분명 쉬워보였는데 구현할 방법이 정확하게 떠오르지 않아서 풀이를 보았다. 풀이에서는 바깥쪽 트리들을 먼저 비교하고 점차 안쪽의 트리들을 비교하는 방법을 택했다. 즉, 트리를 2개(a,b)씩 비교하되, a의 left, b의 right..

leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/ Best Time to Buy and Sell Stock II - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 핵심 아이디어 시간 순서대로 주식의 가격이 나열되어 있고, 한 타임당 1번의 구매와 1번의 판매밖에 할 수 없을때, 낼 수 있는 가장 큰 이익을 구하는 문제이다. 구현하려고 했을 때 쉽게 정답이 떠오르지 않아 풀이를 보았는데 놀라우리 만큼 간결했다...