Javascript
자바스크립트의 메모리 관리
프로그래밍 언어에서 메모리 생존 주기는 필요할 때 할당한다. 사용한다. (읽기, 쓰기) 필요 없어지면 해제한다. C언어와 같은 저수준의 언어에서는 할당 및 해제의 과정이 명시적이다. 그러나 자바스크립트와 같은 고수준 언어에서의 메모리는 가비지 컬렉터에 의해 자동적으로 관리된다. 가비지 컬렉터는 말 그대로 가비지를 수집하는 녀석이다. 여기서 가비지란 불필요하게 메모리에 남아있는 데이터를 말한다. 변수나 함수 등은 메모리에 할당된다. 프로그램은 메모리에 할당된 데이터를 읽거나 쓰는 작업을 통해 자신의 역할을 수행한다. 메모리에 남아있는 데이터가 그 쓰임을 다하고 나면 어떻게 될까? 데이터가 더 이상 필요 없다면 메모리 할당은 해제되어야 한다. 자바스크립트에서 가비지 컬렉터는 ‘Mark and Sweep’이라..
이벤트 복습하기
이벤트는 브라우저의 윈도우 객체 내에서 발생하는 사건을 말한다. 클릭, 스크롤, 커서의 움직임 등 다양한 이벤트를 감지할 수 있다. 특정 객체에서 발생하는 이벤트를 감지하기 위해서는 addEventListener 메서드를 사용하면 된다. 객체에 존재하는 onclick과 같은 이벤트 핸들러 프로퍼티를 사용해도 되지만, addEventListener를 사용하면 하나의 이벤트의 여러 개의 핸들러를 추가할 수 있는 장점이 있다. 게다가 removeEventListener로 핸들러를 제거할 수도 있다. (HTML tag의 어트리뷰트로 핸들러를 등록해줄 수도 있지만, 이 방법은 그다지 권장되지 않는다. HTML 파싱이 먼저 끝난 후에 스크립트가 실행될 수 있도록 자바스크립트 코드를 HTML과 분리시키는 것이 바람직..
map()과 forEach()차이
forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (출처: MDN) forEach()는 주어진 콜백을 각 요소에 대해 한 번씩 실행해준다. map은 callback 함수를 각각의 요소에 대해 한 번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다. (출처: MDN) map()은 주어진 콜백을 각 요소에 한 번씩 실행하여 새로운 배열을 생성한다. 차이 새로운 배열을 반환하는 ..
Node.js - Express로 서버 만들기
Express 프레임워크를 써서 서버를 만들어 보자. 어플리케이션 익스프레스 인스턴스를 어플리케이션이라 한다 서버에 필요한 기능인 미들웨어를 어플리케이션에 추가한다 라우팅 설정을 할 수 있다 서버를 요청 대기 상태로 만들수 있다 익스프레스 인스턴스(= 어플리케이션 = 익스프레스 객체 = 서버 객체) 만들기 const express = require('express'); const app = express(); app.listen(3000, function(){ console.log('Server is running'); }) 미들웨어 미들웨어는 함수들의 연속이다 미들웨어로 어플리케이션에 기능을 추가할 수 있다 logger: log를 찍는 미들웨어 const express = require('express..
Node.js - http모듈로 서버 만들기
http 모듈로 서버 생성하기 const http = require('http'); // http 모듈 불러오기 const hostname = '127.0.0.1'; // 서버의 주소는 호스트 네임이라 한다. const port = 3000; // 서버의 여러 포트 중 3000번을 열어서 클라이언트와 통신 // http의 createServer 메서드로 서버 객체 생성 // createServer에 전달되는 콜백함수는 클라이언트가 접속했을 때 동작함 const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World\n'); //..
Node.js - 모듈/동기/비동기
모듈 생성 모듈은 최소 한가지 이상의 기능을 갖는 코드 덩어리이다. 특정 기능을 수행하는 코드를 별도로 분리시켜 모듈로서 관리하면, 코드의 재활용성이 높아진다. nodejs에서는 파일 하나하나가 모듈이 될 수 있다. 두 수를 더해주는 모듈을 만들어 본다면, // math.js function sum (a, b){ return a+b; } module.exports = { sum: sum } math라는 모듈을 만들고 다른 곳에서 사용할 수 있도록 exports 해준다. // index.js const math = require('./math.js'); const result = math.sum(1, 2) console.log(result) require 메서드를 통해 외부 모듈을 불러올 수 있다. nod..
코어 자바스크립트 - 클래스
이 챕터를 읽고 난 후 다음의 질문에 답할 수 있어야 한다. 클래스와 인스턴스란 스태틱 및 인스턴스 멤버 in JS 상위 클래스의 인스턴스를 부여함으로써 상속을 할 때 발생할 수 있는 문제는 ES6 이전의 상속 ES6 클래스 상속 클래스 클래스는 계급, 집단, 집합 등으로 번역된다. 객체지향 프로그래밍에서의 클래스도 동일한 의미를 갖고 있다. 클래스는 상대적이고 추상적인 개념이다. 음식이라는 카테고리가 있다면, 그 하위 분류로는 중식, 양식, 한식 등이 있을 것이다. 여기서 음식은 상위 클래스이고 중식, 양식, 한식은 각각의 서브 클래스이다. 더 구체적으로 짜장면, 짬뽕 등과 같은 각각의 개체는 인스턴스라고 할 수 있다. 인스턴스란 특정 클래스의 속성을 지니는 구체적인 예시 또는 개체를 의미한다. 범주와..
코어 자바스크립트 - 프로토 타입
이 챕터를 읽고 난 후 다음의 질문에 답할 수 있어야 한다. 프로토타입이란 무엇인가 프로토타입을 참조하는 인스턴스의 속성은 메서드 오바라이드란 프로토타입 체인이란 프로토타입의 개념 자바스크립트는 프로토타입 기반의 언어다. 자바스크립트의 모든 객체들은 어떤 객체를 원형으로 삼고 이를 복제(참조)한다. 객체에 복제되는 속성과 메서드는 자신이 원형으로 삼고 있는 객체의 prototype 속성에 정의되어 있다. const instance = new Constructor(); 어떤 생성자 함수를 new 연산자와 함께 호출하면 Constructor에 정의된 내용을 바탕으로 인스턴스가 생성된다. 이때 인스턴스에는 __proto__라는 속성이 부여된다. __proto__는 Constructor의 prototype을 참..
코어 자바스크립트 - 클로저
복습의 목적으로 정재남님의 저서 '코어 자바스크립트'를 읽고 정리한 글입니다. 더 자세하고 정확한 내용은 책을 참고하시길 바랍니다. 이 챕터를 읽고 난 후 다음의 질문에 답할 수 있어야 한다. 클로저란 무엇인가 클로저는 언제 발생하는가 클로저를 어떻게 제거할 수 있는가 클로저를 어떻게 활용할 수 있나 정보은닉이란 무엇인가 접근 권한을 어떻게 분류할 수 있는가 자바스크립트에서 어떻게 접근 권한을 구분 지어줄 수 있는가 부분 적용 함수란 무엇인가 Symbol이란 무엇인가 커링이란 무엇인가? 클로저의 정의 MDN은 다음과 같이 클로저를 정의하고 있다. 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 컨텍스트 A가 있고 A는 내부 함수 B를 갖는다고 가정..