ziglog

    Search by
    • Home
    • 10월 4주차 기록

    10월 4주차 기록

    October 29, 2022 • ☕️☕️ 10 min read

    환승연애도 스터디도 끝

    배워가기

    inaria

    styled-components에서 영감을 받아 유사한 API를 가진 CSS-in-JS 라이브러리로, zero-runtime이 특징이다.

    동적인 스타일링을 CSS variables를 사용하여 해결하며, 주요 렌더링 경로에 사용되는 CSS는 스타일 시트로 추출하여 문서 상단에 주입하고 나머지는 <link> 태그로 로드하여 렌더링을 막지 않고 비동기로 로드함

    장점은 협업 시 이름 짓기에 대한 고민을 없애준다.

    Copy 
    // Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

// Then use it as a class name
<h1 className={header}>Hello world</h1>;

    styled API를 통해 컴포넌트를 쉽게 만들 수 있으며, zero Runtime이기 때문에 자바스크립트 번들에 포함되지 않음는다. 메인 쓰레드를 사용하지 않아서 UI에 대한 체감 속도가 빠르게 느껴질 수 있다.

    또 사용법이 친숙한 styled-component의 API와 유사하며, CSS-in-JS답게 스코프를 특정 컴포넌트로 제한할 수 있다.

    하지만 단점도 있다. 우선 babel을 필수적으로 사용해야 하며, 문서가 빈약하다.

    CSS 프로퍼티에 대한 타입 체킹이 부재하며, 동적 스타일링이 너무 많아질시 HTML 마크업 테러가 우려된다.

    👩‍🏫 주의사항 CSS Variables는 다른 CSS와 다르게 고유의 상속 계층을 갖고있기 때문에 inherit 값을 쓸 때 주의해야 한다.

    useState의 값을 ref에 사용하기

    Copy 
    const [element, setElement] = useState<HTMLDivElement | null>(null);

    ref.current 대신에 element를 사용하며, ref={ref} 대신에 ref={setElement}로 작성하는 방식이다.

    이런 방법을 callback ref 라고도 부른다.

    일반적으로 사용하는 ref는, node가 변화하더라도 업데이트 사항이 바로 반영되지 않는다.

    반면 callback ref는 node가 변하면 바로 업데이트 사항이 반영된다.

    넷플릭스의 ‘카오스 몽키’

    원숭이가 몽둥이를 들고 데이터센터(클라우드) 에 들어와 난동을 부려(인스턴스 파괴 및 케이블 절단) 서버가 중단 되더라도 서비스는 계속 유지되어야 한다는 개념이다.

    AWS 클러스터를 중단 시켜, 취약한 부분을 파악하고 자동 복구 메커니즘을 구축하여 문제 발생시 자동으로 트리거한다.

    실제로 특정 지역(US-EAST-1) 에서 AWS 서비스 중단 시에 이전에 시행했던 AWS 가용성 영역 중단 시뮬레이션으로 트래픽 FailOver를 원활하게 처리했다.

    2013년 경 아마존의 잘못으로 넷플릭스 서비스 불가 문제를 겪은 후 카오스 몽키 도입했다.

    스토리북 <No Display Name />

    스토리북에서 ‘Show Code’ 버튼을 눌렀을 때 <No Display Name /> 이 뜨고 코드를 보여주지 않는 경우가 있다.

    이는 스토리에 decorator를 적용했을 때 발생하는 문제로, .storybook/main.js 파일에 다음과 같이 작성하여 해결한다.

    Copy 
    docs: {
  transformSource: (source, { title }) => {
    return source.replaceAll(
      "No Display Name",
      title.substring(title.lastIndexOf("/") + 1)
    );
  };
}

    Ref

    classNames 라이브러리

    여러 className들을 합쳐서 사용할 수 있게 해준다.

    Copy 
    classNames("foo", "bar"); // => 'foo bar'
