4월 4주차 기록

April 27, 2024 • ☕️☕️ 8 min read

weekly

배워가기

nest의 ConfigService

여러 환경에서 실행될 수 있는 앱의 환경변수를 관리하기 위한 기능
환경별로 설정된 .env 파일을 통해 특정 환경에서 앱을 실행시킨다

Ref https://docs.nestjs.com/techniques/configuration

docker-compose를 사용하는 이유

여러 컨테이너가 있는 앱을 하나의 yaml 파일에서 손쉽게 정의하고 관리할 수 있다.
컨테이너를 생성하는 설정(config)를 캐싱하기 때문에, 변경사항이 없다면 컨테이너를 빠르게 실행할 수 있다.

Ref

CSS mix-blend-mode

어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정한다.

이미지가 여러 레이어로 겹쳐 있거나, 이미지 위에 있는 텍스트의 색상을 블렌딩하여 표현하고 싶을 때 사용한다.

포토샵에서 사용하는 블렌드 모드와 유사하다.

Ref

중재자(mediator) 패턴

모든 클래스간의 복잡한 로직(상호작용)을 캡슐화하여 하나의 클래스에 위임하여 처리하는 패턴이다.
즉, M:N의 관계에서 M:1의 관계로 복잡도를 떨어뜨려 유지 보수 및 재사용의 확장성에 유리한 패턴이다.
커뮤니케이션을 하고자 하는 객체가 있을 때 서로가 커뮤니케이션 하기 복잡한 경우 이를 해결해주고 서로 간 쉽게 해주며 커플링을 약화시켜주는 패턴이다.

항공기 조종사들은 다음에 누가 비행기를 착륙시킬지를 결정할 때 서로 직접 대화하지 않습니다. 모든 통신은 비행기 관제탑을 통해 이루어집니다.

🤔 중재자 vs 옵저버?

중재자의 주목적은 시스템 컴포넌트들의 집합 간의 상호 의존성을 제거하는 것이다. 그러면 이러한 컴포넌트들은 대신 단일 중재자 객체에 의존하게 된다. 옵저버 패턴의의 목적은 객체들 사이에 단방향 연결을 설정하는 것으로, 여기서 일부 객체는 다른 객체의 종속자 역할을 한다.

Ref

axios response.status ‘0’

XMLHttpRequest 요청 중 timeout이 발생했을 때 기본값으로, HTTP 응답을 받지 못한 상태를 가리킨다. 웹 서버가 응답을 보내기 전에 클라이언트가 연결을 닫았음을 나타내는 데 사용된다.

http status code는 3자리 수로, ‘0’은 http status code도 아니다.

참고로 nginx loki에서는 status 499로 찍힌다. HTTP 표준 상태코드가 아니며, nginx 전용으로 사용된다.

fetch API의 특이사항

fetch() API는 CORS, 네트워크 오류 등은 reject하지만 404, 500같은 서버 응답 오류는 reject가 아닌 resolve로 처리한다. 이때 오류가 발생하지 않으므로 catch에 잡히지 않는다.

fetch()의 정확한 성공 여부는 res.ok를 통해 직접 알아내야 한다.

Ref https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

single file로 Node.js 활용하는 방법

node_modules 없이 import하는 방법
- --experimental-network-imports (Nodejs 18+)
.mjs 확장자 없이 esm 사용하는 방법 --experimental-default-type="module"
커맨드 옵션을 줄줄이 쓰지 않아도 되게끔 hashbang 활용하기 (=standalone executable로 만들기)
- #!/usr/bin/env -S NODE_TLS_REJECT_UNAUTHORIZED=0 node --experimental-default-type module --experimental-network-imports

HTML 파일 하나로 React/JSX 사용하기

@babel/standalone 사용하기
- non-node.js 환경에서 babel을 사용할 수 있다
script 태그 작성하기
- ex) <script type="text/babel" data-presets="react" data-type="module"></script>
- @babel/standalone에서 text/babel을 인식하여 트랜스파일한다
- babel preset이 react로 설정된다

how to vertically center a div with CSS

이제 display: block에도 align-content: center를 적용해서 수직 정렬을 할 수 있다

Ref https://web.dev/blog/align-content-block?hl=en

Layout Viewport vs Visual Viewport

Layout Viewport와 Visual Viewport는 다르다. (실제 레이아웃이 표시되는 영역과 사용자에게 보여지는 화면 ex. 줌인/아웃, 가상키보드로 인한 표시 등)

iOS 만 그렇게 동작하고 있었으나. 크롬 108 버전부터 동일하게 동작한다.

(다만 안드로이드의 경우 웹뷰에서 setSoftInputMode("resize")를 지원하고 있다.)

해당 메서드를 사용하는 경우 레이아웃 크기가 변동되기 때문에 iOS 와 동작이 다르다

위 이슈로 인해 css fixed 속성을 가진 경우 keyboard에 가려지는 현상이 발생한다.

Ref https://developer.chrome.com/blog/viewport-resize-behavior/

ECMAScript에서 객체의 속성 키

ECMAScript에서 객체의 속성 키는 문자열 또는 심볼이다.
속성 키가 n == ToString(ToInt(n)) 을 만족하면 인덱스가 될 수 있다.
그래선지 -0 은 인덱스 0이 되지만, “-0”은 인덱스가 될 수 없다.

Copy
```
const a = {}; a[-0] = 3; a["-0"] = 9 // { -0: 9, 0: 3 }
```
NaN은 숫자이므로, NaN != NaN이지만 a[NaN] = 3을 무한히 반복한다고 무한한 수의 NaN 키가 추가돼 블랙홀이 되진 않는다. "NaN"이 될 뿐…

이것저것 모음집

npm의 pg 패키지 - Node.js를 위한 논블로킹 PostgreSQL 클라이언트 (Ref)
vscode에서는 builtin extension이 있다. (ex. TypeScript and JavaScript Language Features). extension 검색창에 @builtin, @installed 등등 여러가지 키워드로 검색할 수 있다