JavaScript와 SEO에 대한 진실과 거짓

JavaScript와 SEO에 대한 진실과 거짓

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

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

위치는 유저의 거짓말

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

CSS 값은 어떻게 계산되는가

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

TypeScript를 해석하는 다른 시각

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

Barrel File을 쓰지 마세요.

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

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

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

클로저와 GC문제

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

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

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

Migration 방식 소개

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