11월 5주차 기록

11월이 왜이리 긴지!

배워가기

typeorm upsert 옵션 - conflictPaths

“Upsert”는 “insert”와 “update”의 결합어로, 데이터베이스 작업 중에 데이터가 이미 존재하면 업데이트하고, 그렇지 않으면 새로운 데이터를 삽입하는 작업을 나타낸다. “ConflictPaths”는 일반적으로 이러한 upsert 작업 중에 충돌을 해결하기 위한 경로를 지정하는 데 사용되는 용어 중 하나다.

conflictPaths에 명시된 옵션이 DB상에 존재한다면 insert를, 없다면 update를 시도한다.

Ref https://orkhan.gitbook.io/typeorm/docs/repository-api

eslint-d

• 서버를 백그라운드에서 실행시켜서 eslint의 속도를 개선한 툴
• 린트 타임을 160ms까지 단축시킬 수 있다

eslint는 원래 싱글스레드에서 동작하는데, 프로젝트에서 병렬로 처리하는 경우에 다중 스레드로 처리할 수 있다 (린트 설정에서 parallel 옵션 사용)

Ref https://www.npmjs.com/package/eslint_d

자바스크립트 객체에서 같은 키가 있을 때

해당 키로 객체에 접근 시 나중에 선언된 키의 값을 가져온다

const obj = { a: "aa", b: "bb", a: "cc" };
console.log(obj.a); // 'cc'

findLastIndex() vs lastIndexOf()

• findLastIndex()에는 콜백 함수를,
• lastIndexOf()에는 문자열을 넣는다

타입스크립트에서 interface의 extends는 정적으로 선언된 타입에만 사용할 수 있다

룰을 어기면 경고를 발생한다.

An interface can only extend an object type or intersection of object types with statically known members.

interface A {
  a: string;
}

interface B {
  b: number;
}

type C = A | B;

interface D extends A {} // ✅
interface D extends C {} // ❌

enzyme vs react-testing-library

• enzyme
  • 리액트 컴포넌트를 쉽게 테스트하기 위해 만든 자바스크립트 테스팅 툴
  • 3가지 리액트 컴포넌트 렌더링 방식 제공: shallow, full DOM, static
  • 리액트 내부 동작에 의존적이며, 리액트 버전에 맞는 adapter 설치가 필요하다
  • 렌더된 리액트 컴포넌트의 props, state, children에 접근할 수 있으며, 이를 변경할 수도 있다.
  • 개발자의 관점에서 테스트를 작성하게 된다.
  • 운영 코드 변경이나 리팩토링 시 테스트가 깨질 수 있다.
  • 특이한 점) 리액트 클래스 컴포넌트에서 잘 동작한다.
• react-testing-library
  • 리액트 컴포넌트를 테스트하기 위한 가벼운 테스팅 툴
  • 리액트 컴포넌트 렌더링 방식은 1가지: render
  • 렌더된 DOM node에서 동작하기 때문에, 사용자가 사용하는 방식으로 테스트를 작성할 수 있다
  • UI를 ‘외부’에서 테스트하기 때문에 리액트의 버전에 의존적이지 않다
  • 특이한 점) 리액트 함수 컴포넌트와 더 잘 맞는다.

Ref https://codilime.com/blog/enzyme-vs-react-testing-library/

barrel file이란?

여러 모듈 하나의 그룹으로 묶어서 불러오거나 내보내는 데 사용하는 파일 (마치 총기류의 탄창(barrel)에 총알을 담는 것과 유사하다는 의미에서 유래)

e.g. index.js

두 겹의 border-radius를 같은 반경 표현하는 공식

outer-radius = inner-radius + padding

직관적으로 확인할 수 있는 코드펜

css @supports

@supports를 통해서 css 기능을 특정 브라우저에서 지원하는지 알 수 있다.

@supports (overflow-wrap: anywhere) {
  overflow-wrap: anywhere;
}

@supports not (overflow-wrap: anywhere) {
  word-break: break-word;
}

Ref https://developer.mozilla.org/ko/docs/Web/CSS/@supports

이것저것

위에 더 많당.

기타공유

getScreenDetails

실험 기능으로, 유저가 띄운 모든 브라우저 창에 대한 화면 정보(위치 등)에 권한 승인을 통하여 접근할 수 있다.

Ref https://developer.mozilla.org/en-US/docs/Web/API/Window/getScreenDetails

크롬의 애드블락 제한

2024년 6월, 크롬에 적용할 것으로 밝힌 manifest v3는 애드블락의 기능을 제한한다. 구글은 manifest v3가 브라우저 자원 사용을 개선하고, 현재의 애드블락은 유저 개인정보를 위협한다고 주장한다.

한편, firefox와 EFF 등 저명한 관계 기관에서는 구글의 위 두 주장에 대한 강한 의문을 표하고 있고 firefox는 manifest v3에서 애드블락에 대한 필터링 기능을 제한 채로 자체 구현 중이다.

(GDPR의 선봉이었던 구글도 광고 자체를 안봐주는건 속상했던 모양)

Ref https://arstechnica.com/gadgets/2023/11/google-chrome-will-limit-ad-blockers-starting-june-2024/

state-of-js 2023

설문이 시작되었다!

이제 정말 연말이구낭.

Ref https://survey.devographics.com/ko-KR/survey/state-of-js/2023

AWS Card Clash

웹에서 플레이하는 AWS 카드게임이다. 티저를 보니 잘 만든 것 같다 ㅎㅎ

Ref https://www.youtube.com/watch?feature=shared&v=s6msQBl3zqE

마무리

드디어 12월.

그리고 송년회 주간 시작인가. 무지 바빠졌고 졸려졌고 술 마시고 본가로 들어가다니 🤦‍♀️

마음대로 살아보는 12월인거야!