8월 4주차 기록

이번주 왜이렇게 기냐

배워가기

docker 명령어 이모저모

• docker cp {originPath} {container}:{targetPath}: originPath의 디렉토리or파일을 container 내부 targetPath로 복사한다.
• 종료된 docker container 재실행/접근하기
  • docker ps -a: 실행/종료된 컨테이너를 전부 조회한다.
  • docker restart {containerId}: 위에서 조회한 컨테이너 중 지정해서 재실행한다.
  • docker attach: background에서 실행중인 컨테이너를 foreground로 가져온다.

echo - 문자열 표준 출력 명령어

• > / >>
  • 표준출력(stdout), 표준에러(stderr)를 redirection하는 명령어
  • ex) ls > file.txt: ls 명령어의 표준출력을 file.txt에 덮어쓴다 (overwrite)
  • ex) ls >> file.txt: ls 명령어의 표준출력을 file.txt에 추가한다 (append)
  • 표준에러의 경우 stderr를 의미하는 숫자 2를 함께 사용해야한다
  • ex) errormsg 2> file.txt

yum, apt와 같은 패키지는 npm과 다르다.

노드 생태계는 npm, pnpm, yarn 등 어떤 패키지매니저를 쓰더라도 모두 npm repository에 있는 패키지를 가져다 설치한다. (단일 저장소)

하지만 yum, apt와 같은 linux 생태계의 패키지 매니저는 단일 저장소가 아니다. npm과 비교해서 너무나도 거대하고, OS나 CPU 아키텍쳐에 따라 서로다른 패키지를 사용해야하는 복잡한 생태계이기 때문에 각 환경에 맞는 저장소를 따로 가지고 있다고 한다. 따라서 yum, apt로 특정 패키지를 설치하고자 할 때 환경에 따라(저장소 경로가 다르기 때문에) 그 패키지가 없을 수도 있다.

💡기타 Tips

• yum repolist all로 모든 저장소에 대한 정보를 조회할 수 있다
• apt/yum update는 apt, yum 또는 설치된 패키지들을 업데이트하는게 아니라 설치 가능한 패키지 리스트를 최신화하는 명령어다.
• docker buildx build: 멀티 플랫폼 빌드
  • docker build는 기본적으로 amd64 기반 이미지로 빌드하기 때문에, 다른 아키텍쳐 기반의 이미지로 만들기 위해서는 buildx를 사용해야 한다.
  • -load : --output=type=docker의 약어
  • -plotform : 빌드할 환경(플랫폼) 아키텍쳐를 선택한다. linux/arm64를 지정한다면 베이스 이미지를 계속 타고 올라가면서 linux/arm64 환경으로 빌드된 베이스 이미지들로 이미지를 빌드한다. 만약 상위로 올라가면서 베이스 이미지가 지정한 아키텍쳐에 맞는 버전이 없다면 빌드가 실패한다.

vite의 path alias 설정하기

tsconfig.json에서 baseUrl은 절대경로로 import 해 올 모듈의 베이스 디렉토리를 설정해준다 (ex. "baseUrl": "src")

하지만 vite의 dev모드에서는 먹히지 않나보다… 절대경로로 import 한 경로를 찾지 못한다.

vite.config.ts의 alias에 다음과 같이 작성해줘야 한다.

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: path.resolve(__dirname, "src") },
      {
        find: "@components",
        replacement: path.resolve(__dirname, "src/components"),
      },
    ],
  },
});

일일이 alias를 등록해주기 귀찮다면, vite-tsconfig-paths를 사용한 더 간단한 방법도 있다!

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

Ref https://velog.io/@real-bird/React-Vite-환경에서-path-alias-설정하기

vite가 생성하는 tsconfig.json vs tsconfig.node.json

vite에서는 타입스크립트 코드가 실행되는 환경이 2개 있기 때문에 2개의 설정 파일이 필요하다

1. src 디렉토리 하위의 app은 브라우저에서 실행
2. vite는 자체적으로 node 환경에서 실행되는 config가 필요하다

vite의 환경변수

Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, (출처)

Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여 나타낸다. (출처)

vite config 커스텀하기

• command로 dev/prod 환경을 구분할 수 있다

  Copy

  export default defineConfig(({ command, mode, ssrBuild }) => {
    if (command === "serve") {
      return {
        // dev specific config
      };
    } else {
      // command === 'build'
      return {
        // build specific config
      };
    }
  });

• mode로 사용중인 모드를 알 수 있다

  • ex) 기본적으로, dev 명령으로 실행되는 개발 서버는 development 모드로 동작하고, build 명령으로 실행되는 경우에는 production 모드로 동작합니다.

MSG(조미료 아님)

• Mock Service GUI; API 모킹 경험을 향상시키는 React 및 MSW 기반 GUI 라이브러리
• MSW의 원본 동작을 수정하지 않고 API 모킹 핸들러를 추적하고 확장하는 기능을 제공
• 개발자가 쉽고 안정적으로 API 모킹을 설정하고 관리할 수 있도록 도와주며, 실제 API 응답 값과 모킹된 응답 값을 검증하고 비교하는 기능도 제공
• Mock Service GUI에서 제공하는 기능 중 하나인 프리셋 기능은 흔히 사용하는 모킹 정보를 저장하고 공유할 수 있게 해주며, 이를 통해 프로젝트 간에 일관된 API 모킹 설정을 유지
• Jest, Cypress와 같은 테스트 환경까지 지원

Ref 사내 위키

이것저것

없다!

기타공유

multi.app

상대방의 맥북 컨트롤에 모두 엑세스 할 수 있는 툴이다. 원격제어 같기도 하고…?

UI는 피그마와 비슷한 느낌.

Ref https://multi.app/

lightningcss

Rust가 얼마나 핫하고 빠르면 이제 Rust로 만든 CSS parser까지 나왔다.

Ref https://github.com/parcel-bundler/lightningcss

typia5의 새로운 기능

typia는 런타임 타입 검사기로, 주로 백엔드에서 클라이언트의 요청이 약속된 타입과 일치하는지 검사하는 데 쓰이는 오픈소스 라이브러리다.

typia5에서 유효성 검증 함수에 type tags를 도입했다고 한다.

export type Maximum<Fixed extends number | bigint> = {
  "typia.tag"?: {
    target: Fixed extends number ? "number" : "bigint";
    kind: "maximum";
    value: Fixed;
    validate: `$input <= ${Fixed}`;
  };
};

참고로 한국인이 만들었다고 한다! 😲

Ref

• https://github.com/samchon/typia/pull/782
• https://okky.kr/articles/1428465

마무리

아직 덥긴 하지만, 슬슬 선선해지고 있는 것 같기도 하다… 마참내! 🤩

일도 많이 하고, 지난 휴일 동안 빼먹었던 일상의 루틴들도 다시 돌리고, 주말엔 책도 읽고, 드라마도 보고, 맛있는 것도, 쇼핑도 실컷!

처음으로 그 핫하다는 탕후루를 먹어봤는데, 한번 먹고 싫어할 것 같다는 나와 짝꿍의 예상과 달리 둘 다 꽤나 맛있다는 평을 내렸다. 마라탕은 한번 먹고 싫었었는데, 탕후루 너 매력적이네…

그치만 당 조심해야지 😬