step8.md

Step 8. 나만의 코드로 SPA 만들기

💡 여태까지 학습한 모든 내용을 적용합니다.

• store
• router
• component
• observer pattern
• 가상돔
• diff 알고리즘
• 렌더링 최적화

참고 저장소

https://github.com/next-step/js-subway-admin

지하철역 관리 기능

• 지하철역을 등록할 수 있다.
  • 지하철역은 2글자 이상이어야 한다.
  • 엔터키 또는 마우스 클릭으로 역을 추가할 수 있어야 한다.
  • 지하철역의 이름은 최대 20자 이하이다.
  • 중복된 지하철역은 추가할 수 없다.
• 지하철역의 이름을 수정할 수 있다.
  • 수정하는 UI는 modal을 이용하여 수정할 수 있게 한다.
• 지하철역을 삭제할 수 있다.
  • 삭제 시 confirm을 이용하여 한 번 더 유저가 확인할 수 있어야 한다.
  • 이미 노선에 등록된 역인 경우 삭제할 수 없다.

지하철 노선 관리 기능

• 지하철 노선을 등록할 수 있다.
  • 지하철 노선의 이름은 2글자 이상이어야 한다.
  • 중복된 지하철 노선 이름이 등록될 수 없다.
  • 지하철 노선의 이름은 최대 10자 이하이다.
  • 지하철 노선 생성시 필요한 값은 색상, 상행역, 하행역, (최초 상행역과 하행역 구간의)거리, 시간이다.
• 지하철 노선을 수정할 수 있다.
  • 지하철 노선의 이름, 상행역, 하행역, 거리, 시간, 색상을 수정할 수 있다.
• 지하철 노선을 삭제할 수 있다.
  • 삭제 시 confirm을 이용하여 한 번 더 유저가 확인할 수 있어야 한다.

지하철 구간 관리 기능

• 지하철 노선에 구간을 추가, 수정, 삭제할 수 있다.
• 구간 조회 시, 노선을 변경하면 해당 노선의 Color로 Select 엘리먼트의 배경색을 변경한다.

회원 기능

• 유저는 회원 가입을 할 수 있다,
  • 회원 가입시 받는 정보는 email, name, password이다.
• 유저는 로그인 할 수 있다.
  • 로그인하고 나면 로그인 버튼은 로그아웃 버튼으로 변경되어야 한다.
  • 로그인한 유저만, 정보의 수정이 가능하다.
  • 로그인하지 않은 유저에게는 로그인 외 다른 버튼은 보이지 않는다.
• 유저는 로그아웃할 수 있다.
  • 로그아웃하면 / 루트 페이지로 돌아온다.