콘요맘떼 개발일지

pkg 기본적으로 Node.js 애플리케이션을 실행하기 위해서는 적절한 버전의 Node.js가 설치되어 있고 필요한 npm 모듈들이 설치되어 있어야 하며 적절한 스크립트를 통해 애플리케이션을 실행해줘야 한다. Node.js 개발을 해 본 사람이라면 무슨 이야기인지 바로 이해가 되겠지만 아쉽게도 세상 모든 사람들이 Node.js 개발을 해 본 것은 아니다. 다행히 pkg라는 라이브러리를 사용하면 Node.js 애플리케이션을 컴파일할 수 있다. pkg는 컴파일 과정에서 Node.js와 필요 모듈들을 모두 포함해서 하나의 바이너리 실행 파일을 생성해준다. Node.js가 포함되기 때문에 실행 파일의 용량이 적지 않다는 것이 단점일 수 있지만 서버에서 구동되는 것이 아니라 사용자에게 배포함으로써 사용자가 직접 ..

ES5에서 등장한 strict mode는 기존 Javascript가 기본으로 채택하던 sloopy mode(느슨한 모드, 공식 용어는 아님)을 해제하고 보다 엄격한 스타일로 코드를 작성하도록 사용하는 모드를 말한다. strict 모드를 사용하면 sloopy 모드에서는 넘어갈 수 있던 오류들이 에러로 변환되면서 보다 안전한 프로그램을 작성할 수 있다. 또한 자바스크립트 엔진의 최적화 작업을 방해하는 코드들을 지양하기 때문에 엄격 모드를 통해 코드를 작성하면 속도 면에서 비엄격 모드보다 우수한 모습을 보이기도 한다. (물론 엄격 모드를 쓴다고 무조건 느슨한 모드보다 빠르다는 아님) strict mode를 사용하는 방법은 간단하다. 함수 혹은 script 최상단에 'use strict'; 문장을 작성하면 해당..

데이터의 타입을 변경하는 것을 타입 변환(Type Conversion)이라고 부른다. 타입 변환에는 개발자의 의도와 무관하게 자바스크립트 엔진이 표현식을 해석하면서 자동적으로 타입을 변경하는 암묵적 타입 변환(Implicit Type Conversion)과 타입 캐스트 연산자 혹은 메소드 등을 활용하여 개발자가 의도적으로 타입을 변경하는 명시적 타입 변환(Explicit Type Conversion)이 있다. 대표적인 명시적 타입 변환 방법은 다음과 같다. 1. 문자열 타입으로 변환하기 (1) new 연산자 없이 String 생성자 호출 (2) Object.prototype.toString 메소드 활용 (3) 문자열 연결 연산자 사용 (+) (4) template literal 사용 (`${val}`) ..

이따금씩 자바스크립트 단에서 특정 element가 오버플로우 중인지 여부를 파악해야 할 때가 있다. 아래와 같은 경우를 예로 들어보자. 유튜브에서는 영상 설명이 일정 길이 이상의 텍스트일 때는 더보기 버튼을 토글함으로써 전체 내용 확인, 간략히 확인 기능을 제공하고 있다. 그렇다고 텍스트가 매우 짧을 때에도 더보기 기능을 제공할 필요는 없다. (Lofi 코딩은 그냥 코딩할 때 자주 들어서 골랐다) 이럴 때 아래와 같이 코드를 작성하면 특정 element가 오버플로우중인지 여부를 실시간으로 감지할 수 있다. defineIsOverflowing 함수는 x축 기준, y축 기준으로 element가 오버플로우중인지 여부를 검사한다. 물론 두 축 중 하나만 검사하고 싶은 경우 검사할 축을 인자로 전달받는 식으로 조..

Intersection Observer Intersection Observer API는 타겟 요소와 상위 요소(혹은 최상위 요소인 document)의 viewport 사이의 intersection의 변화를 비동기적으로 관찰한다. (MDN에서 정의된 바는 이렇다.) 보다 간단하게 정리하면 특정 Element가 기준 화면(viewport)에 노출되었는지 여부를 감지한다고 보면 된다. 사실 element의 가시성을 판단하기 위해서는 다른 방법도 존재한다. window에 scroll 이벤트에 대한 event listener을 추가하고 Element.getBoundingClientRect( )를 통해 element가 viewport에 상대적으로 가지는 위치를 점검한다면 특정 element의 가시 여부를 판단할 수..

