4월 3주차 기록

배워가기

webpack-shell-plugin-next

• webpack의 deprecated method를 수정해준다.
• webpack5의 빌드 전후에 shell command를 실행할 수 있게 해준다.
• 크론 잡, 리포팅 툴, 테스팅 도구와 함께 사용하면 좋다

Ref https://www.npmjs.com/package/webpack-shell-plugin-next

gitlab-ci의 tags

• 프로젝트에서 사용 가능한 모든 러너 중 특정한 러너를 선택할 수 있다
• 러너를 등록하면, 러너의 태그를 명시할 수 있다. (ex. ruby, postgres, or development) job을 선택해서 실행할 때, job에 명시된 모든 태그에 러너가 할당되어야 한다

ex)

job:
  tags:
    - docker

• docker 태그를 가지고 있는 러너만 job을 실행할 수 있다

Ref https://docs.gitlab.com/ee/ci/yaml/#tags

yml 캐시 정책

• cache: policy
  • 캐시의 업로드/다운로드 방법을 조정하고 싶을 때 사용하는 키워드
  • cache: paths를 지정하지 않으면 아무것도 캐시되지 않는다.
• 정책 종류
  • pull-push 정책 (기본값)
    • Job이 시작되면 캐시를 다운받는다.
    • Job이 끝나면 캐시에 변경사항을 업로드한다.
  • pull 정책
    • Job이 시작되면 캐시를 다운받는다.
    • Job이 끝나도 변경사항에 대해 업데이트하지는 않는다.
    • 병렬로 실행되는 여러 잡이 같은 캐시를 공유하게 하고 싶다면 pull정책 추천
      • Job 실행 속도를 올려주고, 캐시서버에 부담도 줄여준다.
  • push 정책
    • Job이 시작되도 캐시를 다운받지 않는다.
    • Job이 끝나면 캐시를 업로드한다.
    • 캐시를 빌드하려는 거라면 push정책 추천

Ref https://docs.gitlab.com/ee/ci/yaml/#cachepolicy

pnpm monorepo의 패키지 의존성 이해하기

• dependencies
  • pnpm에서 dependency로 설치한 패키지는 node_modules 디렉토리에 저장된다.
  • 모노레포의 여러 워크스페이스에서 dependency가 사용된다면, 각 워크스페이스의 package.json의 dependencies에 명시되어야 한다.
  • 모노레포의 한 워크스페이스에서dependency가 사용된다면, 그 워크스페이스의 package.json에만 명시하고, 루트의 package.json에는 명시하지 않는다.
• peerDependencies
  • peerDependencies는 특정 워크스페이스가 의존하고 있지만, 그 워크스페이스를 사용하는 쪽에서 패키지를 제공해줄 것이라고 생각하는 패키지를 가리킨다.
  • 워크스페이스가 다른 워크스페이스의 특정 버전에 의존하고 있는 경우 사용된다.
  • peerDependencies를 명시한 워크스페이스를 사용하는 다른 워크스페이스에서는 반드시 해당 패키지를 제공해야 한다.
• devDependencies
  • 개발과 테스트에서만 사용되며, 운영에서는 사용하지 않는 패키지를 가리킨다.
  • pnpm은 devDependencies로 설치한 패키지를 node_modules에 설치하지만, 운영 빌드에서는 사용하지 않는다.
  • 모노레포의 여러 워크스페이스에서 devDependency가 사용된다면, 각 워크스페이스의 package.json의 devDependencies에 명시되어야 한다.

Ref https://dev.to/adamgoth/understanding-package-dependencies-within-a-pnpm-monorepo-19ge

linux의 less와 more 명령어

• more - 파일의 콘텐츠 양이 너무 많아. 하나의 화면에 다 읽어들일 수 없는 경우, more 명령어로 파일을 page 별 혹은 line 별로 손쉽게 읽어 들일 수 있다.
• less - more 와 유사하지만, 파일을 한번에 읽어들이지 않기 때문에 더 빠른 속도를 낼 수 있다.

Ref https://minholee93.tistory.com/entry/Linux-More-Less

이것저것 모음집

• iOS 버전 업데이트는 Webkit 버전 업데이트도 포함한다
• rimraf - rm -rf 명령어를 수행해주는 도구(Ref)
• border-collapse의 의미 - collapse일 경우, 셀들끼리 서로 border를 공유한다는 의미. (border가 얇아져보일 수 있다.)

기타공유

타입스크립트에서 as const 이해하기

원시값, 객체, 배열, 그리고 react hook에서 as const가 어떻게 유용하게 사용될 수 있는지!

Ref https://soobing.github.io/typescript/typescript-as-const/

자바스크립트 signal?

반응형 모델을 구축하고자 탄생한 개념 같은데, 일단 너무 낯설고 어려워 잘 와닿지 않는다 🤷‍♀️

Ref

• https://github.com/tc39/proposal-signals
• https://junghan92.medium.com/번역-자바스크립트-signal의-진화-4bd6a991d2f

[번역] UI는 좀 이따 생각해봅시다

웹 애플리케이션이 무엇일까요? 이 포스트를 작성하는 목적과 관련이 있는데, 웹 애플리케이션이란 그저(a) 사용자가 여러분의 비지니스를 사용할 수 있도록(interact) 제공되는 사용자 인터페이스입니다(user interface). 여기서 짚고 넘어가셔야 할 것은 그저 하나의(a) 사용자 인터페이스라는 점입니다. **유일한(the)**게 아닙니다. 잘 만들어진 프론트엔드의 목표는 걸리적거림이 적고 좋은 사용자 경험을 제공하며 이를 여러분의 비지니스 과정에 잘 녹여내는 것입니다. 하지만 프론트엔드가 비지니스 그 자체라고 보면 안됩니다!

리액트와 여러 다른 도구를 사용하여 서비스를 개발하는 프론트엔드 개발자의 관점에서, 내가 어떻게 개발을 진행하고 있었는지 한번 생각해볼 만한 글 🙂

마무리

이 망할 개츠비는 왜 매주 이렇게 한번씩 나사가 빠지는지! 😡

어쨌든 이번주도 잘 먹고 잘 놀았다 🫠