콘요맘떼 개발일지

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의 가시 여부를 판단할 수..

기본적으로 node resolver는 파일의 확장자를 적어주지 않더라도 파일을 import할 수 있다. 그러나 eslint에서는 import/extensions 룰에 의해 확장자를 명시하지 않고 파일을 가져오는 행위를 금지하고 있다. 이미지 파일 등의 asset을 가져올 때에는 확장자를 명시하는 것이 필요하겠지만 js 파일들을 import할 때에는 이러한 규칙이 개인적으로 많이 번거롭게 느껴진다. 이럴 때에는 다음과 같이 eslintrc.js 파일을 수정하여 해결할 수 있다.

자바스크립트에서 this는 자신을 호출한 객체가 담기는 속성이며 실행 컨텍스트 내부의 this 프로퍼티에 의해 그 값이 결정된다. this의 값이 결정되는 기준은 생각보다 복잡하다. 다음은 대표적인 경우들에 this의 값이 어떻게 적용되는지에 대한 예시들이다. 1) 단독적으로 사용된 this → window 객체 2) 일반 함수 안의 this → window 객체 3) 일반 중첩 함수의 this → window 객체 ※ 만약 this가 window 객체인 경우 this.변수명으로 전역 데이터에 접근할 수 있다. 4) 이벤트 리스터의 this → 이벤트를 발생시킨 객체 (target) 5) 객체의 메소드 안에 위치한 this → 메소드를 호출한 객체 6) 생성자 안의 this → 생성자 함수가 생성하는 객..