2023-06

📚 링크 & 읽을 거리

React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개

UI 개발자와 JS 개발자가 협업하는 경우 JSX를 함께 수정해야 하는 일이 종종 발생한다. 이런 경우 코드 충돌이 발생하거나, 다른 개발자가 작성한 코드를 수정하기 어려운 일이 생길 수 있다.

VAC(View Asset Component) 패턴은 뷰 로직과 JSX 개발 영역을 격리함으로써 이러한 협업 문제를 줄일 수 있는 패턴이다. 다음은 VAC 패턴의 한 예로, 스핀 박스 구현에 필요한 뷰 로직을 별도 컴포넌트로 격리하고, UI 표현에 필요한 정보를 props로 VAC에게 전달하고 있다:

// View Component
const SpinBox = () => {
    const [value, setValue] = useState(0);

    const props = {
        value,
        onDecrease: () => setValue(value - 1),
        onIncrease: () => setValue(value + 1),
    };

    return <SpinBoxView {...props} />;
};

// VAC
const SpinBoxView = ({ value, onIncrease, onDecrease }) => (
  <div>
    <button onClick={onDecrease}>-</button>
    <span>{value}</span>
    <button onClick={onIncrease}>+</button>
  </div>
);

비즈니스 로직과 View의 관심사를 분리하는 여러 기법이나 패턴을 적용했음에도 여전히 JSX 관리로 인해 UI 개발자와 JS 개발자가 협업에 어려움이 있다면 VAC 패턴을 검토해 보는 것도 좋을 듯하다.

네이버 테크톡에서 글쓴이가 발표한 영상도 살펴 볼 수 있다: https://tv.naver.com/v/23162062

Best Practices and Design Patterns in React.js for High-Quality Applications

React 앱을 구축할 때 알고 있으면 유용한 설계 방법들과 패턴에 대해 설명하는 글이다. 프로젝트를 기능 기반 폴더 구조로 구성, 작고 집중된 컴포넌트를 유지, 명확하고 의미 있는 이름을 사용, 상태 관리 및 API 훅 분리 등 기본적이지만 유익한 내용들을 정리해 놓았다.

Next.js 나 SSR 관련된 설명은 없지만 React 앱을 만들 때 필요한 기본적인 내용을 담고 있어서 현재 React로 개발하고 있거나 개발할 예정이 있다면 한 번쯤 읽어봐도 좋을 것이다.

개발자가 알아두면 좋은 '재현 가능한 예제' 활용법

좋은 질문을 하는 것은 어렵다. 좋은 질문을 해야 좋은, 원하는 답변을 얻을 수 있다. 이러한 좋은 질문을 하는 방법 중에는 '재현 가능한 예제'를 활용하는 방법이 있다. '재현 가능한 예제'를 활용하면 코드의 맥락과 상황을 정확하고 자세하게 전달할 수 있다.

이 글에서는 '재현 가능한 예제'란 무엇인지, 어떻게 만들 수 있는지에 대해 설명한다. R 프로그래밍 관련 이야기가 후반부에 포함되어 있으나, 초반부만 읽어 보아도 좋을 듯하다.

React from Another Dimension

지난 5월 9~11일 진행되었던 Remix Conf 2023에서 Dan Abramov의 세션으로, 노래와 가사를 검색하고 볼 수 있는 개인 웹 사이트를 React 구성 요소를 사용해 만드는 과정을 다룬다. 세션은 커다란 온라인 데모와 같이 구성되어 있으며, 기능을 한 가지씩 추가해 나가면서 React가 어떻게 활용되는지를 실무적 관점에서 전달한다.

11 HTML best practices for login & sign-up forms

HTML 엘리먼트와 속성을 정확히 사용하는 것은 중요하다. 정확히 사용한다면 많은 부분 브라우저의 도움을 받을 수 있다.

이 글에서는 로그인을 예시로 하여 HTML 엘리먼트와 속성을 정확히 사용하는 방법에 대해 설명한다.

What's new in ECMAScript 2023

