ziglog

Search by

Home
11월 2주차 기록

11월 2주차 기록

November 13, 2022 • ☕️☕️ 10 min read

weekly

가을 흠뻑

배워가기

gitlab-ci.yml 문법

.{~} 으로 . 을 붙이면 variable로 선언한다
: &{~} 으로 &를 붙이면 해당 variable을 변수명처럼 사용할 수 있다
<<: *: variable를 사용한다 (inheritance)

Copy

.node_build-cache: &next_build-cache
...
  cache:
  - <<: *node_build-cache

key: 변경을 감지할 값
paths: 대상 디렉토리 경로
policy: pull / push / pull-push(default)
- pull: 해당 캐시를 읽기만한다 (read)
- push: 해당 캐시를 업로드만 한다 (write)
- pull-push: 해당 캐시를 읽고/업로드한다 (read-write)
next/Image를 사용하면 이미지 경로가 pathname이 아닌 query로 넘어온다.
pathname은 _next/image?url=~~ 까지만 넘어온다

UX vs CX

UX
- 사용자가 특정 서비스나 제품을 이용하는 과정에서 겪는 경험
- 주로 앱/웹이나 제품 등 하나의 서비스에 대한 사용자 경험을 뜻하는 경우가 많다.
CX
- UX를 확장한 개념
- 브랜드와 고객의 접점이 지속해서 이어지며 발생하는 고객 경험의 총체
- 매장, 점원, 서비스센터 등 고객이 브랜드를 경험할 수 있는 모든 것이 CX 에 속한다

svelte의 번들 사이즈 알아보기

svelte는 컴포넌트가 커질수록 다른 프레임워크에 비해서 번들사이즈가 빠르게 증가한다. 용량이 몹시 중요하고 상대적으로 복잡하지 않은 애플리케이션이라면 svelte를 고려해볼 수 있다.

The Mobile Performance Inequality Gap에 따르면 2021년 기준 페이지가 처음 로드될 때 사용되는 모든 JS파일 크기의 합은 300~350kB(gzipped 기준)이라고 한다. 이는 느린 네트워크에서 5초 안에 페이지가 로드되는 저성능 디바이스를 타겟팅한 기준으로, 3초를 기준으로 한다면 애플리케이션의 크기는 185kb로 svelte 기준으로는 80개가 조금 안 되는 TodoMVC가 들어갈 수 있다.

Ref https://taegon.kim/archives/10477

border-radius: px 또는 percent?

css에서 가로 길이에 관계 없이 양쪽 끝이 동그란 막대형의 요소를 그리고 싶을 때는, border-radius를 아주 큰 px 값으로 주어야 한다. border-radius: 50%와 같이 percent 값으로 주었을 때는 이상한 타원형의 모양으로 그려지기 때문이다.

border-radius를 px로 주는 것과 percent로 주는 것의 차이는 무엇일까?

border-radius는 2가지 값을 받는데, 타원형의 1/4 영역에서 각각 x/y축 기준의 반지름을 의미한다. 값이 하나로만 설정됐을 경우 두 번째 값은 첫 번째 값과 동일한 값으로 설정된다. (즉 border-radius: x는 border-radius: x/x와 같다.)

W3C의 설명에 따르면, border-radius의 값을 percent로 설정하면 border box의 크기에 관여한다. 즉 border-radius: 50%은, x축과 y축 각각의 반지름을 container의 width, height의 50%로 설정한다.

💡 border-radius가 해당 요소의 모든 width-height에 먹힌다고 생각하면 쉽다.

반면, border-radius의 값을 px로 설정하면 x/y의 반지름이 같은 타원형이 된다. 즉, 원형이 된다. border-radius: 999px로 설정하면, 원의 반지름은 999px이 되어야 하지만 curves overlap이 적용되어 원의 반지름을 가장 작은 측면(요소의 width 또는 height)의 절반의 값으로 설정하게 된다.

💡 border-radius가 해당 요소의 모든 모서리(corner)에 동일하게 적용된다고 생각하면 쉽다.

사실… 뭔 소린지 다는 이해하지 못했지만, 결과만 잘 알고 있으면 될듯 🫠

Ref

CSS-in-JS의 장단점

👍 장점

한 파일에 스타일 파일을 같이 둘 수 있다. (colocate)
css에 js변수를 사용할 수 있다.
css 이름 충돌을 방지해준다.

👎 단점

런타임 오버헤드가 생길 가능성이 있다.(document에 삽입할 수 있는 일반 CSS로 스타일을 “직렬화”해야한다.)

스타일 직렬화, emotion이 CSS 문자열 또는 객체 스타일을 가져와 document에 삽입할 수 있는 일반 CSS 문자열로 변환하는 과정을 가리킨다.
번들 크기를 늘린다.
react dev tool을 어지럽힌다.

자바스크립트의 동시성 개념

