위젯을 삽입하는 대신 직접 dev.to 피드 페이지를 만들었습니다

Source: Dev.to

왜 dev.to 위젯을 건너뛰었는가

웹사이트에 dev.to 게시물을 표시하는 쉬운 방법이 있습니다: 위젯을 삽입하는 것이죠. 거의 그렇게 하려 했지만, 살펴볼수록 내가 다른 모든 것을 구축하는 방식과 약간 어긋나는 느낌이 들었습니다. 내 사이트는 완전히 수작업으로 만든—HTML, CSS, JavaScript, 구조화된 레이아웃, 주입 레이어, 테마 처리—모든 것이 의도적입니다. 서드파티 위젯을 넣는 것도 가능했겠지만, 시스템의 일부처럼 느껴지지 않았을 것이고, 그냥 안에 끼워진 무언가가 되었을 겁니다. 그 차이는 겉보기에 생각보다 중요합니다.

dev.to RSS 피드 사용하기

dev.to는 공개 RSS 피드를 제공합니다. 이것은 데이터입니다. UI 컴포넌트를 삽입하는 대신, 나는 피드를 가져와 XML을 파싱하고 내 사이트에 네이티브 컴포넌트로 게시물을 렌더링했습니다. iframe 없이—데이터 → 구조화된 객체 → 나만의 카드 컴포넌트.

작동 방식

1. https://dev.to/feed/your-username 에서 RSS XML을 요청합니다.
2. XML을 파싱합니다(예: 브라우저의 DOMParser 혹은 서버‑사이드 라이브러리 사용).
3. 각 <item>을 제목, URL, 발행일, 발췌문을 포함한 JavaScript 객체로 매핑합니다.
4. 그 객체들을 기존 카드 컴포넌트 라이브러리에 전달합니다.

장점

• 디자인 일관성 – 게시물이 내 디자인 시스템(여백, 타이포그래피, 호버 상태)과 일치합니다.
• 성능 – 원시 데이터만 전송되므로 영향이 최소화됩니다; 추가 스크립트나 iframe이 없습니다.
• 인증 무관 – 방문자가 dev.to에 로그인했든 안 했든 페이지가 동작합니다.
• 관심사의 분리 – RSS는 단순하고, 안정적이며, 예측 가능합니다; 레이아웃을 제어하려 하지 않습니다.

이러한 분리—콘텐츠와 프레젠테이션의 구분—은 강력합니다. dev.to는 게시와 발견을 담당하고, 나는 프레젠테이션을 담당합니다.

요약

사이트의 표면 영역을 직접 제어하면 장기적으로 모든 것이 더 깔끔해집니다. 프레젠테이션 레이어를 직접 소유하면 다른 사람의 스타일, 스크립트, 구조와 협상할 필요가 없고, 단순히 데이터와 작업하게 됩니다. 개인 사이트를 만들면서 블로그 콘텐츠도 함께 보여주고 싶다면, 위젯을 삽입하는 대신 피드를 가져오는 것을 고려해 보세요. 작은 변화지만, 아키텍처를 의도적으로 유지할 수 있습니다.