웹뷰의 함정

The Pitfalls of In-App Browsers – Frontend Masters Boost

You should know that in-app browser can and do literally inject JavaScript into the websites you visit with them with tracking scripts from the app you're inside of. And that's just one thing that sucks about them.

심윤섭: 최근 카카오톡에 있었던 MITM공격(카카오톡 E2EE 버그 바운티)또한 그렇고, 인앱브라우저는 보안, 성능, 호환성 이슈를 포함하고 있습니다. 하지만 많이 사용하시는 이유는 안내 페이지를 만들기 힘들어서가 아닐지 생각합니다. Inject를 탐지해서 안내를 해주거나, URI hack을 통해서밖에 빠져나갈 수 있지만, 인앱 브라우저가 줄어드는 날이 왔으면 좋겠네요.

서버 렌더링 방식 설명회

How to choose the best rendering strategy for your app – Vercel

Demystify Next.js rendering strategies: SSG, SSR, CSR, ISR, and PPR. Optimize your web apps for performance, SEO, and user experience. Learn when and how to use each approach with real-world examples and practical tips for modern web development.

심윤섭: Vercel에서 NextJS에 App router을 만들면서 개념은 약해졌지만 아직 React에서(React 외의 프론트엔드에서도) 많은 부분에서 사용되고 있는 SSR, SSG, ISR 개념과 이전에 설명했던 부분 미리 렌더링(PPR)에 대해 설명합니다. NextJS에 연결지은 개념이지만, 이해하기 쉽게 해주기 때문에 한 번쯤 보셨으면 좋겠네요.

텍스트 가독성

Readability: The Optimal Line Length – Articles – Baymard Institute

The length of text lines substantially impacts their readability — yet this is often overlooked in e-commerce. See our latest test findings on line length readability.

심윤섭: line-height과 행당 글자 개수에 따른 가독성 문제를 다룬 글입니다. 기능을 만들 때는 놓치는 경우가 많지만, 후에 시간이 날 때 제안하거나 디자인 시스템(나 가이드)에 넣으면 좋겠네요.

???: third-party 쿠키 없앨겁니다

A new path for Privacy Sandbox on the web

In this July 2024 announcement, the Privacy Sandbox team shares an important update regarding third-party cookies in Chrome.

심윤섭: third-party 쿠키를 없애고 Privacy Sandbox API로 전환하겠다는 구글의 엄포와 함께 여러 회사에서 GA4에서 교체하거나 다른 방법을 찾으려는 시도들이 있었습니다(Sentry에서 모든 광고 쿠키 제거 사례). 새로운 접근 방식을 제공한다고 밝혔는데, 상용화되기엔 멀었을 수도 있다고 생각되네요. 이미 서드파티 쿠키 지원 중단을 미루기도 했구요. W3C에서는 빠르게 타사 쿠키를 없애야 한다는 글을 발행하기는 했는데, 어떻게 될지는 지켜봐야 할 것 같네요.

State of React 2023

The 2023 edition of the annual survey about the latest trends in the React ecosystem.

간단하게 React의 트렌드를 알아볼 수 있는 설문조사 결과입니다. 가볍게 보고 넘어가도 좋습니다.

`box-shadow` 없이 그림자 표현하기

How not to use box shadows

So you think you know box shadows huh? I bet you didn't know they could do this.

JS로 애니메이션과 레이 캐스팅을 구현하는 재밌는 글입니다. 일반적인 글은 아니니 흥미로운 분만 보세요. 쉽게 접근할 수 있는 글은 카카오페이 팀의 API없이 웹 애니메이션 구현 시리즈가 있습니다.

Native에서 React Native 전환의 교훈

Migrating Coinbase's 56 Million Users to React Native: Key Lessons and Takeaways – StepChange

Are you thinking about migrating a Native mobile app to React Native or building one from scratch? Are you interested in hearing lessons learned from migrating Coinbase's 56 million users from Native to React Native? Nick Cherry, an Expert React Native developer and former Software Engineer at Coinbase, discusses his experience with React Native performance at Coinbase and his role in porting their Native mobile apps to React Native. He is interviewed by Harry Tormey, CTO of StepChange, who al

RN을 적용하게 된 이유와 장점(빠른 개발, OTA 업데이트), 단점(복잡한 데이터를 다룰 때의 성능 저하, 네비게이션 복잡성)을 소개하고 RN을 적용하려는 사람들에게 조언하는 영상입니다.

DRY가 잘못되어가는 방식

DRY – the common source of bad abstractions | Swizec Teller

Swizec reveals the hidden pitfalls of overusing the DRY principle in coding, leading to bad abstractions. Discover how to write adaptable, efficient code that avoids these common traps.

추상화는 매우 어렵습니다. "다른 함수 사용하는 사람이 사용하도록 추상화하기". 듣기만 해도 컴퓨터 끄고 싶은 조합이네요. 좋은 코드베이스는 적당히 추상화하는 것이지만(항상 고민이 되는 함수나 컴포넌트를 어떻게 분리할까도 비슷한 고민이라고 생각합니다.) 말만 쉽습니다. 좋은 방식은 많이 쓰는 라이브러리는 어떻게 추상화했는지 확인하고 공부하는 수 밖에 없겠죠. 이 글은 간단한 상황을 가정하고 어떻게 추상화가 잘못되어가는지 설명합니다. 흔히 많이 하는 실수라고 생각해서 가져왔습니다.

웹뷰의 함정