컴퓨터 탐험가 찰리

요약 HTML에서 DOM 구조를 파싱하고 있는데 script 파일들이 loading 되면 DOM 구조 파싱 이후 사용자에게 UI들이 표시되지 못한다. 다시말해 DOM 구조 파싱과 script는 동기적으로만 일어난다. 따라서 보통은 태그의 맨 마지막에 script 파일을 넣어준다. HTML의 DOM 구조 생성과 script 파일 다운로드를 비동기적으로 처리하기 위해 async, defer를 사용하며 async는 다운로드가 완료되는대로 실행되고 script 태그간 순서가 지켜지지 않는다. defer의 경우 순서대로 다운로드 되며, HTML DOM 구조가 완전히 파싱되고 나서야 실행된다. 링크 1) 웹클럽 - 브라우저의 역할과 스크립트의 로드 시점 브라우저의 역할과 스크립트의 로드 시점 브라우저는 어떻게 동작..

정리- V8은 구글에서 주도적으로 개발한, 자바스크립트 파일을 기계어로 변환해주는 엔진이다. 크롬과 NodeJs에서 사용하고 있으며 Mircrosoft Edge도 V8을 이용하겠다고 선언한 바 있다. - C++로 작성되어 있다. 자바스크립트 코드를 받으면, parser와 AST를 거쳐 tree 구조로 코드가 해석되고, 이것이 ignition이라는 interpreter에 의해서 Bytecode로 변환되어 실행된다. -interpreter 방식은 최적화되지 않았으므로, bytecode로 실행되는 동안 TurboFan이라는 compiler를 통해서 컴파일을 하고 최적화된 기계어로 다시 실행한다. 즉, 반복될수록 코드 실행 속도가 빨라진다. :컴파일러는 코드 전체를 읽고 변환하여 실행시키고, 인터프리터는 코드를..

앞서 비동기 함수를 처리하는 callback, Promise 방식에 대한 글을 작성하였다. Javascript / 기초 / 비동기(Asynchronous), 콜백(callback), setTimeout Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Promise 2개의 글을 완전히 이해해야지만, 아래의 async/await 문법을 이해할 수 있다. 1. Async/await 사용 이유 앞서 살펴본 예시에서는 비동기 함수들의 결과를 사용자가 원하는대로 출력하기 위해서 callback 함수를 중첩 형태로 처리하거나, Promise를 .then, .catch의 형태로 '이어서' 작성해주는 형태였다. Async/await는 사용자가 굳이 함수들을 '이어주는' 형태를 고민하지 않더..

이 글은 Javascript의 비동기 프로그래밍의 기초적인 이해를 마치고, 비동기 프로그래밍을 위한 Promise 문법에 대해 정리한 글이다. 이 글의 이해를 위해서는 먼저 아래 링크의 글을 완전히 이해하고 있어야 한다. Javascript / 기초 / 비동기(Asynchronous), 콜백(callback), setTimeout 1. Promise callback 함수의 중첩(callback hell)을 피하기 위해 사용하기 편한 Promise 문법에 대해 정리한다. Promise는 추후 다룰 client-server간 비동기 처리의 핵심 내용이므로 잘 이해하여야 한다. 각 함수의 실행에 걸리는 시간과 상관없이 내가 원하는 순서대로 함수들을 실행하기 위해서는 callback 함수의 중첩이 필요했다. 이..

1. 비동기 프로그래밍 개요 보통 동기/비동기 방식은 Client-Server간의 요청과 응답 관계를 통해 설명한다. 동기 방식은 클라이언트와 서버가 함께 협력하여 일한다는 것이다. client가 일을 안할 때는 server가 일을 하고, server가 일을 안할때는 client가 일을 하게 된다. 비동기 방식은 client가 요청한 일을 server가 완료하기 전에, client가 다른일들을 처리하는 것이다. 다시 말해 client가 어떤 시간이 걸리는 일을 server에 시켜놓고, server가 그 일을 하는 동안 client는 그 다음 일들에 접근하여 처리하는 방식이다. sever에서 실행이 끝날 때까지 기다리는 방식으로 일을 해서는 웹페이지나 프로그램의 정상적인 작동이 어렵기 때문이다. clien..

