[TIL] 20220919–20221017

hansol yang

6 min readOct 17, 2022

TIL 묶음

Playwright in CI

screenshot 테스트를 ci 에서 돌릴 경우 환경이 linux 이기 때문에 그에 맞는 설정이 필요하다.

try/catch with async/await

async/await 코드에서 try/catch 로 감싸는 이유는 프로미스가 reject 되면 예외를 던지기 때문. 즉, ‘써야한다’보다 ‘쓸 수 있다’. 그러니까 쓰는게 좋다 식으로 이해하면 더 와닿는 듯

s3 리소스 관리

s3 리소스를 관리할 때 크게 폴더를 나누고 안에서 날짜등 구분할 수 있는 폴더를 둬서 따로 관리를 한다거나 파일명 뒤에 구분할 수 있는 플래그를 붙여서 관리하면 리소스 관리나 파일 변경시 캐싱에 혼선이 있는걸 막을 수 있는 등 이점이 있음.

npmrc

npmrc 는 npm 설정을 저장해두는 파일.

builtin, global 설정은 npm 설치 경로에 있는 파일로 전역 설정
user, project 설정은 앞에 `.` 을 붙여서 만든다. 숨김 파일로 사용함. user 범위는 홈 디렉토리에, project 범위는 프로젝트 최상위(root) 디렉토리에 위치함.
참고

페이지 병렬 조회

promise.all 사용.

프로미스에 타임아웃 추가

입력된 프로미스들 중 첫번째가 처리될 때 완료되는 Promise.race. Promise.race 를 사용하여 프로미스에 타임아웃을 추가해서 사용 할 수 있다.

타임아웃을 프로미스로 만들고 다른 프로미스랑 레이스에 같이 넣는다. 둘 중에 타임아웃이 먼저 리졸브되면 자연스레 프로미스가 처리됨.

패키지 버전 고정하기

package.json 에 yarn 을 사용한다면 resolution에, npm 을 사용한다면 overrides에 추가해주면 된다.

패키지의 특정 버전 또는 그 하위 모듈의 버전 등의 강제가 필요할 경우 사용할 수 있다.

electron 버전을 업데이트 하면서 발생한 이슈 해결.

앱을 만들 때 배포 시점

앱을 크게 만들고 나서 배포하는 것 보다 기본적인걸 갖춰놓고 작을 때 배포하는게 좋다. (ref)

n

node 버전 관리. 아주 편리하다.

디버깅

이건 문제가 안될거야 라고 생각하지도 못한 것까지도 해봐야한다.

일렉트론 21 업데이트

업데이트 이전 버전에 따라, 프로젝트 구성에 따라 다르겠지만 문서에 기술된 브레이크 체인지에 더해 작업하면서 추가로 작업한 부분은 nan 버전, c++17 지원등이 있다.

일렉트론이 20.0.0 으로 업데이트 하면서 크로미움과 싱크를 맞췄고, 그러다보니 파생된 이슈들임.

nan 에서는 크로미움에서 AccessorSignatures 가 deprecated 되어서 AccessorSignatures 를 뺀 버전을 지원할 필요가 있었다.

c++17 은 v8 header 의 default 가 c++17 이 되면서 c++ 를 사용하는 모듈들 중에 해당 버전으로 빌드를 할 수 있도록 추가 작업이 필요했다.

linker settings 를 넣어주면 되는데 mac, win 에 따라 맞는 flag 를 넣어주면 된다.

대략 아래와 같은 형태로 binding.gyp 에 추가해주면 된다.

의존성

의존성이 있으면 의존성이 드러나게 처리하자

타입스크립트 에러

타입스크립트에서 구문 에러 중에 someType 은 타입으로만 쓰여야 하는데 값으로 쓰였음! 이라고 하는 에러가 있는데 이걸 쉽게 보려면 코드에 써놓은 someType 을 지워보면 됨. 컴파일 시점에는 없을 값이기 때문.

정확히는 someType 이라는 구문에 쓰인 이름은 남지만 그 선언부를 찾을 수 없음. 그건 타입 선언이니까.

scss 에서 &, $ 의 역할

&: Sass, Less 의 피쳐. 중첩관계에 사용함. 기본적으로 네스팅을 `.parent { .child {} }` 와 같이 표현함. 이건 `.parent .child {}` 로 컴파일 됨.

$: Sass 에서 변수는 `$` 를 써서 사용. css variables 로 써도 되고.

클릭했을 때 이벤트를 먹는 요소가 뭔지 궁금할 때

클릭했을 때 이벤트를 먹는 요소가 뭔지 궁금할 때 찾을 수 있는 쉬운 방법. 개발자 도구 > select element (화살표) 클릭 -> 요소 클릭. 이 때 이벤트를 가로채는 요소가 있다면 엘리먼트 창에 해당 엘리먼트를 포커스해서 보여줌. 포커스 된 요소가 의도에 맞는지 확인해보면 됨.

vs code 를 통해서 좀 더 걱정없이 코드 수정하기

firebase in china

firebase 중국에서 안된다!!!

tailwind 도입

tailwind 를 도입하려고 할 때 참고하기 좋을 듯.

글에서도 이야기하듯 테일윈드만으로 다 해결되는건 아니고 추가로 맞게 커스텀이 필요해 보이긴 한다.

pxr 같은 제품에 맞는 단위 체계를 잡는것도 좋아보인다.

git reflog

git reflog 명령으로 브랜치를 기반으로 한 히스토리에서 보이지 않는 커밋 기록들도 다시 볼 수 있다. 이걸 기반으로 reset 을 하는 등으로 복구할 수도 있다.

NameString vs Name

“NameString 이 Name 보다 뭐가 나은가?”
Info 나 Data 는 a, an, the 와 마찬가지로 의미가 불분명한 불용어다. a 나 the와 같은 접두어를 사용하지 말라는 소리가 아니다. 의미가 분명히 다르다면 사용해도 무방하다.

Proxy Pattern

JavaScript는 Reflect라는 빌트인 객체를 제공하는데 Proxy와 함께 사용하면 대상 객체를 쉽게 조작할 수 있다.
Proxy는 person 객체를 실수로 수정하는것을 예방해주어 데이터를 안전하게 관리할 수 있다.
Proxy 인스턴스를 만드는 것으로 쉽게 Proxy 객체를 만들어낼 수 있다.
해당 객체를 직접 다루는 것이 아니고 Proxy 객체와 인터렉션하게 된다.

Document.createElementNS()

Creates an element with the specified namespace URI and qualified name.

명시한 namespace URI 와 qualified name 으로 element 를 만든다.

Parameters:

namespaceURI: element 와 연결할 namespace URI 를 지정하는 문자열.
qualifiedName: 생성할 element 의 타입을 지정하는 문자열.

namespace URI: A namespace URI is a URI that identifies an XML namespace. This is called the namespace name in Namespaces in XML [XML Namespaces]. See also sections 1.3.2 “DOM URIs” and 1.3.3 “XML Namespaces” regarding URIs and namespace URIs handling and comparison in the DOM APIs.

qualified name: A qualified name is the name of an element or attribute defined as the concatenation of a local name (as defined in this specification), optionally preceded by a namespace prefix and colon character. See Qualified Names in Namespaces in XML [XML Namespaces].