JavaScript와 SEO에 대한 진실과 거짓

How Google handles JavaScript throughout the indexing process – Vercel

Over the years, Google's treatment of JavaScript has changed, leaving us with misconceptions of how it's indexed. Here, we debunk the myths.

심윤섭: SEO에 대한 잘못된 속설을 바로잡는 글입니다. 구글은 SPA와 SSR 구분 없이 모든 컨텐츠를 로딩 및 렌더링합니다. 하지만 렌더링 성능을 통해 크롤링 효율 개선, 컨텐츠 가치 향상을 통해 우선순위를 높이는 과정을 높이라는 점을 강조합니다. 이외에도 SEO에 영향을 끼치는 요소가 여러개 있으니 더 자세히 알아보실 분은 SEO 기본 가이드를 보세요.

김대관: 구글에서의 SPA와 SSR에 대한 SEO의 영향에 대한 이야기를 나눈다면 꼭 나눠보고 싶은 정보입니다. 하지만 국내시장도 바라보는 서비스라면 네이버 서치어드바이저에서 권장하는 SPA에서의 SEO 향상을 위해 일부 SSR의 기능이 필요하다는 사실이 있으니 놓치지 않길 바랍니다!

위치는 유저의 거짓말

The C̶a̶k̶e̶ User Location is a Lie!!!

A post discussing the nuances around location-based programming. Various ways to access user location, how they can fail, and what to do about it.

심윤섭: 서비스를 만들 때, 많은 경우에 위치를 필요로 합니다. 언어 설정, 국가 판별, 해당 위치에 대한 데이터 제공… 이 글은 위치를 가져오는 방법을 소개하고, (클라이언트를 신뢰할 수 없으므로) 어느 것도 신뢰할 수 없다는 것을 알리고자 합니다. 사용자의 데이터를 원할 때, 데이터의 중요도에 따라 구현하는 방식이 달라질 수 있다는 것을 알려주는 좋은 글입니다. 개인정보는 중요하니, 많은 서비스에서 필요한 데이터만 가져가도록 구현하면 좋겠네요.

CSS 값은 어떻게 계산되는가

How Custom Property Values are Computed | Modern CSS Solutions

Review behaviors to be aware of regarding how the browser computes final custom property values. A misunderstanding of this process may lead to an unexpected or missing value and difficulty troubleshooting and resolving the issue.

심윤섭: 사용자 지정 CSS 변수를 사용할 경우 종종 CSS 값이 적용되지 않는다던가, 상속이 원하는 방식으로 작동하지 않는 경우가 종종 있습니다. 이는 CSS의 명세에 따라 값이 계산되기에 그렇습니다. CSS 값을 계산하는 방식인 CVT와 상속에 대한 잘못된 생각, 모던 CSS인 @property에 대해 소개합니다. 모던 CSS의 CSS 변수를 활용하여 스타일을 종속되지 않게 만들기도 하는데, 이 때 중요한

TypeScript를 해석하는 다른 시각

A different way to think about TypeScript

Thinking of TypeScript as a functional language that operates on sets

TypeScript의 Intersection, Union, 유형 검사, mapped type, infer 키워드를 새로운 관점(집합)으로 해석하는 글입니다. TypeScript를 공부할 때 어려워 할 수 있는 부분이 extends, infer, 그리고 조건부 타입을 공부할 때 어려움을 겪을 수 있는데, 대부분의 경우의 논리를 쉽게 생각하도록 돕습니다. 하지만 분산 조건부 타입(Distributive Conditional Types)의 경우를 들면서 항상 적용되는 것은 아니니 주의해야 합니다.

Barrel File을 쓰지 마세요.

Please Stop Using Barrel Files | TkDodo's blog

Why you probably shouldn't be adding index.ts files everywhere

순환 import와 import 속도 감소에 영향을 끼치니 사용하지 말자는 간단한 글입니다. Polyfill은 필요할때만의 저자도 비슷한 주제로 블로그 글(barrel file의 실패)을 썼네요. 프레임워크 측에서 권장하지 않는다면 안 쓰는 것이 맞겠죠!

`letter-spacing`은 정상적으로 작동하지 않습니다.

Letter Spacing Is Broken And There's Nothing We Can Do About It... Maybe | CSS-Tricks

This post came up following a conversation I had with Emilio Cobos — a senior developer at Mozilla and member of the CSSWG — about the last CSSWG group

letter-spacing이 글자와 글자 사이에만 적용되지 않고, 문자의 끝에 모두 적용한다는 사실을 보여줍니다.

클로저와 GC문제

Garbage collection and closures - JakeArchibald.com

클로저로 인한 함수 밖의 변수를 참조할 때 조심하라는 글입니다. 이는 JS에 초점이 맞춰졌지만, React에서의 메모리 누수, Tanstack Query에서의 메모리 누수와 같이 흔한 일이니 함수 밖 변수를 참조할 때 조심하면 좋겠습니다.

DOM을 현대적으로 사용하는 방법

Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Boost

JavaScript Frameworks generally do a lot of DOM handling for you, but doing it yourself can be the most performant option, and there are quite a few best practices.

UI가 간단한 경우에는 UI 프레임워크를 사용하지 않고 바닐라JS만으로 성능을 중시한 UI를 만들 수도 있습니다. 그 경우 .innerHTML만 알고 계신다면 모던 JS API로 DOM 수정 방법을 알아보세요.

Migration 방식 소개

Migrating to Next.js App Router with zero downtime — WorkOS

Can you really adopt Next.js App Router incrementally? At WorkOS, we learned that you can’t really migrate a complex app page by page without a hit to the UX. Instead, we worked out a migration guide that allowed us to test our entire app with App Router while still serving the Pages Router to users—before making the final switch.

How Airbnb Smoothly Upgrades React | by Andre Wiggins | The Airbnb Tech Blog | Jul, 2024 | Medium

Airbnb’s frontend recently reached a major milestone: all of our web surfaces have been upgraded from React 16 to React 18, the current major version of React¹. This was a big project for a product…

Boosting performance: Faire’s transition to NextJS | by Luke Bjerring | Jul, 2024 | The Craft

At Faire, speed matters. Our product should be lightning fast so that our customers can achieve their goals quickly — whether that’s setting up their shop in our marketplace, finding the products…

첫번째 글은 NextJS 어플리케이션을 page router에서 app router로 마이그레이션 과정, 두번째 글은 React 16을 React 18로 점진적 버전업 과정, 세번째 글은 React Router 기반 렌더링 서버를 NextJS로 점진적 마이그레이션 과정을 적은 글입니다. 마이그레이션 과정은 서비스마다 모두 다르므로 어떤 문제 상황에서 어떤 방식으로 마이그레이션 했는지만 보도록 가볍게 읽어보시면 좋습니다.

JavaScript와 SEO에 대한 진실과 거짓