JavaScript

Stop mocking fetch

테스트를 작성할 때 fetch 를 mocking 하지 말고, 대신 MSW 라는 툴을 사용해 네트워크 요청 자체를 mocking 하라는 글. MSW 는 서비스 워커를 통해 모든 네트워크 요청을 가로채 원하는 가짜 응답을 내려줄 수 있는 툴이다. 비단 테스트 뿐만 아니라 개발 시 아직 구현되지 않은 API 에 대한 mocking 용도로도 사용 가능하다.

MSW 에 관해서는 한국어로 작성된 글도 많이 있다. (예, Mock Service Worker로 만드는 모의 서버)

React

useEffect vs useLayoutEffect

useEffect 와 useLayoutEffect 의 차이를 정리한 글. 다른 건 다 알고 있는 내용이었지만 One Special Case 는 언뜻 들어본 적만 있고 정확히는 몰랐는데, 잘 정리되어있다.

What the useEvent React hook is (and isn't)

새로 추가될 useEvent hook 을 설명하는 글. useCallback 과 유사하지만 별도의 디펜던시 리스트 없이 항상 같은 레퍼런스이면서 항상 최신 state, props 에 접근할 수 있다는 차이점이 있다.

구현 원리를 알고 싶은데 RFC 문서에서도 찾기 어려워서 조금 아쉽다.

React key attribute: best practices for performant lists

key 어트리뷰트에 대해 설명한 글. 글 말미에도 나와있지만 요약하면 아래와 같다.

  • 랜덤한 값은 절대 key 로 쓰지 마라
  • 유니크 아이디를 key 로 쓰는 것은 순서 변경이 가능한 목록에서 좋다.
  • 배열의 인덱스 값을 key 로 쓰는 것은
    • 순서 변경이 가능한 목록에서는 안 좋다
    • 페이지네이션되는 목록에서는 유니크 아이디를 쓰는 것보다 좋다.
    • 자동완성 목록 같은 다이나믹 데이터만 처리하는 목록에서도 유니크 아이디를 쓰는 것보다 좋다.

이유와 자세한 설명은 해당 글 본문에서 확인하자.

Style / Design

Flexibly Centering an Element with Side-Aligned Content

엘리먼트 안은 text-align: left; 이되, 그 엘리먼트는 부모의 가운데에 위치하도록 하게 하는 스타일 방법을 정리한 내용. 부모 엘리먼트의 스타일도 변경할 수 있다면 flex 스타일로 쉽게 해결되지만, 부모에 스타일을 줄 수 없을 경우에는 어떻게 할 것인지 알려준다.

핵심만 말하자면 max-inline-size: max-content; 를 사용하면 된다. 자세한 내용은 원글을 참고하자.

Design Tokens in Your React Design System — The Right Way

"디자인 시스템을 구성할 때 디자인 토큰을 사용하면 composable 한 컴포넌트 및 앱을 구성할 수 있다"는 내용. 여기서 말하는 디자인 토큰이란 backgroundColor, primaryColor 등 디자인 시스템에서 일관되게 사용하는 값들을 말한다.

최근 회사에서 새로 시작한 프로젝트에서 이 디자인 토큰을 적극적으로 활용하고 있는데, 디자인 일관성 유지와 코드 유지보수 측면에서 만족하고 있다.

이런 (토큰을 포함한) 디자인 시스템을 구성하고 사용하는 데에는 디자이너 뿐만 아니라 프로그래머, PM 의 협조도 필요하다. 시스템을 구축할 때 소요가 작지는 않지만, 일단 구축하면 들인 소요에 비해 장점이 훨씬 크다.

이런 개념에 익숙하지 않은 사람들이라면 읽어볼만한 글이다.