ES6 ES6은 ECMA라는 국제 기구에서 만든 표준 문서인 ECMAScript의 6번째 개정판에 있는 표준 스펙을 말한다. 그렇다면 ES6가 현재 가장 최신 버전의 자바스크립트인가? 그렇지는 않다. 2015년부터 새로운 ES 표준 버전이 공개되고 있다. 그럼에도 불구하고 ES6가 항상 주목받는 이유는 ES5까지 자바스크립트가 가지고 있던 많은 문제점들을 개선했기 때문이다. 그렇기 때문에 React. Vue 등 대부분의 라이브러리들도 ES6를 기준으로 개발 환경을 세팅하고 있다. 이번 포스트에서는 ES6에서 등장한 주요 변경점들에 대해서 알아볼 것이다. 1. let / const 기존에는 var만을 사용하여 변수를 사용하였지만 ES6부터는 값의 변경 가능 여부를 기준으로 let과 const를 활용하기 시..

콘솔 (Console) 자바스크립트를 공부해본 사람이라면 모두 console.log( )를 통해 콘솔에 무언가를 출력해본 경험이 있을 것이다. console은 디버깅 콘솔에 접근할 수 있는 여러 가지 메소드를 제공하는 객체이다. (사실 나는 이 부분을 몰랐다. 생각해보니 자바스크립트는 객체 투성이고 console에는 여러가지 메소드들이 있는데 왜 당연히 객체일 것이라고 생각을 못 했는지 모르겠다.) console이 제공하는 메소드는 정말 많지만 우리는 보통 console.log( )만을 사용한다. 그렇기 때문에 console의 메소드 중 우리가 추가로 활용할 만한 것들에 대해서 알아보도록 하자. 레벨에 따른 로그 출력 표현하고자 하는 정보의 타입에 따라 다른 출력 함수를 활용할 수 있다. 개발자에게 제공..

평가 전략 (Evaluation Strategy) 프로그래밍 언어에서 함수 호출 argument의 순서 혹은 함수에 어떤 값을 전달시킬지 등을 결정하는 것을 말한다. 보다 간단하게 표현하면 함수에 값을 넘겨줬을 때 함수가 어떻게 실행될 것인가를 다룬다고 생각하면 될 것이다. 우리가 'call by ~~'라고 표현하는 것들이 바로 평가 전략이라고 볼 수 있다. Call by Value parameter의 값이 복사되어 argument로 넘어가는 방식을 말한다. 전달된 것은 복사된 값이기 때문에 함수 내부에서 해당 값을 어떻게 변경해도 원본에는 영향이 가지 않는다. Call by Reference parameter로 reference(참조 주소, 메모리 주소)를 넘겨주는 방식을 말한다. reference 값..

가비지 컬렉션 (Garbage Collection) 프로그래밍 언어와 무관하게 메모리는 다음과 같은 생명주기를 공통적으로 가진다. 1) 필요한 메모리를 할당한다. 2) 할당된 메모리를 사용한다. (읽기, 쓰기) 3) 해당 메모리가 필요 없어지면 메모리를 해체한다. 개발자가 메모리의 해체 시기를 직접 결정해야 하는 로우레벨 언어(ex. C, C++)와 달리 자바스크립트는 가비지 컬렉션이라는 자동 메모리 관리 형식을 활용한다. 참고로 가비지 컬렉션은 필요 없어진 메모리만을 해제하지만 필요 없어진 메모리들이 모두 해체되는 것은 아니다. (그렇기 때문에 근사적 작업이라고 볼 수 있다.) 가장 대표적인 가비지 컬렉션 알고리즘에는 크게 두 가지 종류가 있다. 1. 참조-세기 (reference-counting) 다..

자바스크립트의 배열 (Array of Javascript) 자바스크립트의 배열은 사실 우리가 아는 일반적인 배열이 아니다. 자바스크립트의 배열은 해시 테이블로 구현된 객체이며 요소들끼리 메모리상으로 나란히 위치하지도 않는다. 배열을 생성한 후 typeof를 통해 그 타입을 출력하면 'object'가 반환됨을 확인할 수 있다. 또한 객체의 모든 프로퍼티들에 대한 정보를 보여주는 Object.getOwnPropertyDescriptor( ) 메소드를 활용하면 자바스크립트의 Array는 인덱스와 length를 프로퍼티 키로 가지는 Object임을 확인할 수 있다. 그렇기 때문에 자바스크립트 객체에 들어가는 요소들은 서로 연속되어 위치하지도 않으며 서로 동일한 타입이 들어가지 않아도 된다. (파이썬의 list와..