DEV Community: Jinhyun Kim

TypeScript - Modules

Jinhyun Kim — Sun, 04 Jul 2021 10:39:14 +0000

이 포스트는 TypeScript - Modules를 번역 및 학습한 내용입니다.

ECMAScript 2015(ES6)에 추가된 모듈 기능을 TypeScript에서도 똑같이 사용 할 수 있다. 모듈은 자신만의 스코프를 가지고 있으며, 모듈 내부에 선언된 변수, 함수, 클래스 등은 export 되지 않는 한 외부에서 접근 할 수 없다.

export된 모듈은 다른 모듈에서 import 키워드를 통해 불러올 수 있다. 이를 가능하게 하는 것은 모듈 로더이다. 모듈 로더는 런타임에 import된 모듈(디펜던시)의 위치를 확인한다. 자바스크립트에서 사용되는 모듈 로더의 종류는 크게 두 가지이다.

CommonJS 모듈을 위한 Node.js의 로더
AMD 모듈을 위한 RequireJS 로더

import, 혹은 export 키워드를 포함한 파일은 모듈로 처리된다. 그 외(import, export 키워드가 없는 파일)는 일반 스크립트(글로벌 스코프를 공유하는)로 처리된다.

Export

export 키워드를 사용하면, 선언된 모든 식별자(변수, 함수, 클래스, 타입, 인터페이스 등)를 export 할 수 있다.

// StringValidator.ts
export interface StringValidator {
  isAcceptable(s: string): boolean;
}

// ZipCodeValidator.ts
import { StringValidator } from './StringValidator';

export const numberRegex = /^[0-9]+$/;

export class ZipCodeValidator implements StringValidator {
  isAcceptable(s: string) {
    return s.length === 5 && numberRegex.test(s);
  }
}

export 문 작성 시 export 대상의 이름을 변경 할 수 있다. 위 예제를 아래와 같이 작성 할 수 있다.

// ZipCodeValidator.ts
import { StringValidator } from './StringValidator';

export const numberRegex = /^[0-9]+$/;

class ZipCodeValidator implements StringValidator {
  isAcceptable(s: string) {
    return s.legnth === 5 && numberRegex.test(s);
  }
}

// mainValidator로 이름 변경 후 export
export { ZipCodeValidator as mainValidator };

특정 모듈을 extend하여, 해당 모듈의 일부 기능을 부분적으로 re-export 할 수 있다. 예를 들어, ParseIntBasedZipCodeValidator.ts에서 ZipCodeValidator.ts에 작성된 ZipCodeValidator 클래스를 re-export 할 수 있다. 이때 ZipCodeValidator를 import하지 않는다는 것에 주의해야한다.

// ParseIntBasedZipCodeValidator.ts
export class ParseIntBasedZipCodeValidator {
  isAcceptable(s: string) {
    return s.length === 5 && parseInt(s).toString() === s;
  }
}

// ZipCodeValidator를 rename하여 re-export
export { ZipCodeValidator as RegExpBasedZipCodeValidator } from "./ZipCodeValidator";

선택적으로, 하나의 모듈에서 여러 모듈을 한꺼번에 export 할 수 있다. 이때 export * from 'module' 문법을 사용한다.

// AllValidators.ts

// StringValidator 인터페이스 export
export * from './StringValidator';

// ZipCodeValidator 클래스, numberRegexp 변수 export
export * from './ZipCodeValidator';

// ParseIntBasedZipCodeValidator 클래스 export 
// RegExpBasedZipCodeValidator 클래스 export (ZipCodeValidator.ts의 ZipCodeValidator 클래스를 rename하여 re-export)
export * from "./ParseIntBasedZipCodeValidator";

export * as namespace 문법을 사용하여 export 대상을 네임스페이스로 랩핑하여 re-export 할 수 있다. 이를 적용하여 위 예제를 일부 수정하면 아래와 같다.

// AllValidators.ts

// ZipCodeValidator 클래스, numberRegexp 변수를 validator 네임스페이스로 래핑하여 export
export * as validator from './ZipCodeValidator';

Import

import 키워드를 사용하여 export된 모듈을 로드 할 수 있다.

import { ZipCodeValidator } from "./ZipCodeValidator";

const myValidator = new ZipCodeValidator();

import 시 모듈의 이름을 rename 할 수 있다. 위의 예제를 아래와 같이 작성 할 수 있다.

// ZipCodeValidator를 ZCV로 rename
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";

const myValidator = new ZCV();

