E18E가 뭔데(진짜 모름)

E18E가 뭔데

e18e (Ecosystem Performance) - A new community initiative | e18e

JS 생태계의 어느 라이브러리들은 의존성을 잔뜩 들고 있는 경우가 많아 속도가 느려질 때도 있고, 레거시 지원을 끊지 않아 이전 버전들을 위한 코드들을 갖고 있는 경우가 많습니다. 최근에는 라이브러리이 다양해지면서, 대체되면서 사이즈가 작거나 의존하는 라이브러리가 없는 라이브러리도 많아졌습니다. E18E 팀은 패키지 축소를 위한 가이드나 ESLint 라이브러리를 제공해줍니다.

지저분한 React 상태 리팩토링하기

Common Sense Refactoring of a Messy React Component | Alex Kondov - Software Engineer

One thing I’ve learned from all the consulting I’ve done is that rewrites rarely lead to anything good. Almost in all cases, when you have an application…

심윤섭: React 16.8 당시 hook을 처음 접할 당시의 코드를 보면 수많은 상태와 함께 분리하기 어렵게 되어있습니다. 저자는 어떻게 단계적으로 리팩토링을 접근했는지 보여주고, 어떻게 접근하면 좋은지 과정을 보여줍니다. 모든 경우에 이 방식이 적용되는 것은 아니지만, 요구사항에 따른 분리하는 접근 방식이나 라이브러리를 추가하는 방식은 많은 경우에 적용 가능하기 때문에, 나의 코드 접근 방식과 비교해서 적용해볼만 합니다.

Unstyled 컴포넌트 만들기

Avoiding premature abstraction with Unstyled React Components

심윤섭: 재사용 가능한 컴포넌트를 만들 경우 가장 많이 고려되는 부분은 "어떤 부분을 재사용 가능하게 만들까"이고, 그 중에 가장 문제가 되는 부분은 스타일링과 동작입니다. 버튼이 요구사항이 별로 없고, 스타일이 들쭉날쭉일 경우의 컴포넌트 제작을 따라간 글이지만, 컴포넌트로 분리했을 때 가장 위험한 부분 중 하나가 스타일링이기 때문에 한 번 생각할만한 포인트를 준다고 생각합니다.

프론트엔드의 보안

Frontend Security Checklist | Trevor Indrek Lasn

Tips for Keeping All Frontend Applications Secure

심윤섭: 간단하게 보는 프론트엔드에서 지켜야 할 보안들입니다. 기본인 XSS, XSRF, 환경 변수 노출, CSP를 소개하는 글입니다. 보안은 백엔드에 관련된 부분이 많기도 하고, 프론트엔드에서 DB로 바로 접근하는 경우도 많기 때문에, OWSAP Top 10을 통해 다른 부분도 살펴보는 게 좋습니다.

이제 CSS5라고 불러줄래요?

It’s Time To Talk About “CSS5” — Smashing Magazine

Have you ever wondered what happened after CSS3? It’s common knowledge that we never saw CSS4 come after it, yet we have a plethora of new features that have no similar way of defining when they were introduced. The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3 way back in 2009 — and you can help.

CSS3으로 정의된 이후 생태계에 최신 CSS를 적용하려는 움직임이 많아졌지만, 이후 네이밍이 없이 Modern CSS라고 지칭되기만 하고 버저닝을 따로 하진 않았습니다. 간단한 CSS 역사와 버저닝을 해야 한다는 이유에 대해 설명하는 가벼운 글입니다.

투명도가 있는 동영상 최적화하기

Video with alpha transparency on the web - JakeArchibald.com

AVIF와 VP9 + HEVC를 사용해보면서 투명도 있는 영상을 웹에서 보이기 위한 과정을 알려주는 글입니다. 현재만 있는 버그일 수도 있지만, 가볍게 이런 이슈들이 있다라는 것을 알아두면 좋을 것 같네요.

`cqi`을 사용하면서 겪을 수 있는 문제

What if you used Container Units for… everything? – Frontend Masters Boost

I said to myself I said what if I used container units for every single unit in a design? I was wondering, partially because I thought the answer might be well, everything will probably scale really nicely then. Container units, in case you haven’t heard of them, are unit (like px or rem, but more […]

컨테이너 단위를 모든 곳에 사용하면 잠재적인 문제가 나올 수 있고, 복잡한 레이아웃이 아닌 경우, 굳이 필요하지 않는다는 가벼운 글입니다.

React 컴파일러의 깊은 이해

React Compiler, 어떻게 동작할까 [1] - 바벨 플러그인을 통한 진입점 | 장용석 블로그

React Compiler에 대해 깊이 파헤쳐보고자 한다. 우선은 바벨 플러그인을 통해 컴파일러의 진입점을 살펴보자.

React 컴파일러에 대한 이해와 같은 쉬운 글이나 React 컴파일러 개발자의 글같은 간단하게 소개하는 글로 입문하고, 컴파일러 이론이나 코드에 더 집중하고 싶은 개발자를 위한 딥다이브 글입니다. 컴파일러 개발자의 글에서는 IR과 SSA라는 개념을 간단하게 넘어갔지만, 이 글은 매우 자세하게 다루고 있습니다.