OTW for FE

성공은 문서화에서 나온다 & 그럼에도 리액트가 좋은 이유

2024. 4. 3.

성공은 문서화에서 나온다

Two open source projects with great documentation • johnjago.com
esbuild and Redis1 are two examples of codebases with exceptional documentation. Through their READMEs, changelogs, architecture documents, and code comments, both projects explain their design in such a way that someone new to the codebase can understand where things are, how things are done, and why they are done that way. If you’re a developer looking to get better at documenting your code and software architecture, these are great case studies.

심윤섭: 글쓴이는 ESBuild와 Redis의 예시를 들면서 설계 원칙, 사용법, 설계 구조, 변경점을 잘 문서화한 두 오픈소스를 소개합니다. 오픈소스에서 좋은 문서가 중요한 이유를 소개하지만 다른 모든 프로젝트에도 적용될 수 있는 말이기 때문에 가져왔습니다.

김대관: 개발에 있어서 문서화는 갖는 의미는 매우 큽니다. 개발 자체를 혼자서 하는 경우보다는, 다수가 협업하는 경우가 더 많기 때문에 코드에 대한 지식을 서로가 알고 있어야합니다. 개발자라면 조직과 팀원들을 위해 자신의 지식을 문서화하는 경험을 많이 시도해보면 좋을 것 같습니다.

React.memo를 더 빠르게

A faster React.memo()
romgrk's personal blog

심윤섭: React.memoObject.is메소드를 바탕으로 이전 props와 현재 props가 같은지 비교합니다. 작성자는 V8이나 SpiderMonkey같은 자바스크립트 엔진의 내부 최적화를 진행하여 성능을 높이는 시도를 했습니다. 이 글에서는 monomorphism에 대한 캐싱을 적극적으로 사용했는데, 관심이 있다면 두 글(오래된 글, 최신 글)을 살펴보세요.

TypeScript Intersection Type(&)사용을 줄여라

This Pattern Will Wreck Your React App's TS Performance | Total TypeScript
Improve React TypeScript performance by replacing type & with interface extends. Boost IDE and tsc speed significantly.

심윤섭: typeintersection 사용 대신 interface extends를 사용하라는 간단한 글입니다. 이유는 정확하게 모르지만, TypeScript의 Wiki와 실제 Sentry에서 나왔던 성능 이슈를 근거로 typeintersection 사용이 성능 이슈가 있다고 하네요.

그럼에도 리액트가 좋은 이유

Why I Like React (even in 2024) - YACB: Yet Another Code Blog

심윤섭: 다른 글에 대한 반박이지만, 양방향 데이터 바인딩이 폼으로 사용하는데에 좋을 수도 있지만 복잡성과 불변성을 지키지 않는다는 것이 문제가 될 수도 있고, JSX는 아직 강력하다라는 것을 바탕으로 아직 리액트는 좋다라는 것을 주장하고 있습니다.

타입스크립트의 추론 방식

Flow Nodes: How Type Inference Is Implemented
Effective TypeScript: Flow Nodes: How Type Inference Is Implemented

심윤섭: TypeScript가 어떻게 추론하는지 AST와 코드를 통해서 설명합니다. 변수의 타입을 좁혀도 변수를 쓰지 않으면 추론을 하지 않는다는 사실과 여러가지 구문으로 조건문을 매우 많이 만들었다는 사실은 신기하네요.

CodePush가 사라집니다.

How to replace App Center and CodePush

심윤섭: CodePush의 계승자인 Microsoft App Center가 문을 닫습니다. 그로 인해 배포에 문제가 생길 수 있기에 Expo측에서 EAS서비스를 소개하는 글입니다. 이전에 있었던 Expo에서만 빌드되던 시스템에서 벗어날 수 있기 때문에 검토하고 일부를 EAS와 함께해도 괜찮다고 생각합니다.

RN의 미래(희망편)

토스가 꿈꾸는 React Native 기술의 미래
토스가 바라보는 React Native 미래는 어떨까요? 앞으로 토스는 어떻게 React Native 기술을 다루려고 할까요?

심윤섭: 재밌는 RN 전환 소식이 들려와서 가져왔습니다. React Native 팀에서 New Architecture과 Filpper, Hermes 등 많은 툴을 소개하면서 창창한 미래를 보여주고 있습니다. 물론 희망편이라 적어놨듯이 1버전이 안 되어서 자주 구조가 바뀌는 문제(이를 도와주는 웹사이트가 따로 있음), 추상화로 인해 관리포인트가 하나 더 늘어남(Shopify는 부족한 RN 리소스와 그 생태계를 직접 채우고 있는 것 같네요, 1, 2)… 등 여러가지 문제를 뚫어야 하죠. 어떻게 난관을 뚫을지 궁금해지네요 🙂. 언제나 그랬듯이 전환에 실패한 사례도 있습니다.