만약 특정 모듈에서 export되는 모든 대상을 하나의 네임스페이스로 import 하고 싶다면 아래와 같이 import 할 수 있다.

import * as validator from './ZipCodeValidator';

const myVlidator = new validator.ZipCodeValidator();

일부 모듈은 side-effect만을 위해 사용된다 (ex. polyfill, core-js 등). 이러한 모듈은 export 문을 포함하지 않을 수도 있고, 혹은 해당 모듈을 사용하는 입장에서 무엇이 export되는지 알 필요가 없을 수도 있다. 이러한 모듈은 아래와 같이 import 한다. (좋은 방법은 아니다.)

import './my-module.js';

타입스크립트에서 type을 import하기 위해서는 import type 문법을 사용했다. 하지만 3.8버전부터 import 키워드로 type을 import 할 수 있다.

// import 키워드 사용
import { APIResponseType } from "./api";

// import type 사용
import type { APIResponseType } from "./api";

import type 문은 컴파일 시 제거된다는 것이 보장된다.

Default exports

모듈은 선택적으로 default export 할 수 있다. Default export는 default 키워드를 사용하며, 하나의 모듈에서 한 번만 사용 가능하다. default export된 모듈을 import 할 때는 이전에 사용했던 문법과 다른 문법을 사용한다.

// JQuery.d.ts
declare let $: JQuery;
export default $;

// App.ts
import $ from 'jquery';

// 꼭 같은 이름으로 import 할 필요는 없다. 원하는 이름으로 import 할 수 있다.
// import jquery from 'jquery';

$("button.continue").html("Next Step...");

클래스 혹은 함수 선언 시 default 키워드를 바로 사용 할 수 있다. 이때 클래스 혹은 함수 이름 작성을 생략할 수 있다.

// ZipCodeValidator.ts

// with name
export default class ZipCodeValidator {
  static numberRegexp = /^[0-9]+$/;
  isAcceptable(s: string) {
    return s.length === 5 && ZipCodeValidator.numberRegexp.test(s);
  }
}

// ZipCodeValidator.ts

// without name
export default class {
  static numberRegexp = /^[0-9]+$/;
  isAcceptable(s: string) {
    return s.length === 5 && ZipCodeValidator.numberRegexp.test(s);
  }
}

// Tests.ts
import validator from "./ZipCodeValidator";

let myValidator = new validator();

함수, 클래스 뿐만 아닌 자바스크립트에서 값으로 평가되는 모든 것은 default export 할 수 있다.

// OneTwoThree.ts
export default '123';

// Log.ts
import num from "./OneTwoThree";

console.log(num); // "123"

`export =`, `import = require()`

타입스크립트는 CommonJS와 AMD를 모두 사용 할 수 있도록 export = 문법을 지원한다. export = 문법 사용 시 하나의 객체만을 export 할 수 있다. 이때 export 대상은 클래스, 인터페이스, 네임스페이스, 함수, 혹은 열거형(Enum)이 될 수 있다.

타입스크립트에서 export = 문법을 사용하여 export된 모듈을 import 할 때 import module = require("module") 문법을 사용해야한다.

// ZipCodeValidator.ts
let numberRegexp = /^[0-9]+$/;

class ZipCodeValidator {
  isAcceptable(s: string) {
    return s.length === 5 && numberRegexp.test(s);
  }
}
export = ZipCodeValidator;

// Test.ts
import zip = require("./ZipCodeValidator");

let validator = new zip();

모듈 코드 생성

모듈 타겟이 무엇인지에 따라 컴파일된 코드가 달라진다. 아래는 각 타겟 별 SimpleModule 모듈을 컴파일한 결과이다.

// SimpleModule.ts
import m = require("mod");
export let t = m.something + 1;

Target: AMD (RequireJS)

// SimpleModule.js
define(["require", "exports", "./mod"], function (require, exports, mod_1) {
  exports.t = mod_1.something + 1;
});

Target: CommonJS (Node)

// SimpleModule.js
var mod_1 = require("./mod");
exports.t = mod_1.something + 1;

Target: UMD

// SimpleModule.js
(function (factory) {
  if (typeof module === "object" && typeof module.exports === "object") {
    var v = factory(require, exports);
    if (v !== undefined) module.exports = v;
  } else if (typeof define === "function" && define.amd) {
    define(["require", "exports", "./mod"], factory);
  }
})(function (require, exports) {
  var mod_1 = require("./mod");
  exports.t = mod_1.something + 1;
});

Target: System

