diff --git a/README.md b/README.md index 588bec3..a758989 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,46 @@ -# ZUM 허브 클론 코딩 +# ZUM 허브 클론 코딩 | Vanilla JS로 SPA 만들기 -지독한 비염과 내 부족한 실력에 결국 기간내에 기술과제를 제출하지 못했다. 😭 +> ⚠️ 해당 프로젝트는 ZUM 인터넷의 기술과제였습니다. ZUM 기술 블로그에도 기술되어 있습니다. 깃허브로 제출하는 과제였기도 했고 기한 내에 제출하지 못해서 개인적인 욕심으로 더 진행해보는 프로젝트입니다. -그래도 다행인게 ZUM 기술과제는 어느정도 오픈된 과제여서 깃허브에도 올릴 수 있는 것 같다. 그래서 이 상태로 방치하기엔 아깝기도 하고 아직 구현하고 싶은 것들이 남아있어서 더 만들어 보기로 결심했다. +![zumhub](https://user-images.githubusercontent.com/66554164/139859225-0468ea9a-b123-4432-8701-282761f9e10a.png) + +## 기술 스택 🛠 + +- Front-end + + - Vanilla JS(ES6) + - HTML5, CSS3 + - Axios + +- Back-end + - Node.js + - Express.js + - Cheerio + - Axios + +## 중요 구현 사항들 🧐 + +- ✅ 컴포넌트 기반 설계 + - 상태(State)를 기반으로 렌더링 +- ✅ 전역 상태관리를 위한 Store + - Vuex 또는 Redux 등과 같은 라이브러리를 왜 사용할까? + - 관심사 분리? + - 직접 만들어보고 사용해보기 +- ✅ 페이지간에 이동이 발생할 때 새로고침이 발생하지 않도록 하기 + - 상세 페이지 진입 + - (미완성) 서브페이지 진입 +- ✅ 상세 페이지는 원본 URL을 크롤링하여 렌더링 + - 3개의 크롤링 라이브러리 비교 후 예제와 문법이 익숙한 cheerio로 구현 +- ✅ Image lazy loading 구현하기 + - 웹 성능을 위해 상세 페이지의 이미지를 lazy loading하기 + - Intersection Observer API를 사용하여 구현했다. +- ✅ 제공된 JSON을 토대로 API End-point 만들기 + - 처음 서버쪽을 구현해보았다. 동작은 하지만 좋은 코드인지, 좋은 설계인지는 모르겠다 그래도 처음보다 리팩토링을 해서 보기에 나쁘진 않다. +- 🔼 Router 만들기 + - 내가한 게 맞는지 잘 모르겠다. + - history API의 pushState 메서드를 사용해서 뒤로가기, 앞으로가기를 구현했다. +- 💡 공통 사항 + - 좋은 코드인지 항상 고민하고 유지보수 하자. --- @@ -53,3 +91,12 @@ npm start ## 10월 31(일) 업데이트 - 상세 페이지 진입 시 history push, 뒤로 가기 클릭 시 홈화면 렌더 + +## 11월 1일(월) 업데이트 + +- 클라이언트 사이드도 Fetch API에서 Axios로 변경 + +## 11월 2일(화) 업데이트 + +- Store의 상태(State) 리팩토링 +- 서버, 라우터 리팩토링