OTW for FE

사람을 위한 코드는 매우 어렵다

2024. 10. 11.

사람을 위한 코드는 매우 어렵다

It's hard to write code for computers, but it's even harder to write code for humans · Erik Bernhardsson
How to build developer tools for happiness and productivity.

심윤섭: 컴퓨터를 위해 코드를 작성하고, 최적화하는 것은 쉽지만, 사람을 위해 코드를 작성하고 사람이 인식하기 쉽게 최적화하는 것은 쉽지 않습니다. 사람을 위해, 예시 중시, 간단한 개념 중시, 커스텀 가능을 막지 말기… 여러가지를 소개합니다. 모든 사람에게, 모든 제품에 적용되는 것은 아니지만, 사용자를 위해 코드와 문서를 작성하는 것에 대해 다시 생각하게 만드는 글입니다. 저자가 예시가 중요하다고 했지만, 그에 못지 않게 핵심 개념과 디자인 원칙을 설명하는 것도 중요하며, 개념을 적게 유지하는 것도 중요하지만, 보편적이지 않은 개념들이 필요할지도 모릅니다. 언제나 상황에 맞게 중심을 찾는 것이 중요하다는 것을 일깨워주는 글이라고 생각합니다.

김대관: 컴퓨터를 위한 코드는 컴퓨터가 일관된 논리와 규칙에 따라 작동하기 때문에 최적화하기 상대적으로 쉽습니다. 하지만 사람마다 개성과 배경 지식, 사고방식이 다르기 때문에, 사람들이 쉽게 이해할 수 있는 코드를 작성하는 것은 훨씬 더 어려운 일입니다. 그럼에도 협업을 위해서는, 서로가 쉽게 이해할 수 있는 코드를 작성하는 것이 중요하며, 이는 회사 내 코드베이스나 문서 작성 방식에 맞추어 유지보수 가능한 코드를 작성하는 능력으로도 평가될 수 있다고 생각합니다. 결국, 협업 환경에서는 상호 존중과 지식 차이를 줄이는 것이 핵심입니다.

번들러의 역사

Bundling Past, Present, and Future - YouTube
A recent talk I gave about JavaScript bundlers. It’s a bit of a history lesson, and along the way I tried to introduce what bundlers are, why you’d use one, ...

심윤섭: React Spectrum팀의 테크리드가 Parcel과 LightningCSS를 개발한 경험을 기반으로 번들러의 역사를 소개하는 영상입니다. 모든 역사를 설명하는 것은 아니지만, CJS와 AMD, ESM에 대한 개념, 번들러의 간단한 역사와 구조, 그리고 번들러의 미래를 설명하니, 자막과 함께 보시길 추천드립니다. 이외에도 Rolldown의 근황(VoidZero 회사 설립), Tree shaking 딥다이브를 원한다면 Tree shaking이 뭔데?를, 다른 번들러의 구조가 궁금하다면 Vite는 어떻게 작동하나요?영상에서 Vite의 구조를 확인해보세요.

프론트엔드 테스트 방향성 찾기

Testing Frontend — Lessons from over a million lines of TypeScript at Palantir
The most critical three learnings for testing frontend, from ten years helping lead frontend engineering at Palantir.

제품 홍보 글이지만, 단위 테스트를 어떻게 분리할지, 컴포넌트 테스트와 통합 테스트는 어떻게 접근할지에 대해 적은 흥미로운 글입니다. 모든 테스트에 적용되는 글은 아니겠지만, 한 번 접근 방식을 작성할 때 적용해봐도 괜찮겠네요.

Web Component 이대로 가면(라이더)

Web Components Are Not the Future - DEV Community
A few years ago I wrote an article suggesting that Web Components might not be the most beneficial... Tagged with webdev, javascript, webcomponents.
Web Components Are Not the Future — They’re the Present
An open reply to Ryan Carniato's post entitled 'Web Components Are Not the Future'
Web components are okay | Read the Tea Leaves
Every so often, the web development community gets into a tizzy about something, usually web components. I find these fights tiresome, but I also see them as a good opportunity to reach across "the great divide" and try to find common ground rather than another opportunity to dunk on each other. Ryan Carniato started the…