동시성(Concurrent) 이란, 한 번에 하나 밖에 처리하지 못하는 싱글 코어에서 한 번에 여러 일을 처리하는 것처럼 보이는 논리적인 개념이다. 이게 가능한 이유는 동시에 실행하는 것처럼 보이기 위해 내부적으로 문맥 교환(Context Switch)이 일어난다.

병렬성 (Parallel) 이란, 실제로 여러 일을 동시에 처리할 수 있는 멀티 코어에서 멀티 스레드를 동작 시키는 방식이다. 즉, 동시성과는 달리 논리가 아닌 물리적인 의미에서의 동시 실행을 의미한다.

병렬성이 멀티 코어 작업이라 항상 더 좋을 것 같지만 네트워크 통신과 같은 I/O 작업은 CPU 가 거의 일하지 않고, 응답이 올 때까지 대기 상태에 있게 되어 효율적이지 못하다. 또, 작업이 바뀔 때 문맥 교환(Context Switch) 이 발생하고 동시 작업이 너무 많다면 문맥 교환의 오버헤드로 동시성 보다 더 느릴 수 있다.

자바스크립트는 병렬성이 아닌, 동시성을 지원하며, 이 동시성을 지원하기 위해 웹 브라우저(런타임 환경)는 Context Switch(이벤트 루프)를 지원한다 따라서 자바스크립트는 동시성(싱글스레드) 이며 이벤트 루프를 기반으로 한 비동기(논 블로킹) 언어 이다.

encodeURI vs encodeURIComponent

encodeURI(): 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수
encodeURIComponent(): 모든 문자를 인코딩하는 함수

Copy

const uri = "https://mozilla.org/?x=шеллы";
const encoded = encodeURI(uri);
const encodedComponent = encodeURIComponent(uri);

console.log(encoded); // https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"

console.log(encodedComponent); // https%3A%2F%2Fmozilla.org%2F%3Fx%3D%D1%88%D0%B5%D0%BB%D0%BB%D1%8B

출력값

mkcert

mkcert를 이용하여 로컬환경에서 신뢰할 수 있는 인증서를 생성해 https를 적용할 수 있다.

