oilnow-sajangnim-project

0. 목표

• 오일나우에서 주유소 간편결제가 가능하다는 가정하에 필요할
  사장님 결제관리 페이지 제작해보자

  

1. 기술스택

• Front-End: JavaScript, TypeScript, React.js, Styled-Components
• Other: Figma

2. 기능

• Virtual List (Throttle)
• 검색필터 (Debounce)
• Lazy Loading
• Image Carousel

3. 구성

4. 개발과정

1. 프로젝트의 시작
2. 서비스 유저는 누구인가
3. 주유소 간편결제 플로우에 대한 고민...
4. 페이지 구성 / 디자인 / 개발개요
5. Virtual List 직접 구현하기 (feat. useThrottle)
6. Express 웹서버 만들기 (feat. Pagination)
7. 검색필터: 여러개 조건으로 검색하기 (feat. Debounce, 날짜비교)
8. 화면이동, 데이터넘기기 그리고 모달
9. Lazy Loading (w/ Intersection Observer API)
10. Image Carousel 만들기
11. 사이드메뉴 열고 닫기 (w/ 애니메이션)

5. 실행방법

• 가장 먼저 web server를 실행시켜 주세요. (server 디렉토리에서 yarn start)
• 그 다음 react app을 실행시킵니다. (front 디렉토리에서 yarn start)