심윤섭: Web Component에 관한 관점을 다룬 세가지 글입니다. 첫 글은 Web Component의 모던 JS 프레임워크에 비해 부족한 점을 여럿 이야기하며, 웹 표준으로 너무 부족하며, 사용하는데 기회비용이 너무 크다는 주장을 합니다. 두번째 글은 첫 글이 프레임워크 개발자의 입장이 너무 들어가 있음을 지적하며, Web Component가 충분히 발전하고 있으며, 여러 장점이 있다고 주장합니다. 마지막으로 세번째 글은 Web Component가 표준을 정하고 하위 호환성을 보장하는 측면에서 좋지만, 성능과 다른 JS 프레임워크와 호환성에서 불편함을 느낄 수 있다는 중립적인 입장을 소개합니다. Web Component에 관한 관점은 매우 다양하고, 여러가지를 소개했습니다. Web Component는 기존 프레임워크와 상호보완적이다.에서 여러가지 입장을 소개했지만, 표준이 JS 트렌드에 비해 많이 발전하지 않았다는 점, 기존 JS 프레임워크 기반 개발자가 접근하기 어렵다는 점은 좋지 않지만, 요구사항에 맞는 곳에는 사용하기 좋다는 점에서 주목해볼만 합니다.

테스트에서 아님을 주장하기

Inverse Assertions | Epic Web Dev
Learn how to test time-dependent side effects that should not happen. Avoid false positives by using inverse assertions.

JestVitest에서 제공하는 단언에서, 없다는 것이나 아님을 주장하기 위해서 waitForexpect함수를 사용하는 방식을 소개합니다.

CSS for A11y

The “Other” C in CSS | Sara Soueidan | CSS Day 2024 - YouTube
About Sara: https://www.sarasoueidan.comMore about CSS Day: https://cssday.nl or https://twitter.com/CSSDayConfReceive conference announcements in your inbox...

심윤섭: 접근성은 HTML과 JS에만 해당되는 것이 아닌, CSS 속성에도 해당되며, 어떤 속성들이 해당되는지, 접근성을 보장하는 모범 사례를 설명하는 영상입니다. 쉽게 이해할 수 있는 발표는 아니지만, 접근성을 고려할 때 CSS의 어떤 부분도 고려해야 하는지 상기시키는 발표입니다.

Duration Function 개념 소개

What are Durable Functions? A visual JavaScript primer - Inngest Blog
Lydia Hallie's powerful animated illustrations cover the inner workings of Durable Functions.

워크플로우(ex, cron, 이메일…)를 실행을 보장하는 능력을 뜻하는 Duration Function을 소개하는 글입니다. 비록 제품 홍보가 들어가 있지만, 키워드와 어떻게 실행되는지를 살피는 용도로 나쁘지 않은 글이라고 생각합니다.

함수형 프로그래밍 JS로 입문하기

Unleash JavaScript's Potential with Functional Programming
Discover how functional programming can clean up your JavaScript code. Learn key concepts like immutability, currying and function composition to write cleaner, more maintainable, and efficient code.

항상 함수형 프로그래밍을 사용하기엔 무리가 있겠지만, JS의 어느 부분이 함수형 프로그래밍 개념이 들어갔는지, 어떤 개념이 있는지 확인하기에 좋은 글입니다.

새로운 것들

Introducing Stricli | Stricli
We are excited to announce the release of Stricli, a new framework for developing command line applications with TypeScript.
GitHub - microsoft/code-push-server: Standalone CodePush server from App Center
Standalone CodePush server from App Center. Contribute to microsoft/code-push-server development by creating an account on GitHub.
Level up your env var tooling in Next.js with DMNO | DMNO
ESLint now officially supports linting of JSON and Markdown - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

첫번째 글은 블룸버그에서 CLI 프레임워크를 만들기 전 고려했던 CLI 프레임워크들과 CLI 프레임워크를 만든 이유를 보여주는 글입니다. 두번째 글은 CodePush가 사라지면서 Microsoft에서 CodePush 서버를 오픈소스화한 것입니다. 세번째 글은 환경변수를 관리하는 라이브러리와 Next.js를 통합하는 글입니다. 이 라이브러리가 아니더라도 dotenvx같은 라이브러리도 있으니 살펴보고 적용해볼만 하겠네요. 네번째 글은 ESLint가 JSON과 마크다운을 공식적으로 지원한다는 글입니다.