ZUM 허브 클론 코딩 | Vanilla JS로 SPA 만들기

⚠️ 해당 프로젝트는 ZUM 인터넷의 기술과제였습니다. ZUM 기술 블로그에도 구현사항들이 어느정도 오픈되어 있습니다. 따라서 깃허브로 제출하는 과제였기도 했고 기한 내에 제출하지 못해서 개인적인 욕심으로 더 진행해보는 프로젝트입니다.

기술 스택 🛠

✅ 컴포넌트 기반 설계
- 상태(State)를 기반으로 렌더링
✅ 전역 상태관리를 위한 Store
- Vuex 또는 Redux 등과 같은 라이브러리를 왜 사용할까?
  - 관심사 분리?
- 직접 만들어보고 사용해보기
✅ 페이지간에 이동이 발생할 때 새로고침이 발생하지 않도록 하기
- 상세 페이지 진입
- (미완성) 서브페이지 진입
✅ 상세 페이지는 원본 URL을 크롤링하여 렌더링
- 3개의 크롤링 라이브러리 비교 후 예제와 문법이 익숙한 cheerio로 구현
✅ Image lazy loading 구현하기
- 웹 성능을 위해 상세 페이지의 이미지를 lazy loading하기
- Intersection Observer API를 사용하여 구현했다.
✅ 제공된 JSON을 토대로 API End-point 만들기
- 처음 서버쪽을 구현해보았다. 동작은 하지만 좋은 코드인지, 좋은 설계인지는 모르겠다 그래도 처음보다 리팩토링을 해서 보기에 나쁘진 않다.
🔼 Router 만들기
- 내가한 게 맞는지 잘 모르겠다.
  - history API의 pushState 메서드를 사용해서 뒤로가기, 앞으로가기를 구현했다.
💡 공통 사항
- 좋은 코드인지 항상 고민하고 유지보수 하자.

오른쪽 상단 Fork 버튼

git clone 복사한 url

npm install

npm start