코드에 빠지다

[eslint] interface, type Pascal Case로 강제하기

구하천포 — Thu, 14 Nov 2024 12:50:51 +0900

TypeScript로 개발할 때, interface와 type을 이용하여 타입을 선언하는 경우가 많습니다.
이때 일반적으로 Pascal Case를 사용하여 타입 이름을 작성하는데, ESLint를 이용해 이를 강제하는 방법을 알아보겠습니다.

{
  rules: {
    '@typescript-eslint/naming-convention': [
      'error',
      {
        selector: ['interface', 'typeAlias'], 
        format: ['PascalCase'],
        custom: {
          regex: '^[A-Z][a-zA-Z0-9]*$',
          match: true,
        },
      },
    ],
  },
}

@typescript-eslint/naming-convention

@typescript-eslint/naming-convention은 TypeScript 코드에서 이름 규칙을 설정하는 규칙입니다.
위 설정에서는 selector를 통해 interface와 typeAlias를 선택합니다.
format 옵션을 PascalCase로 설정하여 Pascal Case로 작성되도록 강제합니다.

이 규칙을 적용하면, Pascal Case를 따르지 않는 타입이나 인터페이스에 대해 에러가 발생하여 코드 스타일을 일관되게 유지할 수 있습니다.

[eslint] undefined 할당 금지

구하천포 — Thu, 14 Nov 2024 12:50:01 +0900

undefined 할당 금지

undefined

선언했으나 초기화하지 않은 변수, 함수의 반환 값이 없을 때, 객체에 존재하지 않는 속성 등에 자바스크립트가 자동으로 할당하는 값 입니다.
코드에서 명시적으로 할당하지 않도록 합니다.

null

개발자가 의도적으로 값이 없음을 표현하고 싶을 때 사용합니다.
예를 들어, 객체의 속성을 아직 할당하지 않았거나 특정 변수에 값이 없음을 명확히 하기 위해 null을 사용합니다.

{
  "rules": {
    "no-undefined": "error"
  }
}

no-undefined

undefined를 할당하지 못 하게 하는 규칙입니다.

[TS] 타입스크립트에서 객체의 특정 키 값을 안전하게 변경하는 방법

구하천포 — Thu, 14 Nov 2024 12:50:00 +0900

타입스크립트에서는 객체의 특정 key에 대한 값을 변경할 때, 타입 안전성을 유지하는 것이 중요합니다.
이번 글에서는 타입 안전성을 유지하면서 객체의 값을 수정하는 두 가지 방법을 알아보겠습니다.

방법 1: 객체 확장 방식

아래 코드는 객체의 특정 key에 따라 값을 수정하는 예제입니다.

interface User {
  addr: string;
  name: string;
  age: number;
  gender: "M" | "W";
}

type UserKey = keyof User;
type UserValue = User[UserKey];

const user: User = {
  addr: "",
  name: "",
  age: 0,
  gender: "M",
};

const onChangeUser = (user: User, key: UserKey, value: UserValue) => {
  return {
    ...user,
    [key]: value,
  };
};

이 코드에서는 key와 value를 받아 객체를 반환하는데, 타입 안전성에 문제가 있습니다.
예를 들어, 아래와 같이 addr에 number 타입이 잘못 들어가도 타입 오류가 발생하지 않습니다.

onChangeUser(user, "addr", 1);  // 'addr'은 string이어야 하지만, number가 들어감

방법 2: 제네릭을 활용한 타입 안전성 강화

타입 안전성을 강화하기 위해 제네릭을 사용할 수 있습니다.
제네릭을 활용하면 key가 설정될 때 해당 key에 맞는 타입이 자동으로 추론되므로, 잘못된 타입의 값이 들어갈 수 없게 됩니다.

interface User {
  addr: string;
  name: string;
  age: number;
  gender: "M" | "W";
}

interface ObjectHandler<T> {
  <K extends keyof T>(obj: T, key: K, value: T[K]): void;
}

const user: User = {
  addr: "",
  name: "",
  age: 0,
  gender: "M",
};

const onChangeUser: ObjectHandler<User> = (obj, key, value) => {
  return {
    ...obj,
    [key]: value,
  };
};

이렇게 작성하면 addr 필드에는 string만 들어갈 수 있으므로, onChangeUser(user, "addr", 1)처럼 잘못된 타입이 들어가는 경우 타입 에러가 발생합니다.

결론

제네릭을 활용하여 객체의 key와 value 타입을 강제하면 타입 안전성을 확보할 수 있습니다.
특히, 리액트에서 객체 상태를 업데이트할 때 이 방식을 사용하면 타입 오류를 방지하고 코드의 가독성을 높일 수 있습니다.

리액트에서는 아래와 같이 사용할 수 있습니다.

const onChangeUser: ObjectHandler<User> = (key, value) => {
  setUser(prev => ({
    ...prev,
    [key]: value,
  }));
};

이 방법을 통해 객체의 상태를 안전하고 일관되게 관리할 수 있습니다.

[JS] ?? 와 || 연산자 차이

구하천포 — Tue, 22 Oct 2024 18:27:14 +0900

nullish coalescing operator (??)

?? 연산자는 null, undefined 인 경우 기본값을 제공하는 연산자입니다.

const value = variable ?? "default";

variable 값이 null, undefined 인 경우 default 값으로 설정됩니다.

logical or operator (||)

falsy 값인 경우 기본값을 제공하는 연산자입니다.
즉, 개발자의 의도와 맞지 않게 false, 0, '', NaN 과 같은 값에서도 default 값으로 설정될 수 있습니다.

const value = 0 || "default"; // default
const value = 0 ?? "default"; // 0

strictNullChecks 설정

tsconfig.json 파일 strictNullChecks 옵션을 true로 설정해두시는 것을 추천드립니다.
TypeScript가 더 엄격하게 null, undefined 값을 검사합니다.

[eslint] 불필요한 타입 단언 (as) 찾기

구하천포 — Tue, 22 Oct 2024 18:26:54 +0900

불필요한 타입 단언, 불필요한 as 찾기

TypeScript로 개발 시 as의 사용은 버그를 발생시킬 수 있기 때문에 지양하게 됩니다.
그러나 개발하다보면 어쩔 수 없이 as를 사용하게 되는 부분이 있습니다.
이때 타입 추론이 되었는데 작성하는 경우도 있습니다.
이렇게 불필요하게 작성된 as를 찾아주는 규칙을 알아보겠습니다.

{
  "rules": {
    "@typescript-eslint/no-unnecessary-type-assertion": "error"
  }
}

no-unnecessary-type-assertion

해당 규칙은 타입을 명확히 알고 있음에도 불구하고 as를 이용하여 타입 단언한 경우를 찾아줍니다.

const someValue: string = "Hello";
const value = someValue as string; // 불필요한 타입 단언

[JS,TS] 문자열에 있는 uuid 제거하기

구하천포 — Mon, 21 Oct 2024 19:03:48 +0900

문자열에 있는 uuid 제거하기

window.location.pathname으로 주소창에 있는 데이터를 사용할 일이 있었습니다.
이 경우 다이나믹 라우팅을 위해 uuid가 있는 경우, 해당 uuid를 제거하여 보여주어야 했습니다.
uuid를 간단하게 제거할 수 있는 함수를 구현해봅시다.

const removeUUID = (str: string) => {
  // UUID 감지 정규식 (8-4-4-4-12)
  const uuidRegex =
    /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/;

  return url.replace(uuidRegex, "");
}

위처럼 정규식을 이용하면 간단하게 uuid를 제거할 수 있습니다.
만약 다른 형식의 uuid인 경우 위 정규식을 이용하여 해당 형식에 맞게 수정해주시면 됩니다.

[JS,TS] 문자열로 되어 있는 new Date 함수 실행하기

구하천포 — Mon, 21 Oct 2024 19:02:29 +0900

문자열로 되어 있는 new Date 함수 실행하기

로그를 이용하여 사용자 행동 패턴 분석을 확인할 수 있는 서비스를 구현하고 있습니다.
프론트에서 aggregation 명령어를 작성하여 문자열 그대로 서버에 전송하여, 서버에서 문자열을 파싱하여 제대로 된 aggregation 명령어로 변환 후 실행합니다.

이 경우 프론트에서 new Date("날짜") 함수를 작성하게 되면 문자열이기 때문에 서버에서 제대로 처리를 할 수 없습니다.
모든 경우가 아래처럼 key, value 형태인 객체로 되어 있습니다.
아래 형태가 모두 문자열이라고 가정하고 new Date를 어떻게 실행시킬 수 있을까, 실행하는 방법을 알아보도록 하겠습니다.

date: {
  $gte: new Date("날짜"),
  $lte: new Date("날짜")
}

코드

const dateStrings = obj[key].match(/new Date\("(.+?)"\)/);
if (dateStrings) {
  obj[key] = new Date(dateStrings[1]);
}

위처럼 간단하게 정규식을 이용하여 new Date("날짜") 함수 내에 있는 "날짜"를 뽑아내면 됩니다.
그리고 new Date 함수를 이용하여 실행해주면 됩니다.

[JS,TS] 문자열로 되어 있는 정규식 실행하기

구하천포 — Mon, 21 Oct 2024 18:59:42 +0900

문자열로 되어 있는 정규식 실행하기

로그를 이용하여 사용자 행동 패턴 분석을 확인할 수 있는 서비스를 구현하고 있습니다.
프론트에서 aggregation 명령어를 작성하여 문자열 그대로 서버에 전송하여, 서버에서 문자열을 파싱하여 제대로 된 aggregation 명령어로 변환 후 실행합니다.

이 경우 프론트에서 new RegExp("정규식") 함수를 작성하게 되면 문자열이기 때문에 서버에서 제대로 처리를 할 수 없습니다.
모든 경우가 아래처럼 key, value 형태인 객체로 되어 있습니다.
아래 형태가 모두 문자열이라고 가정하고 new RegExp 어떻게 실행시킬 수 있을까, 실행하는 방법을 알아보도록 하겠습니다.

코드

const regexs = obj[key].match(/new RegExp\((.+?)\)/);
if (regexs) {
  const regexString = regexs[1];
  obj[key] = new RegExp(regexString);
}

위처럼 간단하게 정규식을 이용하여 new RegExp("정규식") 함수 내에 있는 "정규식"를 뽑아내면 됩니다.
그리고 new RegExp 함수를 이용하여 실행해주면 됩니다.

[eslint] 구조 분해 할당 관련 규칙

구하천포 — Mon, 21 Oct 2024 18:52:16 +0900

구조 분해 할당과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.
최종 규칙을 보여드리면 아래와 같습니다.
하나씩 알아보도록 하겠습니다.

{
  "rules": {
    "prefer-destructuring": "off",
    "no-empty-pattern": "error",
    "no-useless-rename": "error",
    "no-unused-vars": "warn",
     "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "args": "none",
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_",
        "ignoreRestSiblings": true
      }
    ]
  }
}

prefer-destructuring

구조 분해 할당을 권장하는 규칙입니다. 옵션으로 객체, 배열에 대해 따로 설정해줄 수 있습니다.
개인적으로 강제할 필요까지는 없다고 생각하여 규칙에 추가하지는 않았습니다.

no-unused-vars, @typescript-eslint/no-unused-vars

사용하지 않는 변수에 대해 처리하는 규칙입니다.
상세한 정보는 해당 게시글에서 확인 부탁드립니다.

no-empty-pattern

빈 구조 분해 할당 패턴은 의미가 없기 때문에 불필요한 코드 작성을 방지해줍니다.

// bad
const {} = obj;
const [] = arr;

no-useless-rename

구조 분해 할당 시 동일한 이름으로 속성을 재할당 하는 것을 방지하는 규칙입니다.

// bad
const { x: x } = obj;

// good
const { x } = obj;
const { x: name } = obj;

[eslint] optional chaining, 옵셔널 체이닝 관련 규칙

구하천포 — Mon, 21 Oct 2024 18:50:31 +0900

optional chaining(옵셔널 체이닝, ?.)과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.

{
  "rules": {
    "no-unsafe-optional-chaining": "error",
    "@typescript-eslint/prefer-optional-chain": "error"
  }
}

no-unsafe-optional-chaining

옵셔널 체이닝이 필요 없는 곳에 사용된 위치를 찾아주는 규칙입니다.
옵셔널 체이닝은 null, undefined가 될 수 있는 곳에 사용해야 합니다.

// bad
const obj = { name: "name" }
console.log(obj?.name)

@typescript-eslint/prefer-optional-chain

옵셔널 체이닝을 권장하는 규칙입니다.
불필요하게 && 연산자를 계속해서 사용하는 것보다 옵셔널 체이닝을 이용하여 가독성 있게 구현하도록 도와줍니다.

// bad
const msg = error && error.name && error.name.message;

// good
const msg = error?.name?.message;

[eslint] switch 문

구하천포 — Mon, 21 Oct 2024 18:48:44 +0900

switch 문과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.
최종 규칙을 보여드리면 아래와 같습니다.
하나씩 알아보도록 하겠습니다.

{
  "rules": {
    "default-case": "error",
    "no-fallthrough": "error",
    "no-case-declarations": "error",
    "consistent-return": "error",
    "no-duplicate-case": "error"
  }
}

default-case

switch 문에 default 케이스가 존재하도록 강제하는 규칙입니다.

// bad
switch (condition) {
  case 1:
    break;
}

// good
switch (condition) {
  case 1:
    break;

  default:
    break;
}

no-fallthrough

case 문에서 break 없이 다음 case로 넘어가는 것을 방지하는 규칙입니다.

// bad
switch (condition) {
  case 1:
  case 2:
    break;
}

// good
switch (condition) {
  case 1:
    break;

  case 2:
    break;
}

no-case-declarations

case 문 안에 변수를 선언할 때 블록을 사용하도록 강제하는 규칙입니다.

// bad
switch (condition) {
  case 1:
    const name = "name";
    break;
}

// good
switch (condition) {
  case 1: {
    const name = "name";
    break;
  }
}

consistent-return

case 문에서 반환 값을 일관되게 반환하거나, 반환하지 않도록 하는 규칙입니다.

// bad
switch (condition) {
  case "A":
    return "a";

  case "b":

  default:
    break;
}

// good
switch (condition) {
  case "A":
    return "a";

  case "b":
    return "b";

  default:
    return "c";
    break;
}

no-duplicate-case

동일한 case 문을 작성하지 않도록 하는 규칙입니다.

// bad
switch (a) {
  case "A":
    return "a";

  case "A":
    return "A";

  default:
    return "c";
    break;
}

// good
switch (a) {
  case "A":
    return "a";

  case "b":
    return "b";

  default:
    return "c";
    break;
}

[eslint] 삼항연산자 관련 규칙

구하천포 — Mon, 21 Oct 2024 18:47:24 +0900

삼항연산자를 사용할 때, 도움이 되는 eslint 규칙에 대해 알아보도록 하겠습니다.

{
  "rules": {
    "no-unneeded-ternary": "error",
    "multiline-ternary": "off"
  }
}

no-unneeded-ternary

불필요하게 사용된 삼항연산자를 찾아주는 규칙입니다.

// bad
const value = condition ? true : false;

