📸 2023-01-10

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• 블로그에 레퍼런스 조회 페이지 추가

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

🌟 내일은 어떻게 해보고 싶으세요?

---

블로그에 레퍼런스 조회 페이지 추가

구독된 서비스들에서 보내주는 이메일에도 좋은 글들이 정말 많은데 읽어야지 하면서 미뤄두다가 놓치게 된다. 그리고 공부하다보면 정말 많은 블로그의 글들을 찾게 된다. 역시 좋은 글이다 싶어서 탭을 열어뒀다가 이게 쌓여서 크롬은 탭이 30개씩 열려있다. 계속 쌓아두다가 날린적도 있다😂.

읽으려고 했던 글, 정말 도움이 되는 글이라 다음에 또 읽어봐야 할 글, 또 필요할 거 같은 글들을 블로그에 정리해두기로 했다.

페이지 추가하는건 예전에 페이지 추가했던 방법을 그대로 사용했다.

페이지 상단에는 태그를, 하단에는 그 태그와 관련된 포스트 목록이 나오게 구성하였다.

우선 레퍼런스들의 정보를 json으로 정리했다. 그리고 async로 받아와서 HTML 태그를 붙였다.

[
  {
    "title": "리액트 공식문서",
    "tags": "리액트, 자바스크립트",
    "url": "https://ko.reactjs.org/"
  }
]

각 레퍼런스 아이템들은 노션의 북마크처럼 표현하고 싶었다.

URL로 프리뷰 정보를 알아내는 link-preview-js라는 라이브러리를 발견했다. 이걸 내 레파지토리에 설치하고 사용하려고 했는데 잘 되지 않아서 우선 보류했다. 방법이야 찾을 수 있겠지만 목록은 더 많아질 것인데 이미지를 불러오는 것이 옳은지 고민도 되기 때문이다. 프리뷰 정보를 얻어낼 수 있는 라이브러리를 알게 된 것만으로도 새롭다. 간단한 페이지이긴 하지만 이제 만든 페이지라서 레이아웃은 계속 변하지 않을까 싶다.