// SimpleModule.js
System.register(["./mod"], function (exports_1) {
  var mod_1;
  var t;
  return {
    setters: [
      function (mod_1_1) {
        mod_1 = mod_1_1;
      },
    ],
    execute: function () {
      exports_1("t", (t = mod_1.something + 1));
    },
  };
});

Target: ES6

// SimpleModule.js
import { something } from "./mod";
export var t = something + 1;

선택적 모듈 로딩

컴파일러는 import된 모듈이 emit된 자바스크립트 파일에서 사용되는지 검사한다. 만약 모듈 식별자가 표현식이 아닌 타입 표기로만 사용된다면, 해당 모듈의 require 호출문은 emit된 자바스크립트 파일에 포함되지 않는다.

import id = require("...")문을 사용하면 해당 모듈의 타입에 접근 할 수 있다. 아래 코드는 Node.js에서 Dynamic 모듈 로딩을 구현한 예제이다.

declare function require(moduleName: string): any;

// 1. Zip은 타입 표기로만 사용된다. 즉, emit된 JS 파일에 require("./ZipCodeValidator")문이 포함되지 않는다.
import { ZipCodeValidator as Zip } from './ZipCodeValidator';

if (needZipValidation) {
  // 2. ZipCodeValidator가 필요한 경우, require문으로 import한다.
  let ZipCodeValidator: typeof Zip = require("./ZipCodeValidator");
}

자바스크립트 라이브러리 사용하기 - Ambient 모듈

자바스크립트로 작성된 라이브러리의 구조를 나타내기 위해서는, 해당 라이브러리에서 제공하는 API를 선언(declare) 할 필요가 있다. implementation을 정의하지 않은 선언을 "Ambient"라고 한다. Ambient 선언은 보통 .d.ts 파일에 작성되어 있다.

// node.d.ts
declare module "url" {
  export interface Url {
    protocol?: string;
    hostname?: string;
    pathname?: string;
  }

  export function parse(
    urlStr: string,
    parseQueryString?: string,
    slashesDenoteHost?: string
  ): Url;
}

declare module "path" {
  export function normalize(p: string): string;
  export function join(...paths: any[]): string;
  export var sep: string;
}

위에서 작성한 Ambient 모듈을 사용하기 위해서는 node.d.ts 파일을 /// <reference>로 추가하면된다.

/// <reference path="node.d.ts"/>
import * as URL from 'url';
let myUrl = URL.parse("http://www.typescriptlang.org");

만약 위 예제에서 라이브러리 API를 선언하지 않고, 모듈을 바로 사용하고 싶다면 단축 선언(shorthand declaration)을 작성하면된다.

declare module "url";

import { parse } from 'url';

parse("...");
// 주의: shorthand declaration으로 작성된 모듈은 any type이다.

UMD 모듈

일부 라이브러리는 다양한 모듈 로더, 혹은 0개의 모듈 로더를 사용할 수 있도록 작성되어있다. 이러한 모듈을 UMD(Universal Module Definition) 모듈이라고 한다. UMD 모듈은 import하여 사용하거나, 전역 변수로서 사용한다. 아래 예제를 살펴보자.

// math-lib.d.ts
export function isPrime(x: number): boolean;
export as namespace mathLib;

math-lib 라이브러리를 모듈에서 사용 할 경우 import 하면된다.

import { isPrime } from "math-lib";

isPrime(2);
mathLib.isPrime(2); // ERROR: can't use the global definition from inside a module

math-lib 라이브러리를 전역 변수로 사용하기 위해서는 모듈 파일이 아닌 일반 스크립트 파일에서 사용해야한다.

mathLib.isPrime(2);

모듈 구조화 가이드

1. Export as close to top-level as possible

모듈을 네임스페이스로 래핑하여 export하는 것은 불필요한 레이어를 추가하는 것일 수 있다. 모듈 사용자로 하여금 실수를 유발 할 수 있게 한다.
export된 클래스의 static 메소드를 사용할 때, 클래스 자체가 불필요한 레이어가 될 수 있다. 클래스를 네임스페이스로 사용하는 것이 작성된 코드의 의도를 더 뚜렷히 나타낼 수 있는 것이 아니라면 개별 함수를 export 하는 것이 바람직하다.
만약 1개의 클래스 혹은 함수만을 export 한다면 export default 문법을 사용한다. default export된 모듈을 import 할 때 원하는 이름으로 rename 할 수 있고, 불필요한 . 체이닝을 줄일 수 있다.
여러 모듈을 export 할 경우 top-level에 작성한다. (export * as namespace X)
여러 모듈을 import 할 경우 import된 모듈 이름을 명시적으로 작성한다 (import * as namespace X). 단, import 하는 모듈이 너무 많을 경우 namespace import를 사용한다.

