같은 이름은 dependencies 에 한 번만 들어간다 — <별칭>@npm:<이름>@<버전> 으로 별칭을 달면 여러 버전이 나란히 설치된다.¹

yarn add react-tooltip-5@npm:react-tooltip@5.8.3

{
  "react-tooltip-5": "npm:react-tooltip@5.8.3"
}

---

• how to install multiple versions of package using npm - Stack Overflow
• How to install multiple versions of a npm package at the same time/project - DEV Community

Footnotes

1. npm-install | npm Docs: npm install <alias>@npm:<name> — “Install a package under a custom alias. Allows multiple versions of a same-name package side-by-side, …” / “Aliasing works only on your project and does not rename packages in transitive dependencies.” ↩

• Human Interface Guidelines - Human Interface Guidelines - Design - Apple Developer
• All WCAG 2.1 Techniques | WAI | W3C
• Close, Exit, Cancel: How To End User Interactions Well | CSS-Tricks

new FontFace() 만으로는 글자에 안 쓰인다 — document.fonts 에 add() 해야 렌더링에 쓰이고, URL 소스는 자동으로 받지 않으니 load() 를 부른다.¹

async function loader() {
  const family = 'Material Symbols Outlined'
  const source =
    'url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v75/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)'
  const fontFace = new FontFace(family, source)

  document.fonts.add(fontFace)
  await fontFace.load()
}

---

• 참고: CSS Font Loading API

Footnotes

1. CSS Font Loading API - MDN: “A font face can be loaded either before or after it is added to a font face set, but it must be added to the set before it can be used for drawing.” / “Font faces with a URL source are validated but not automatically loaded” ↩

• Textdb¹
• JavascriptDB²

---

Footnotes

1. 일반 텍스트 파일을 데이터 소스로 사용하여 간단한 웹 애플리케이션을 구축하고 배포하기 위한 플랫폼. 백엔드 서버나 데이터베이스 없이 배포 가능. 텍스트 파일에서 데이터를 읽고 쓰고 검색하는 데 사용할 수 있는 간단한 REST API를 제공. ↩

2. JavaScript 애플리케이션용 경량 데이터베이스 엔진. 브라우저에서 데이터를 저장, 쿼리 및 조작하기 위한 간단하고 직관적인 API를 제공하며 챗봇, 검색 엔진 및 게임을 포함한 다양한 유형의 애플리케이션을 구축하는 데 사용 가능. 이 데이터베이스는 오프라인에서 작동하도록 설계되어 PWA(Progressive Web Application) 및 기타 유형의 클라이언트측 애플리케이션을 구축하는 데 이상적. ↩

date +%s 는 1970-01-01 UTC 이후 초다.¹

# 빌드 시 timestamp를 참조하기 위한 방법
timestamp=$(date +%s) # 1670759329

# 하지만 현실에서는 `TURBO_HASH`값을 참조하는 방식을 `.env`에서 사용
REACT_APP_VERSION=1.0.0-${TURBO_HASH}

---

• Create timestamp variable in bash script - Stack Overflow²
• dotenv-expand³

---

Footnotes

1. Time conversion specifiers (GNU Coreutils): “seconds since the Epoch, i.e., since 1970-01-01 00:00 UTC.” ↩

2. 스크립트에서 현재 타임스탬프를 특정 형식의 변수로 만드는 방법에 대한 질문. 특정 형식 문자열과 함께 날짜 명령을 사용하여 타임스탬프를 만들고 변수에 저장하도록 하는 답변들… ↩

3. dotenv-expand는 .env 파일에서 환경 변수를 확장하기 위한 모듈입니다. 중첩 변수 확장 및 셸 명령 실행과 같은 더 많은 고급 기능을 사용 가능. ↩

리눅스는 사용자당 inotify 감시 개수에 상한(max_user_watches)이 있다¹ — 모자라면 webpack 이 변경을 못 알아챈다².

