9월 1주차 기록

시간이 가는 것을 받아들이기

배워가기

logTestingPlaygroundURL

RTL의 screen.logTestingPlaygroundURL()은, 테스트에서 함수가 호출되는 시점에 문서 내에 어떤 요소를 그리고 있는지 직접 확인할 수 있도록 페이지 URL을 제공한다.

원하는 지점에 코드를 넣고 테스트를 실행하면 URL이 뜬다.

제공하는 URL에 들어가보면 화면이 어떻게 렌더링되어 있는지 볼 수 있다.

CSS는 Testing Playground에서 사용하는 디자인이 기본으로 적용되있다. jest-preview 만큼의 재현력은 아니지만 간단하게 화면 확인하는 용도로 사용할 수 있다.

자바스크립트의 날짜 표기 문자열

자바스크립트의 날짜 표기 문자열은 ISO 8601의 간소화한 버젼을 따르고 있다.

ISO 8601에 따른 날짜 시간 문자열의 구체적인 형식은 다음과 같다.

YYYY-MM-DDTHH:mm:ss.sssZ

• T - 날짜와 시간을 구분하기 위한 구분자
• Z - 타임존을 나타낸다. Z만 기재한 경우에는 UTC+00:00을 나타내며, +09:00 로 기재하는 경우 UTC+09:00 을, -09:00 로 기재하는 경우 UTC-09:00 을 나타낸다. (타임존은 생략이 가능하며, 생략 시 현재 구동환경의 로컬타임존으로 간주된다.)

자바스크립트에서는 Date.parse() 메서드를 통해 ISO 8601 형식의 문자열을 Timestamp 값으로 변환할 수 있다.

Date.parse("2022-09-02T23:40:00.000Z"); // 1662162000000

이때, 타임존(Z)이 빠져있는 경우 구동환경에 의존하는 로컬타임존별로 다른 결과를 반환할 수 있으니 주의해야 한다.

Ref

• https://bigsaigon333.github.io/posts/date-time-string-format-in-js
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#date_time_string_format

타입스크립트 intersection 대신 interface

타입스크립트에서는 타입을 확장해서 사용할 때 intersection보다 interface를 권장하고 있다.

interface는 하나의 플랫한 객체 타입을 생성하여 프로퍼티의 충돌을 발견할 수 있다. 하지만 intersection은 그저 재귀적으로 프로퍼티를 합치기 때문에, 어떤 경우에는 never를 반환할 수도 있다. 또한 interface는 intersection에 비해 더욱 다양하게 활용될 수 있으며, interface 간의 타입 관계는 캐시된다는 장점이 잇다.

마지막으로 intersection에서 타입을 체크할 때, 모든 요소들이 플랫한 타입과 대조하기 전에 체크된다. (? 대체 해석을 어떻게 해야 하는지…)

A final noteworthy difference is that when checking against a target intersection type, every constituent is checked before checking against the “effective”/“flattened” type.

모르겠다. 🤯

Ref https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections

타입스크립트 유틸리티 꿀팁

• NonNullable<T>로 간단하게 타입에 포함된 null 과 undefined 를 제거할 수 있다.

type T = NonNullable<string[] | null | undefined>;

const A: T = ["a", "b", "c"]; // O
const B: T = null; // X

• Parameters<T>는 함수의 매개변수에 사용한 타입들을 Tuple로 반환한다.

type T = Parameters<(a: number, b: number) => number>; // T = [number, number]

const A: T = [1, 2]; // O
const B: T = [1, 2, 3]; // X

array.prototype.at()

양/음의 정수를 받아서 그 값에 해당하는 배열의 인덱스 요소를 반환한다.

대괄호 표기법과 무슨 차이가 있나 싶지만, 음수의 경우 배열의 뒤에서부터 인덱스를 카운팅하기 때문에 -1을 사용하면 배열 맨 끝에 있는 요소를 쉽게 가져올수 있다. 즉 array[array.length-1] 대신 array.at(-1)을 사용하면 된다.

package install 명령어

package.json에 scripts를 입력할 때, install은 예약어기 때문에 커스텀할 수 없다.

직접 install이라는 키워드로 script를 작성해두면, install의 기본 동작 이후에 실행된다. 이를 구분하기 위해 install 대신 postinstall 키워드로 등록하는 것을 권장하고 있다.

그 외에도 다양한 scripts 예약어는 여기서 확인할 수 있다.

슬랙 멘션 구분

• @everyone - #일반 채널의 모든 사람에게 알림을 보냄
• @channel - 채널의 모든 멤버에게 알림을 보냄
• @here - 채널의 대화 가능 멤버들에게만 알림을 보냄

시니어 사용성

시니어 사용자들의 사용자 경험을 시니어 사용성 이라고 명칭한다.

ex) 스마트폰 자체에 내장되어 있는 “화면 크기 크게” 설정은 position absolute 로 개발한 영역에 영향을 줄 수 있다. ex) ios에서 디스플레이 확대 설정을 ON 했을 때, 아이콘 폰트 사이즈 등이 커진다. 이 경우 설정했던 px보다 커지고, 결국에는 UI에 영향을 끼칠 수 있다.

Next.js의 환경변수 조회 순서

Next.js 에서 환경변수는 아래와 같은 순서로 조회하며 변수를 발견하는 순간 중지한다.

1. process.env
2. .env.$(NODE_ENV).local
3. .env.local (NODE_ENV = test 일 때는 skip)
4. .env.$(NODE_ENV)
5. .env