2. Re-export to extend

모듈의 기능을 확장할 경우, 기존의 모듈을 변경하지 않고 새로운 기능을 제공하는 개체를 export한다. 예를 들어, Calculator 클래스를 확장한 ProgrammerCalculator 클래스를 export할 때 아래와 같이 작성 할 수 있다.

// Calculator.ts
export class Calculator {
  private current = 0;
  private memory = 0;
  private operator: string;

  protected processDigit(digit: string, currentValue: number) {
    // ...
  }

  protected processOperator(operator: string) {
    // ...
  }

  protected evaluateOperator(
    operator: string,
    left: number,
    right: number
  ): number {
    // ...
  }

  private evaluate() {
    // ...
  }

  public handleChar(char: string) {
    // ...
  }

  public getResult() {
    // ...
  }
}

export function test(c: Calculator, input: string) {
  // ...
}

// ProgrammerCalculator.ts
import { Calculator } from "./Calculator";

class ProgrammerCalculator extends Calculator {
  static digits = [ /* ... */ ];

  constructor(public base: number) {
    super();
    // ...
  }

  protected processDigit(digit: string, currentValue: number) {
    // ...
  }
}

// 기존 Calculator를 변경하지 않고 확장하여 export
export { ProgrammerCalculator as Calculator };

// 기존 test를 re-export
export { test } from "./Calculator";

3. Do not use namespaces in modules

모듈은 자신만의 스코프를 가지고 있으며, 오직 export된 모듈만 외부에서 접근 할 수 있다. 이 사실 자체만으로 namespce는 큰 의미가 없다. namespace는 전역 스코프에서 이름 충돌의 위험이 있는 식별자를 계층적으로 구분하기 위해 사용된다. 하지만 모듈은 경로와 파일 이름을 resolve하여 사용되므로 이미 파일 시스템에 의해 계층이 구분되어 있다.

4. 주의사항

namespace만을 top-level export하는 모듈(ex. export namespace Foo {...})은 해당 namespace를 제거한 후 하위에 선언된 모든 것을 1레벨 올린다.
여러 파일에서 작성된 top-level export namespace Foo {...}는 하나의 Foo로 병합되지 않는다.

출처

TypeScript - Modules

CSS object-fit 속성 사용하기

Jinhyun Kim — Wed, 02 Jun 2021 15:46:41 +0000

CSS object-fit 속성 사용하기

오늘은 CSS의 object-fit 속성을 사용해볼 것입니다.

최근 프로필 컴포넌트 개발 중 정사각형 컨테이너에 프로필 이미지를 표시해야하는 일이 있었습니다. 요구사항을 구체적으로 작성해보면 아래와 같습니다.

만약 이미지 크기가 컨테이너 크기보다 작거나 같다면, 컨테이너에 가득 채워서 표시
만약 이미지 크기가 컨테이너 크기보다 크다면, 해당 이미지의 정중앙 영역을 컨테이너 크기만큼 표시

바쁘신 분들은 샌드박스 링크에 방문하여 소스코드를 먼저 살펴봐주세요.

1. width 100%; height 100%;

가장 먼저 시도해본 것은 이미지 전체를 컨테이너에 맞춰 표시해보는 것이었습니다. 아래 코드를 확인해주세요.

<section>
  <h2>1. 너비가 높이보다 더 큰 이미지</h2>
  <div class="block">
    <div class="img-wrapper">
      <!-- 컨테이너 너비에 맞춤 -->
      <img class="fit-width" src="./greater-width.jpg" alt="프로필 이미지" />
    </div>
    <div class="img-wrapper">
      <!-- 컨테이너 높이에 맞춤 -->
      <img class="fit-height" src="./greater-width.jpg" alt="프로필 이미지" />
    </div>
    <div class="img-wrapper">
      <!-- 컨테이너 너비, 높이에 맞춤 -->
      <img class="fit-width-height" src="./greater-width.jpg" alt="프로필 이미지"/>
    </div>
  </div>
</section>
<section>
  <h2>2. 높이가 너비보다 더 큰 이미지</h2>
  <div class="block">
    <div class="img-wrapper">
      <!-- 컨테이너 너비에 맞춤 -->
      <img class="fit-width" src="./greater-height.jpg" alt="프로필 이미지" />
    </div>
    <div class="img-wrapper">
      <!-- 컨테이너 높이에 맞춤 -->
      <img class="fit-height"   src="./greater-height.jpg" alt="프로필 이미지" />
    </div>
    <div class="img-wrapper">
      <!-- 컨테이너 너비, 높이에 맞춤 -->
      <img class="fit-width-height" src="./greater-height.jpg" alt="프로필 이미지" />
    </div>
  </div>
