본문 바로가기

JavaScript

(4)
ES6 자료구조 연결리스트(LinkedList) 구현하기(이중연결리스트, 원형연결리스트) 그리고 의문점.. ES6로 연결리스트(LinkedList) 만들기 연결리스트라는 자료구조를 구현해본다.기존 배열은 단점이 있다. 자바스크립트에서는 아니지만 다른 언어에서 배열은 길이를 자유롭게 늘리고 줄이기 어렵고, 자바스크립트에서 배열은 객체이므로 효율이 약간 떨어질 수 있다고 한다.(왜 객체라는 이유로 효율이 떨어지는지는 찾아보았는데 잘 안나와서 찾아보는 중이다... 알고 계신분이 있다면 댓글로 도움을 주셨으면 좋겠다.)따라서 처리속도가 빠른 것을 원한다면 배열 대신 연결리스트를 사용하면 조금더 성능이 좋아질 때가 있다. 하지만 임의의 접근(index를 통한 접근)을 지원하지 않으므로 접근이 잦은 경우에는 배열을 쓰는 것이 좋다.연결리스트는 어떤 object를 갖는 Node를 담고 있고 연결이라는 단어 그대로 next..
ES6 Class (클래스, Syntactic sugar, prototype을 이용하지만 문법적으로 예쁘게 만들어주는 class) 클래스(Class) - Syntactic sugar 문법적 설탕! 자바스크립트의 클래스(Class)다.기존 자바스크립트 ES5 문법으로도 객체 지향 프로그래밍을 할 수 있었다. (prototype을 이용해서)하지만 자바스크립트 문법을 배우는 사람들에게 가장 어려움을 안겨주던 것이 바로 prototype이다.그래서 ES6에서는 java와 같은 객체 지향 프로그래밍 언어에서 사용하는 것과 유사하게 class를 사용할 수 있게 문법을 제공한다.새로운 문법이 나온 것은 아니고 기존의 prototype으로 트랜스컴파일(?)해주는 것이다.1234567891011121314151617181920// ES5var Person = (function () { // Constructor function Person(name..
ES6 문법 배우기 - const, let, Template Literals 왜 ES6를 배워야 하는가? - 개인적인 생각입니다.ES6는 새로운 문법이 생긴 만큼 변경점이 큰 자바스크립트의 버전이다.angular, typescript, react, nodejs등 자바스크립트를 사용하는 곳에서 ES6를 이용한 개발이 주를 이루고 코드도 많이 나오고 있다.게다가 자바스크립트의 비약적인 발전으로 어느곳에서든 자바스크립트를 이용해 프로그래밍을 할 가능성이 높다.따라서 자바스크립트를 사용하든 하지 않든 자바스크립트(ES6)를 공부하는 것은 많은 도움이 될 것이다.* 다만 현재 모든 브라우저 버전에서 ES6를 지원해주지 않고 있다.const, let기존 자바스크립트에서 변수 선언을 var로 했었다.ES6부터는 var뿐만 아니라 const와 let이 생겼다.var vs const, letco..
웹 브라우저에서 HTML문서 렌더링 과정 (동작 순서) 웹 브라우저의 HTML문서 렌더링 과정 1. 불러오기로더(Loader)가 서버로부터 전달 받는 리소스 스트림을 읽는 과정.읽으면서 어떤 파일인지, 데이터인지 파일을 다운로드할 것인지 등을 결정한다.2. 파싱 (Phasing)웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다.3. 렌더링 트리 만들기DOM Tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM객체를 쓸 때 이용하는 것이고 별도로 그리기 위한 트리가 만들어져야 하는데 그것이 렌더링 트리다. (그릴 때 필요없는 head, title, body태그등이 없음 + display:none 처럼 DOM에는 있지만 화면에서는 걸러내야할 것들을 걸러냄)4. CSS 결정CSS는 선택자에 따라서 적용되는 태그가 ..