mkcert -install 로 local CA를 생성한 후
mkcert [beta-ceo-local.baemin.com](http://beta-ceo-local.baemin.com/) 등으로 원하는 호스트 이름에 대한 인증서를 생성하고, mkcert가 이 인증서에 서명하도록 한다.
그리고 서버에 https를 사용해주도록 설정하면 된다.

Copy

https: {
  key: fs.readFileSync('{CERTIFICATE-KEY-FILENAME}.pem', 'utf-8'),
  cert: fs.readFileSync('{CERTIFICATE-FILENAME}.pem', 'utf-8'),
},

https://github.com/FiloSottile/mkcert 를 사용하여 local에서 CA를 자동으로 생성 및 설치 할 수 있다.

Ref https://web.dev/i18n/ko/how-to-use-local-https/

데코레이터

데코레이터는 프로퍼티나, 메서드 또는 클래스를 ‘장식(수정, 확장..)’할 수 있다.

자바스크립트의 데코레이터 함수는 target(데코레이터가 적용될 객체), key(데코레이터를 적용할 프로퍼티 이름), descriptor(프로퍼티의 설명자)를 인자로 받는다

다만, 데코레이터는 ES 표준이 아니며, MobX 6에서는 호환성을 고려해 데코레이터를 사용하지 않는 것을 공식적으로 권장한다.

그런데 올해 상반기에 stage3로 승격했다!

Ref https://ui.toast.com/weekly-pick/ko_20200102

lodash의 지연평가

프론트 개발자라면 자주 쓰게 되는 lodash 라이브러리는, 알고보면 기본적으로 지연 평가(lazy evaluation)을 사용하여 성능을 개선하고 있다고 한다!

이 방법은 for문 등의 반복적인 작업을 수행할 때, 주기의 ‘횟수’를 줄이는 것이지 주기에 걸리는 ‘시간’을 줄이는 것이 아니다.

다음 예제를 살펴보자.

Copy

function priceLt(x) {
  return function (item) {
    return item.price < x;
  };
}
var gems = [
  { name: "Sunstone", price: 4 },
  { name: "Amethyst", price: 15 },
  { name: "Prehnite", price: 20 },
  { name: "Sugilite", price: 7 },
  { name: "Diopside", price: 3 },
  { name: "Feldspar", price: 13 },
  { name: "Dioptase", price: 2 },
  { name: "Sapphire", price: 20 },
];

var chosen = _(gems).filter(priceLt(10)).take(3).value();

$10보다 작은 가격의 보석 3개를 고르려고 할 때, 일반적인 lodash 접근인 엄격한 평가에서는 8개의 보석을 모두 걸러낸 후 앞의 3개를 골라낸다.

지연 평가 알고리즘에서는 이 방식과 대조적으로, 배열에서 작은 가격의 요소만을 가져와 올바른 결과를 얻는다. (즉, Sunstone, Sugilite, Diopside만 가져온다!) 이런 방식으로 쉽게 37.5%의 성능 향상을 만든다.

Ref https://edykim.com/ko/post/introduction-to-lodashs-delay-evaluation-by-filip-zawada/

크롬의 Connection Stalled

클라이언트에서 서로 다른 파라미터를 가지고 같은 API endpoint로 수십 개의 API 요청을 보낼 때, 단순히 for문을 사용하여 하나하나 API 요청을 보낼 때와 Promise.all()을 사용하여 요청을 보낼 때 성능상의 차이가 크게 발생했다. 이를 크롬 Network 탭에서 확인해보았는데, 요청 시작 시간이나 TTFB와 같은 서버 응답 시간 이외에도 Connection Stalled라는 낯선 항목이 있어서 뭔지 알아봄!

크롬 개발자도구 문서에 따르면, 네트워크의 Timing 탭에서 아래와 같은 phase들을 볼 수 있다고 한다.

Queueing: 다음의 경우들에서 브라우저는 요청을 줄 세운다.
- 더 높은 우선순위의 요청이 있을 때
- 같은 origin에 대해 이미 6개의 TCP 커넥션이 열려있을 때 (HTTP/1.0과 HTTP/1.1에만 해당)
- 브라우저가 디스크 캐시에 공간을 할당할 때
Stalled: 위 Queueing에 해당하는 이유가 발생했을 때 요청은 잠시 멈춘다.

즉 동일한 API endpoint로 수십 개의 요청을 보내는 위 작업의 경우, 브라우저의 queueing 작업 때문에 몇몇 요청들이 stalled된 상태였다고 해석하면 될 것 같다!

문서에서 설명하는 그밖의 phase들은 다음과 같다.

DNS Lookup
Initial connection
Proxy negotiation
Request sent
ServiceWorker Preparation
Request to ServiceWorker
Waiting (TTFB)
Content Download
Receiving Push
Reading Push

이것저것

enterkeyhint는 가상 키보드의 엔터키를 커스텀할 수 있는 속성이다. 그렇다고 아무거나로는 안되고, 7가지 지정 값 중에서 선택해서 넣을 수 있다. (Ref)
크롬 개발자도구의 더보기 (…) 버튼을 누르면 more tools를 선택할 수 있는데, Animations 툴로 속도 조절, 키프레임 수정/제어 등을 할 수 있다.
네이티브 앱 지면은 window.location.href를 이용해 페이지 이동을 할 때 바로 이동이 가능하고, 웹뷰 지면의 경우 URI 인코딩을 해줘야 한다.
focusin , focusout 은 버블링이 일어나고 blur , focus 는 버블링이 일어나지 않는다.
gitbeaker - Gitlab API를 지원하는 node.js의 gitlab API 라이브러리 (Ref)

기타

CSS transform 속성 분할해서 사용하기

CSS의 transform 속성은 다음과 같이 작성한다.

Copy

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

이 방법은 잘 작동하지만, 각각의 속성들을 따로따로 사용하려면 굉장히 귀찮다. 예를 들어, hover 시에 scale의 동작만 변경하고 싶다 하더라도 앞에 나열했던 모든 속성을 다시 작성해줘야 한다.

Copy

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

크롬 104부터는 CSS transform의 속성을 각각 사용할 수 있다. (💡 브라우저 지원을 확인하자!)

앞의 예제를 CSS transform 분할 방식으로 사용하면, 다음과 같이 작성할 수 있다.

Copy

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

순서는 어떻게 될까? 기존의 transform 문법에서는 왼쪽에서 오른쪽으로 나열된 순서에 따라 속성이 적용됐다. 새로운 transform 속성 분할 방식에서는, 순서가 항상 고정되어 있다. 1. translate, 2. rotate, 3. scale

새로운 transform 속성 작성 방식으로 애니메이션을 보다 쉽게 만들 수 있다 😎

Ref https://web.dev/css-individual-transform-properties/

마무리

우테캠 분들이 새로 입사하셔서 그런지 TIL이 아주 핫하다..! 정리할 것들이 많아졌다 🤩 (기쁘다는 뜻)

간만에 금요일 휴가 내고 여행 다녀왔다. 안동이라는 크지 않은 동네였는데, 사람도 거의 없고 날씨도 너무 따뜻해서 완전 힐링하고 왔다. 갈비에, 찜닭에, 고등어에… 단백질 가득했던(!) 먹부림은 덤 😋 가을 정취 물씬 느끼고 와서 하루 남은 주말 띵구르르

Relative Posts:

11월 3주차 기록

November 19, 2022

11월 첫주차 기록

November 4, 2022

지그의 개발 블로그