않이 그래서 인증 토큰을 어디에 저장해야하는거죠?

Browser storage can present security concerns. Here we cover the options and look at the best practices that work together to keep your app secure.

심윤섭: 프로그램을 개발하는 이상 보안에 신경써야 합니다. 나만의 작고 소중한 서비스의 사용자들의 정보를 지켜야 하니까요. 그래서 서비스를 만드는 프론트엔드 개발자는 항상 인증이 완료된 토큰을 어디에 저장할지 걱정합니다. 갖고온 글은 토큰의 저장 방식을 명확하게 정해주는 글이 아닙니다. 오히려 "너가 뭘 생각했든 그 방식은 위험할 수 있어."를 알려주는 글에 가깝죠(Web Worker를 사용한 방식을 몰랐다면 말이죠!). 글의 마무리는 "Web Worker를 사용해서 사용자가 인메모리 변수에 접근할 수 없게 하거나, 우리 서비스를 사용해!"로 끝나지만 우리들의 클라이언트인 기획자는 만만하지 않습니다. "로그인 유지 기능"을 구현해달라고 요청이 들어왔다고 가정하죠. 이 기능을 구현하기 위해 Web Storage 중 하나에 저장해야 하고, 결국 위험에 노출될 수 밖에 없습니다. "그럼 어떻게 하죠?"라고 물어보면 "다 위험하니까 쓰지 마라"라고 할 수는 없습니다. 그것을 전해주려고 글을 가져온 것도 아니구요. 제가 생각하는 결론은 "무엇을 쓰던간 위험에 노출될 수 있다는 것은 인지하고, XSS는 막는 방법을 알아보는게 좋다"입니다. 모든 문제에 은탄환은 없으니까요.

최원빈: 공격 방식을 이해하는 것이 인상깊은 글입니다. cookie 보다는 localStoarge가 안정적이고, 그보다는 sessionStoarge가 더 안정적이고, 그보다는 httpOnly 쿠키가 안정적이라는 것은 상식이며 사실이지만, 결국 공격을 의도한다면 어렵지 않게 단순한 공격(XSS)으로 접근이 가능하다는 사실을 충분히 인지해야 한다고 생각해요. 이런 위험을 인지하고 있다면, 폼 관련 기능을 개발할 때 이를 방지해야 한다는걸 잊지 않을 수 있을 것 같네요. 최선의 방어는 공격이라는 점을 다시 한번 깨우치고 갑니다. 😲

React에서 polymorpic component 만들기(w. asChild)

Implement Radix's asChild pattern in React

Use the asChild pattern for composition. Get the right types on each component. Merge props together. Use tailwind-merge for classnames.

심윤섭: 보통 디자인 시스템을 마련할 때에 많은 것을 고려해야 합니다. 그 중에서는 컴포넌트를 커스텀하기 쉽게 하는 것도 그 중 하나라고 생각합니다. Button 스타일이 태그에만 쓰이지만 않고 lt;agt;lt;/agt;태그나 다른 커스텀 컴포넌트에도 사용되니까요. 이 때 많이 사용되는 방법이 Chakra UI의 as props, MUI의 component props 같이 element 이름이나 컴포넌트 자체를 넘기는 방법입니다. 이를 사용하는 방법은 자세하게 TypeScript 구현하는 글 (한국어로 쓰여진 글(번역 아님)도 있네요!)를 참고하세요. 하지만 이 기사는 Radix의 `asChild`(next/link의 passHref와 비슷할지도요)에 주목하고 이를 구현하는 방법을 설명합니다. 디자인 시스템을 만드는 사람이라면 꼭 보셨으면 합니다!

최원빈: Radix UI는 자유도 높은 디자인 시스템을 구현하기 위해 asChild 패턴, Compound 패턴 등을 적절히 사용해 Headless한 라이브러리의 우수 사례를 만들었다고 생각합니다. 접근성도 충분히 고려해 라이브러리를 사용하는 것 만으로도 배울 점이 많은데, asChild패턴을 구현하며 주된 환경인 TypeScript + React 에서 React Element와 HTML Element 사이의 갭을 메꿔나가는 과정이 흥미롭네요. 컴포넌트의 추상화가 중요시되는 가운데, leaf 노드에 가까운 컴포넌트를 추상화하려면 분명히 알아야 할 점이라고 생각하기에 추천합니다.

React의 동시모드 작동 원리

The underlying mechanisms of React’s concurrent mode

Ladder@Introduction It’s not the first time React seemed like magic to me. But, this time, reading the Marking a state update as a non-blocking transition section from the useTransition documentation really caught my attention. In this article, besides sharing how the concurrent mode works with the help of React’s transitions, I will also walk you through my reasoning process that I employ whenever I try to arrive from having no idea how this works to I finally get it!

심윤섭: React의 동시모드의 startTransition이 어떻게 작동하는가에 대한 글입니다(어렵습니다). 리액트 내부의 동작원리를 설명하고 있기에 어렵다고 생각합니다. 리액트의 전반적인 동작 원리를 모르시는 분은 React 렌더링 동작에 대한 (거의) 완벽한 가이드 (한국어 번역)을 보시고, 더 자세한 동작원리를 원하시는 분은 React 18 톺아보기(코드 기반으로 하기 때문에 현재 사용되지 않는 개념이 있을 수도 있습니다.)을 보세요. 개념만 보시길 원한다면 React 18 RFC도 좋습니다.

최원빈: 공식 문서의 Concurrent Mode에 대한 소개글에서는 이러한 내용을 찾아보기 힘든데, 핵심 동작 원리인 "렌더링을 중지하고 브라우저의 메인 스레드에 넘기는 과정"에 대해 복잡한 추가 상황 없이 이해하기 쉽게 예시를 들어 설명합니다. useTransition훅을 정확히 사용하려면 반드시 이해해야 하는 내용이라고 생각이 드네요.