// good
const value = Boolean(condition);

multiline-ternary

삼항연산자를 사용할 때, 가독성을 위해 줄바꿈을 강제하는 규칙입니다.
저 같은 경우 가독성에 큰 문제를 느끼지 못 하고 있기 때문에 해당 규칙은 사용하지 않습니다.

// bad ..?
const value = condition ? "Yes" : "No";

// good ..?
const value = condition
? "Yes"
: "No";

[eslint] 사용하지 않는 변수 찾기

구하천포 — Mon, 21 Oct 2024 18:46:09 +0900

사용하지 않는 변수와 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.
최종 규칙을 보여드리면 아래와 같습니다.
하나씩 알아보도록 하겠습니다.

{
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "args": "none",
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_",
        "ignoreRestSiblings": true
      }
    ]
  }
}

no-unused-vars

JavaScript로 작성된 코드의 경우에만 적용이 됩니다.

만약 JavaScript 프로젝트만 사용하신다면 아래처럼 작성해주시면 됩니다.

{
  "rules": {
    "no-unused-vars": "off"
  }
}

@typescript-eslint/no-unused-vars

TypeScript로 작성된 코드의 경우 적용됩니다.
설정되어 있는 JavaScript용 eslint를 off 해주신 다음 사용하시면 됩니다.
추가 옵션으로 사용하지 않는 변수에 대해 prefix _ 를 사용하여 에러 표시가 되지 않도록 하였습니다.

{
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "args": "none",
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_",
        "ignoreRestSiblings": true
      }
    ]
  }
}

[eslint] if 문과 관련된 규칙

구하천포 — Mon, 21 Oct 2024 18:44:42 +0900

if 문과 관련된 eslint 규칙에 대해 알아보도록 하겠습니다.
최종 규칙을 보여드리면 아래와 같습니다.
하나씩 알아보도록 하겠습니다.

{
  "rules": {
    "curly": ["error", "all"],
    "no-constant-condition": "error",
    "no-lonely-if": "error",
    "no-negated-condition": "warn",
    "no-else-return": "warn"
  }
}

curly

if문 외에 중괄호를 사용하는 if, else, for, while 등에 적용되는 규칙입니다.
강제로 중괄호를 작성하게 함으로써 가독성을 높이고 실수를 방지할 수 있습니다.

// bad
if (condition) statement;

// good
if (condition) {
  statement;
}

no-constant-condition

해당 규칙은 상수 값의 경우 if, while 등 조건식에서 사용하는 것을 금지하는 규칙입니다.
항상 참 또는 거짓이기 때문입니다.

// bad
if (true) {}

// bad
if (false) {}

no-lonely-if

else 블록 안에 단독으로 if문이 작성되는 경우를 금지하는 규칙입니다.
그 대신 else-if를 사용하시면 됩니다.

// bad
if (condition1) {}
else {
  if (condition2) {}
}

// good
if (condition1) {}
else if (condition2) {}

no-negated-condition

부정 조건문 금지하는 규칙입니다.

// bad
if (!isFixed) {}
else {}

// good
if (isFixed) {}
else {}

no-else-return

불필요한 else 사용을 금지하는 규칙입니다.

// bad
if (condition) {
  return true;
} else {
  return false;
}

// good
if (condition) {
  return true;
}
return false;

[eslint] 불필요한, 의미없는 코드를 찾기

구하천포 — Mon, 21 Oct 2024 18:41:58 +0900

코드를 작성하면 불필요하고 의미없는 코드가 생기는 경우가 있습니다.
이때 일일이 찾기가 힘든데 eslint를 이용하여 불필요한 표현식을 찾을 수 있습니다.

{
  "rules": {
    "no-unused-expressions": "error"
  }
}

no-unused-expressions

아래 코드는 정상적으로 실행되지 않는 불필요한 코드입니다.
접근은 가능하지만 기능이 존재하지 않습니다.
위 규칙을 사용하면 아래와 같은 코드를 찾아줍니다.

const router = useRouter();
router;

1 + 2;

NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법

구하천포 — Wed, 16 Oct 2024 18:33:02 +0900

NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법.

페이지 라우터는 page 디렉터리 구조에 따라 자동으로 라우트가 생성됩니다.
프로젝트의 모든 라우트를 알아야 하는 필요성이 생겨 구현하였습니다.

코드

type Page = string;

export const getStaticProps: GetStaticProps<{ pages: Page[] }> = async () => {
  const pagesDir = path.join(process.cwd(), 'pages');
  const pages = getAllPages(pagesDir);

  return {
    props: {
      pages,
    },
  };
};

function getAllPages(dir: string, basePath: string = ''): Page[] {
  const files = fs.readdirSync(dir);
  const pages: Page[] = [];

  files.forEach((file) => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);

    if (stat.isDirectory()) {
      pages.push(...getAllPages(fullPath, `${basePath}/${file}`));
    } else {
      if (file.endsWith('.js') || file.endsWith('.tsx')) {
        let route = `${basePath}/${file.replace(/\.(js|tsx)$/, '')}`;
        if (route === '/index') route = '/';
        pages.push(route);
      }
    }
  });

  return pages;
}

.js, .tsx 확장자로 끝나는 파일만 찾아서 파일명을 뽑아내면 프로젝트에 존재하는 모든 라우트를 확인할 수 있습니다.
저는 getStaticProps를 이용하여 해결하였는데 getAllPages 함수만을 이용하셔도 가능합니다.

Next에서 특정 페이지에 사용자가 머무는 시간 측정 방법

구하천포 — Wed, 16 Oct 2024 18:30:02 +0900

구글 애널리틱스(GA)를 이용하여 해결할 수 있습니다. 그러나 자체적으로 관리하기 위해 커스텀 훅을 구현하였습니다.

학습 개념

Next.js 페이지 로드 이벤트
Next.js 페이지 이탈, 종료 이벤트
Next.js 새로고침 이벤트

usePageStayDuration

usePageStayDuration 훅은 사용자가 현재 페이지에 머무는 시간을 측정하는 기능을 제공합니다.
이 훅은 Next.js의 라우터 이벤트를 활용하여 페이지 전환 및 새로 고침 시 머무른 시간을 기록합니다.
아래에서 이 훅의 동작 방식과 구현 세부 사항을 설명하겠습니다.

코드

먼저 구현된 코드를 확인해보도록 하겠습니다.

import { useRouter } from "next/router";
import { useEffect, useRef } from "react";

const usePageStayDuration = () => {
  const router = useRouter();

  const isRefresh = useRef(false);
  const startTime = useRef(Date.now());
  const duration = useRef(0);

  useEffect(() => {
    const calculateDuration = () => {
      const endTime = Date.now();
      return (endTime - startTime.current) / 1000;
    };

    const handleRouteChangeStart = () => {
      if (isRefresh.current) return;
      duration.current += calculateDuration();
    };

    const handleRouteChangeComplete = () => {
      if (isRefresh.current) return;
      startTime.current = Date.now();
      duration.current = 0;
    };

    const handleBeforeUnload = () => {
      isRefresh.current = true;
      duration.current += calculateDuration();
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);
    window.addEventListener("beforeunload", handleBeforeUnload);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [router.events, startTime]);
};

export default usePageStayDuration;

상태 관리

isRefresh
페이지 새로 고침 여부를 확인하는 참조 변수입니다.
startTime
사용자가 페이지에 진입한 시점을 기록합니다.
duration
사용자가 페이지에 머문 총 시간을 초 단위로 누적합니다.

제가 구현한 코드에서는 렌더링과 무관하기 때문에 ref로 관리하였습니다.
만약 렌더링에 따라 동작하기 원하면 state로 변경하시면 됩니다.

이벤트 핸들러 및 함수 설명

routeChangeStart 이벤트는 route가 변경되는 시점에 발생하는 이벤트입니다.
routeChangeComplete 이벤트는 route 변경이 완료된 시점에 발생하는 이벤트입니다.
위 2가지는 Next.js에서 제공해주는 이벤트입니다.

새로고침 이벤트는 window 객체를 사용하셔야 합니다.
beforeunload 이벤트를 사용하시면 됩니다.

calculateDuration
페이지에 머무는 시간을 계산합니다. 현재 시간을 가져와서 startTime과의 차이를 계산하여 반환합니다.
handleRouteChangeStart
페이지 전환이 시작될 때 호출됩니다. 페이지 새로 고침이 아닌 경우, 현재까지의 머무른 시간을 누적합니다.
handleRouteChangeComplete
페이지 전환이 완료될 때 호출됩니다. 새로 고침이 아닌 경우, 새 페이지 진입을 위해 startTime을 현재 시간으로 업데이트하고 duration을 초기화합니다.
handleBeforeUnload
사용자가 페이지를 떠나기 전에 호출됩니다. 새로 고침 여부를 확인하고, 현재까지의 머무른 시간을 누적합니다.

결론

Next에서 제공해주는 라우터 이벤트를 활용하여 간단히 구현해보았습니다.
사용자의 행동을 분석하는데 도움이 되셨으면 좋겠습니다.

Typography 스토리 구현하기

구하천포 — Mon, 23 Sep 2024 19:30:23 +0900

Typography 스토리 구현하기

Storybook 연동이 완료되었으니, 이제 Typography 컴포넌트의 스토리를 구현해보겠습니다.
기본 Typography 스토리 하나와 모든 variant를 동시에 보여주는 스토리를 작성할 예정입니다.

메타 데이터 작성하기

argTypes를 통해 사용자가 변경할 수 있는 항목들을 정의합니다.

description: 해당 prop에 대한 간단한 설명을 추가합니다.
control: 테스트할 방법을 지정하여 사용자가 해당 prop을 쉽게 조작할 수 있게 합니다.

args를 이용하여 기본 값을 설정할 수 있습니다.
각 props의 이름과 기본값을 적어주면, 스토리에서 기본 상태를 확인할 수 있습니다.

const meta = {
  title: "Typography",
  component: Typography,
  parameters: {
    layout: "padded"
  },
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "보여지는 텍스트"
    },
    variant: {
      control: "inline-radio"
    },
    color: {
      control: "inline-radio"
    },
    noWrap: {
      control: "boolean"
    },
    align: {
      control: "inline-radio"
    },
    ...disabledProps
  },
  args: {
    children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit.",
    align: "inherit",
    variant: "body1",
    noWrap: false,
    color: "textPrimary"
  }
} satisfies Meta<typeof Typography>;

이렇게 작성하면 아래 이미지와 같은 결과가 나타납니다.

스토리 작성하기

메타 데이터 작성이 완료되면, 원하는 스토리를 구현합니다.
name을 작성하지 않으면 기본적으로 변수 이름이 사용되며, 예를 들어 Typography라는 이름으로 설정할 수 있습니다.

export const DefaultTypography: Story = {
  name: "Typography",
  args: {},
  argTypes: {}
};

이렇게 작성하면 아래 이미지와 같은 결과가 나타납니다.

모든 variant를 동시에 보여주기 위한 스토리도 작성할 수 있습니다.
이 경우, 각 variant를 따로 설정할 필요가 없으므로 해당 항목을 비활성화합니다.
그리고 render 함수를 사용해 원하는 형태로 렌더링합니다.

export const AllVariantTypography: Story = {
  args: {},
  argTypes: {
    variant: {
      table: {
        disable: true
      }
    }
  },
  render: props => {
    return (
      <div style={{ display: "flex", flexDirection: "column" }}>
        {TYPOGRAPHY_VARIANT_LIST.map(variant => (
          <Typography key={variant} {...props} variant={variant} />
        ))}
      </div>
    );
  }
};

이렇게 작성하면 아래 이미지와 같은 결과가 나타납니다.

결론

Typography의 스토리를 간단하게 작성해보았습니다.
최종적으로 1개를 테스트 할 수 있는 것과 모든 variant를 확인할 수 있는 스토리를 구현했습니다.

링크

- Typography 스토리 구현
- 해당 게시글 최종 코드

Storybook 연동하기

구하천포 — Mon, 23 Sep 2024 19:14:44 +0900

Storybook 연동하기

컴포넌트를 쉽게 확인하고 관리할 수 있는 좋은 방법은 Storybook을 사용하는 것입니다.
이번 포스트에서는 Next.js 14와 Emotion을 활용해 Storybook을 연동하는 방법을 알아보겠습니다.

Storybook 설치

먼저, Storybook을 설치합니다. 아래 명령어를 실행하세요.

npx storybook@latest init

설치가 완료되면 여러 개의 프로토타입 코드와 이미지가 생성됩니다.
이 과정이 끝나면, .storybook 폴더를 제외한 모든 파일을 삭제해 주세요.
단, stories 폴더는 남겨둡니다. 이 폴더에 앞으로 컴포넌트의 Story 파일을 작성할 예정입니다.

지금까지 코드 확인하기

Emotion 연동

프로젝트에서 Emotion을 사용 중이라면, Storybook에 Emotion의 ThemeProvider를 연동해야 합니다.
이를 위해 아래 명령어를 실행해 필요한 패키지를 설치합니다.

npx storybook@latest add @storybook/addon-themes

이후, preview.ts 파일에 GlobalStyles 컴포넌트가 생성되며, 이에 대한 작업을 진행해야 합니다.

해야 할 작업 목록

preview.ts 파일에서 아래 작업을 진행해야 합니다.

파일 확장자를 .ts에서 .tsx로 변경합니다.
LIGHT 및 DARK theme를 연동합니다.
GlobalStyles로 글로벌 CSS 스타일을 적용합니다.

React 컴포넌트가 포함된 파일은 .tsx 확장자를 사용하는 것이 권장되므로 확장자 변경 작업이 필요합니다.
theme을 연동하여야 나중에 storybook에서도 편하게 light, dark 모드 테스트가 가능합니다.
storybook도 독립된 실행환경이기 때문에 global css를 설정해주어야 합니다.

preview.tsx의 최종 코드입니다.

import { css, Global, ThemeProvider } from "@emotion/react";
import { withThemeFromJSXProvider } from "@storybook/addon-themes";
import type { Preview } from "@storybook/react";
import React from "react";
import { DARK_THEME, LIGHT_THEME } from "../src/ThemeContext/theme";

const GlobalStyles = () => (
  <Global
    styles={css`
      /* css code */
    `}
  />
);

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i
      }
    }
  },

  decorators: [
    withThemeFromJSXProvider({
      themes: {
        light: LIGHT_THEME,
        dark: DARK_THEME
      },
      defaultTheme: "light",
      Provider: ThemeProvider,
      GlobalStyles
    })
  ]
};

export default preview;

지금까지 코드 확인하기

참고자료

Emotion 설치 및 연동 가이드

링크

Typography 컴포넌트 구현하기

구하천포 — Mon, 23 Sep 2024 18:59:28 +0900

Typography 컴포넌트 구현하기

Typography 컴포넌트는 텍스트를 보여주기 위한 컴포넌트입니다.
일반적으로 HTML에서 텍스트를 표시할 때는 span 또는 p 태그를 사용합니다.
제가 구현한 Typography 컴포넌트는 기본적으로 span 태그를 사용하지만, 사용자가 필요에 따라 p 태그로 변경할 수 있도록 유연하게 설계되었습니다.

