1. vanilla js로 spa 최소구현

2024-09-26.11.41.14.mov

1) 라우팅 구현

• History API를 사용하여 SPA 라우터 구현
  • '/' (홈 페이지)
  • '/login' (로그인 페이지)
  • '/profile' (프로필 페이지)
  • '/404' (Not Found 페이지)
• 각 라우트에 해당하는 컴포넌트 렌더링 함수 작성
• 네비게이션 이벤트 처리 (링크 클릭 시 페이지 전환)

2) 사용자 관리 기능

• LocalStorage를 사용한 간단한 사용자 데이터 관리
  • 사용자 정보 저장 (이름, 간단한 소개)
  • 로그인 상태 관리 (로그인/로그아웃 토글)
• 로그인 폼 구현
  • 사용자 이름 입력 및 검증
  • 로그인 버튼 클릭 시 LocalStorage에 사용자 정보 저장
• 로그아웃 기능 구현
  • 로그아웃 버튼 클릭 시 LocalStorage에서 사용자 정보 제거

3) 프로필 페이지 구현

• 현재 로그인한 사용자의 정보 표시
  • 사용자 이름
  • 간단한 소개
• 프로필 수정 기능
  • 사용자 소개 텍스트 수정 가능
  • 수정된 정보 LocalStorage에 저장

4) 컴포넌트 기반 구조 설계

• 재사용 가능한 컴포넌트 작성
  • Header 컴포넌트 (네비게이션 포함)
  • Footer 컴포넌트
• 페이지별 컴포넌트 작성
  • HomePage 컴포넌트
  • LoginPage 컴포넌트
  • ProfilePage 컴포넌트
  • NotFoundPage 컴포넌트

5) 상태 관리 초기 구현

• 간단한 상태 관리 시스템 설계: 전역 상태 객체 생성 (예: 현재 로그인한 사용자 정보)
• 상태 변경 함수 구현: 상태 업데이트 시 관련 컴포넌트 리렌더링

6) 이벤트 처리 및 DOM 조작

• 사용자 입력 처리 (로그인 폼, 프로필 수정 등)
• 동적 컨텐츠 렌더링 (사용자 정보 표시, 페이지 전환 등)

7) 기본적인 에러 처리

• 잘못된 라우트 접근 시 404 페이지로 리다이렉션
• 로그인 실패 시 에러 메시지 표시

8)로그인 상태에 따른 접근 제어

• 비로그인 사용자가 프로필 페이지에 접근시 로그인 페이지로 리다이렉트 한다.
• 로그인된 사용자가 로그인 페이지에 접근시 메인 페이지로 리다이렉트 한다.

9) 고급 이벤트 처리

• 이벤트 위임 활용

10) 에러 바운더리 구현

• 컴포넌트 레벨의 에러 처리

2.