</section>

/* width에 맞추기 */
.fit-width {
  width: 100%;
}
/* height에 맞추기 */
.fit-height {
  height: 100%;
}
/* width, height 둘 다 맞추기 */
.fit-width-height {
  width: 100%;
  height: 100%;
}

너비가 더 큰 이미지를 컨테이너 너비에 맞춰 표시하면 하단 여백이 남습니다. 반대로, 컨테이너 높이에 맞춰 표시하면 이미지가 컨테이너 밖으로 넘치게되죠. 최후의 수단인 width: 100%; height: 100%를 사용했지만 역시 이미지 비율이 유지되지 않습니다. 이러한 문제는 높이가 더 큰 이미지에서도 똑같이 발생합니다. 이 방법은 아닌 것 같아요.

2. background-image 사용

두 번째로 시도한 방법은 <img> 태그가 아닌 다른 태그를 사용하여, 해당 요소의 배경 이미지로 프로필 이미지를 표시하는 것이었습니다. 아래 코드를 확인해주세요.

<section>
  <h2>3. background-image 사용</h2>
  <div class="block">
    <div class="img-wrapper">
      <div class="background greater-width-img"></div>
    </div>
    <div class="img-wrapper">
      <div class="background greater-height-img"></div>
    </div>
  </div>
</section>

/* background-image 사용 */
.background {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.greater-width-img {
  background-image: url("./greater-width.jpg");
}
.greater-height-img {
  background-image: url("./greater-height.jpg");
}

background-image를 사용하여 프로필 이미지를 표시했을 때, 앞서 작성한 요구사항을 모두 충족합니다. 하지만 마크업이 마음에 들지 않아요. 무언가 semantic하지 않은 느낌입니다. 접근성 관점에서도 만족스럽지 않아요. role, aria-label 속성을 사용하여 마크업을 수정해보았습니다.

<section>
  <h2>3. background-image 사용</h2>
  <div class="block">
    <div class="img-wrapper" role="img" aria-label="프로필 이미지">
      <div class="background greater-width-img"></div>
    </div>
    <div class="img-wrapper" role="img" aria-label="프로필 이미지">
      <div class="background greater-height-img"></div>
    </div>
  </div>
</section>

ARIA 속성을 사용하여 마크업을 수정했지만, 그래도 의미에 맞는 <img> 태그를 사용하고 싶어요. 이때 사용한 속성이 object-fit 속성입니다.

3. object-fit

CSS object-fit 속성은 대체 요소(replaced element)의 컨텐츠를 컨테이너 크기에 맞게 설정한다고 합니다. 그렇다면 대체 요소는 무엇일까요?

replaced element

elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.

ex) <iframe>, <video>, <embed>, <img>

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

