nimusmix / tmp

CHECK YOUR SITE

10년 간의 홈페이지 변화를 확인할 수 있는 사이트

🚀 서비스 링크

https://check-your-site.netlify.app/

🖥️ 주요 기능

관심 사이트 목록

• 원하는 사이트를 관심 사이트 목록에 등록할 수 있습니다.
• 최대 4개까지 등록이 가능하고, 초과 시 경고가 노출되며 등록되지 않습니다.
• 등록된 카드를 hovering하면 상세 페이지 이동 버튼과 카드 삭제 버튼을 보여줍니다.
• 카드가 등록되지 않았을 때도 4개의 빈 카드를 보여주어 사이트를 최대 4개까지 등록할 수 있다는 점을 직관적으로 판단할 수 있게 하였습니다.

관심 사이트 상세

• 최대 10년 간의 홈페이지가 담긴 카드를 보여줍니다.
• 매년 1월 1일 기준으로 가장 가깝게 저장된 날짜의 홈페이지를 확인할 수 있습니다.
• 카드 좌측 상단에 해당 년도가 나타나며, 년도 우측에는 저장된 홈페이지의 정확한 날짜를 보여줍니다.
• 카드를 클릭하면 해당 년도의 홈페이지를 확인할 수 있는 사이트가 새 창으로 열립니다.
• 저장된 홈페이지가 없을 경우, 안내 문구와 홈으로 이동할 수 있는 버튼이 나타납니다.

🔖 추가 기능

사이트 별명 설정 [코드](구현 코드.md#사이트-별명-설정)

• 별명을 사용하는 것이 URL을 사용하는 것보다 사용자가 한 눈에 어떤 사이트인지 알아보기 쉬울 것이라고 판단했습니다.
• UI를 고려하여 최대 5자 까지의 별명을 설정할 수 있도록 했습니다.

URL 파싱 [코드](구현 코드.md#URL-파싱)

• 관심 사이트 카드의 URL은 최대 2줄까지 노출됩니다.
• 따라서 URL에서의 핵심적인 정보만 노출시키기 위해 URL의 프로토콜 이후부터 나타나도록 했습니다.

URL 중복 검사 [코드](구현 코드.md#URL-중복-검사)

• 데이터가 10년 중 일부만 존재할 경우 가장 가까운 시점이 중복되어 같은 홈페이지가 계속 노출되는 문제가 있었습니다.
• api가 반환하는 timestamp를 이용해 이미 저장된 날짜의 홈페이지라면 다시 저장되지 않도록 했습니다.

주소 중복 검사

**URL 목록 캐싱 ** [코드](구현 코드.md#URL-목록-캐싱)

• 하나의 URL은 해가 넘어가기 전까지 동일한 데이터를 받아옵니다.
• 따라서 계속해서 api 요청을 보내지 않도록 URL을 쿼리 키로 하여 데이터를 캐싱했습니다.
• 다만 해가 바뀌는 시점에 사이트를 이용할 수 있는 점을 고려하여 60분 마다 다시 데이터를 받아오도록 했습니다.

🧑🏻‍💻 실행 방법

npm install
npm start

🛠️ 기술 스택

• TypeScript, React

• Recoil, React-Query

  선정 이유

  본 과제에서는 전역으로 2가지의 상태를 관리합니다. (토스트를 띄우기 위한 `toastState`, 관심 목록을 관리하기 위한 `wishlistState`)
  따라서 많은 양의 보일러 플레이트 코드를 작성해야 하는 `redux`는 비효율적이라고 판단했습니다.
  또한 `useContext`는 토스트를 띄울 경우 `setToast`를 사용하는 컴포넌트까지 렌더링이 발생하므로,
  간편하게 상태를 관리할 수 있고, localStorage와의 연동이 쉬운 Recoil을 선정했습니다.

• React-hook-form

  react-hook-form

  :

• Styled-component

• Netrify

✉️ 마치며

안녕하세요 먼저 귀한 시간 내시어 과제를 검토해주셔서 정말 감사드립니다!

과제를 수행하며