OTW for FE

어떤 경우에 devDependencies를 사용해야 할까

2024. 11. 30.

어떤 경우에 devDependencies를 사용해야 할까

Dependencies vs. devDependencies for JavaScript apps | Angelika.me
Whenever I'm adding a new dependency to a JavaScript app, or setting up the build process of a new app, I ask myself: what exactly are devDependencies? It's time to answer that question in depth.

심윤섭: package.json의 dependenciesdevDependencies가 다른 점과 devDependencies에 포함할 라이브러리는 어떻게 결정해야 할지와 devDependencies로 구분하는 것이 중요한 이유를 소개합니다. 정답은 없지만, 접근방식을 어떻게 설정하는 지에 따라 CI 설정 방식이 모두 달라질 것 같아 장단점을 충분히 고려해야 할 것 같네요.

빌드 도구 없이 라이브러리 불러오기

Importing a frontend Javascript library without a build system
Importing a frontend Javascript library without a build system

브라우저에서 라이브러리를 가져오는 방법을 소개하면서 모듈의 종류, importmaps, Node.js에서의 파일 유형 파악 방법에 대한 간단한 훑어보기를 제공합니다.

React 19의 <Suspense> 동작 방식 변경

[React 19] Disabling prerendering siblings of suspended components breaking common pattern · Issue #29898 · facebook/react · GitHub
Summary I'm creating this issue to continue the discussion that spawned in the already merged PR (#26380) Several community members have raised concerns about this change and it has gained traction on both X and Reddit as well, I think i...

React 19버전 이전, React 19 RC0, React 19 RC1 버전의 fallback 커밋 방식 변경을 설명하는 글입니다.

대체 텍스트는 만능이 아니다.

Alt Text: Not Always Needed
Write alt text that communicates an image's purpose without repeating page content. Focus on meaning rather than visual description.

경우에 따라서 스크린 리더를 사용하는 사람들에게 대체 텍스트가 도움이 되지 않을 수도 있다는 것을 예시와 함께 안내해주는 글입니다. 더 자세한 사용 방식에 대한 글은 BBC의 Alt text 가이드라인글이 도움이 됩니다.

다른 함수에 setter를 전달하지 마라.

React Anti-Pattern: Stop Passing Setters Down the Components Tree | Matan Borenkraout
Let's see why passing useState setters as props creates abstraction leaks and tightly couples child components to parent implementations.

useStatesetState를 매개변수로 전달하는 코드를 지적하는 글입니다. 컴포넌트를 만들 때 흔히 하는 행동이지만 컴포넌트의 유연성이 떨어지기에 좋지 않은 관행 중 하나입니다.

디자인 시스템 구축 시 기존 라이브러리 활용하기

Design System: from scratch or from the shelf?
Depending on your needs and budget, you may prefer a fully tailor-made design system from scratch, or rather a white label from the shelf.

기존 라이브러리를 사용하는 디자인 시스템의 장단점과 어떻게 선택하는 것이 좋은지, 실 사례는 어떠한지 소개하는 글입니다.

useSyncExternalStore과 원시 값

Be careful with useSyncExternalStore | Nico's Blog
Learn how to avoid infinite render loops when using useSyncExternalStore with non-primitive values in React, and discover a robust solution for storing objects in localStorage with proper type safety.

useSyncExternalStore를 사용할 경우 값이 원시 값인지 참조 값인지를 주의해서 사용해야 한다는 간단한 글입니다. 이외에도 동시성 모드의 장점을 전부 사용하지 못한다는 점을 인지하고 사용해야 합니다.

Portal 소개 글

What are React Portals? - iO tech_hub
Let's have a look at React Portals and how they can help you in a pinch.

React.createPortal이 무엇이고 어떤 장점이 있는지 소개하는 글이지만, 모든 프레임워크에 비슷한 기능이 있으니 프레임워크를 사용할 때 주요한 기능입니다.

React Native 기존 앱에 통합하기

How to Integrate React Native With an Existing App | {callstack}
Learn how to integrate React Native into an existing mobile app with this step-by-step guide, using the Mastodon app as a testing ground.

실제 어플리케이션에 통합하는 것은 더 어렵겠지만, 간단하게 기존 iOS/Android 어플리케이션에 RN을 통합하는 과정을 보여주는 글입니다.