줌 주니어 프론트엔드 과제

1. 기술스택

front-end
- vanilla javascript
- bundler ( webpack or parcel or rollup or vite )
back-end
- node.js
- express.js

2. 기술적 요구사항

(1) 필수 요구사항

Front-End
- 구현에 필요한 프레임워크 및 라이브러리 절대 사용 금지
- 본인이 사용하기 편한 bundler를 이용하여 개발환경 구축하기
  - webpack parcel rollup vite
- 컴포넌트 기반 설계
  - 본인이 직접 할 것. 타인의 코드 사용 금지. 타인의 코드를 사용할 경우 배점 없음.
  - Core를 만든 후에, 이를 사용하는 형태로 작성할 것
  - 상태(State)를 기반으로 렌더링하는 형태로 작성할 것
```
// HTML
<div id="app"></div>

// Javascript
let state = { title: 'title', description: 'description' };
const $app = document.querySelector('#app');
const render = ({ title, description }) => {
  $app.innerHTML = `
    <h1>${title}</h1>
		<p>${description}</p>
  `;
};
const setState = (newState) => {
  state = { ...state, ...newState };
  render(state);
}

render(state);
setState({ title: 'Hello ' });
setState({ description: 'Wolrd ' });
```
  - 설계는 자신 있는 형태(객체지향 or 함수지향)로 해주세요!
- SPA(Single Page Application)기반
  - 페이지간에 이동이 발생할 때 새로고침이 발생하지 않도록 한다.
  - Router 만들어서 사용해보기
  - 새로고침을 했을 경우에도 현재 페이지의 내용을 유지해야 한다.
- 전역 상태관리를 위한 Store 만들기
  - Vuex 혹은 Redux 등과 같은 상태관리 프레임워크 직접 만들어서 사용해보기
- 이벤트 관리를 최적화하기
  - 불필요한 이벤트는 해제하기
  - 이벤트 위임 사용하기
- XHR(ajax) 관련
  - API 요청중(loading)/실패(fail) 등에 대한 UI 처리
- localStorage 사용
  - 즐겨찾기 데이터는 localStorage에 저장한다.
- UI는 허브줌(https://hub.zum.com/)을 참고하여 만든다.
  - 똑같이 할 필요 없고, Layout 정도만 참고
Back-End

제공되는 JSON
- 제공된 JSON을 토대로 API End-point 만들기
- 상세페이지는 원본 URL의 컨텐츠를 스크래핑(크롤링) 하여 사용한다.
  - 이에 필요한 라이브러리는 자유롭게 선택(puppeteer/playwright/cheerio 및 기타 등등
- 이미 조회한 데이터의 경우 캐싱을 통하여 관리한다.
  - 최대한 간단하게 로컬(in memory) 캐시로 구현할 것

(2) 선택적 요구사항

타입스크립트 사용
가상돔 혹은 DIFF 알고리즘을 이용
- 참고아티클
Observer Pattern을 이용해서 상태가 변경될 때 자동으로 렌더링 되도록 만들어보기

프론트엔드 코드를 webpack으로 build하여 production code 생성하기
- 이 때 서버에서 사용할 수 있는 형태로 빌드해야 한다.
- 즉, 서버에서 빌드된 코드를 연동하여 실행할 수 있도록 환경을 구성해야 함
이미지는 Lazy Loading 사용
scss를 연동하여 사용