Next.js 에서의 환경변수는 기본적으로 Node.js 환경에서만 사용할 수 있다. 브라우저 환경에서도 사용하려면 환경변수에 NEXT_PUBLIC_를 prefix 로 붙여준다. prefix가 있는 환경변수는 빌드시 인라인된다.

git branch 이름 조심

git branch를 생성하면 refs/heads/~에 저장된다.

branch name에 /를 넣는 것은 문제가 되지 않지만, 이미 존재하는 브랜치의 하위 개념으로 /를 사용해서 브랜치를 생성하면 막힌다.

예를 들어, feature/sample 이라는 branch name을 생성하는 것은 문제 없지만, 그 후에 feature/sample/sub와 같은 브랜치를 생성할 수는 없다.

물론 기존에 feature라는 브랜치가 있었다면, feature/sample 브랜치 또한 만들 수 없다.

IOS버전과 Safari버전의 상관관계

• safari 11.0버전에서는 … spread 연산자를 지원하지 않는다.
• safari 12 에서 Access-Control-Allow-Headers는 \* wildcard를 지원하지 않는다. (wildcard임에도 CORS에러가 발생한다.)

Ref https://en.wikipedia.org/wiki/Safari_version_history

fastdom

fastdom 라이브러리는 DOM의 읽기/쓰기 연산을 batch 처리 함으로써 layout thrashing을 제거해준다.

measure와 mutate 메서드로 queue에 job을 스케쥴링할 수 있다. 각 메서드는 스케쥴링된 job을 clear할 수 있는 유일한 ID를 반환한다.

fastdom.measure(() => {
  console.log("measure");
});

fastdom.mutate(() => {
  console.log("mutate");
});

fastdom.measure(() => {
  console.log("measure");
});

fastdom.mutate(() => {
  console.log("mutate");
});

// 실행 결과
measure;
measure;
mutate;
mutate;

Ref

• https://www.npmjs.com/package/fastdom
• https://github.com/wilsonpage/fastdom

display: flex 이모저모

container가 display: flex일 때, justify-content와 align-items를 통해 수평/수직 정렬을 정할 수 있다. 이때 그리고 align-self를 통해 container의 자식 중 하나의 요소에만 특정한 위치를 지정할 수 있는데, justify-self라는 속성은 없다는 사실을 깨달았다!

사실 아직도 정확한 이유는 모르겠지만, 스택오버플로우 글에 따르면 justify-content로 정하는 축의 방향에서 특정 자식 요소의 위치만 정해주려면 자식 요소에 margin: auto를 사용하면 되기 때문이라고 한다.

margin: auto is an alternative to justify-content: center and align-items: center. container가 display: grid인 경우 justify-self 속성이 있다. 말 그대로 자식 요소가 속한 grid cell에서 어디에 위치할 것인지를 결정한다.

그리고 해당 글을 읽다보니, align-items 대신 align-content라는 것도 있었다. (여태까지 그냥 justify-content와 align-items의 명칭을 의심하지 않고 사용했던 것 같다… 🙄)

align-items와 align-content의 차이는 간단하다. align-items는 축이 하나일 때 자식 요소들 간의 정렬을, align-content는 축이 여러 개(multiline)일 때 축 간의 정렬을 조정한다.

• https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items
• Ref

Ref

• https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties

이것저것

• Next.js를 사용할 때 빌드 속도가 느리다면 tsconfig의 target을 점검해보자.
• 포카 요케 (ポカヨケ, poka-yoke) - 일본어로 “실수를 피하는“이란 뜻으로, 품질 관리의 측면에서 실수를 방지하도록 행동을 제한하거나 정확한 동작을 수행하게끔 하도록 강제하는 여러 가지 제한점을 만들어 실패를 방지하는 방법이다.

마무리

아주 어렸을 때부터 숙원 사업이었던 것 중 하나를 드디어..! 예약했다. 뭔지는 비밀

토스 다니는 크루의 개발자 지인 식사 찬스를 마침내, 근 한 달 만에 사용했다. 그리고 가는 길에 또 삐어서 또 깁스를 했다 🥲 정말 개노답 인생… 함께 있던 남자친구한테 업혀서 갔다. 참 우당탕탕 인생. 게다가 허리까지 삐어서 두 군데 모두 치료를 받고 있다. 깁스하고 걸으면 무게가 기울어져 쏠리는 데 그것 때문에 허리가 더 아프다.

이번주 월요일, 서울대 학위수여식에서 동문이자 필즈상 수상자인 수학자 허준이 교수님이 축사를 하셨다. 영상을 찾아봤는데, 지나치게 뭉클하지 않으면서도 다정하고 마음을 건드리는 축사였다. “나 자신에게 친절하자”는 말이 머리에서 맴돈다. 내가 가장 못했던 게 나 자신을 사랑하는 일이었는데, 내 자신에게 친절하는 건 왠지 쉬울 것 같으면서도 더 어렵다는 생각이 든다.

회사는, 피트스탑이 끝나고 새로운 과제를 시작했다. 시작부터 레거시를 걷어내느라 대난관이지만, 잘 해내리..! 사이드로 진행중인 프로젝트도 다시 힘차게 출발했고, 새로운 멤버들과 합주도 계속 하고 있다.

적어놓고 보니 꽤 많은 일들을 하고 있네. 벌써 9월이다, 라는 말은 왠지 떠오르지 않는다. 9월이 될 만해서 9월이 된 것 같다.