브라우저라고 하면 크롬, 사파리, 파이어 폭스 등을 말합니다. 우리가 웹 브라우저를 열고 웹 사이트에 접속하면 웹 브라우저 내부에서는 어떤 일이 벌어질까? 자세하게 알아가기 전에 간단하게 살펴봅시다. 사용자가 접속을 시도하면 웹 브라우저는 해당 호스트의 IP 주소를 DNS에게 요청합니다. 요청을 받은 DNS는 IP주소를 알려줍니다. IP 주소를 받은 브라우저는 IP 주소에 있는 서버를 찾아갑니다. 이때 임의의 숫자를 적은 번호표(ISN)를 가지고 갑니다. SYN 단계에서 브라우저가 가지고 있는 고유 번호인 ISN을 서버에게 줍니다. SYN+ACK단계에서 서버가 가지고 있는 고유 번호를 브라우저에게 주면서 브라우저에게 받은 ISN을 +1하여 보내줍니다. ACK단계에서 앞서 서버가 보내준 것들을 받고 서버의..
콜백 지옥에서 벗어나기 위해 프로미스 패턴을 사용하는 것처럼, 프로미스 패턴의 단점을 극복하기 위해 async/await를 사용한다. - ES2017(ES8) Promise 문법 function p() { return new Promise((resolve, reject) => { resolve('hello'); // or reject(new Error('error'); }); } p().then((n) => console.log(n)); async 문법 async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어준다. return 'hello2'; // 리턴값은 Promise{: "hello2"} 자동 resolve해준다는걸 알 수 있다. // reject는 ..
재귀 함수 함수가 자기 자신을 호출하는 것 즉, 재귀 호출을 수행하는 함수를 말한다. 재귀 함수는 반복되는 처리를 위해 사용한다. function countDown(n) { for(let i = n; i >= 0; i--) { console.log(i) } } countDown(5) // 5 4 3 2 1 0 위 코드를 재귀 함수를 이용하여 반복문 없이 구현할 수 있다. function countDown(n) { if(n < 0) return; console.log(n); return countDown(n-1); } countDown(5) // 5 4 3 2 1 0 이처럼 자기 자신을 호출하는 재귀 함수 사용하면 반복되는 처리를 반복문 없이 구현할 수 있다. 예를 들어 펙토리얼은 재귀 함수로 간단하게 구..
Frequency Counters Pattern 빈도 카운터 패턴은 공식적인 이름은 아니다. 이 패턴은 자바스크립트의 객체를 사용해서 다양한 값과 빈도를 수집한다. 이 패턴은 알고리즘과 프로젝트에 있는 여러 데이터와 입력값이 서로 비슷한 값으로 구성되어 있는지, 값이 다른 값에 포함되는지 여부를 비교하거나, 데이터를 입력값이나 두 개 이상의 빈도 혹은 특정하게 발생하는 빈도와 비교할 때 유용하다. 이 패턴은 중첩 루프나 배열/문자열이 있는 O(N^2) 연산의 필요성을 피할 수 있다. 예시를 살펴보자. 2개의 배열을 허용하는 same함수를 작성하고 배열의 모든 값이 두 번째 배열에서 제곱한 해당 값을 가지면 참을 반환한다. 값의 빈도는 같아야 한다. same([1,2,3], [4,1,9]) // true ..
알고리즘(Algorithm): 특정 작업을 달성하기 위한 과정이나 일련의 단계 문제를 해결하기 위해 수행해야 하는 일련의 수학적 단계, 특정 광고를 사용자에게 제안하는 페이스북이나 구글의 알고리즘이라고 할 수 있다. 우리는 왜 알고리즘을 필요로 할까? 프로그래밍에서 수행하는 거의 모든 작업에는 일종의 알고리즘이 포함되므로 문제를 해결할 방법을 마련할 수 있도록 결정을 해야 한다. 어떻게 발전해나가야 할까? 1. Devise a plan for solving problems. 문제 해결을 위한 계획을 수립하라. 문제에 접근하는 방법, 문제를 세분화하기 위한 전략, 방향을 잡기 위한 몇 가지 단계 2. Master common problem solving patterns. 일반적인 문제 해결 패턴을 파악하라..
JavaScript는 객체 기반의 프로그래밍 언어이며, JavaScript를 구성하는 거의 "모든 것"이 객체다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다. JavaScript에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. JavaScript의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 ..
객체와 달리 배열은 정렬이 되어있다. 정렬되어 있는 것이 필요하다면 유용할지라도 연산을 하는 시간 더 증가할 수 있다. 특히 입력과 제거를 할때 성능이 희생된다. 입력(Insertion) - It depends... 제거(Removal) - It depends... 탐색(Searching) - O(N) 접근(Access) - O(1) 만약 Array의 3000번째 element를 요청했을때 JavaScript는 모든 element을 거치며 접근하지 않는다. 지름길을 가지고 있다고 생각하면 된다. 그렇기에 배열의 길이는 중요하지 않다. O(1) 입력은 정렬되어 있는 것과 관련이 있기에 어디에 입력(추가)하는 지에 달려있다. 만약 배열의 마지막에 element를 push로 추가한다면 O(1)으로 상수 시간일..
일단 객체를 언제 사용하는지 알아보자. 1. 객체는 정렬되어 있을 필요가 없다. 2. 빠른 접근과 입력, 삭제를 원할 때 좋다. 객체의 Big O 입력(Insertion) - O(1) 제거(Removal) - O(1) 탐색(Searching) - O(N) 접근(Access) - O(1) let instructor = { // instructor- 강사 firstName: "Kelly", isInstructor: true, favoriteNumbers: [1, 2, 3, 4] } insturctor변수에 Object를 담았는데 컴퓨터가 접근할 때 단순히 firstName이라고 적혀있는 메모리 공간에 다시 접근할 수 있는 것은 아니다. 그렇기 때문에 작업을 하면서 추가적인 단계들이 있다. 주목할 점은 Jav..