Typography 구현하기

props

interface TypographyProps {
  color?: TypographyColor;
  align?: "inherit" | "center" | "right" | "left";
  variant?: TypographyVariant;
  noWrap?: boolean;
  component?: ElementType;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}

모든 props를 일일이 작성할 필요는 없습니다.
실제로 사용할 속성만 정의하여 관리의 복잡성을 줄이는 것이 더 효율적입니다.
또한, 추가적인 CSS 작업이 필요한 경우를 대비해 style props도 함께 제공하여 유연한 스타일링이 가능하도록 구현했습니다.

색상, Variant 처리

const getColor = (theme: Theme, color?: TypographyColor) => {
  if (!color) return undefined;
  if (color === "textDisabled") {
    return theme.palette.text.disabled;
  }
  if (color === "textPrimary") {
    return theme.palette.text.primary;
  }
  if (color === "textSecondary") {
    return theme.palette.text.secondary;
  }
  return theme.palette[color].main;
};

const getVariant = (theme: Theme, variant?: TypographyVariant) => {
  if (!variant) return {};
  return theme.typography[variant];
};

위 코드를 보면 theme의 장점을 확인할 수 있습니다.
미리 정의해둔 theme을 사용하여 설정된 값을 손쉽게 적용할 수 있어, 일관성 있는 스타일링과 유지 보수가 용이합니다.

Typography 컴포넌트

const StyledTypography = styled("span")<TypographyProps>(
  ({
    theme,
    color: _color,
    variant: _variant,
    align: textAlign,
    noWrap,
    style
  }) => {
    const color = getColor(theme, _color);
    const variant = getVariant(theme, _variant);
    return {
      textAlign,
      whiteSpace: noWrap ? "nowrap" : "normal",
      color,
      ...variant,
      ...style
    };
  }
);

기본적으로 span 엘리먼트를 사용하고 있으며, color와 variant 값에 따라 적절한 CSS가 적용됩니다.
이를 통해 다양한 스타일을 유연하게 설정할 수 있습니다.

const Typography = forwardRef<HTMLElement, TypographyProps>(function Typography(
  {
    children,
    color = "textPrimary",
    align = "inherit",
    variant = "body1",
    noWrap = false,
    component: Component = "span",
    ...props
  }: TypographyProps,
  ref: Ref<HTMLElement>
) {
  return (
    <StyledTypography
      as={Component}
      color={color}
      align={align}
      noWrap={noWrap}
      variant={variant}
      ref={ref}
      {...props}
    >
      {children}
    </StyledTypography>
  );
});

as props를 사용하면 기본적으로 span이 아닌, 원하는 태그로 컴포넌트를 변경할 수 있습니다.
예를 들어, as="p" 값을 주면 p 태그로 렌더링됩니다.

결론

이번에는 간단한 Typography 컴포넌트를 살펴보았습니다.
다음 게시글에서는 이 Typography 컴포넌트를 더 직관적으로 확인할 수 있도록 Storybook을 셋팅하는 방법을 알아보겠습니다.

링크

- Typography 구현
- 해당 게시글 최종 코드

Theme 타입, 값 설정 및 적용

구하천포 — Thu, 19 Sep 2024 19:54:55 +0900

프로젝트 내에서 색상, 그림자, break points 등 공통된 UI를 가지기 위해 theme을 사용합니다.
해당 게시글에서는 theme 타입, 값을 생성해보도록 하겠습니다.
그리고 해당 값을 ThemeProvider에 주입하여 프로젝트 어디에서든지 사용할 수 있도록 하겠습니다.

간단한 내용이라 코드에 대한 설명보다는 왜 해당 작업을 하였는지 설명을 작성하였습니다.
코드는 github 링크를 통해 확인할 수 있도록 하였습니다.

Theme 타입, 값 설정

전반적인 색상을 위한 palette
글자를 위한 typography
media query를 위한 break points
내부적으로 색상 alias를 위한 color
ltr, rtl direction을 위한 direction
light mode, dark mode를 위한 mode

간단하게 위 값만 해보도록 하겠습니다.
위 값들은 mui 홈페이지에 있는 값을 참고하여 작성하였습니다.
그리고 아직 dark mode의 값을 추가하지 않았습니다. (light와 동일)

위 값들은 그냥 설정만 해주는 것이기 때문에 아래 palette, typography, 나머지 theme 링크를 참고하시길 바랍니다.
그 중 나머지 theme 링크에 아래 코드가 있습니다.

declare module "@emotion/react" {
  export interface Theme {
    mode: Mode;
    breakpoints: BreakPoints;
    direction: Direction;
    palette: Palette;
    typography: Typography;
  }
}

위 코드는 emotion 패키지에 내가 설정한 theme 타입을 알려주는 코드입니다.
저는 index.ts파일에 같이 작성해 주었지만 emotion.d.ts와 같은 파일을 만들어서 따로 작성해주셔도 됩니다.

ThemeProvider 설정

위에서 작업한 값을 전역적으로 사용하기 위해서는 ThemeContext, ThemeProvider 작업을 해주어야 합니다.
아래 ThemeContext, ThemeProvider 추가 링크를 확인하시면 됩니다.

링크

- palette
- typography
- 나머지 theme
- ThemeContext 추가
- Global font 설정
- ThemeProvider 추가
- 해당 게시글 최종 코드

참고문헌

- mui theme

React(Next) + Emotion로 MUI 따라 만들기

구하천포 — Thu, 19 Sep 2024 19:14:08 +0900

React로 개발할 때 UI 라이브러리를 사용하면 빠르게 구현할 수 있지만, 커스터마이징이 복잡하고 시간이 많이 소요되는 단점이 있습니다.
이를 해결하기 위한 headless 컴포넌트 라이브러리도 있지만, 인력과 시간이 충분하다면 직접 구현하는 것도 좋은 대안이 될 수 있습니다.
사이드 프로젝트로 도전해 보는 것도 의미 있을 것 같아 시작하게 되었습니다.

개발 환경

개발 환경은 NextJS 14 + Emotion입니다.
CRA 대신 Next 14를 사용하고 싶었고, 아직 SSR에서 정상 동작하지 않습니다.
따라서 "use client"를 추가해야 하지만, 익숙한 Emotion을 계속 사용하기로 했습니다.

NextJS14 + Emotion 개발환경 셋팅하기

NextJS14와 emotion을 이용하여 개발환경을 셋팅해보겠습니다.

아래 명령어를 이용하여 nextjs 14 설치하시면 됩니다. npx create-next-app@latest
참고로 위 명령어는 latest 버전을 설치하는 것이기 때문에 버전이 다를 수 있습니다.
제가 사용한 버전은 14.2.9입니다.

아래 명령어를 이용하여 emotion 관련 패키지를 설치해줍니다.
yarn add @emotion/react @emotion/styled

위 과정만 진행하시면 개발환경은 셋팅은 끝났습니다.
다음 게시글에서 ThemeContext, ThemeProvider 설정하는 방법을 알아보도록 하겠습니다.

링크

- nextjs14 설치 및 프로젝트 정리
- emotion 패키지 추가

개발 순서

개발 순서는 구현하고 싶은 컴포넌트를 기준으로 진행할 것입니다.

react native + expo를 이용한 webview 앱 개발환경

구하천포 — Thu, 19 Sep 2024 19:06:13 +0900

react native + expo를 이용한 webview 앱 개발환경

미래의 제가 보기 위해 작성하는 것이므로 간단하게 작성하였습니다.

사전 준비

expo 회원가입 - 회원가입 하러가기

명령어

여기서부터는 명령어 나열입니다.

- create-expo-app 명령어를 이용한 프로젝트 설치
npx create-expo-app my-app

- eas cli 설치
npm install -g eas-cli

- eas login
eas login

- eas build:configure eas build:configure
위 작업을 완료하면 eas.json 파일이 생성됩니다.

- 해당 링크를 클릭하여 eas.json에 적혀있는 코드를 복붙
기존 eas.json 파일의 build를 교체해주시면 됩니다.

- app 빌드 명령어
eas build -p android --profile preview
해당 명령어를 입력하면 앱을 설치할 수 있는 링크가 생성됩니다.
핸드폰에서 링크를 클릭하면 설치해주시면 앱이 설치됩니다.

- react native webview 설치
npx expo install react-native-webview

참고문헌

expo 홈페이지

[React] Context API vs Zustand 렌더링 비교

구하천포 — Tue, 10 Sep 2024 19:19:26 +0900

Context API vs Zustand 렌더링 비교

React에서 상태 관리를 위한 라이브러리는 다양합니다.
내장된 Context API부터 Redux, MobX, Recoil, Zustand 등 여러 가지가 있습니다.
각 라이브러리의 장단점은 사용자에 따라 다르게 느껴질 수 있지만, 이번 글에서는 Zustand를 사용한 경험을 바탕으로 렌더링 최적화에 대해 살펴보려고 합니다.

많은 글에서 Zustand와 같은 라이브러리를 사용하면 Context API에 비해 렌더링이 더 최적화된다고 언급됩니다.
그러나 실제로 이를 테스트해본 글은 찾기 어렵습니다.
이번 글에서는 실제로 렌더링이 어떻게 최적화되는지 직접 확인해보겠습니다.

결과

빠르게 결과부터 확인해봅시다.

• Context API - 코드
• Zustand 실패 - 코드
• Zustand 성공 - 코드

결론은 Zustand를 개발자가 의도한 대로 잘 사용하면 렌더링 최적화가 가능하다는 것입니다.

아래 이미지를 참고하세요.

Context API와 Zustand를 제대로 사용하지 않으면, 상태와 상관없이 모든 컴포넌트가 다시 렌더링됩니다.
이는 Zustand를 최적화하지 못했을 때 발생하는 현상입니다.

왜 그런지 아래 코드를 살펴봅시다.

const { age, ageIncrement, ageDecrement } = useStore();

이 코드는 store에서 전체 상태 값을 반환한 후 구조분해 할당을 통해 사용하는 방식입니다.
여기서 문제는 전체 상태 값을 반환하기 때문에, 상태 중 하나라도 변경되면 모든 상태가 변경된 것으로 인식하고 컴포넌트를 다시 렌더링하게 됩니다.

이는 상태를 담고 있는 객체가 변경되었으니 React가 렌더링해야 한다고 판단하는 것입니다.
이 문제를 해결하려면 selector 패턴을 이용해 원하는 상태만 선택해야 합니다.

const age = useStore(state => state.age);
const ageIncrement = useStore(state => state.ageIncrement);
const ageDecrement = useStore(state => state.ageDecrement);

위 코드처럼 필요한 상태만 선택해 가져오면 불필요한 렌더링을 막을 수 있습니다.
아래 이미지를 보면, 상태가 변경되지 않는 한 렌더링이 발생하지 않는 것을 확인할 수 있습니다.

결론

Zustand를 사용할 때는 구조분해 할당을 피하고, 선택적 상태 구독을 통해 렌더링을 최적화할 수 있습니다.
이를 통해 Context API보다 효율적인 상태 관리를 할 수 있습니다.

github action을 이용하여 PR시 효율적으로 tsc, eslint 검사하기

구하천포 — Tue, 3 Sep 2024 20:10:11 +0900

github action을 이용하여 PR시 효율적으로 tsc, eslint 검사하기

github action을 이용하여 PR시 merge branch 코드를 검사할 필요가 있습니다.

하고 싶은 것

PR 시 merge branch의 코드가 정상적인지 검사할 필요가 있음.
monorepo 프로젝트이기 때문에 변경된 모든 프로젝트를 검사해야함.

기존 해결 방법 및 문제점 [1]

커밋 메시지 컨벤션으로 커밋 메시지에 변경된 파일의 프로젝트 명을 작성하게 하였습니다.
그럼 해당 커밋에서 어떠한 프로젝트의 파일이 변경되었는지 파악할 수 있습니다.
해당 정보를 이용하여 변경된 파일의 프로젝트를 tsc, eslint를 수행하여 문제를 해결하였습니다.

그러나 위 방법은 너무 오랜 시간이 소요된다는 문제가 있었습니다.
만약 커밋을 3개하는 경우 프로젝트 tsc, eslint를 총 3번 하는 것이기 때문에 오랜 시간이 소요되었습니다.
또한 해당 작업을 수행할 때 동안은 코드 수정이 불가능하다는 단점도 있었습니다.

위 작업을 PR 요청 보낼 때, 1번만 수행하면 되겠다는 생각이 들어 github action으로 해결해보았습니다.

기존 해결 방법 및 문제점 [2]

첫번째는 커밋 메시지마다 검사를 하였다면 이제 PR 요청 시 한번만 tsc, eslint 작업을 하는 것입니다.
동일하게 변경된 프로젝트만 tsc, eslint를 작업해야 하기 때문에 PR 레이블에 모노레포에 있는 프로젝트 이름을 모두 적어주었습니다.
PR 문서가 생성, 수정 등 이벤트가 들어올 때마다 레이블을 확인하여 해당 프로젝트에 대해 tsc, eslint가 수행되었습니다.

위 방식은 나쁘지 않았습니다. 그러나 PR 레이블에 모든 프로젝트를 적어주어야 한다는 점이 불편하였습니다.
또한, 개발자가 변경된 프로젝트의 레이블 이름을 선택하지 않거나 잘못 선택한 경우 제대로 동작하지 않았습니다.
마지막으로 eslint의 경우 경우 변경된 파일만 수행하면 되는데 해당 프로젝트를 모두 수행하여 시간이 오래 걸리는 점이 문제가 되었습니다.

최종 해결 방법 [3]

위 방식과 동일하게 github action으로 문제를 해결하였습니다.
그러나 이번에는 목표를 정하고 접근을 하였습니다.

목표

레이블에 있는 프로젝트 명 삭제 및 변경된 파일의 프로젝트 명 가져오기.
변경된 파일만 eslint 수행

위 2가지 목표를 달성하는 것은 생각보다 간단하였습니다.

레이블에 있는 프로젝트 명 삭제 및 변경된 파일의 프로젝트 명 가져오기

불편하게 매번 변경된 프로젝트를 레이블로 선택해야 하는 점을 개선하고 싶었습니다.
tj-actions/changed-files을 이용하면 매우 쉽게 변경된 파일명을 가져올 수 있습니다.
추출된 파일명을 분석하여 변경된 프로젝트 이름을 확인할 수 있었습니다. 따라서 변경된 프로젝트만 tsc를 수행할 수 있었습니다.

- name: Check for changed ts files
  if: steps.changed-files.outputs.any_changed == 'true'
  env:
    TS_CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
  run: |
    for file in ${TS_CHANGED_FILES}; do
      echo "$file was changed"
    done

