ziglog
4월 4주차 기록
April 29, 2023 • ☕️☕️ 8 min read
다시 일상으로 🌃
배워가기
ECMAScript 2023에 새로 추가된 함수들
-
배열의 특정 요소를 뒤에서부터 찾을 수 있게 도와주는 함수
.findLast(callback).findLastIndex(callback)
-
원본 배열의 변화 없이 새로운 배열을 반환하는 함수
.toReversed().toSorted().toSpliced().with(index, value)
vite config에서 global This 변수 생성하기
vite config 에서 define 을 사용하여 globalThis 변수를 생성할 수 있다.
// ...
define: {
__APP_VERSION__: JSON.stringify(release),
}이때 생성한 변수는 env.d.ts 파일이나 vite-env.d.ts 파일에서 declare 해 줘야 한다.
또한 string 형태의 값을 할당하는 경우 단순 string 형태의 data가 아니라 stringify 된 형태로 넣어 주어야 한다. (따옴표 포함)
overflow: scroll 의 스크롤바가 사용자마다 다르게 노출되는 이유
같은 OS(맥)더라도 ‘스크롤 막대 보기’ 설정에 따라 다르게 노출될 수 있다
overflow: scroll은 항상 스크롤 막대를 표시한다.
overflow: auto를 사용하며 브라우저 스스로가 스크롤바가 필요한지 여부를 자동으로 결정하도록 하는 것이 좋다.
Ref https://yceffort.kr/2021/01/overflow-auto-scroll
타입스크립트 재귀 타입 만들기
타입스크립트 3.7부터는 타입 별칭만으로 재귀 타입을 만들 수 있다.
type ValueOrArray<T> = T | Array<ValueOrArray<T>>;타입을 지정하면서 지금 지정하고 있는 타입을 우측에 사용한다. 이는 컴파일러가 타입 별칭에 사용할 타입 인자를 늦게 평가하기 때문이다.
타입 별칭의 우측에서 아래 인자 중 하나로 사용되면 컴파일러가 인자를 늦게 확인한다.
- 배열 타입의 인자
- 튜플 타입의 인자
- 제네릭 클래스 인자
- 인터페이스의 인자
Ref
- https://github.com/microsoft/TypeScript/pull/33050
- https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#more-recursive-type-aliases
- https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
jest의 toBeTruthy() vs toBe(true)
toBeTruthy()-!!연산자로 true값을 확인한다. true/false값이 아니어도 값이 ‘존재하기만 하면’ 통과해버릴 수 있음toBe(true)- Boolean true값인지 확인한다. true/false값을 검증하고 싶을 땐toBe(true)를 사용한다.
gitlab ci 이모저모
-
gitlab ci 파일에서
- ‘.’으로 시작하는 job의 경우 gitlab-ci에서 처리되지 않는다.
- 해당 기능을 사용해 job이 동작하지 않게 하거나 템플릿으로 활용할 수 있다.
-
gitlab ci 파일에서
- 같은 stage에 있는 job들은 병렬 실행된다
-
Git strategy for CI/CD
- CI에서 프로젝트를 가져올 때 git strategy를 사용하여 가져올 방식을 정할 수 있다
- git clone - 각 job마다 repository를 clone한다
- git fetch - 각 job마다 프로젝트 워크스페이스를 재사용한다.
- git fetch가 더 빠르지만, 뭔가 캐시가 남아서 문제가 되는 경우가 있다. 이럴 때는 ci yaml 파일에 다음 옵션을 지정해준다
variables: GIT_STRATEGY: clone
Ref
git command 이모저모
- git push
—-dry-runoption- 실제로 실행은 되지 않으면서, 실행되었을 때 어떻게 되는지 보여준다
- git commit
—-no-verifyoption- husky 등으로 설정한 commit hook을 skip해준다
Next.js의 2가지 Head
next/document의Head- script tag를 파싱한다
_document.tsx파일에서 사용하며, 서버사이드에서 정적으로 렌더링된다- 모든 페이지에서 공통으로 적용되는
<head>코드다.
next/head의Head<meta>,<title>,<base>태그만을 파싱한다_app.tsx또는 pages의 파일들에서 사용하며, 서버사이드와 클라이언트 사이드에서 로드된다<title>태그 등은 pages나 components에서next/head의Head와 사용할 것을 권장한다
Ref
- https://github.com/vercel/next.js/discussions/12290
- https://nextjs.org/docs/advanced-features/custom-document
이것저것
- TypesScript 프로젝트에서는 eslint의
no-undefrule을 사용하지 않는 것을 권장한다.no-undefrule은 전역 변수를 검사하는데 타입스크립트를 사용하지 않기 때문이다. 타입스크립트에서 이미no-undefrule에서 하는 역할을 해주고 있으며, 심지어 훨씬 더 잘한다. (Ref) <img>태그를 스크린 리더가 읽을 때 스크린 리더는 해당 태그가 Image임을 이미 알고 있다. 따라서altattribute에 “picture”, “image”, “photo” 등의 단어를 추가하는 것은 불필요하다. (Ref)- 메뉴를 우클릭 했을 때 ‘새 탭에서 열기’, ‘새 창에서 열기’ 등의 옵션을 제공하고 싶다면
a태그를 사용해야 한다. - copilot 사용 팁 - 열려있는 탭에서 context를 읽기 때문에, 열려 있는 탭이 많아야 많은 정보를 줄 수 있다.
- OpenAPI 스펙은 언어에 상관없이 RESTful API를 설명하기 위한 정의 포맷이다. (cf.Nest는 데코레이터를 활용하여 이러한 구체화를 제공하는 킹왕짱 module(nest/swagger)을 제공한다.)
- 동일한 EventListener들이 같은 EventTarget에 같은 parameter로 등록된다면, removeEventListener를 별도로 등록해주지 않아도 중복된 인스턴스들은 제거된다. 따라서 EventListener가 2번 호출될 일은 없다. 다만 이벤트 콜백을 익명함수로 넘기면 서로 다른 이벤트핸들러로 인식하여 2번 호출될 수도 있다! (Ref)
- 턴키(turn key) - 열쇠(key)를 돌리면(turn) 모든 설비가 가동되는 상태로 인도한다는 뜻으로, 건설업체가 공사를 처음부터 끝까지 모두 책임지고 다 마친 후 발주자에게 열쇠를 넘겨주는 방식
기타공유
테크니컬 라이팅 10가지 원칙
1.목소리와 어조: 일상 대화체로 글을 쓰되, 필요 이상으로 구어체 표현을 사용하지 않습니다.
2.눈높이: 사용자 관점을 고려해 글을 씁니다.
3.정확성: 정확한 내용을 씁니다.
4.문장 요건 1: 간결하고 명확하게 씁니다.
5.문장 요건 2: 능동형/피동형 문장, 단문/복문을 적절히 사용합니다.
6.번역 투 표현: 영어, 일본어, 중국어에서 온 번역 투 표현을 국어식 표현으로 바꿔씁니다.
7.외래어 표기: 국립국어원의 외래어 표기법을 따릅니다.
8.(GitLab 관련) 영문 표기: 줄임말과 영문 표기법은 아래 사항을 따릅니다.
9.전문 용어: 전문 용어(Technical Term)는 꼭 필요할 때 사용합니다.
10.퇴고: 다음 절차를 거쳐 글을 수정합니다.
나름 글 많이 썼던 문과생 출신으로서, 개발자로도 글을 잘 쓰기 위해 꼭 필요한 스킬들이라고 생각한다.
Ref https://insight.infograb.net/blog/2023/03/30/technical-writing-guide/
마무리
처음 근로자로 쉬어보는 근로자의 날(작년에는 일요일이었다 ㅠ)
좋구만 ☺️
Relative Posts:
4월 3주차 기록
April 21, 2023
지그의 개발 블로그