대체 요소는 자신의 컨텐츠가 문서 스타일(document's styles)에 영향을 받지 않는 요소를 뜻합니다. 즉, CSS 스코프에서 벗어난 친구들이죠. 하지만 딱 두 가지 경우 CSS의 영향을 받는다고 적혀있습니다.

대체 요소의 위치 설정(대체 요소의 컨텐츠 위치 X)
컨테이너 영역 안에서 대체 요소의 컨텐츠를 positioning

여기서부터 뇌피셜이지만, 첫 번째 경우 <img> 요소는 CSS로 위치를 변경 할 수 있지만, <img> 요소의 컨텐츠인 이미지 그 자체는 위치를 변경 할 수 없다는 뜻으로 이해했습니다.

두 번째 경우는 <img> 요소의 컨텐츠인 이미지를 컨테이너 영역 안에서 제어하는 CSS 속성이 있다는 것입니다. 그 중 하나가 오늘 사용해볼 object-fit 속성입니다.

<section>
  <h2>4. object-fit 속성 사용</h2>
  <div class="block">
    <div class="img-wrapper">
      <img class="object-fit" src="./greater-width.jpg" alt="프로필 이미지" />
    </div>
    <div class="img-wrapper">
      <img class="object-fit" src="./greater-height.jpg" alt="프로필 이미지" />
    </div>
  </div>
  </div>
</section>

/* object-fit 사용 */
.object-fit {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit 속성을 사용하여 앞서 요구사항에 맞게 코드를 작성 할 수 있었습니다. 주의해야 할 것은 object-fit 속성은 IE에서 전혀 지원되지 않는다는 것입니다. 아래는 브라우저별 지원 현황입니다. (2021/6/3 기준)

이번 포스트는 여기서 마치도록 하겠습니다.

React - infiniteScroll hook 만들기

Jinhyun Kim — Tue, 01 Jun 2021 14:50:50 +0000

배너 이미지 출처: https://commons.wikimedia.org/wiki/File:React_Native_Logo.png

이번 포스트에서는 React를 사용하여 "페이지 최하단 스크롤 시" 전달 받은 콜백을 실행시키는 useInfiniteScroll hook을 만들어 볼 것입니다.

예를 들어, 많은 양의 목록형 아이템을 페이지에 표시할 때, 최초 n개의 아이템을 먼저 표시한 후 "페이지 최하단 스크롤 시" n개의 아이템을 추가로 표시해야 하는 경우 useInfiniteScroll hook을 사용 할 수 있습니다. 그 외 "페이지 최하단 스크롤 시" 어떠한 로직을 수행해야할 경우에도 사용 할 수 있습니다.

바쁘신 분들은 샌드박스 링크에 방문하여 소스코드를 먼저 살펴봐주세요.

useInfiniteScroll

우선 useInfiniteScroll.js 파일 생성 후 아래 코드를 작성합니다.

import { useEffect } from "react";

function useInfiniteScroll(callback) {
  useEffect(
    () => {
      function scrollBottom() {
        // ???
      }

      // 2. 이벤트 핸들러 등록
      window.addEventListener("scroll", scrollBottom);

      // 3. 클린업 함수 작성
      return () => {
        window.removeEventListener("scroll", scrollBottom);
      };
    },
    // 1. 디펜던시 추가
    [callback]
  );
}

export default useInfiniteScroll;

useEffect hook의 디펜던시에 전달 받은 callback을 추가합니다. 즉, callback의 참조가 바뀌면 useEffect hook이 다시 실행될 수 있도록 합니다.
addEventListener 메소드를 사용하여 window 객체에 scroll 이벤트 핸들러(scrollBottom)를 등록합니다.
callback의 참조가 바뀔 때 실행될 클린업 함수를 작성합니다.

다음은 scrollBottom 함수에서 callback을 실행시키는 조건을 작성해보도록 합시다. 우선 "페이지 최하단 스크롤 시"라는 조건을 추가해야하는데, 먼저 아래 코드를 확인해주세요.

import { useEffect } from "react";

function useInfiniteScroll(callback) {
  useEffect(() => {
    function scrollBottom() {
      const {
        scrollTop,
        clientHeight,
        scrollHeight,
      } = document.documentElement;

      // 페이지 최하단 스크롤 시
      if (scrollTop + clientHeight >= scrollHeight) {
        // callback을 실행
        callback();
      }
    }

    window.addEventListener("scroll", scrollBottom);

    return () => {
      window.removeEventListener("scroll", scrollBottom);
    };
  }, [callback]);
}

export default useInfiniteScroll;

위 코드를 보면 "페이지 최하단 스크롤 시"라는 조건을 scrollTop + clientHeight >= scrollHeight으로 판별하는 데, 해당 조건에서 사용하는 각 값에 대해서 알아볼 필요가 있습니다.

먼저 document.documentElement는 HTML 문서의 root element(<html> 요소)를 의미합니다. 즉, 위 예제 코드에서 사용된 scrollTop, clientHeight, scrollHeight은 각각 <html> 요소의 프로퍼티입니다.

Element.scrollTop 프로퍼티는 접근자 프로퍼티(accessor property)로서 참조 시 어떠한 값을 반환하는데, 이 값이 의미하는 것은 "해당 요소가 수직으로 스크롤 된 픽셀 값"입니다. 즉, 위 예제의 경우 <html> 요소가 수직으로 스크롤된 픽셀 값을 의미합니다.

Element.scrollTop

The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Element.clientHeight 프로퍼티는 읽기 전용 프로퍼티로서, 요소의 내부 높이(height + padding - height of horizontal scrollbar)를 나타냅니다. 단, <html> 요소의 clientHeight 프로퍼티는 뷰포트의 높이를 나타냅니다.

Element.clientHeight

When clientHeight is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's height (excluding any scrollbar) is returned.

출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

마지막으로 Element.scrollHeight 프로퍼티는 읽기 전용 프로퍼티로서 요소의 높이를 나타내는데, 이때의 높이는 이미 스크롤되어 화면에 보이지 않는 영역까지 포함하여 계산된 값입니다.

Element.scrollHeight

The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

scrollBottom 핸들러에서 사용한 조건을 그림으로 표시하면 아래와 같습니다.

즉, useInfiniteScroll hook은 이미 스크롤된 높이(scrollTop) + 뷰포트 높이(clientHeight)의 값이 스크롤 될 수 있는 높이(scrollHeight)보다 크다면 전달 받은 callback을 실행하는 hook입니다.

이번 포스트는 여기서 마치도록 하겠습니다.

JavaScript 프로그래머를 위한 TypeScript

Jinhyun Kim — Sun, 31 Jan 2021 15:26:46 +0000

이 포스트는 TypeScript for JavaScript Programmers를 학습한 내용입니다.

TypeScript(TS)는 JavaScript(JS)의 모든 기능을 제공한다. 즉, 모든 JS 코드는 TS 코드이다. 여기에 TS는 타입 시스템을 추가로 제공한다.

JS에서는 string, number, object 등 다양한 값의 타입이 존재하지만, 변수에 할당된 값의 타입이 유지되는지 체크하지 않는다. 즉, 같은 변수에 다른 타입의 값을 재할당 할 수 있다.

let str = "cheese";
str = true;

반면, TS에서는 타입 추론을 통해 변수에 할당된 값의 타입으로 타입을 결정한다. 이후 값을 재할당하면 재할당된 값의 타입이 이전에 결정된 타입과 같은지 체크한다.

let str = "cheese";
str = true;
// Type 'boolean' is not assignable to type 'string'.

TS의 가장 큰 장점은 의도하지 않은 코드 실행을 런타임 이전에 방지하여 버그 발생의 가능성을 줄일 수 있다는 것이다.

1. 타입 추론 (Types by Inference)

TS를 사용하여 변수를 선언 후 값을 할당하면, 할당된 값의 타입을 타입으로 사용한다. 타입 추론을 통해 타입이 결정되므로 명시적으로 타입을 작성하지 않아도된다.

let helloWorld = "Hello World";
// let helloWorld: string = 'Hello World';

2. 타입 정의 (Defining Types)

JS 프로그래밍은 다양한 디자인 패턴을 통해 이루어진다. 이때 동적 프로그래밍을 사용하는 패턴은 타입 추론을 하기 어렵게 만든다. 이러한 경우 TS의 interface, type 기능을 사용할 수 있다.

예를 들어 문자열 타입의 name, 숫자 타입의 id 프로퍼티를 가진 객체는 아래와 같이 생성할 수 있다.

const user = {
  name: "Jin",
  id: 0,
};

interface를 선언하여 위 객체의 구조를 명시적으로 작성할 수 있다.

interface User {
  name: string;
  id: number;
}

위에서 선언한 User 인터페이스를 따르는 객체를 생성하기 위해서는 : TypeName 문법을 사용한다.

const user: User = {
  name: "Jin",
  id: 0,
};

: TypeName에 작성한 타입과 다른 타입의 값을 할당하면 에러가 발생한다.

interface User {
  name: string;
  id: number;
}

const user: User = {
  username: "Jin",
  id: 0,
};

// Type '{ username: string; id: number; }' is not assignable to type 'User'.
// Object literal may only specify known properties, and 'username' does not exist in type 'User'.

클래스로 생성한 인스턴스와 인터페이스를 함께 사용할 수도 있다.

interface User {
  name: string;
  id: number;
}

class UserAccount {
  name: string;
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

const user: User = new UserAccount("Jin", 0);

인터페이스를 사용하여 함수의 매개변수와 리턴 값의 타입도 결정할 수 있다.

function getAdminUser(): User {
  // ...
}

function deleteUser(user: User) {
  // ...
}

JS에서 기본적으로 제공하는 값의 타입(boolean, bigint, null, number, string, symbol, object, undefined)을 인터페이스에서 그대로 사용할 수 있다. 여기에 TS는 any, unknown, never, void 타입을 추가로 제공한다.

3. 타입 구성 (Composing Types)

Union, Generic을 사용하여 여러 타입을 하나의 타입으로 합칠 수 있다.

Unions

Union을 사용하여 타입을 선언할 수 있다. 예를 들어 true 혹은 false 타입의 값을 가지는 MyBool 타입을 아래와 같이 생성할 수 있다.

type MyBool = true | false;
// type MyBool = boolean

위 예제의 MyBool 타입은 구조적 타입 시스템(structural type system)에 의해 boolean 타입으로 분류된다.

Union 타입은 유효한 리터럴 목록을 구조화할 때 사용할 수 있다.

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

Union을 사용하면 리터럴 뿐만 아니라 여러 타입을 하나로 묶을 수 있다. 예를 들어, 매개변수의 타입이 array 혹은 string인 함수를 아래와 같이 작성할 수 있다.

function getLength(obj: string | string[]) {
  return obj.length;
}

변수의 타입을 확인하기 위해서는 typeof 연산자를 사용한다.

Type	Predicate
string	typeof s === "string"
number	typeof n === "number"
boolean	typeof b === "boolean"
undefined	typeof undefined === "undefined"
function	typeof f === "function"
array	Array.isArray(a)

예를 들어 매개변수의 타입에 따라 리턴 값이 달라지는 경우 아래와 같이 함수를 작성할 수 있다.

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
  } else {
    return obj;
  }
}

Generics

제네릭은 타입을 변수 형태로 전달하여 사용하는 방법이다. 예를 들어 일반 배열은 모든 타입의 값을 포함할 수 있다. 하지만 제네릭 배열은 전달된 타입 변수와 자신의 요소 타입이 일치해야하며, 이를 통해 자신의 요소가 무슨 타입인지 표현할 수 있다.

type StringArray = Array<string>; // ["foo", "bar", "baz"]
type NumberArray = Array<number>; // [1, 2, 3, 4]
type ObjectWithNameArray= Array<{ name: string }>; // [{ name: "Jin" }, { name: "Joon" }]

제네릭을 사용하는 커스텀 타입을 직접 선언할 수 있다.

interface BackPack<Type> {
  add: (stuff: Type) => void;
  get: () => Type;
}

declare const backpack: Backpack<string>;

// Backpack의 Type 자리에 string을 전달하였으므로 아래 stuff는 문자열 타입이다.
const stuff = backpack.get();

// Backpack의 Type 자리에 string을 전달하였으므로 숫자 타입은 add 할 수 없다.
backpack.add(23);
// Argument of type 'number' is not assignable to parameter of type 'string'.

4. 구조적 타입 시스템 (Structural Type System)

TS의 핵심 개념 중 하나는 타입 체크가 값의 구조(shape)에 의해 이루어진다는 것이다. 이러한 개념을 "duck typing" 혹은 "structural typing"이라 한다.

만약 두 객체가 같은 구조를 가지고 있다면, 이 둘은 구조적 타입 시스템에 의해 같은 타입으로 인식된다.

interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const point = { x: 12, y: 26 };
logPoint(point); // 12, 26

위 예제의 point 변수는 Point 타입으로 선언되지 않았다. 하지만 TS는 타입 체크 시 point의 구조와 Point 구조를 비교하기 때문에 위 코드는 문제 없이 컴파일된다.

구조가 일치하는지 판단하는 기준은 프로퍼티 수가 더 적은 객체의 구조를 프로퍼티 수가 더 많은 객체가 충족하는지이다.

const point2 = { x: 15, y: 13: z: 89 };
logPoint(point2); // 15, 13

const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect); // 33, 3