- name: Identify packages with changed files
  run: |
    PACKAGES=()
    for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
      if [[ ! " ${PACKAGES[@]} " =~ " main " && "$file" == packages/main/* ]]; then
        PACKAGES+=("main")
      elif [[ ! " ${PACKAGES[@]} " =~ " sub1 " && "$file" == packages/sub1/* ]]; then
        PACKAGES+=("sub1")
      elif [[ ! " ${PACKAGES[@]} " =~ " sub2 " && "$file" == packages/sub2/* ]]; then
        PACKAGES+=("sub2")
      fi
      if [[ ${#PACKAGES[@]} -eq 3 ]]; then
        break
      fi
    done
    echo "UNIQUE_PACKAGES=${PACKAGES[@]}" >> $GITHUB_ENV

- name: Run tsc
  id: tsc-check
  run: |
    IFS=' ' read -r -a PACKAGES <<< "${{ env.UNIQUE_PACKAGES }}"
    for package in "${PACKAGES[@]}"; do
      echo "Type-checking package: $package"
      OUTPUT=$(yarn "$package" tsc 2>&1)
    done

Identify packages with changed files를 보시면 모노레포 프로젝트 이름이 if문에 있는 것을 확인할 수 있습니다.
프로젝트 이름을 if문에 작성해주시면 됩니다.
PACKAGES 크기가 프로젝트 개수만큼 되었으면 강제로 for문을 종료하였습니다.

변경된 파일만 eslint 수행

eslint가 생각보다 오랜 시간이 소요됩니다.
따라서 변경된 파일에 대해서만 eslint를 수행하고 싶었습니다.
tj-actions/eslint-changed-files를 이용하면 간단하게 변경된 파일만 eslint 작업을 할 수 있습니다.
그러나 Next14로 테스트 하고 있었는데 eslint 9 버전으로 계속 에러가 발생하였습니다.
따라서 Next 프로젝트를 생성할 때, eslint 버전이 8로 설정되어 있는 것을 확인하고 eslint 8을 사용하는 버전으로 해당 작업을 수행하였습니다.

- name: Run eslint on changed files
  uses: tj-actions/eslint-changed-files@v23.2.0
  with:
    file_extensions: |
      **/*.ts
      **/*.tsx
    extra_args: "--max-warnings=0"
    token: ${{ secrets.ESLINT_TOKEN }}

file_extensions을 이용하여 변경된 .ts, .tsx 파일만 확인하였습니다.
댓글이 달리기 위해서는 token이 필요한 것 같아 추가해주었습니다.

위 2가지 방법으로 불편했던 점을 모두 개선하였습니다.

[HTML, CSS] flex에서 margin 이용하여 할 수 있는 것

구하천포 — Thu, 22 Aug 2024 19:40:02 +0900

[HTML, CSS] flex에서 margin 이용하여 할 수 있는 것

제목을 무엇으로 해야할 지 몰라서 위처럼 지었습니다.

.container {
    display: flex;
    gap: 4px
}

.item {
    width: 100px;
    background-color: lightblue;
    padding: 8px;
}

<div class="container">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
</div>

위와 같은 구조가 있다고 해봅시다.

여기서 아래 이미지를 구현하려면 어떻게 할 수 있을까요?
아래 이미지는 생각보다 많이 사용하는 레이아웃 구조입니다.

div로 처리

처음 생각드는 방법은 item1, 2를 div로 한번 더 감싸았을 것 같습니다.

.container {
    display: flex;
    gap: 4px;
    justify-content: space-between;
}

.wrap {
    display: flex;
    gap: 4px;
}

.item {
    width: 100px;
    background-color: lightblue;
    padding: 8px;
}

<div class="container">
    <div class="wrap">
        <div class="item">Item1</div>
        <div class="item">Item2</div>
    </div>
    <div class="item">Item3</div>
</div>

위처럼 처리할 수 있습니다.
그러나 이렇게 하면 추가해야하는 코드가 많이 있습니다.
이건 너무 불편한 것 같습니다.

margin-left 이용

margin-left를 이용하시면 간단하게 할 수 있습니다.

.container {
    display: flex;
    gap: 4px
}

.item {
    width: 100px;
    background-color: lightblue;
    padding: 8px;
}

.ml-auto {
    margin-left: auto
}

<div class="container">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item ml-auto">Item3</div>
</div>

위처럼 margin-left: auto 를 이용하면 간단하게 처리할 수 있습니다.

위 방법으로 마크업 구조를 더 깔끔하게 작성할 수 있습니다.

글로벌 웹 서비스를 다시 만든다면 실수하지 않을 것들

구하천포 — Thu, 22 Aug 2024 19:23:02 +0900

글로벌 웹 서비스를 다시 만든다면 실수하지 않을 것들

다국가를 지원하는 글로벌 웹 서비스를 구현하면 생각하지 못 한 많은 문제를 겪을 수 있습니다.
아래 게시글은 만약 제가 처음부터 다시 개발한다면 어떻게 할까? 라는 생각을 가지고 작성하였습니다.

하나의 국가만 지원한다면 상관없지만 다국가를 지원하는 경우 한번 읽어보시는 것도 좋을 것 같습니다.
제가 정답이라는 것은 아니고 이러한 방법도 있다 라는 생각으로 읽어주시면 감사하겠습니다.

다국어 처리

페이지, 기능 등 여러 단위로 다국어 파일을 관리할 수 있습니다.
위처럼 진행하면 처음에 구현할 떄는 문제가 없을 수 있습니다.
그러나 점점 서비스가 커지고 페이지, 기능이 많아지면 동일한 뜻을 가진 로케일 키가 기하급수적으로 증가합니다.
따라서 제가 생각할 때는 동일한 뜻을 가진 단어가 있으면 하나의 로케일로 관리하는 것이 좋아 보입니다.

이유는 페이지, 기능 별로 파일을 분리하여 관리하였을 때 VOC에 대응하기 힘들었습니다.
예를들어 '배'를 '사과'로 변경해주세요. 라고 요청이 들어왔다고 가정해봅시다.
만약 페이지, 기능 별로 파일을 분리하여 관리하였다면 각 파일마다 수정을 해주어야 할 것입니다.
그러나 하나의 로케일로 관리를 하였다면 '배'만 '사과'로 변경하면 됩니다.

더 자세히 확인하고 싶으시면 아래 링크를 확인해보세요.

• 다국어 관리 방법

문자열 비교는 정규화 진행 후 하자

문자열 비교는 정규화를 진행 후 하는 것이 좋습니다.
실제로 사용자가 보는 텍스트는 동일하지만 컴퓨터에 다루는 값이 다를 수 있기 때문입니다.

ũ, ũ 해당 2개의 문자는 같아 보이지만 실제로는 다른 값입니다.
위와 같은 경우를 방지하기 위해 정규화를 진행하여 문자열 비교를 해야합니다.

더 자세히 확인하고 싶으시면 아래 링크를 확인해보세요.

• 베트남 문자열 비교하기

Date 객체 다루기 (+ 썸머타임)

가장 힘들었던 Date 객체를 다루는 내용입니다.
도움이 되었으면 좋겠습니다.

썸머타임

처음 배포했을 때는 썸머타임에 대한 문제가 없었습니다.
생각도 못 했지만 다행히 국가들이 썸머타임을 적용하지 않았기 때문입니다.

그러나 이집트에서 다시 썸머타임을 적용하고 있어 이때부터 문제가 발생하였습니다.
개발 당시 썸머타임을 생각하지 못 했기 때문에 하루가 24시간이라고 생각하고 구현했던 것들이 제대로 동작하지 않았습니다.
썸머타임을 적용하는 시점에는 23시간이기 때문입니다.

대표적인 예시로 주 단위 캘린더를 구현할 때 문제가 발생하였습니다.
주 중 썸머타임 시작 날짜의 시작 시간이 01시이기 때문에 00시의 자리에 01시가 존재하는 문제가 발생하였습니다.
저처럼 위와 같은 문제를 겪지 않으시길 바랍니다.

그리고 대부분 Date 객체를 그대로 사용하는 것이 아닌 라이브러리를 사용하실 것으로 예상됩니다.
해당 라이브러리에서 썸머타임을 제공하는 지 꼭 확인하시는 것을 추천 드립니다.

제가 사용하였던 moment, dayjs는 모두 지원하고 있습니다.

타임존

시간은 고유한 값이기 떄문에 어떠한 타임존에서 사용하더라도 문제가 없습니다.
해당 타임존의 시간으로 변경되어 보여지기 때문입니다.

해당 부분은 하루 기준으로 특정 작업을 할 때 문제가 많이 생겼습니다.
예를들어 하루에 1개만 생성이 가능한 기능이 있다.
위와 같은 경우는 타임존을 변경하게 되면 시작 날짜가 달라지기 때문에 하루를 계산하는 기준이 달라집니다.
시간은 절대적이지만 한국과 미국의 시작 시간은 상대적으로 다르기 때문입니다.

제 생각에는 위와 같은 기능이 없는 게 최고입니다...
그러나 어쩔 수 없이 위와 같은 기능이 있는 경우 타임존을 명확하게 지정하는 것이 좋아보입니다.

가벼운 기능인 경우 프론트에서 서버로 타임존을 넘겨주어 서버에서 해당 타임존을 설정해서 계산하면 됩니다.
그러나 꼭 무조건 1개여야 한다. 이러한 경우는 해당 서비스의 타임존을 명확하게 하나로 지정하는 것이 좋아보입니다.

RTL은 적당히 지원하자

이집트와 같이 LTR이 아니라 RTL인 국가를 처리해야 하는 경우가 있습니다.
그러나 RTL을 완벽하게 처리해주기는 쉽지 않습니다.

대표적인 예시가 50%, %50 이런 것들입니다.
문자와 단위, 숫자 이런 것들이 섞여버리게 되면 단순히 *direction: 'rtl'*로는 해결되지 않습니다.
일일이 처리를 해주어야 합니다.

그러나 위와 같은 것들은 일단 배포하고 나중에 신경써도 되는 내용인 것 같습니다.
추후 알게된 사실인데 대부분의 웹 사이트들이 LTR로 되어 있기 때문에 RTL을 사용하는 국가도 큰 불편함 없이 사용한다고 합니다.
실제로 이집트에서 운영되고 있는 사이트만 보아도 모든 사이트들이 완벽하게 지원하고 있지는 않습니다.

따라서 나중에 VOC가 많이 접수되면 고도화 작업을 하는 것이 좋아보입니다.
추가로 React pdf 라이브러리 중 rtl을 제대로 지원해주는 것은 없는 것 같습니다... ㅠㅠ

동아라비아, 서아라비아 숫자

우리가 아는 숫자는 0, 1, ..., 9 입니다.
혹시 ٠,١,٢,٣,٤,٥,٦,٧,٨,٩ 를 알고 계신가요?

우리가 알고 있는 0~9는 서아라비아 숫자입니다.
위에 적혀 있는 문자로 되어 있는 것은 동아라비아 숫자 중 아랍 문자입니다.

그러나 많이 사용되는 서아라비아 숫자가 사용하기 편하겠죠?
따라서 가장 베스트는 해당 국가 법인과 이야기 하여 서아라비아 숫자만 사용하는 것입니다.
만약 이것이 안된다면 동아라비아 숫자를 서아라비아 숫자로 변환하는 함수를 구현하여 사용하셔야 합니다.

• 서아라비아, 동아라비아 숫자 변환하기

[dayjs] DayJS를 이용하여 날짜 다루기

구하천포 — Thu, 22 Aug 2024 19:18:22 +0900

[dayjs] DayJS를 이용하여 날짜 다루기

날짜 라이브러리 중에서 아직까지 moment의 다운로드 수가 상당히 높습니다.
그러나 그 뒤를 빠르게 따라오는 라이브러리가 dayjs 입니다.
사용방법도 매우 유사합니다. 간단하고 빠르게 한번 알아보도록 하겠습니다.
설명보다는 코드 위주로 작성해두겠습니다.

dayjs 라이브러리 설치하는 것은 패스하도록 하겠습니다.

dayjs 년월일 시분초 값 가져오기

각 함수를 이용하여 가져오기

해당 방식은 년, 월, 일, 시, 분, 초 각각의 값이 필요할 때 사용하면 좋습니다.

const dayjs = require("dayjs");

const dj = dayjs();

const year = dj.year();
const month = dj.month();
const date = dj.date();

const hour = dj.hour();
const minute = dj.minute();
const second = dj.second();

console.log(`${year}년 ${month}월 ${date}일 ${hour}:${minute}:${second}`);

위에서 확인할 수 있듯이 해당하는 함수를 사용하면 쉽게 값을 가져올 수 있습니다.

format 함수를 이용하여 출력하기

각각의 값이 궁금한게 아니라 년, 월, 일, 시, 분, 초를 표기하고 싶은 경우는 어떨까요?
위와 같은 경우는 굳이 각각의 함수를 호출할 필요가 없습니다.
format 함수를 이용하여 간단하게 사용할 수 있습니다.

const dayjs = require("dayjs");

const dj = dayjs();

console.log(dj.format("YYYY년 MM월 DD일 HH:mm:ss"));

위처럼 format 함수를 이용하면 간단하게 확인할 수 있습니다.
1번 방식과 약간의 차이점은 존재합니다.
1번 결과와 다르게 2번 결과에서는 자리 수에 맞게 앞에 0을 붙여줍니다.
(format에서 2자리로 명시해주어서 그렇습니다.)
1번에서도 동일하게 동작하고 싶으면 padStart 함수를 사용하시면 됩니다.

format 함수 알아보기

위에서도 살펴보았듯이 format 함수를 사용하면 쉽게 날짜를 출력할 수 있습니다.
format 함수를 알아보도록 하겠습니다.

년월일 시분초 AM/PM 표시

const dayjs = require("dayjs");

const dj = dayjs();

console.log(`년 : ${dj.format("YYYY")}`);
console.log(`월 : ${dj.format("MM")}`);
console.log(`일 : ${dj.format("DD")}`);
console.log(`시 : ${dj.format("HH")} - 24시긴 기준`);
console.log(`시 : ${dj.format("hh")} - 12시간 기준`);
console.log(`분 : ${dj.format("mm")}`);
console.log(`초 : ${dj.format("ss")}`);
console.log(`AM/PM : ${dj.format("A")} - 대문자`);
console.log(`am/pm : ${dj.format("a")} - 소문자`);

약간의 설명을 추가하자면 아래와 같습니다.

HH : 24시간 기준 hour
hh : 12시간 기준 hour
A : 대문자 AM/PM
a : 소문자 AM/PM

요일, 날짜 표시하기

월요일, 일요일 등 날짜를 표시하고 싶은 경우가 있습니다.
아래 코드를 확인해봅시다.

const dayjs = require("dayjs");

const dj = dayjs();

console.log(`${dj.format("ddd")}`);
console.log(`${dj.format("dddd")}`);

약간의 설명을 추가하자면 아래와 같습니다.

ddd : 축약형 요일
dddd : 전체 요일

기타 token

위 token들은 공식 홈페이지에서 확인하실 수 있습니다.

• Format
• AdvancedFormat

대부분 Format으로 해결하실 수 있을 것이라고 생각됩니다.
그러나 좀 더 상세히 다루기 위할 땐 AdvancedFormat을 확인하여 사용하시면 됩니다.

AdvancedFormat을 사용하실 땐 advancedFormat를 꼭 extend 해주셔야 합니다.

var advancedFormat = require("dayjs/plugin/advancedFormat");
// import advancedFormat from 'dayjs/plugin/advancedFormat' // ES 2015

dayjs.extend(advancedFormat);

Localized format

LocalizedFormat를 사용하실 땐 localizedFormat를 꼭 extend 해주셔야 합니다.

var localizedFormat = require("dayjs/plugin/localizedFormat");
// import localizedFormat from 'dayjs/plugin/localizedFormat' // ES 2015

dayjs.extend(localizedFormat);

dayjs().format("L LT");

해당 지역에 맞게 format을 해주는 기능입니다.
예를들어 format 함수에 L을 넣으면 해당 국가에 맞게 년월일이 표시됩니다.
아래 코드를 확인해봅시다.

// default
const dayjs = require("dayjs");
const localizedFormat = require("dayjs/plugin/localizedFormat");
dayjs.extend(localizedFormat);

const dj = dayjs();

console.log(`${dj.format("L")}`);

아직 학습하지는 않았지만 아래 코드는 한국어로 변경해둔 상태입니다.

// 한국어
const dayjs = require("dayjs");
const updateLocale = require("dayjs/plugin/updateLocale");
require("dayjs/locale/ko");

const localizedFormat = require("dayjs/plugin/localizedFormat");
dayjs.extend(localizedFormat);
dayjs.extend(updateLocale);
dayjs.locale("ko");

const dj = dayjs();

console.log(`${dj.format("L")}`);

위 결과를 보시면 알 수 있듯이 각 지역화에 따라 년월일 표기법이 다르게 나타납니다.
따라서 다국가 처리를 위해서는 해당 기능 사용하시면 간단하게 처리하실 수 있습니다.

위에서는 간단하게 L만 확인해보았습니다.
더 다양한 localized format을 확인하고 싶으시면 아래 링크를 확인해보세요.

• localized-formats

언어 변경하기

바로 위에서 한국어로 변경을 하였습니다.
한국어 외에도 많은 언어로 변경할 수 있는데 알아보도록 하겠습니다.

const dayjs = require("dayjs");
const updateLocale = require("dayjs/plugin/updateLocale");
require("dayjs/locale/ko"); // 원하는 언어
dayjs.extend(updateLocale);
dayjs.locale("ko"); // 언어 설정

const dj = dayjs();

console.log(`${dj.format("dddd")}`);

코드에 주석처리를 해두었습니다.
require로 원하는 locale을 가져온 후 dayjs.locale 함수로 설정하시고, updateLocale을 extend 해주시면 됩니다.

const dayjs = require("dayjs");
const updateLocale = require("dayjs/plugin/updateLocale");
require("dayjs/locale/ja");
dayjs.extend(updateLocale);
dayjs.locale("ja");

const dj = dayjs();

console.log(`${dj.format("dddd")}`);

일본어로 변경 해보았는데 잘됩니다.
위처럼 간단하게 언어 변경하실 수 있습니다.

변경 가능한 언어 확인하는 방법

언어 변경하는 방법을 알았으니 어떤 언어로 변경이 가능한지만 알면됩니다.
node_modules>dayjs>locale> 경로에 들어가셔서 확인하시면 됩니다.

결과 이미지 - 라스트

dayjs 날짜 조작하기

날짜를 +1 day, -1 day, 주의 시작과 끝 등 조작하고 싶은 경우가 있습니다.
이러한 것도 간단하게 사용할 수 있습니다.

특정 기준에서 더하기, 빼기

년,월,일,시,분,초 등 특정 unit으로 시간을 더하고 뺼 수 있습니다.
add, subtract 함수를 이용하시면 됩니다.

const FORMAT = "YYYY MM DD, HH:mm:ss";

const dayjs = require("dayjs");
const dj = dayjs();

console.log(`현재 시간 : ${dj.format(FORMAT)}`);
console.log();
console.log(`1년 더하기 : ${dj.add(1, "year").format(FORMAT)}`);
console.log(`1년 빼기 : ${dj.subtract(1, "year").format(FORMAT)}`);
console.log();
console.log(`1달 더하기 : ${dj.add(1, "month").format(FORMAT)}`);
console.log(`1달 빼기 : ${dj.subtract(1, "month").format(FORMAT)}`);
console.log();
console.log(`1일 더하기 : ${dj.add(1, "date").format(FORMAT)}`);
console.log(`1일 빼기 : ${dj.subtract(1, "date").format(FORMAT)}`);
console.log();
console.log(`1시간 더하기 : ${dj.add(1, "hour").format(FORMAT)}`);
console.log(`1시간 빼기 : ${dj.subtract(1, "hour").format(FORMAT)}`);
console.log();
console.log(`1분 더하기 : ${dj.add(1, "minute").format(FORMAT)}`);
console.log(`1분 빼기 : ${dj.subtract(1, "minute").format(FORMAT)}`);
console.log();
console.log(`1초 더하기 : ${dj.add(1, "second").format(FORMAT)}`);
console.log(`1초 빼기 : ${dj.subtract(1, "second").format(FORMAT)}`);

만약 여러 작업을 하고 싶으면 이어서(chaining) 작성하시면 됩니다.

const FORMAT = "YYYY MM DD, HH:mm:ss";

const dayjs = require("dayjs");
const dj = dayjs();

console.log(`현재 시간 : ${dj.format(FORMAT)}`);
console.log();
console.log(
  `+1년, -1달, +3시간 : ${dj
    .add(1, "year")
    .subtract(-1, "month")
    .add(3, "hour")
    .format(FORMAT)}`
);

특정 기준으로 시작과 끝 계산

년/월/주/하루 등을 기준으로 시작과 끝을 계산해야하는 경우가 있습니다.
이럴 땐 startOf, endOf 함수를 사용하시면 됩니다.

const FORMAT = "YYYY MM DD, HH:mm:ss";

const dayjs = require("dayjs");
const dj = dayjs();

console.log(`현재 시간 : ${dj.format(FORMAT)}`);
console.log();
console.log(`년도 시작 : ${dj.startOf("year").format(FORMAT)}`);
console.log(`년도 끝 : ${dj.endOf("year").format(FORMAT)}`);
console.log();
console.log(`월 시작 : ${dj.startOf("month").format(FORMAT)}`);
console.log(`월 끝 : ${dj.endOf("month").format(FORMAT)}`);
console.log();
console.log(`주 시작 : ${dj.startOf("week").format(FORMAT)}`);
console.log(`주 끝 : ${dj.endOf("week").format(FORMAT)}`);
console.log();
console.log(`하루 시작 : ${dj.startOf("day").format(FORMAT)}`);
console.log(`하루 끝 : ${dj.endOf("day").format(FORMAT)}`);

timezone 다루기

timezone 다루기는 중복된 내용이어서 아래 링크를 참고 부탁드리겠습니다.

• dayjs timezone 다루기

정리

dayjs로 날짜 표기, 조작 등 여러가지를 알아보았습니다.
사실 위 개념까지만 알아도 날짜를 다루는 데 큰 문제는 없습니다.

추후 알아야 할 내용은 고도화 작업입니다.

한 주의 시작을 특정 요일로 지정
custom format 만들기
AM, PM 텍스트 변경하기
일요일~월요일 텍스트 변경하기
etc...

정도가 있습니다.
아래 링크를 확인하시면 쉽게 구현하실 수 있습니다.

• dayjs customization

참고문헌

• Format
• AdvancedFormat
• localized-formats
• dayjs timezone 다루기
• dayjs customization

SSR로 동작하는 지 확인하는 방법

구하천포 — Thu, 8 Aug 2024 12:52:25 +0900

SSR로 동작하는 지 확인하는 방법

SEO에 도움이 되기 위해서는 CSR보다는 SSR을 활용하는 것이 좋습니다.
그런데 지금 페이지가 정상적으로 SSR로 동작하는 것을 어떻게 확인할 수 있을까요?

현재 프로젝트가 어떻게 동작하는 지 정확하게 이해하고 있으면 어디까지가 SSR이고 아닌 지 파악할 수 있습니다.
그러나 모르는 경우 내가 이 부분은 SSR, 이 부분은 CSR이라고 생각하고 구현을 했을 때,
내가 원하는 방향으로 동작하는 것을 확인할 필요가 있습니다.

아래 게시글은 크롬 기준으로 작성되어 있습니다.

SSR 동작 확인하는 방법

SSR 동작을 확인하는 방법은 매우 간단합니다.
JavaScript 동작을 없애면 됩니다.

아래 사이트는 제가 사이드 프로젝트로 진행하고 있는 사이트입니다.
• 다이싸 이동하기
검색에 도움되게 하기 위해 게임마다 설명을 추가하고 있습니다.

제가 원하는 동작은 아래와 같습니다.
SSR : 게임에 대한 설명
CSR : 실제 게임
입니다.

그렇다면 JavaScript 동작을 없앴을 때 게임 설명이 표시되면 해당 부분은 SSR로 동작하고 있는 것입니다.

F12를 눌러 개발자 모드에 진입하여 설정 클릭

Debugger -> Disable JavaScript 클릭

위처럼 하면 현재 웹 사이트에서 JavaScript를 비활성화 한 것입니다. 이 상태로 게임을 접속해보겠습니다.
아래 링크를 확인해보면 제가 예상한대로 설명이 잘 나옵니다.
• 다이싸 게임

즉, SSR이 정상적으로 동작하고 있습니다.

게임은 시작 버튼을 클릭해야 시작이 되는 데 버튼이 클릭되지 않으니 CSR로 동작하는 것을 확인할 수 있습니다.

결론

본인이 개발한 것이 SSR, CSR로 동작하는 지 의문이 생기면 JavaScript를 비활성화해서 테스트 해보시길 바랍니다.

[JS/TS] 서아라비아, 동아라비아 숫자 변환하기

구하천포 — Fri, 2 Aug 2024 19:00:54 +0900

[JS/TS] 서아라비아, 동아라비아 숫자 변환하기

숫자 종류 확인하기

숫자에도 종류가 있는 것을 아시나요?

서아라비아 : 0~9
동아라비아 : ٠,١,٢,٣,٤,٥,٦,٧,٨,٩ (아랍 문자)

입니다.

따라서 이집트와 같이 동아라비아 숫자를 사용하는 국가의 경우 따로 변환 작업이 필요합니다.
편의상 서아라비아 숫자는 아라비아 숫자, 동아라비아 숫자는 아랍 숫자라고 표기하겠습니다.

아라바이, 아랍 숫자 변환하기

변환하는 방법은 간단합니다.

const ARABIC_TO_ARABIA: { [index: number]: string } = {
  1: "١",
  2: "٢",
  3: "٣",
  4: "٤",
  5: "٥",
  6: "٦",
  7: "٧",
  8: "٨",
  9: "٩",
  0: "٠",
};

const ARABIA_TO_ARABIC: { [index: string]: string } = {
  "١": "1",
  "٢": "2",
  "٣": "3",
  "٤": "4",
  "٥": "5",
  "٦": "6",
  "٧": "7",
  "٨": "8",
  "٩": "9",
  "٠": "0",
};

const convertArabicToArabia = (string: string) => {
  return string.replace(/[١٢٣٤٥٦٧٨٩٠]/g, function (match) {
    return ARABIA_TO_ARABIC[match];
  });
};

const convertArabiaToArabic = (string: string) => {
  return string.replace(/\d/g, function (match) {
    return ARABIC_TO_ARABIA[Number(match)];
  });
};

위처럼 정규식을 사용해주시면 됩니다.

convertArabiaToArabic 함수는 아랍 숫자를 아라비아 숫자로 변환하는 함수입니다.
convertArabiaToArabic 함수는 아라비아 숫자를 아랍 숫자로 변환하는 함수입니다.

상황에 맞게 사용하시면 됩니다.

[JS/TS] TTS, Text to Speech 구현하기

구하천포 — Fri, 2 Aug 2024 12:30:43 +0900

JavaScript(TypeScript)를 이용하여 Text를 Voice로 변환하는 방법을 알아보도록 하겠습니다.
다른 라이브러리를 사용하지 않고 구현이 가능합니다.

코드는 TypeScript로 구현하겠습니다.

TTS 구현

const onSpeakToText = (text: string) => {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = 'ko-KR';
  window.speechSynthesis.speak(utterance);
}

text를 한국어로 읽어주는 함수를 구현하였습니다.

TTS 속도 조절하기

읽는 속도를 빠르게 또는 느리게 조절도 가능합니다.

const onSpeakToText = (text: string, rate: number) => {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = 'ko-KR';
  utterance.rate = rate;
  window.speechSynthesis.speak(utterance);
}

위 rate 값을 1미만으로 주면 느리게, 1초과로 주면 빠르게 읽어줍니다.

TTS 다른 언어 사용하기

한국어 외 다른 언어로 텍스트를 읽도록 할 수 있습니다.
현재 함수에는 lang 값이 'ko-KR'로 고정이 되어 있는데 이 값을 변경해주면 됩니다.

어떠한 값을 넣을 수 있는 지 확인하는 방법은 간단합니다.

const synth = window.speechSynthesis;
console.log(synth.getVoices())

위 코드를 실행하면 실행 가능한 voices를 얻을 수 있습니다.
여기에 있는 lang 값을 확인하여 넣으시면 됩니다.

const onSpeakToText = (text: string, rate: number, lang: string) => {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = lang;
  utterance.rate = rate;
  window.speechSynthesis.speak(utterance);
}

결론

간단하게 text를 읽어주는 onSpeakToText 함수를 구현해보았습니다.
라이브러리를 사용하지 않고 쉽게 구현이 가능합니다.

위에서 최종적으로 구현한 함수는 확장성이 없습니다. 실제로 사용하실 때는 함수 오버로딩을 이용하여 여러 args를 받을 수 있도록 수정하면 좋을 것 같습니다.

VSCode 엔터 키, 정규식 검색하기

구하천포 — Fri, 2 Aug 2024 12:30:04 +0900

Visual Studio Code 내에서 코드내에서 엔터 키를 검색하고 싶었습니다.
정규식을 이용하면 쉽게 해결할 수 있습니다.

우선 정규식을 검색할 수 있도록 설정해줍니다.
검색 아이콘을 클릭한 후 제일 오른쪽에 있는 * 모양을 클릭해줍니다.
해당 모드가 정규식 검색 모드입니다.

그 다음 엔터를 검색하고 싶으면 \n\n를 입력하시면 됩니다.

위처럼 입력하시면 모든 엔터 키를 검색하실 수 있습니다.

주의해아할 점은 개발 시 들여쓰기를 한다는 점입니다.
아래 예시를 확인해봅시다.

// tmp.ts file
{
  @Query(() => Boolean)
  getUser() {}

  @Mutation(() => Boolean)
  updateUser() {}

  @Query(() => Boolean)
  getUser() {}

  @Log()
  @Mutation(() => Boolean)
  updateUser() {}
}

제가 검색하고 싶었던 것은 Mutation이면서 Log 데코레이터가 없는 함수였습니다.
만약 정규식을 사용하지 않으면 @Mutation을 검색하여 일일이 확인하여야 합니다.
그러나 정규식을 사용하면 쉽게 검색할 수 있습니다.

아까 설정해두었던 정규식 모드에 아래 키워드를 검색하시면 됩니다.

성공 : \n\n @Mutation
실패 : \n\n@Mutation

개발 코드는 들여쓰기가 되어 있기 때문에 해당 부분도 처리를 해주어야 합니다.
위 부분만 신경쓰셔서 검색하시면 됩니다.

headless 컴포넌트 도입

구하천포 — Wed, 31 Jul 2024 18:12:16 +0900

회사에서 material-ui를 사용하였습니다.
그 이유와 왜 지금은 사용하지 않는 지?
그리고 어떻게 하다 headless 컴포넌트를 도입하게 되었는 지 적어보려고 합니다.

headless에 대한 설명은 따로 없습니다.

material-ui를 사용한 이유

실력 부족
시간 부족

프로젝트 초창기에는 material-ui를 사용하여 개발을 했었습니다.
팀원들은 웹 개발하던 사람들이 아니었어서 react는 물론 css도 처음 접하는 사람들이었습니다.
따라서 그 당시 유명한 material-ui를 이용하여 빠르게 구현을 하였습니다.

material-ui를 벗어난 이유

커스텀 하기 어려움
자체적으로 구현하고 싶은 욕망

프로젝트 기획, 디자인이 고도화 되며 컴포넌트를 커스텀하게 변경해야하는 필요가 생겼습니다.
이것은 매우 불편하고 어느 정도의 한계가 분명하다고 생각이 들었습니다.

지금은 mui에서 style이 없는 컴포넌트를 제공해주는 것 같으나
그 당시만 해도 className을 이용하여 변경을 해주어야 했습니다.

팀원들의 실력도 성장하였고 자체적인 컴포넌트를 구현하고 싶은 욕구들이 생겨 하나씩 바꾸어 나갔습니다.

material-ui를 벗어나서 생긴 불편함

시간이 많이 듬
완성도 있게 구현하기가 생각보다 어려움
코드가 복잡해짐

당연히 하나 하나씩 구현을 하려고 하니 힘들었습니다.
시간도 많이 들고 생각하지 않아도 되는 로직을 생각하는게 힘들었지만, 미션을 깨는 듯한 재미가 있어 개발 자체는 재미있었습니다. 구현을 하면 할수록 material-ui 개발자들이 대단하다고 느껴졌습니다.

그러나 위 문제는 별 게 아니었습니다.
어떠한 이유 때문에 디자인이 변경되면 수정하기가 힘든 경우가 있었습니다.
대부분의 경우는 쉽게 가능했지만 Select, Table 처럼 복잡한 컴포넌트의 경우 힘이 들었습니다.

그 이유를 확인해보니 하나의 컴포넌트를 완성형으로 만들고 그 안에 많은 로직이 들어가 있었습니다.
예를들어 type에 따라서 동작이 single, multiple, groupSingle, groupMultiple 과 같이 독립된 동작을 구현해야했습니다.

<Select type="single" list={[]} />
<Select type="multiple" list={[]} />
<Select type="groupSingle" list={[]} />
<Select type="groupMultiple" list={[]} />

위처럼 1개의 컴포넌트를 4개의 컴포넌트처럼 사용을 하였습니다. 위 4개를 하나의 컴포넌트에서 동작이 가능하도록 하니 복잡도가 높아졌고 수정 시 코드를 확인할 때 어려움이 있었습니다.
또 수정할 떄 외부의 코드는 최대한 변경 없이 구현하려고 하니 더 복잡했습니다.

이때 우연찮게 headless 컴포넌트에 대해 알게됩니다.

headless 컴포넌트

처음에는 무슨 말인지 정확히 이해가 가지 않았습니다.
그리고 우연히 개발 중 저희 코드를 보니 headless 컴포넌트로 구현했으면 이러한 문제가 없었겠구나 라는 생각을 하게되었습니다.

간단하게 설명하면 아래와 같습니다.

<Select>
  <SelectItem></SelectItem>
  <SelectItem></SelectItem>
  <SelectItem></SelectItem>
</Select>

Select, SelectItem 컴포넌트를 조합해서 내가 원하는 타입의 Select 컴포넌트를 구현하면 됩니다.
다시 말하면 위 조합으로 직접 single, multiple, groupSingle, groupMultiple 을 구현하여 사용하면 됩니다.
추가로 위 4가지 타입이 아닌 다른 Select 컴포넌트가 필요하더라도 쉽게 구현할 수 있습니다.
디자인이 바뀌어도 쉽게 css를 수정할 수 있습니다.

모든 컴포넌트는 아니지만 위처럼 변경 발생하면 수정하기 어렵거나,
코드 복잡도가 높은 컴포넌트를 headless 컴포넌트로 변경하였습니다.

위에서 언급했듯이 모든 컴포넌트가 아닌 특정 컴포넌트만 headless로 변경하였습니다.
상황에 맞게 구현하면 좋을 것 같습니다.

제 글을 보면 뭐가 좋은 지 이해가 안되실 것 같아 보았던 유튜브 링크를 첨부했습니다.
해당 영상을 보아도 저처럼 뭐가 좋은 지 이해가 안되실 수 있는데 그럼 일단 넘어가시면 됩니다.
언젠간 필요하게 될 때 다시 보시면 좋을 것 같습니다.

참고문헌

• toss

[개선] 프로젝트 분리하여 빌드 속도 개선

구하천포 — Mon, 15 Jul 2024 18:35:04 +0900

[개선] 프로젝트 분리하여 빌드 속도 개선

참고

해당 게시글은 이전에 제가 빌드를 개선했던 방법 중 한가지를 소개하기 위해 작성했습니다.
너무 예전에 진행하였어서 동일한 환경이 아니고 비슷한 환경을 억지로 만들어서 진행했습니다.

프로젝트 개선

프로젝트를 개선하는 방법이 많이 있습니다.

이미지 캐싱
코드 스플릿
빌드 속도 개선
사용하는 패키지를 더 좋은 것으로 변경
등등등

이번 게시글에서는 빌드 속도를 개선한 사례를 작성해보도록 하겠습니다.
NextJS 기준으로 작성되어 있으나 다른 프레임워크에서도 비슷하게 할 수 있을 것 같습니다.

번들 사이즈 측정 방법

NextJS에서 번들 사이즈 측정하는 방법은 간단합니다.

next.config.js 파일에서 아래 설정을 해줍니다.
ANALYZE 값이 true인 경우만 분석도구를 실행하기 위함입니다.

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

// ...

module.exports = withBundleAnalyzer(nextConfig);

터미널에 아래 명령어를 입력해줍니다.

ANALYZE=true yarn build

사긴이 지나면 빌드가 되고 결과 페이지가 표시될 것입니다.

번들 사이즈 분석 및 개선하기

번들 사이즈 분석 결과는 아래와 같습니다.
편의상 결과 이미지는 stat, parsed, gzip 중 stat만 작성하도록 하겠습니다.
최종 값은 하단에 적어두겠습니다.

보시면 babylonjs 관련 패키지가 엄청 큰 것을 확인하실 수 있습니다.
거의 프로젝트의 50%를 담당하고 있습니다.

babylonjs를 사용은 해야하는데 어떻게 사용하면서 개선할 수 있을가요?
저희는 서비스를 분리하였습니다.

웹에서 3D 파일을 보여주기 위해 babylonjs를 사용하고 있었습니다.
3D 파일을 볼 수 있는 서비스를 하나 더 만들었습니다.
그리고 쿼리 파라미터로 값을 넘겨 해당 서비스에서 파일을 볼 수 있도록 하였습니다.
그 결과 메인 프로젝트에서는 babylonjs 관련 패키지를 모두 삭제하였습니다.

다시 번들 사이즈를 분석하였습니다.
(node_modules 관련 이미지를 지웠는지 없어서 올리지 못 하였습니다...)

파일 사이즈가 엄청 줄어든 것을 확인할 수 있습니다.

결과

정량적인 빌드 속도가 기억이 나지는 않습니다.
그러나 그 당시 체감상 40% 정도는 빨라졌던 것으로 기억합니다.

실제 위 결과의 차이만 보아도 많이 개선되었습니다.

stat : 59.52MB -> 30.05MB (약 49.51%)
parsed : 26.51MB -> 13.57MB (약 48.81%)
gzip : 6.51MB -> 3.67MB (약 43.63%)

해당 게시글에서는 꼭 코드 스필릿이나 캐싱, 특정 패키지 변경이 아닌 다른 방법으로도 개선할 수 있다는 것을 전달하고 싶었습니다.
실제로 빌드 속도 뿐만이 아니라 서비스가 분리되어 배포와 버전 관리도 따로 할 수 있었습니다.

[Next] Next14 모노레포에서 로컬 페키지, 모듈 가져와서 사용하는 방법

구하천포 — Fri, 12 Jul 2024 08:54:13 +0900

Next14 모노레포에서 로컬 페키지, 모듈 가져와서 사용하는 방법

프로젝트를 Next 12에서 14로 업그레이드를 하였습니다.
그러나 아래와 같은 에러 메시지가 발생하며 실행되지 않았습니다.
찾아보니 Next14에서 설정이 조금 변경이 되었습니다.
한번 알아보도록 하겠습니다.

발생한 에러와 해결 방법

next-transpile-modules - could not find default CSS rule, CSS imports may not work
next-transpile-modules - could not find default SASS rule, SASS imports may not work
next-transpile-modules - could not find default CSS rule, CSS imports may not work
next-transpile-modules - could not find default SASS rule, SASS imports may not work
next-transpile-modules - could not find default CSS rule, CSS imports may not work
next-transpile-modules - could not find default SASS rule, SASS imports may not work

하나씩 설정을 건드려보니 next.config.js에서 제대로 동작하지 않는 것을 확인했습니다.
저희는 모노레포를 사용하고 있고 특정 프로젝트에서는 다른 프로젝트를 모듈로 가져와서 사용하고 있습니다.

12 버전에서는 withTM으로 다른 모듈을 가져와서 사용했었는데,
14 버전에서는 transpilePackages로 변경이 된 것이었습니다.

프로젝트 경로를 예를들어 아래와 같다고 가정하겠습니다.

@project/utils
@project/date

Next12

const withTM = require("next-transpile-modules")([
  "@project/utils",
  "@project/date"
]);

const nextConfig = {
  reactStrictMode: true,
};

module.exports = withTM(nextConfig);

Next14

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["@project/utils", "@project/date"],
};

module.exports = nextConfig;

위처럼 변경해주니 정상 동작하였습니다.
Next12에서 Next14로 업그레이드 시 참고하시길 바랍니다.
확인해보지는 않았지만 마이그레이션 문서에 있을 것 같습니다.

참고문헌

• transpilePackages

[Next] 14버전에서 Link와 a를 같이 사용하는 방법

구하천포 — Fri, 12 Jul 2024 08:50:33 +0900

[Next] 14버전에서 Link와 a를 같이 사용하는 방법

NextJS 14버전에서 Link와 a element를 같이 사용하고 싶은 경우가 있습니다.

<Link href={route} passHref>
  <a href={route}>{name}</a>
</Link>

위처럼 코드를 작성하였는데 아래 에러가 발생하였습니다.

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

해결방법 1
a element를 삭제한다.
그러나 이 방법은 제가 원하는 방법이 아니었습니다.

<Link href={route} passHref >
  <a href={route}>{name}</a>
</Link>

해결방법 2
legacyBehavior props를 추가한다.

<Link href={route} passHref legacyBehavior>
  <a href={route}>{name}</a>
</Link>

해결방법 2로 수정하였습니다.

VSCode에서 특정 단축키가 안돼요.

구하천포 — Fri, 12 Jul 2024 08:47:27 +0900

VSCode에서 특정 단축키가 안돼요.

어느 순간부터 닫은 탭을 다시 오픈하는 단축키가 되지 않았습니다.
저는 탭을 닫고 열고 하는 습관이 있습니다.
그래서 닫은 탭을 열어주는 위 단축키가 안되는 것은 개발하는 데 너무 신경이 쓰여 해결했습니다.

닫은 탭 열는 단축키

윈도우 : crtl + shift + t
맥 : command + shift + t

VSCode 단축키 확인하기

안되는 이유는 해당 단축키의 설정이 잘못 되어 있을 확률이 높습니다.
아니면 중복되어 충돌 나는 경우도 있습니다.
어떠한 경우인지 확인해보도록 하겠습니다.

VSCode에서 아래 키를 입력해줍시다.

윈도우 : crtl + shift + p
맥 : command + shift + p

아래와 같은 입력창이 표시되는데 Preference: Open Keyboard Shortcuts를 입력해줍니다.

그리고 내가 확인하고 싶은 단축키를 입력합니다.

윈도우 : crtl + shift + t
맥 : command + shift + t

아래 이미지를 보면 동일한 단축키에 2개의 설정이 되어 있습니다.

테일윈드와 관련된 설정을 지워주도록 하겠습니다.
혹시 모르니 VSCode를 껏다가 재실행 해주면 잘 됩니다.

높은 확률로 다른 단축키도 모두 동일한 방법으로 해결하실 수 있을 것입니다.

Dead Code 찾기, 사용하지 않는 파일, 변수 찾기

구하천포 — Wed, 10 Jul 2024 13:17:50 +0900

Dead Code 찾기, 사용하지 않는 파일, 변수 찾기

JavaScript Dead Code 찾기
JavaScript 사용하지 않는 파일 찾기
JavaScript 사용하지 않는 변수 찾기
JavaScript 사용하지 않는 export 찾기

Dead Code 란

Dead Code 이름 그대로 죽은 코드입니다.
즉, 실행되지 않는 코드를 의미합니다.

해당 코드를 계속 두는 것은 좋은 개발환경이라고 볼 수 없습니다.

용량 차지
빌드 속도 우려
import 시 불편함
파일, 코드 찾을 때 불편함
코드 읽을 때 불편함

등이 있을 수 있습니다.

knip

knip 패키지를 사용하면 dead code를 빠르게 찾아줍니다.
knip을 활용하여 어떻게 dead code를 삭제하는 지 알아보도록 하겠습니다.

knip 설치

npm init @knip/config
pnpm create @knip/config
yarn create @knip/config

사용하는 패키지 매니저에 맞게 설치하시면 됩니다.
자세한 설정이나 설명은 아래 참고문헌에 있는 knip 링크를 확인해보세요.

knip 사용하기

프로젝트 경로에서 아래 명령어를 이용하시면 됩니다.
저는 제 프로젝트에서 실행해보도록 하겠습니다.

npx knip

위에 보시면 사용하지 않는 파일, 변수들에 대한 정보들이 나와있습니다.
잘못 되었을 수도 있으니 직접 확인하신 후 지우시는 것을 추천 드립니다.

저 같은 경우 사용하지 않는 파일은 command 명령어로 다 지웠습니다.
나머지는 직접 파일 하나 하나 확인하면서 삭제하였습니다.

잘 되었는지 확인하기 위해 마지막에 tsc로 한번 더 확인하였습니다.

위 결과 이미지를 보면 약 14,000줄을 삭제한 것을 확인할 수 있습니다.
삭제하면서 쓰레기를 정리하는 기분이 들어 재미있게 지웠습니다.

주의점

knip을 100% 신뢰할 수는 없는 것 같습니다.
script 에서 사용하는 것일 수도 있고 잘못된 결과를 출력할 수도 있기 때문입니다.
그리고 삭제하면서 다른 사이드 이펙트가 생길 확률이 있습니다.

꼭 직접 확인하시면서 지우는 것을 추천 드립니다.

코드를 구현하다보면 사용하지 않는 코드나 파일이 생깁니다.
즉시 지우면 좋겠지만 나도 모르게 남겨두는 경우가 많이 있습니다.
knip을 사용하여 편하고 빠르게 지우시길 바랍니다.

참고문헌

• knip

[개발자 도구] 개발자 도구 콘솔에서 console.log를 믿으면 안되는 이유

구하천포 — Wed, 10 Jul 2024 13:11:35 +0900

[개발자 도구] 개발자 도구 콘솔에서 console.log를 믿으면 안되는 이유

개발을 공부하는 친구가 이런 질문을 하였습니다.
console.log를 찍었는데 값이 이상해, 값이 자꾸 바뀌어.

듣자마자 어떠한 문제인지 알고 가르쳐주었습니다.
어떠한 문제였을까요?
같이 확인해봅시다.

console.log

웹 개발자라면 F12를 눌러 개발자 도구를 사용합니다.
console 탭에서 로깅해둔 결과물을 보고 디버깅을 하는 경우도 있을 것입니다.

이때 주의해야 하는 점이 있습니다.
원시 값은 괜찮으나 참조 값일 때 문제가 발생합니다.

아래 코드를 확인해봅시다.

const obj = { a: 1 };
console.log(obj);
obj.b = 2;
console.log(obj);

위 결과 이미지를 보시면 뭔가 이상하다는 것을 확인하시 수 있습니다.
첫번째 console.log에서 객체를 열어보면 b 키 값이 포함되어 있습니다.

이것은 참조하고 있던 객체가 변경이 되어서 그렇습니다.
C, C++의 포인터라고 생각하시면 편합니다.

따라서 그 떄의 객체 값을 정확하게 알고 싶으시면 JSON.stringify를 사용하셔야 합니다.

const obj = { a: 1 };
console.log(JSON.stringify(obj, null, 2));
obj.b = 2;
console.log(JSON.stringify(obj, null, 2));

그럼 위처럼 정상적으로 해당 시점의 값을 보여주고 있습니다.

배열도 참조 값이므로 동일합니다.
빠르게 결과만 살펴보겠습니다.

const arr = [1];
console.log(arr);
arr.push(2);
console.log(arr)

이 경우도 JSON.stringify를 사용하면 됩니다.

const arr = [1];
console.log(JSON.stringify(arr, null, 2));
arr.push(2);
console.log(JSON.stringify(arr, null, 2))

정리하자면 참조 값 변수를 출력하면 값이 변할 수 있습니다.
따라서 해당 시점의 값을 정확히 보고 싶으면 JSON.stringify 를 사용해야 합니다.

[Next] dynamic, lazy import 시 발생하는 에러

구하천포 — Wed, 10 Jul 2024 13:07:26 +0900

[Next] dynamic, lazy import 시 발생하는 에러

하고자 한 것

icon을 볼 수 있는 페이지를 구현하려고 했습니다.
로직 순서는 아래와 같습니다.

[Server] icon이 있는 폴더를 읽는다.
[Server] .tsx 확장자만 필터링하여 배열로 데이터를 만든다.
[Front] 서버에서 받은 데이터를 활용하여 렌더링을 한다.

서버에서 데이터를 생성 후 프론트에게 전달하면 프론트에서 lazy import로 렌더링 하는 순간 읽으려고 하였습니다.
그 이유는 icon을 추가할 때마다 ICONS 배열을 변경하는 것은 불필요한 작업이라고 생각했기 때문입니다.

서버에서 만든 데이터 구조

const ICONS = [
    {
        name: "AddIcon",
        src: "../../icon/AddIcon"
    },
    ...
]

에러가 발생하는 프론트 코드

{ICONS.map(icon => {
    const Component = dynamic(() => import(`${icon.src}`), { ssr: false });
    return <div key={icon.src}>{<Component />}</div>
})}

에러가 발생하지 않는 프론트 코드

{ICONS.map(icon => {
    const Component = dynamic(() => import(`../../icon/AddIcon`), { ssr: false });
    return <div key={icon.src}>{<Component />}</div>
})}

위 2개의 차이는 경로를 변수로 할당하는지 아닌지의 차이입니다.
그럼 에러 메시지와 발생 이유를 알아보도록 하겠습니다.

에러 메시지

에러 메시지는 아래와 같습니다.

error - uncaughtException: TypeError: Cannot read properties of null (reading 'match')
at Object.fn (/Users/codiving/test-project/node_modules/next-transpile-modules/src/next-transpile-modules.js:70:40)
at /Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117581:37
at Array.some (<anonymous>)
at Object.fn (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117581:25)
at execRule (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117340:22)
at execRule (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117365:10)
at execRule (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117360:6)
at Object.exec (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117379:6)
at /Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:58350:35
at /Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:57973:11
(node:52267) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating

너무 이상하여 NextJS 공식 홈페이지를 다시 보니 아래처럼 나와있습니다.

애초에 제가 잘못 사용하고 있었습니다.
경로를 명확하게 작성하라고 합니다.

저처럼 쓸모 없는 삽질을 하지 마시라고 에러 코드도 모두 작성해두었습니다.
(검색에 걸리기 위해)

[회고록] dental-notation 패키지 npm 배포

구하천포 — Wed, 10 Jul 2024 13:03:39 +0900

dental-notation 패키지 npm 배포

치과에서 치아를 표기하는 대표적인 방법이 3개 있다.

FDI
Universal
Palmer

각 국가마다 사용하는 표기법은 다르다.
치과 관련 서비스를 구현하다보니 치아 번호를 편하게 다룰 수 있는 라이브러리가 있으면 좋겠다고 생각했다.
그래서 간단하게 구현하여 npm에 배포해보았다.

기능

기능은 총 2개 구현했다.

각 치아 notation 별 변환
치아 번호를 문자열로 변환

Notation 변환

국가별로 치아를 나타내는 방법은 모두 다르다.
위 문제를 해결하기 위해 국가별로 DB에 다르게 저장하고 코드에서 분기처리를 한다는 것은 쉽지 않다.
따라서 국가와 상관없이 DB에 1가지 notation 값만 저장을 해둔다.
그리고 나라별로 보여줄 때 해당 notation으로 변환하여 보여주는 방식을 사용한다.
위 방식으로 구현하려면 각 notation별 변환하는 함수가 필요하다.

치아 번호 문자열로 변환

치아 번호도 연속되는 숫자나 문자가 있다.
이걸 하나씩 보여주면 문자열이 굉징히 길어진다.
이걸 짧게 표시하는 방법이 각 notation 마다 다른데 이걸 구현하였다.

숫자로 표현하자면 아래 방식과 동일하다.

1, 2, 3, 4, 5 : 1~5
1, 2, 4, 5, 7, 8, 9 : 1~2, 4~5, 7~9

배운점

tsup을 활용하여 빠르게 TypeScript 라이브러리를 번들하는 방법
TypeScript 오버라이딩 활용 방법

위 중에서 2번째 TypeScript 오버라이딩 활용하는 방법을 배운 것이 많은 도움이 되었다.

결과물

• npm dental-notation
• dental-notation-docs

[JavaScript] 만 나이 계산하는 방법

구하천포 — Wed, 10 Jul 2024 13:00:13 +0900

[JavaScript] 만 나이 계산하는 방법

만 나이를 계산해야하는 경우가 생겨 간단하게 구현하였습니다.
사실 0세 미만의 나이는 없지만 예외처리는 따로 하지 않고 0으로 반환하였습니다.

로직은 간단하여 설명은 생락하도록 하겠습니다.

const getFullAge = (dob: Date, target: Date = new Date()) => {
  const dobYear = dob.getFullYear();
  const dobMonth = dob.getMonth() + 1;
  const dobDate = dob.getDate();

  const targetYear = target.getFullYear();
  const targetMonth = target.getMonth() + 1;
  const targetDate = target.getDate();

  const age = targetYear - dobYear;

  // age가 음수인 경우도 0으로 처리
  if (age <= 0) return 0;
  if (targetMonth < dobMonth) return age - 1;
  if (targetMonth === dobMonth && targetDate < dobDate) return age - 1;
  return age;
};

[JavaScript] 배열 리스트를 객체로 그룹화 하는 방법

구하천포 — Tue, 2 Jul 2024 19:11:18 +0900

[JavaScript] 배열 리스트를 객체로 그룹화 하는 방법

회사에서 GroupSelect 컴포넌트를 구현하였습니다.
props로 list를 넘겨주면 해당 컴포넌트 내에서 특정 type을 기준으로 그룹핑을 하였습니다.
이 부분이 불편하여 찾아보다가 좋은 방법을 발견하여 게시글을 작성합니다.

기존 방식

const groupBy = (array, type) => {
  return array.reduce((x, y) => {
    (x[y[type]] = x[y[type]] || []).push(y);

    return x;
  }, {});
};

const users = [
  {
    name: "강호동",
    gender: "man"
  },
  {
    name: "이효리",
    gender: "woman"
  },
  {
    name: "이수근",
    gender: "man"
  },
  {
    name: "김희선",
    gender: "woman"
  },
  {
    name: "김아중",
    gender: "woman"
  },
  {
    name: "김흥국",
    gender: "man"
  }
];


const { man, woman } = groupBy(users, "gender");
console.log("# man  : ", man);
console.log("# woman  : ", woman);

위 방식이 사용하던 방식을 간단하게 작성한 코드입니다.
TypeScript로 할 때 type만 잘 정의해준다면 문제는 없습니다.

그러나 굳이 위처럼 groupBy 함수를 구현하지 않고 간단하게 사용할 수 있는 방법이 있습니다.

Object.groupBy 사용하기 (node 21 이상)

Object.groupBy 를 사용하면 간단하게 배열을 그룹핑 할 수 있습니다.
아래 코드를 보시면 바로 이해가 가능하실 것입니다.

const users = [
  {
    name: "강호동",
    gender: "man"
  },
  {
    name: "이효리",
    gender: "woman"
  },
  {
    name: "이수근",
    gender: "man"
  },
  {
    name: "김희선",
    gender: "woman"
  },
  {
    name: "김아중",
    gender: "woman"
  },
  {
    name: "김흥국",
    gender: "man"
  }
];

const { man, woman } = Object.groupBy(users, ({ gender }) =>
  gender === "man" ? "man" : "woman"
);

console.log("# man  : ", man);
console.log("# woman  : ", woman);

비교해준 기준으로 그룹핑이 되어 return이 된 것을 확인할 수 있습니다.

주의점

위 함수를 사용하실 때 아래와 같은 에러를 확인하실 수 있습니다.

TypeError: Object.groupBy is not a function

위 에러가 발생하는 이유는 사용하는 node 버전이 낮아서 그럴 확률이 높습니다.
node 21 이상부터 사용할 수 있기 때문에 그 점 참고하시면 좋을 것 같습니다.

참고문헌

• Object.groupBy

[JavaScript] 불변성을 유지하며 배열 특정 인덱스 요소 변경하기

구하천포 — Tue, 2 Jul 2024 18:36:13 +0900

[JavaScript] 불변성을 유지하며 배열 특정 인덱스 요소 변경하기

React, JavaScript 할 것 없이 원본을 유지하는 불변성은 중요한 개념입니다.
React에서 배열 불변성 유지하여 변경하기 편한 벙법을 알아보겠습니다.

아래 배열이 있고 2번째 인덱스의 값인 3을 6으로 변경해보도록 하겠습니다.
다시 말하지만 3을 찾아 변경하는 것이 아닌 2번째 인덱스의 값을 변경하는 것입니다.

const origin = [1, 2, 3, 4, 5];

기존 원본 배열 유지하는 방법

const origin = [1, 2, 3, 4, 5];

// map 사용하기
const copied1 = origin.map((el, index) => index === 2 ? 6 : el);

// ... 문법 사용하기
const copied2 = [...origin];
copied2[2] = 6;

// slice 사용하기
const copied3 = origin.slice();
copied3[2] = 6;

console.log("origin : ", origin);
console.log("copied1 : ", copied1);
console.log("copied2 : ", copied2);
console.log("copied3 : ", copied3);

모두 정상적으로 출력이 되었습니다.

[npm] 배포 후 검색이 안돼요

구하천포 — Mon, 1 Jul 2024 19:12:04 +0900

npm 배포 후 검색이 안돼요

npm 배포 후 검색이 안되는 경우가 있습니다.
제 경우도 검색이 똑바로 되지 않는 문제가 있었습니다.

이럴 때 아래 명령어로 제대로 배포가 되었는지 확인하는 것이 좋습니다.
package-name에 배포하신 package 명을 작성하시면 됩니다.

npm show package-name

해당 package-name이 js-array 라고 하시면
아래처럼 하시면 됩니다.

npm show package-name
npm show js-array

실제로 배포 후 검색이 될 때까지 수분에서 수시간이 소요되는 것 같습니다.
위 정보만 잘 표시가 된다면 충분히 기다리시면 될 것입니다.

[JavaScript] JavaScript에서 Array, Set으로 집합 연산하기

구하천포 — Mon, 1 Jul 2024 19:09:41 +0900

[JavaScript] JavaScript에서 Array, Set으로 집합 연산하기

JavaScript에서 집합을 다룰 때 배열을 많이 사용했습니다.
해당 게시글에서는 아래 집합 연산을 구현해볼 것입니다.

Chat GPT에게 먼저 집합 연산을 물어보니 아래처럼 답변을 해주었습니다.

합집합 (Union): A, B 함수는 두 집합의 합집합을 반환합니다.
교집합 (Intersection): A, B 함수는 두 집합의 교집합을 반환합니다.
차집합 (Difference): A, B 함수는 첫 번째 집합에서 두 번째 집합을 뺀 차집합을 반환합니다.
대칭 차집합 (Symmetric Difference): A, B 함수는 두 집합의 대칭 차집합을 반환합니다.
부분집합 (Subset): A, B 함수는 첫 번째 집합이 두 번째 집합의 부분집합인지 확인합니다.
상위집합 (Superset): A, B 함수는 첫 번째 집합이 두 번째 집합의 상위집합인지 확인합니다.
서로소 (Disjoint): A, B 함수는 두 집합이 서로소인지 확인합니다.

위에 적혀있는 연산을 배열로 구현해보고 Set을 사용하면 얼마나 간단하게 구현할 수 있는 지 알아보겠습니다.

배열로 구현하기

간단하게 차집합, 교집합, 대칭 차집합을 구현해보겠습니다.
배열로 구현을 하여도 위처럼 쉽게 구현이 가능합니다.

// 차집합 (Difference)
const getDifference = (arr1, arr2) => {
  return arr1.filter(item => !arr2.includes(item));
};

// 교집합 (Intersection)
const getIntersection = (arr1, arr2) => {
  return arr1.filter(item => arr2.includes(item));
};

// 대칭 차집합 (Symmetric Difference)
const getExclusiveOr = (arr1, arr2) => {
  return arr1
    .filter(item => !arr2.includes(item))
    .concat(arr2.filter(el => !arr1.includes(el)));
};

Set으로 구현하기 - 1

Chat GPT에게 구현을 부탁하니 Set으로 구현을 해주었습니다.

// 합집합 (Union)
function union(setA, setB) {
    return new Set([...setA, ...setB]);
}

// 교집합 (Intersection)
function intersection(setA, setB) {
    return new Set([...setA].filter(x => setB.has(x)));
}

// 차집합 (Difference)
function difference(setA, setB) {
    return new Set([...setA].filter(x => !setB.has(x)));
}

// 대칭 차집합 (Symmetric Difference)
function symmetricDifference(setA, setB) {
    let diffA = new Set([...setA].filter(x => !setB.has(x)));
    let diffB = new Set([...setB].filter(x => !setA.has(x)));
    return new Set([...diffA, ...diffB]);
}

// 부분집합 (Subset)
function isSubset(setA, setB) {
    return [...setA].every(x => setB.has(x));
}

// 상위집합 (Superset)
function isSuperset(setA, setB) {
    return [...setB].every(x => setA.has(x));
}

// 서로소 (Disjoint)
function isDisjoint(setA, setB) {
    return [...setA].every(x => !setB.has(x));
}

// 예제 사용법
let setA = new Set([1, 2, 3]);
let setB = new Set([3, 4, 5]);

console.log("Union:", union(setA, setB));
console.log("Intersection:", intersection(setA, setB));
console.log("Symmetric Difference:", symmetricDifference(setA, setB));
console.log("Difference (A - B):", difference(setA, setB));
console.log("Difference (B - A):", difference(setB, setA));
console.log("Is Subset (A ⊆ B):", isSubset(setA, setB));
console.log("Is Superset (A ⊇ B):", isSuperset(setA, setB));
console.log("Is Disjoint:", isDisjoint(setA, setB));

Set으로 구현하기 - 2

그러나 Chat GPT가 가르쳐준 내용이 최선일까요?
나쁘지는 않지만 Chat GPT보다 더 빠르고 간단하게 사용할 수 있는 방법이 있습니다.
사실 위 모든 내용은 Set의 내장함수로 존재합니다.

let setA = new Set([1, 2, 3]);
let setB = new Set([3, 4, 5]);

console.log("Union:", setA.union(setB));
console.log("Intersection:", setA.intersection(setB));
console.log("Symmetric Difference:", setA.symmetricDifference(setB));
console.log("Difference (A - B):", setA.difference(setB));
console.log("Difference (B - A):", setB.difference(setA));
console.log("Is Subset (A ⊆ B):", setA.isSubsetOf(setB));
console.log("Is Superset (A ⊇ B):", setA.isSupersetOf(setB));
console.log("Is Disjoint:", setA.isDisjointFrom(setB));

함수를 구현할 필요조차 없이 내장함수로 처리할 수 있습니다.

참고문헌

• New JavaScript Set methods

[emotion] You may have forgotten to import it. 에러 해결하기

구하천포 — Mon, 1 Jul 2024 19:00:29 +0900

[emotion] You may have forgotten to import it. 에러 해결하기

React에서 styled-component나 emotion으로 개발할 때 아래 에러가 나타날 수 있습니다.
해결 방법은 styled-component github issue에서 찾았습니다.

Error: You are trying to create a styled element with an undefined component.
You may have forgotten to import it.

github issue로 보아 styled-component는 아래 에러가 표시되는 것 같습니다.

Uncaught Error: Cannot create styled-component for component: undefined

문제점

기존 코드는 아래와 같습니다.

const StyledIcon = styled(Icon)(() => ({
  paddingRight: 4,
}));

사실 코드는 문제가 없습니다.

정확하지는 않지만 제가 추측하기로는 파일 로드 순서에 영향을 받는 것 같습니다.
tsx 파일이 로드될 때 StyledIcon 컴포넌트가 로드되는 시점이 Icon 컴포넌트가 로드되는 시점보다 더 빠른 것입니다.

다시 말하면 Icon이 없는데 Icon을 사용하는 것입니다.

위 의견은 제 단순한 추측이고 실제로는 간단한 버그일 수도 있습니다.

해결

const StyledIcon = styled((props: any) => <Icon {...props} />)(() => ({
  paddingRight: 4,
}));

위처럼 props를 넘겨주는 방식으로 하면 간단하게 해결이 됩니다.

참고문헌

• github issue

[npm] 프로젝트 배포하기

구하천포 — Mon, 1 Jul 2024 18:56:57 +0900

[npm] 프로젝트 배포하기

구현한 함수와 타입을 npm에 배포해보겠습니다.
그전에 npmjs 사이트에 접속하셔서 회원가입부터 하셔야 합니다.
해당 부분은 생략하도록 하겠습니다.

회원가입 링크 : 이동하기

회원가입이 완료되었다는 가정하에 배포 해보도록 하겠습니다.

npm에 배포하기

npm 로그인

아래 작업들을 진행하기 앞서 npm에 로그인을 먼저 해줍니다.
아래 명령어를 입력하시면 됩니다.

npm login

그럼 홈페이지로 이동하게 되는데 로그인을 하시면 됩니다. 로그인이 정상적으로 되었는 지 확인하는 방법은 터미널에 아래 명령어를 입력해보세요.

npm whoami

본인 계정이 표시되면 정상적으로 로그인이 된 것입니다.

패키지 이름 정하기

그 다음으로 해야할 것이 패키지의 이름을 정하는 것입니다.
제일 중요하면서도 어려운 것입니다.
그러나 이번에는 테스트를 위한 패키지 명이니 대충 지어주도록 하겠습니다.

ts-function으로 진행하려고 했지만 이미 존재하여 ts-function-for-test 로 진행하도록 하겠습니다.
존재하는 패키지인지 아닌지 확인하는 간단한 방법이 있습니다.

npm info 패키지 이름
npm info ts-function-for-test
npm info react

react를 입력한 경우 아래처럼 정보가 나타납니다.
이 경우 해당 패키지 이름을 사용할 수 없습니다.

그러나 ts-function-for-test의 경우 아래처럼 404로 출력됩니다.
이 경우 해당 패키지 이름을 사용할 수 있습니다.

README 파일 & package.json 작성하기

해당 부분을 자세하게 확인하고 싶으시면 다른 블로그나 홈페이지를 확인하시는 것을 추천드립니다.
이 게시글에서는 간단하게 알아보겠습니다.

README 파일에는 간단하게 해당 패키지의 정보를 적어주시면 됩니다.
package.json에 아래 내용을 추가 및 변경 하였습니다.
전체 코드는 하단 github을 참고해주세요.

{
  "name": "ts-function-for-test",
  "version": "0.0.1",
  "description": "Test project for npm publish",
  "keywords": [
    "test"
  ],
  "repository": {
    "url": "https://github.com/Codiving/ts-function"
  },
  "author": "Codiving",
  "license": "MIT",
  ...
}

패키지 배포하기

패키지를 배포하시기 전에 꼭 저번 게시글에서 보았던 build를 하셔야 합니다.
그렇지 않으면 정상적으로 배포가 되지 않을 수 있습니다.
아래 명령어를 이용하여 배포하시면 됩니다.

npm publish

패키지 정상 배포된 것 확인하기

패키지를 배포하자마자 검색이 되지 않을 수도 있습니다.
짧게는 몇 분, 길게는 수시간을 소요될 수 있습니다.

그러나 확인할 수 있는 방법은 많이 있습니다.
정상적으로 배포가 된 경우 성공 메일이 수신이 됩니다.
또한 검색만 안되는 것이지 직접 url로 접속이 가능합니다.
npm install 패키지 이름으로 설치도 가능합니다.
npm info 패키지 이름으로 정보를 확인할 수도 있습니다.

버전 업데이트 하기

코드가 수정된 경우 버전을 업데이트를 하고 배포를 해야합니다.
코드 수정이 완료가 되었다면 아래 명령어를 입력하시면 됩니다.

npm version patch

그렇다면 package.json 파일에 있는 version이 변경된 것을 확인할 수 있습니다.
그 다음 배포와 동일한 명령어를 사용하시면 됩니다.

npm publish

패키지 삭제하기

배포한 패키지를 삭제하고 싶은 경우가 있습니다.
72시간 내에 진행을 하셔야 쉽게 삭제가 가능합니다.
이후 삭제는 메일로 문의를 해야 가능할 것 같습니다.
npm에서는 삭제보단 deprecate를 권장하고 있습니다.

명령어는 아래와 같습니다.

npm unpublish 패키지 이름@버전
npm unpublish ts-function-for-test@0.0.1

npm unpublish 패키지 이름 -f
npm unpublish ts-function-for-test -f

위처럼하면 정상적으로 삭제가 가능합니다.

이번 게시글에서는 npm 배포, 버전 업데이트 및 삭제를 알아보았습니다.
모두 본인의 프로젝트를 잘 배포하시길 바랍니다.

혹시 따라오지 못 하신 분은 아래 github 주소를 확인해보세요.
해당 소스코드 : 이동하기

[npm] TypeScript 함수 및 타입 배포 준비

구하천포 — Fri, 28 Jun 2024 19:08:59 +0900

[npm] TypeScript 함수 및 타입 배포 준비

이번 게시글에서는 구현한 함수와 타입을 빌드해보도록 하겠습니다.
추가로 배포하기 전 정상 동작하는 지 테스트 하는 방법도 알아보도록 하겠습니다.

tsup 설치 및 설정

빠르고 간단하게 번들링을 해주는 tsup package 를 이용해보도록 하겠습니다.
아래 명령어를 이용하여 설치해주시면 됩니다.

npm install tsup --save-dev

최상단에 tsup.config.ts 파일을 생성 후 아래 코드를 복사 붙여넣기 합니다.
tsup에 관한 설정 값입니다.

속성에 대한 자세한 정보는 하단 참고문헌 링크를 확인해보세요.

// tsup.config.ts

import { defineConfig } from "tsup";

export default defineConfig({
  format: ["cjs", "esm"],
  entry: ["./src/index.ts"],
  dts: true,
  shims: true,
  skipNodeModulesBundle: true,
  clean: true
});

빌드를 위해 package.json을 수정해주겠습니다.
아래 코드를 추가(merge)해줍니다.

기존에 작성된 package.json 코드를 대체하는 것이 아닌 추가를 해주셔야 합니다.
최종 package.json 코드는 하단 github 링크에서 확인하시면 됩니다.

"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"scripts": {
  "build": "tsup"
}

이제 빌드만 하면 됩니다.
아래 명령어를 입력하여 빌드를 합니다.

npm run build

build가 정상적으로 실행이 되었다면 dist 파일이 생성되었을 것입니다.

배포 전 테스트

해당 함수와 타입을 npm 배포 전 정상 동작하는 지 확인하고 싶을 수 있습니다.
이 경우 dist 폴더의 위치를 확인합니다.
pwd 명령어를 사용하면 현재 위치를 확인할 수 있습니다.

pwd 명령어 결과를 /Users/codiving/ts-function 이라고 가정하겠습니다.

테스트를 위한 프로젝트를 생성 후 아래 명령어를 입력해줍니다.

npm install {pwd 결과}
npm install /Users/codiving/ts-function

위처럼 설치 명령어를 입력 후 해당 함수들이 잘 import 되는 지 확인하시면 됩니다.

이번 게시글에서는 tsup package를 이용하여 프로젝트 빌드를 해보았습니다.
추가로 npm 배포 전 빌드된 파일을 테스트 하는 방법도 확인해보았습니다.

혹시 따라오지 못 하신 분은 아래 github 주소를 확인해보세요.
해당 소스코드 : 이동하기

다음 게시글에서는 npm에 배포를 해보겠습니다.

참고문헌

• tsup

[npm] TypeScript 함수 구현 및 타입 생성

구하천포 — Fri, 28 Jun 2024 18:58:09 +0900

[npm] TypeScript 함수 구현 및 타입 생성

이번 게시글에서는 TypeScript 함수를 구현하고 타입을 생성해보겠습니다.
그리고 내가 원하는 함수와 타입만 export 하는 것까지 해보도록 하겠습니다.

구현해볼 함수는 특정 상품 중에서 입력된 가격과 이름을 가진 상품을 찾는 함수입니다.
예시를 위한 함수입니다.

폴더 구조 변경

먼저 개발할 때 필요한 폴더 및 파일을 생성해주도록 하겠습니다.

최상위 폴더에 src 폴더 생성
src 폴더 내 findProduct.ts , compareName.ts , comparePrice.ts , types.ts , index.ts 파일 생성

위 작업을 마치시면 아래 이미지처럼 됩니다.

함수 구현

Product type 정의

// src/type.ts

export interface Product {
  id: number;
  name: string;
  price: number;
}

compareName 함수 구현

// src/compareName.ts

import { Product } from "./type";

export function compareName(product: Product, name: string) {
  return product.name === name;
}

comparePrice 함수 구현

// src/comparePrice.ts

import { Product } from "./type";

export function comparePrice(product: Product, price: number) {
  return product.price === price;
}

findProduct 함수 구현

// src/findPrice.ts

import { compareName } from "./compareName";
import { comparePrice } from "./comparePrice";
import { Product } from "./type";

export function findProduct(
  products: Product[],
  targetPrice: number,
  targetName: string
): Product | undefined {
  return products.find(
    product =>
      comparePrice(product, targetPrice) && compareName(product, targetName)
  );
}

npm에 올리고 싶은 함수와 타입 export

// src/index.ts

import { findProduct } from "./findProduct";
import { Product } from "./type";

export { findProduct };
export type { Product };

함수는 너무 간단하니 설명은 생략하겠습니다.

src/index.ts 를 보시면 내가 export 하기 원하는 함수와 타입만 구현해주었습니다.
위 프로젝트 내에서는 compareName, comparePrice 함수를 import 하여 사용할 수 있습니다.
그러나 해당 package를 배포한 후 설치한 사람들은 위 함수는 import 못 하고 src/index.ts에 있는 함수와 타입만 import가 가능합니다.

구현한 함수 실행해보기

ts 파일을 실행하기 위해서는 ts-node 명령어를 사용하여야 합니다.
저 같은 경우 src/index.ts 파일에서 테스트를 하였습니다.

import { findProduct } from "./findProduct";
import { Product } from "./type";

const products: Product[] = [
  { id: 1, name: "Keyboard", price: 50 },
  { id: 2, name: "Mouse", price: 30 },
  { id: 3, name: "Monitor", price: 200 }
];

const product = findProduct(products, 30, "Mouse");

console.log("# product : ", product);

export { findProduct };
export type { Product };

위처럼 간단하게 코드를 구현한 후 터미널에 아래 명령어를 입력하시면 됩니다.

ts-node src/index.ts

위처럼 정상적으로 동작하는 것을 확인하였습니다.

이번 게시글에서는 TypeScript 함수 구현 및 타입 생성을 하였습니다.
혹시 따라오지 못 하신 분은 아래 github 주소를 확인해보세요.

해당 소스코드 : 이동하기

다음 게시글에서는 타입스크립트 프로젝트 배포 전 빌드을 해보겠습니다.