이번 ECMAScript 2023에 도입된 새 기능들을 소개하는 글이다. 특히 새롭게 추가된 배열 메서드를 통해 더욱 예측 가능한 코드 작성이 가능해진 점이 눈에 띈다. 새로운 기능에 관심이 있다면 읽어보길 바란다.

주니어 개발자를 위한 엄청 쉬운 TCP/IP 4계층 이야기

TCP/IP 전송 계층에 대해 택배를 예로 들어 설명한다. 다음 글로는 주니어 개발자를 위한 TCP/IP 주요 프로토콜 알아보기도 있으니 관심 있다면 이어서 읽어보길 추천한다.

On commit messages

프로젝트가 오랫동안 성공할 수 있는지는 코드 유지 보수성에 달려 있다고 해도 과언은 아니다. 그런 면에서 커밋 메시지란 정말 중요하다. 하나의 명확하지 않은 커밋 메시지가 여러 개발자들의 시간을 허비하게 만들고, 코드를 변경할 수 없게 만들 수도 있다.

다소 오래된 글이지만 이 글은 그런 커밋 메시지의 중요성과 커밋 메시지를 어떻게 작성해야 하는지 잘 설명하고 있다.

리액트 공식 문서 한글 번역 (비공식)

최근 리뉴얼된 React 공식 문서의 비공식 한글 번역 사이트이다. 원문과 번역을 함께 볼 수 있도록 구성되어 있다.

Costly CSS Properties and How to Optimize Them

성능상 비용이 많이 드는 CSS 속성과 이를 최적화하는 방법을 설명하는 글이다. box-shadow, filter, border-radius 등이 비용이 많이 드는 대표적인 속성이고 이를 개선할 수 있는 방안에 대해 설명하고 있다.

Will JavaScript Become the Most Popular WebAssembly Language?

브라우저에서 확장되었기 때문에 JavaScript가 Wasm에 자연스럽게 적합할 것이라고 쉽게 추측할 수 있다. 그러나 원래 Wasm은 개발자가 JavaScript를 통해 브라우저에서 다른 언어와 상호 작용할 수 있도록 컴파일하는 것이었다.

현재 서버 사이드 Wasm를 위한 여러 비 브라우저 런타임(Docker의 Wasm 지원 포함)이 있다. 하지만 Wasm 모듈은 실제로 JavaScript 런타임(예: V8) 내에서 실행되기 때문에, Wasm의 범용 런타임 전환에 따라 JavaScript와의 정렬 또한 계속 중요할 수밖에 없다.

🕹 튜토리얼

How to draw any regular shape with just one JavaScript function

삼각함수와 canvas를 이용해 쉽게 정다각형을 만드는 방법을 소개한다.

추가로 MDN에서 기존의 기술문서를 보완하기 위한 블로그를 5월부터 시작하였다.

📦 코드와 도구

The Epic Stack

최신 웹 개발에서 사용할 수 있는 훌륭한 도구가 너무 많다. 이로 인해 최신 웹 개발은 때로 지치게 만들기도 한다.

이것의 좋은 점은 대부분의 경우 잘못된 선택을 하기가 어렵다는 것이다. 애플리케이션을 구축하는 데 사용할 수 있는 대부분의 프레임워크와 도구의 장단점은 대다수 앱의 제약 조건에 맞다.

그럼에도 불구하고 엔지니어들은 분석 마비로 인해 지속적으로 어려움을 겪고 있다. 이를 어떻게 해결할 수 있을까?

React 생태계의 주요 인물 중 한 명인 Kent C. Dodds는 오랜 경험을 바탕으로 팀이 아이디어를 더 빠르고 안정적인 기반 위에서 프로덕션에 출시할 수 있도록 도와주는 프로젝트 스타터(Remix 기반)를 공개했다.

Remix Conf 세션도 같이 참고해 보기 바란다.

"The Epic Stack" by Kent C. Dodds at RemixConf 2023

유사한 Next.js 기반의 엔터프라이즈 boilerplate 프로젝트도 있다.

Next.js Enterprise Boilerplate