게으른 개발노트

자바스크립트 초기에는 간단한 모듈 시스템만을 제공했다. // foo.js var todo = "코딩하기" // bar.js var todo = "꿀잠자기" 위 두 스크립트를 로드한 전역 컨텍스트에서 각 모듈 간의 충돌이 발생한다는 문제가 있었다. foo.js에서 선언한 변수와 같은 이름을 가진 변수가 bar.js에 선언되어 있다면 나중에 호출된 bar.js의 변수로 재정의 되면서 foo.js의 파일이 제대로 동작하지 않게 된다. 즉, 모듈 간의 스코프가 구분되지 않아서 다른 파일을 오염시키는 경우가 발생했다. 이런 문제점들을 갖고 있는 상태로 2008년 Google의 V8 엔진이 공개되었고, 이를 이용해 서버 사이드에서 자바스크립트를 활용하자는 아이디어가 제시 되었다. 그래서 더더욱 모듈화가 필요해졌고 ..

자바스크립트는 싱글스레드 언어이다. 스레드(Thread)란? 즉, 자바스크립트 엔진의 Call Stack이 하나밖에 없음을 의미하고 동시에 하나의 작업만 할 수 있다는 뜻이다. 하지만 자바스크립트로 쓰여진 웹사이트들을 보면 HTTP요청, 버튼 클릭, 애니메이션 실행 등 여러가지 일을 한번에 처리한다. 그럼 하나 작업할 때 30초씩 걸리는 작업을 실행한다면 화면엔 로딩창만 주구장창 보이게 될 것이다. 다행히 브라우저에서 Web API를 제공하기 때문에 이런 현상들은 보이지 않는다. 싱글스레드인데 이런 여러가지 일을 할 수 있는 동시성처럼 동작하는 이유를 알기 위해 먼저 이벤트 루프에 대해 알아야한다. 이벤트 루프 함수를 호출하면 Call Stack에 쌓이게 되고 이는 말 그대로 스택구조로 쌓이며 LIFO(..

선택정렬 배열의 가장 작은 값을 선택하여 맨 처음의 index값과 swap하며 정렬하는 알고리즘 과정 배열 중에 최솟값이 위치한 index를 찾는다. 최솟값이 위치한 index값과 맨 처음의 index값을 swap한다. 맨 처음의 index값을 제외한 나머지 배열에 1,2를 적용한다. 하나의 요소가 남을 때까지 1,2,3번을 반복한다. 시간복잡도 최선, 최악, 평균 모두 O(n^2)의 시간복잡도를 갖는다. 공간복잡도 주어진 배열 안에서 swap을 통해 정렬이 수행되므로 O(n)이다. 장점 알고리즘이 단순하며 사용할 수 있는 메모리가 제한적인 경우에 사용시 성능 상의 이점이 있다. (*제자리 정렬) 알고리즘 구현 난이도가 굉장히 낮다. 제자리 정렬(in-place sort)이란? 추가적인 공간이 필요하지 ..

정의 힙은 우선순위 큐를 구현하기 위하여 만들어진 자료구조이다. (우선순위 큐는 자료구조가 아닌 개념이다.) 우선순위 큐를 구현하는 방법에는 배열, 연결리스트, 힙 이렇게 3가지 방법이 있는데 이 중에서 힙이 가장 효율적이다. 우선순위 큐 구현 방법 삽입 삭제 순서 없는 배열 O(1) O(n) 순서 없는 연결 리스트 O(1) O(n) 정렬된 배열 O(n) O(1) 정렬된 연결리스트 O(n) O(1) 힙 O(log n) O(log n) 힙은 최대값과 최소값을 빠르게 찾아내도록 만들어졌고, 반정렬 상태이다. (큰 값이 상위 레벨에 있고 작은 값이 하위 레벨에 있다 정도) A가 B의 부모 노드면, A와 B의 키 값 사이에는 대소 관계가 성립한다. 자료의 삽입, 삭제 후엔 항상 힙이 유지할 수 있도록 재구조화(..

클라이언트 측 자바스크립트 기술적인 측면에서 웹 브라우저에서 자바스크립트가 하는 일은 크게 네 가지로 분류할 수 있다. 웹 페이지의 Document 객체 제어(HTML, CSS 작업) 웹 페이지의 Window 객체 제어 및 브라우저 제어 웹 페이지에서 발생하는 이벤트 처리 HTTP를 이용한 통신 제어 최신 웹 브라우저에서는 다음과 같은 기능을 제공한다. 파일 읽기와 쓰기 데이터베이스 기능 비동기 통신 2,3차원 그래픽 등등.. 이전까지는 자바스크립트의 속도가 매우 느렸으나, 크롬과 파이어폭스가 실행 중에 JS코드를 컴파일하는 JIT 컴파일러 (Just In Time Compiler)를 도입하면서 빠른 실행 속도를 구현했다. 웹 브라우저에서의 자바스크립트 실행 순서 웹 브라우저에서 HTML문서를 분석하고 ..

배열의 메서드 그 전에 자바스크립트의 배열이 다른 언어와의 다른 점 2가지를 알아보자. 배열 내부의 데이터 타입이 서로 다를 수 있다. 배열 크기는 동적으로 변경될 수 있다. // 서로 다른 데이터 타입을 담을 수 있다 var arr = [1234, "test", true]; // 배열의 크기를 임의로 변경( 3 -> 5 ) // arr[3], arr[4]는 값이 할당 되지 않았기 때문에 undefined arr.length = 5; // 새로운 배열을 추가하면 크기는 자동으로 변경 ( 5 -> 6 ) arr[5] = "apple"; // 새로운 배열 추가로 크기 변경 ( 6 -> 7 ) arr.push("banana"); for (var i = 0; i < arr.length; i++) { consol..

때는 데브코스 면접날.. Lia님이 내가 최근에 스터디를 했던 내용 중에 호이스팅에 대해 물어보셨다. Lia : "최근에 모던자바스크립트 스터디 하셨다고 했는데 호이스팅이 뭔지 짧게 설명 해주실 수 있나요?" 나 : "어.. 변수 선언할 때 끌어올림 현상.. 입니다..." 다행히 정말 운좋게 합격해서 강의를 듣는중.. 이선협 강사님 : "var를 사용할 순 있지만 권장하진 않습니다. 그 이유는 호이스팅이라는 자바스크립트 특징 때문입니다. 도대체 호이스팅이 뭐길래 var를 안쓰는지는 오늘 숙제로 남기도록 하겠습니다. 🤗" 호이스팅에 대해 알아보자^^ 호이스팅 Hoisting (무언가를 들어올리다 / 끌러올리다) 라는 의미로, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다...

브라우저 브라우저는 크게 3가지 동작으로 나눌 수 있다. 통신 -> 렌더링 -> 스크립트 실행 통신 말 그대로 서버와의 통신을 의미한다. 브라우저가 서버에게 요청(url)을 보내면 서버는 그 요청값에 따른 특정값을 응답해준다. 렌더링 DOM(Document Object Model)이라 불리는 객체를 화면에 그리는 것을 의미한다. DOM은 통신 단계에서 받은 html을 브라우저가 읽어서 생성한다. 또한 DOM은 트리구조로 되어있다. 스크립트 실행 말 그대로 자바스크립트 실행을 의미한다. 브라우저가 스크립트 태그를 통해 자바크스립트 파일을 읽으면 바로 실행된다. 이 단계에서 우리는 동적인 화면을 구성할 수 있다. 메모리 메모리는 세가지의 과정을 거친다. 할당 -> 사용 -> 해제 할당 변수를 선언하면 메모리..