const color = { hex: "#187ABF" };
logPoint(color);
// Argument of type '{ hex: string; }' is not assignable to parameter of type 'Point'.
// Type '{ hex: string; }' is missing the following properties from type 'Point': x, y

이러한 규칙은 class를 사용할 때에도 동일하게 적용된다.

class VirtualPoint {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

const newVPoint = new VirtualPoint(13, 56);
logPoint(newVPoint); // 13, 56

출처

TypeScript for JavaScript Programmers

DEV Community: Jinhyun Kim

TypeScript - Modules

Export

Import

Default exports

export =, import = require()

모듈 코드 생성

선택적 모듈 로딩

자바스크립트 라이브러리 사용하기 - Ambient 모듈

UMD 모듈

모듈 구조화 가이드

1. Export as close to top-level as possible

2. Re-export to extend

3. Do not use namespaces in modules

4. 주의사항

출처

CSS object-fit 속성 사용하기

CSS object-fit 속성 사용하기

1. width 100%; height 100%;

2. background-image 사용

3. object-fit

React - infiniteScroll hook 만들기

useInfiniteScroll

JavaScript 프로그래머를 위한 TypeScript

1. 타입 추론 (Types by Inference)

2. 타입 정의 (Defining Types)

3. 타입 구성 (Composing Types)

Unions

Generics

4. 구조적 타입 시스템 (Structural Type System)

출처

`export =`, `import = require()`