MDN에 여러 Object의 method를 검색하다 보면, Syntax 부분에서 아래와 같은 문구들을 볼 수 있다. 여기서 소괄호 (parenthesis) 안의 대괄호 [ ] brackets 들은 어떤 의미를 갖는 걸까? 대괄호는 아래에 표현된 Optional 인자들을 의미한다. 위의 .map method를 활용하여 설명하자면, .map method에 들어가는 callback 함수에, 반드시 currentValue 인수는 입력이 필요하다. 그리고 그 다음 인수를 입력하면, index로 처리되는 것이다. 여기서, index의 대괄호 안에 array 인수의 대괄호가 있는 것을 볼 수 있는데, 이것은 인수들을 차례대로 입력할 때, 반드시 index 인수를 입력하고 나서야 array 인수를 입력할 수 있다는 것..

Inheritance(상속)의 개념에 대해서 살펴본다. 상속은 객체지향 프로그래밍을 위해 중요한 내용이다. 그러나 객체지향 프로그래밍 자체에 대한 이해나, execution context, this에 대한 이해가 없다면 정확한 이해가 어려울 수 있다. 우선 class와 instance 등 객체지향방식 프로그래밍에 대한 개념과 execution context, this에 대한 종합적 이해가 필요하므로, 아래 링크 글들을 정확히 이해해야 한다. - 객체지향 프로그래밍 - Javascript / Execution context, this - Javascript / 함수 / call, apply, bind 1. prototype과 상속의 개념 prototype은 '원형' 이라는 뜻으로, 어떤 함수의 속성 중 하..

1. 구조분해할당(Destructing) 이란? Array 나 Object에 들어있는 값을 변수에 간편하게 지정할 수 있는 표현법이다. 2. 배열의 destructing 1. 배열의 각 값을 한 번에 선언하기! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 let arr = [1, 2, 3, 4, 5] //일반적인 방법 let a = 1 let b = 2 let c = 3 ... //destructing let [a, b, c, ...d] = arr a // 결과 : 1 b // 결과 : 2 c // 결과 : 3 d // 결과 : [4, 5] cs 2. 값의 교체, 무시하기(뛰어넘기) 1 2 3 4 5 6 7 8 9 10 let arr = [1, 2, 3, 4, 5] let [a, b]..

Property Shorthand는 객체 안에 key와 value를 쓸 때, 이미 변수로 선언된 key에 대해서는 굳이 value를 정의해줄 필요가 없는 것을 의미한다. 또는, key와 value값이 같을 때 이미 정의된 변수 값으로 value값을 지정해준다. 1234567891011let a = "b"let c = "d"let e = "f" //key값만 쓰기let couple = {a, c, e}couple // 결과: {a: "b", c: "d", e: "f"} //key와 value를 같은 값으로 쓰기let couple2 = {a:a, c:c, e:e}couple2 // 결과: {a: "b", c: "d", e: "f"}cs

화살표 함수(arrow function)는 ES6(javascript 2017)에 도입된 새로운 기능이다. 함수 표현식의 약식 형태라고 보면 된다. 다만, 여러가지 특징이 있으므로 예시를 통해서 차례대로 살펴보자. 1. 기본적인 문법 1 2 3 4 5 6 7 8 9 // 함수 선언식 let add = function(x, y) { return x + y } //화살표함수 방식 let add = function(x, y) => { return x + y } cs 2. 생략 가능 기호 파라미터가 1개일 때는 소괄호 ()의 생략이 가능하다. 화살표 함수의 유일한 문장이 return 일때는 return 을 생략할 수 있으며, 이 때는 중괄호 {}를 생략해주어야 한다. 1 2 3 4 5 6 7 8 9 10 11 ..