React는 하나의 언어다.
2024. 11. 22.
React는 하나의 언어다.
React is a programming language, and its rules are syntax 🔗심윤섭: React에서는 여러가지 규칙(암묵적인 규칙을 포함해서)을 갖고 있고, 이는 바닐라 JS와는 다른 방식으로 코드를 만들기를 유도합니다. 글쓴이는 라이브러리/프레임워크를 가장 잘 쓰는 방법은 메인테이너가 하고자 한 것, 생각한 것을 따라가 보는 것이라고 주장하고, 저도 그렇게 생각합니다. 더 나아가서 라이브러리/프레임워크를 사용하기 전에 적어도 핵심 concept나 원칙, 해결하고자 한 문제, 크게는 문서 전체를 봐야 라이브러리/프레임워크를 사용한 의미가 생긴다고 생각합니다. JS와 JS 생태계는 적은 제약으로 다양한 방식으로 코드를 만들 수 있게 하지만, 규칙이나 제약을 따르지 않으면 어쩌면 AI보다 생산성이 낮아질 수도 있다고도 떠오르게 되네요.
김대관: 라이브러리나 프레임워크는 특정 기술적 문제를 해결하기 위해 만들어졌습니다. 따라서 이를 선택할 때는 자신이 해결하려는 문제와 해당 도구가 해결하려는 문제가 일치하는지 확인하는 것이 중요합니다. React 역시 문제 해결을 위한 패턴과 기능에 기반한 규칙들이 있으며, 이를 따르는 방식이 하나의 언어처럼 느껴지기도 합니다. 제약보다는 규칙이라는 이름으로 움직이는 하나의 언어라는 것에 저도 동의합니다.
하나의 함수에 하나의 동작.
The magic of keeping one level of abstraction per function • Tymek Zapała 🔗심윤섭: (글에는 적혀있지 않지만) SOLID 원칙의 단일 책임 원칙(SRP)를 React와 JS 기반으로 간단하게 설명한 글입니다. 하나의 동작을 정의하는 것을 자주 생각해보면 도움이 됩니다. 경우에 따라서 글에 적힌 이점이 드러날 때도 있지만, 경우에 따라 Atomic Design같이 너무 많이 쪼개져서 디버깅하기 어려울 수도 있습니다(Atomic Design이 나쁜 추상화는 아니지만, 관리하는 사람이 충분하지 않다면 좋은 추상화라고 보기 어렵다고 생각합니다).
제어 컴포넌트와 비제어 컴포넌트, 그리고 관점
Uncontrolled or controlled: A matter of perspective 🔗심윤섭: React 공식문서에도 적혀있듯이, useState를 사용하면 제어 컴포넌트, useRef를 사용하면 비제어 컴포넌트라고 소개하지 않고, 상황에 따라 제어 혹은 비제어 방식으로 상태 관리를 한다고 적혀있습니다(다소 의역). React-Hook-Forms와 같이 두 방식을 혼합해서 사용할 수도 있고, 외부 컴포넌트 라이브러리를 사용해서 글에서 제시하는 혼합된 상태를 컨트롤할 수도 있습니다. 간단한 글이지만, 제어/비제어를 어떻게 다루어야 하는지 잘 보여줍니다.
가운데 정렬했다고 정말 가운데인가요?
Centering things: a solved problem? 🔗예전 글인 가운데 정렬은 힘들다에서 말했듯이 진짜 가운데 정렬을 찾기는 어렵습니다. 이를 가운데 정렬하기에 관련된 새로운 기능인 block에서 align-content사용이나 fit-content, text-box-*를 소개합니다.
면접 단골질문: 브라우저에 URL을 입력하면 어떤 일이 일어나나요?
Exploring the browser rendering process | Little Things 🔗예전에 가져왔던 HTTP + DNS 설명 글과 비슷하지만, 브라우저 렌더링을 간략하게 추가한 글입니다. 브라우저 렌더링에 더 깊게 이해하면 좋지만, 대략적으로 살펴보기에 좋네요. 자세히 살펴보실 분은 web.dev의 최신 브라우저 렌더링 개요나 Chrome blog의 RenderingNG 아키텍쳐 개요를 추천드립니다.
outline을 예쁘게 만들기
Beautiful focus outlines · Medienbäcker Thomas Günther 🔗경우에 따라 디자이너가 outline: none;를 적용해달라고 제안할 경우도 있는데, 접근성과 사용자 경험에 나쁜 영향을 끼칩니다. 그래서 outline을 이쁘게 만드는 팁을 제공하는 글입니다. 글에서는 outline을 잘 사용하는 방법을 소개했지만, 여러가지 CSS 문법들은 다른 곳에도 적용할 수 있으니 익혀보는 것도 나쁘지 않습니다.
dangerouslySetInnerHTML은 위험하다.
TIL: inline event handlers still fire when passed to React's dangerouslySetInnerHTML | Alex MacArthur 🔗React의 dangerouslySetInnerHTML을 통해 스크립트를 실행할 수도 있고, XSS 취약점이 생길 수도 있습니다. 글에서는 CSP 설정이나 DOM 파서, 위험 속성/태그 삭제를 해결책으로 제시합니다. 경우에 따라 DOM purifier를 사용하는 것도 방법입니다.
View Transition 마스터하기
View Transition API: Single Page Apps Without a Framework | DebugBear 🔗View Transition 소개, 작동 방식, 바닐라 JS에서 사용해보는 예제를 소개합니다. 아직 안착된 기술은 아니지만, 어떤 기술인지, 어떻게 작동하는지는 미리 살펴볼만 하네요.
명령형과 선언형.
ui.dev 🔗명령형 프로그래밍과 선언형 프로그래밍을 현실의 예와 실제 코드를 통해 소개하는 글입니다.
CSS 전략 소개
The styling dilemma in React - by Petar Ivanov 🔗모든 CSS 기반 스타일링 방법(바닐라부터 다양한 라이브러리)을 가볍게 소개하는 글입니다. 더 객관적이고 깊고 넓은 역사에 대해 살펴보실 분은 frontendmastery의 확장 가능한 CSS의 역사를 보세요. 다른 관점으로 살펴보는 CSS 최신 도구들 글도 있습니다.
새로운 친구들
Overflow Clip 🔗vlt Debuts New JavaScript Package Manager and Serverless Reg... 🔗첫번째 글은 비교적 최근에 추가된 overflow: clip;을 소개하고 사용하는 곳을 소개하는 글이고, 두번째 글은 새로운 패키지 매니저인 vlt를 소개하는 글입니다. 아직 의존성 검색 및 그래프 생성 외에 다른 기능이 없어보이지만, npm을 만들던 사람이 npm 생태계의 버그들과 취약점을 해결하지 못한 것을 보고 새로운 패키지 매니저를 만들었으니 지켜 볼 만하다고 생각합니다.