DEV API를 사용하여 DEV.to 기사 가져오기 - 누락된 코드 조각

목차(TOC)

Why this tutortial is different

Getting ALL your articles from DEV API

Populating your site with your articles

Formatting your site

Helpful links

이 튜토리얼이 다른 이유

Back to TOC

예, 사용 방법DEV API을 설명하는 인터넷에 많은 자습서와 단계별 가이드가 있습니다. 훌륭합니다! 저는 개발자가 개발자를 돕는 것을 좋아합니다. 나는 그것을 전적으로 지원하고 다른 방법은 없을 것입니다. 동료들과 앞서 걸어온 사람들의 사랑과 격려와 지원이 없었다면 오늘날 우리 중 많은 사람들이 여기 있지 못했을 것입니다.

그러나 다양한 주제에 대한 수많은 다른 자습서와 마찬가지로 이러한 자습서 중 많은 부분이 찾고 있는 주요 차이점을 생략합니다.

내 기사를 DEV.to에서 내personal website로 전송하려고 할 때 기사의 최근 섹션뿐만 아니라 지금까지 작성한 모든 기사를 원했습니다. 처음 20개, 30개 또는 40개의 기사가 아니라 전부입니다. 빈칸, 마침표. 그리고 그것이 누락된 수많은 튜토리얼에서 내가 본 차이점이었습니다.

주요 차이점은 &state=all였습니다. 그게 다야!



하지만 모든 것을 살펴보자...

DEV API에서 모든 기사 가져오기

Back to TOC

위의 fetch 문을 보고 Postman을 통해 실행하면 API 호출에서 기사 내의 모든 정보를 얻는 것을 볼 수 있습니다.


${username} 문 내에서 호출할 위의 username 변수getArticle로 fetch를 저장합니다. 귀하의 DEV 사용자 이름입니다.

여기에서 나머지 블로그 페이지를 설정할 수도 있습니다. 예를 들어 document.title .

기사로 사이트 채우기

Back to TOC

서식 지정이 끝나면 내 블로그 기사가 내 website에 표시되는 방식입니다. 사용자가 주제, 기사가 게시된 시기, 기사를 읽는 데 걸리는 시간 등을 알 수 있도록 게시 날짜, 제목 및 읽기 시간과 같은 기본 정보를 제공하는 아이디어가 마음에 듭니다.



게시 날짜를 표시하려면 API 내에서 여러 선택 사항이 있습니다.

created_at: "2022-03-31T04:15:28Z"
.
.
.
published_at: "2022-04-05T16:05:20Z"
published_timestamp: "2022-04-05T16:05:20Z"
readable_publish_date: "Apr 5"

나는 개인적으로 created_at를 멀리할 것입니다. 왜냐하면 당신이 x일 또는 몇 주 동안 초안을 작성한 기사를 게시할 수 있기 때문입니다. 따라서 해당 날짜가 항상 정확하지 않을 수 있습니다.

하지만 published_timestamp는 연, 월, 일 형식이고 내가 사용하고 싶지 않은 다른 데이터가 첨부되어 있기 때문에 일부 형식을 지정해야 했습니다.



마지막으로 각 기사를 가져오는 전체 코드는 다음과 같습니다.

사이트 포맷

Back to TOC

그리고 flex , justify-content , align-content 등을 사용하여 기사를 그리드 레이아웃에 배치하는 몇 가지 기본 스타일을 사용하면 각 기사가 웹 사이트에 완벽하게 배치됩니다.



제가 구현한 필터 버튼이 궁금하시다면 이전에 올렸던 글을 참고하세요

디스플레이 카드 필터링

Tina Huynh ・ 4월 28일 ・ 1분 읽기

#showdev #webdev #beginners #javascript

즐거운 코딩하세요!