# `System limit for number of file watchers reached`

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

---

• Watch and WatchOptions | webpack

Footnotes

1. inotify(7) - Linux manual page: “/proc/sys/fs/inotify/max_user_watches This specifies an upper limit on the number of watches that can be created per real user ID.” ↩

2. Watch and WatchOptions | webpack: “Verify that you have enough available watchers in your system. If this value is too low, the file watcher in Webpack won’t recognize the changes” ↩

• 공통 컴포넌트
  • Tabs 만들면서 이건 어렵다는 결론
• 대안
  • react-spectrum
    • Consider upgrading to a component-based API
    • react-aria-components¹
  • radix-ui
    • shadcn-ui
    • Origin UI
    • Building Low Level Components the Radix Way
  • Headless UI
  • Reach UI
  • Ariakit
  • Base UI
  • JollyUI

---

좋은 시스템일수록 실제 서비스에 적용하기는 더 어렵다는 문제가 발생. 결국 필요한건 headless 인데 생각보다 많지 않고 어떤 선택이 좋은 선택인가에 대한 조심스러운 부분이 있다.

---

Footnotes

1. 참고 ↩

• react-mentions¹
• tribute²
• react-input-trigger³
• react-contenteditable⁴
• draft-js⁵

---

Footnotes

1. textarea에서 특정 키입력이 발생할 경우 액션(멘션)을 발생시키는 기능 ↩

2. 옜날에는 어떻게 한거지? 궁금해서 찾아봤습니다 ↩

3. 입력필드에서 문자 트리거 ↩

4. contenteditable 컴포넌트 ↩

5. 의식의 흐름 속 갑자기 생각나버림 ↩

preBuild 가 appRoot 에서 돌아서 cd ../../ 로 루트로 올라가 설치하고, AMPLIFY_MONOREPO_APP_ROOT(= appRoot)¹ 로 앱 경로를 되짚는다.

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            # AWS Amplify 에서 모노레포 구조를 사용 할 경우 root 레벨로 올라가서 install
            - cd ../../
            - echo "$PWD"
            - yarn install
        build:
          commands:
            - echo "$PWD"
            # 현재 root로 이동한 상태이므로 $AMPLIFY_MONOREPO_APP_ROOT를 바로 참조하도록 설정
            - if [ $NODE_ENV_VARIABLES = ".env.development" ]; then cat "./$AMPLIFY_MONOREPO_APP_ROOT/$NODE_ENV_VARIABLES" > "./$AMPLIFY_MONOREPO_APP_ROOT/.env.production"; fi
            - yarn run "build:$AMPLIFY_MONOREPO_APP"
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    appRoot: apps/app

---

• Monorepo build settings - AWS Amplify Hosting

Footnotes

1. Configuring monorepo build settings - AWS Amplify Hosting: appRoot — “This key must exist, and have the same value as the AMPLIFY_MONOREPO_APP_ROOT environment variable.” ↩

CRA 는 .env 의 ${VAR} 를 이미 있는 환경 변수로 채운다(dotenv-expand)¹ — turbo 가 태스크마다 넣어주는 TURBO_HASH² 를 그대로 받아 쓴다.

# .env
REACT_APP_VERSION=0.0.0-${TURBO_HASH}

REACT_APP_VERSION을 자동으로 입력할 방법을 찾다가 결국 hash값을 추가했다.

---

• Adding Custom Environment Variables | Create React App
• GitHub - motdotla/dotenv-expand: Variable expansion for dotenv. Expand variables already on your machine for use in your .env file.
• Create timestamp variable in bash script - Stack Overflow

Footnotes

1. Adding Custom Environment Variables | Create React App: “Expand variables already on your machine for use in your .env file (using dotenv-expand).” ↩

2. System environment variables | Turborepo: “Turborepo will make the following environment variables available within your tasks while they are executing” — TURBO_HASH: “The hash of the currently running task.” ↩