게으른 개발노트

자바스크립트 초기에는 간단한 모듈 시스템만을 제공했다. // 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(..

배열의 메서드 그 전에 자바스크립트의 배열이 다른 언어와의 다른 점 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은 트리구조로 되어있다. 스크립트 실행 말 그대로 자바스크립트 실행을 의미한다. 브라우저가 스크립트 태그를 통해 자바크스립트 파일을 읽으면 바로 실행된다. 이 단계에서 우리는 동적인 화면을 구성할 수 있다. 메모리 메모리는 세가지의 과정을 거친다. 할당 -> 사용 -> 해제 할당 변수를 선언하면 메모리..