# 비디오 자르기
ffmpeg -i INPUT.mp4 -ss 00:00:00 -to 00:01:00 -c:v copy -c:a copy OUTPUT.mp4
#ffmpeg
#237
# 빌드 시 timestamp를 참조하기 위한 방법
timestamp=$(date +%s) # 1670759329

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

Footnotes

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

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

#shell#node#env
#235
# `System limit for number of file watchers reached`

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

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

Footnotes

  1. 참고 ↩

#ui#design_system#headless
#233

Footnotes

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

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

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

  4. contenteditable 컴포넌트 ↩

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

#editor#input
#232
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
#231
# .env
REACT_APP_VERSION=0.0.0-${TURBO_HASH}

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

#create-react-app#node
#229
yarn add -D react-app-rewired customize-cra

// package.json
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
},

// .babelrc
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

// config-overrides.js
const { useBabelRc, override } = require('customize-cra')

module.exports = override(useBabelRc())

CRACO로 구성하는게 지금은 맞는 것 같다.

#create-react-app#deprecated
#228
interface PaginationProps {
  /** 현재 페이지 번호 */
  currentPage: number;
  /** 전체 페이지 수 */
  totalPages: number;
  /** 페이지 변경 시 호출되는 콜백 함수 */
  onPageChange: (pageNumber: number) => void;
  /** 이전/다음 페이지 링크 표시 여부 (선택적) */
  showPreviousNext?: boolean;
  /** 페이지 번호 링크 표시 여부 (선택적) */
  showPageNumbers?: boolean;
  /** 페이지당 항목 수 (선택적) */
  pageSize?: number;
}

하지만 너무 많은 기능이 필요없기 때문에 최대한 단순한 컴포넌트를 만들었다.

#pagination
#227
- 프로젝트에 새롭고 반짝이는 기술보다는 지루한 기술을 선택하는 것이 좋습니다.
- 흥미로운 기술은 프로젝트에 불필요한 위험을 초래할 수 있습니다.
- 이미 확립되고 입증된 기술이 성공적인 결과로 이어질 가능성이 더 높습니다.
- 신기술을 둘러싼 과대 광고는 오해의 소지가 있습니다.
- 신기술의 수명을 예측하기는 어렵습니다.
- 지루한 기술은 화려하지 않을 수 있지만 안정적이고 신뢰할 수 있으며 예측 가능합니다.
- 최신 기술 유행보다는 비즈니스 문제 해결에 집중하세요.
- 사람과 프로세스에 투자하면 더 나은 결과를 얻을 수 있습니다.
- 지루한 기술을 선택하는 것은 보수적이거나 위험을 피하기 위한 것이 아니라 프로젝트의 장기적인 성공을 우선시하는 정보에 입각한 결정을 내리기 위한 것입니다.

Footnotes

  1. Dan McKinley :: Choose Boring Technology ↩

  2. 항상 최신의 최첨단 솔루션을 쫓기보다는 확립되고 신뢰할 수 있는 기술을 사용하는 것을 지지하는 글. 특히 장기 프로젝트의 경우 기술 선택에서 안정성과 예측 가능성의 중요성을 강조. ↩

#bookmarks
#222
15 중 5페이지
이전 페이지다음 페이지