classNames("foo", { bar: true }); // => 'foo bar'
classNames({ "foo-bar": true }); // => 'foo-bar'
classNames({ "foo-bar": false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

    완전 좋은 것 중 하나는, [bind](https://github.com/JedWatson/classnames#alternate-bind-version-for-css-modules) 기능이다! bind를 쓰면, className을 일반 css 코드와도 합칠 수 있다.

    Copy 
    var classNames = require("classnames/bind");

var styles = {
  foo: "abc",
  bar: "def",
  baz: "xyz",
};

var cx = classNames.bind(styles);

var className = cx("foo", ["bar"], { baz: true }); // => "abc def xyz"

    😮😮😮

    Ref https://github.com/JedWatson/classnames](https://github.com/JedWatson/classnames

    user-drag vs user-select

    css의 user-select는, 사용자가 텍스트를 선택할 수 있는지 여부를 정할 수 있다. user-select: none을 하면, html의 텍스트를 마우스 이벤트 등으로 선택할 수 없다.

    그리고 표준 문법은 아니지만, user-drag라는 속성도 있었다. user-drag: none으로 설정하면, 이미지 드래그 시 고스트 이미지가 따라오는 현상을 막을 수 있다.

    Ref https://stackoverflow.com/questions/52369425/difference-between-user-drag-and-user-select-in-css

    box-shadow vs drop-shadow

    css에서 요소에 그림자를 만드는 두 가지 방법! 차이점을 보면 구분하기 쉽다.

    • box-shadow는 css box model을 바탕으로 만들어진다
    • drop-shadow는 의도한 모양 둘레에 만들어진다

    Ref https://css-tricks.com/breaking-css-box-shadow-vs-drop-shadow/

    React query의 cacheTime vs staleTime

    • cacheTime

      • 특정 응답이 GC에 의해 제거되기 전, 얼마나 캐시에 남아있을지를 정한다.
      • 즉 특정 값의 만료 시간과 관련 있다.
      • 기본값은 5분

    • staleTime

      • 특정 응답이 신선하다고(not stale) 여겨지는 시간이다. (새로운 요청을 보내는지 여부와는 관련 없다.)
      • 특정 query의 유효성을 만료시키는 값이다.
      • 기본값은 0초

    staleTime을 Infinity로 두면, 다시 클라이언트로 돌아와도 cacheTime 이 남아있으므로 cache에서 데이터를 가져올 수 있다.

    Ref https://medium.com/doctolib/react-query-cachetime-vs-staletime-ec74defc483e

    이것저것

    • 잘못 올린 git 태그는 -d 옵션으로 지울 수 있다. (git tag -d 버전)
    • 서브셋 폰트(subset font)는 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트다.
    • div, span에서 aria-label을 사용하려면 반드시 role을 지정해야한다. (아이콘은 role='img'로 해두면 된다 - Ref)
    • no-relative-folder-imports eslint rule은, 폴더를 import할 때 상대 경로로 import할 수 없게 만든다.
    • 스토리북의 ArgsTable (Ref)
      • 특정 컴포넌트의 args를 table 형태로 보여준다. (따로 작성하지 않으면, 스토리북에서 알아서 만들어준다.)
    • CORS 에러에는 http status code가 없다! (status는 0) Ref
    • yarn.lock은 패키지에 ^ 이 있어도 업데이트를 하지 않기 때문에, package-lock.json과 달리 리모트 저장소에 올리지 않아도 된다.

    기타

    oh-my-zsh에서 제공하는 git 관련 단축 명령어

    cheat-sheet에서 확인할 수 있다!! 그동안 알음알음 쓰던 것들만 써왔는데 왜 이런걸 찾아볼 생각을 안했는지 🙄

    TSC보다 1000배 빠른 TypeScript 컴파일러

    TypeRunner는 C++로 만들어진 TSC보다 1000배 빠른 TypeScript 컴파일러로, 아직 개발 단계에 있다. 타입체킹, 트랜스파일링 외에도 다른 언어에서 TS 타입을 사용하는 등 다양한 기능을 제공합니다.

    TypeRunner의 개발자는 단순히 다른 언어로의 포팅(ex. go로 개발한 타입스크립트 컴파일러)은 퍼포먼스 차이가 크지 않으며, TSC가 느린 이유는 설계 자체에서 기인한다고 설명한다.

    React의 use hook

    useXXX가 아니라 진짜 그냥 이름이 use가 끝이라고 한다. 🙄

    아직 proposal 단계로, use를 사용하면 fulfilled된 Promise의 값을 읽을 수 있으며 에러 핸들링과 로딩은 가장 가까운 Suspense에 위임한다.

    이를 통해 컴포넌트들을 context로 그룹핑할 수 있으며, 모든 컴포넌트가 데이터를 로드했을 때 렌더링하게끔 해준다.

    Copy 
    async function fetchNote(id) {
  const data = await fetchNoteFromBackend(id, { useCache: true });
  return data.json();
}

function Note({ id }) {
  const note = use(fetchNote(id));
  return (
    <div>
      <h2>{note.title}</h2>
      <section>{note.body}</section>
    </div>
  );
}

function App() {
  return (
    {/* Loading will be displayed until all Note components fetch necessary data */}
    <Suspense fallback={<h2>Loading…</h2>}>
      <Note id="1" />
      <Note id="2" />
      <Note id="3" />
    </Suspense>
  );
}

    마치… React-Query나 Recoil 등의 라이브러리를 리액트가 자체 API로 만들고 싶었던 것 같기도?

    데이터의 캐시 처리 등도 해놓은 것을 봐서…

    특징은 React hook 최초로 if문 안에 분기 처리가 가능하다는 점인데, 기존에 분기 처리가 불가능 하다는 hook 규칙을 깸으로써 복잡성 증가를 우려하는 의견들이 많다.

    Ref https://vived.io/new-hook-is-coming-to-react-frontend-weekly-vol-109/?utm_source=reddit&utm_medium=r-reactjs&utm_campaign=weekly-frontend

    Next.js의 터보팩

    Next.js conf에서 발표된 터보팩은 Rust 기반으로 된 webpack의 후속 번들러다.

    • Next 13버전부터 사용 가능하다
    • webpack보다 700배, vite보다 10배 빠르다
    • ServerComponent, TS, JSX, CSS 등을 지원한다

    이렇게 빠른 이유는, 프로그램에서 실행되는 모든 함수의 결과를 캐시함으로써, 프로그램을 재실행 시 동일한 함수를 다시 실행시키지 않기 때문이라고 한다.

    Ref https://vercel.com/blog/turbopack

    Node.js 18버전의 공식 Release

    이제 v16의 시대도 갔다…

    Ref https://nodejs.org/en/blog/release/v18.12.0

    Wasmtime 1.0

    Wasmtime WebAssembly 런타임이 이제 1.0이 되었다고 한다!

    Wasmtime은 WebAssembly와 WASI 런타임을 최적화하기 위한 도구다. (WASI: 브라우저 외부에서 WebAssembly를 사용하기 위한 Mozilla 프로젝트) Ref https://docs.wasmtime.dev/

    Ref https://bytecodealliance.org/articles/wasmtime-1-0-fast-safe-and-production-ready

    TypeScript 타입 시스템 뜯어보기: 타입 호환성

    TypeScript의 타입 호환성은 구조적 서브타이핑(structural subtyping)을 기반으로 한다는 내용으로, y가 최소한 x와 동일한 멤버를 가지고 있다면 x와 y는 호환된다는 것이다.

    구조적 서브타이핑과 명목적 서브타이핑의 차이, 그리고 구조적 서브타이핑이 예외적으로 허용되지 않는 경우와 TypeScript 설계상의 이유를 알고싶다면! ⬇️

    Ref https://toss.tech/article/typescript-type-compatibility

    인프라, 어디까지 구축해 봤어?

    좋은 인프라란, 1. 장애에 강건하고, 2. 확장이 쉽고, 3. 관측이 쉽고, 4. 비용이 적게 드는 인프라다.

    기업 특성에 따라 클라우드와 온프레미스 서버 중 선택하기, 모니터링과 용량 문제, 데이터 복제 방안 등을 알아보자. 또 트래픽에 대응하기 위한 오토스케일링, 데이터 분리와 관련된 샤딩 기법도 알기 쉽게 설명하고 있다.

    Ref https://blog.goorm.io/goormseminar_4th/

    마무리

    환승연애 끝났다… 현규해은 영원해… 희두 나연한테 잘해라… 나언 태이는 모지…? 🙄 이제 삶이 재미없어지겠다…

    장장 반년을 해왔던 스터디도 끝났다!! 마지막날은 어쩌다 책 안읽고 다같이 선정릉 산책 ㅋㅋㅋ 두런두런 이야기들 재밌었당. 스콘이랑 커피랑 선물 만들어와주신 분들도 있고. 넘 다들 좋은 사람들

    그리고 이태원에서 최악의 압사 사고가 있었다. 어제까진 이번주 정리에 이런 글을 쓸지 몰랐는데… 나도 처음으로 할로윈을 맞이해보고 싶었는데, 2022년 서울 한복판에서 이런 대참사가 발생하다니. 다 놀기 좋아하는 나같은 20대 청년들이었을 뿐이라 더욱 안타깝다. 뉴스로 참혹했던 순간의 장면들이 잊혀지지 않는다.

    Relative Posts:

    11월 첫주차 기록

    November 4, 2022

    10월 3주차 기록

    October 22, 2022
    zigsong

    지그의 개발 블로그

    RotateLinkImg-iconRotateLinkImg-iconRotateLinkImg-icon