[10팀 김유진][Chapter 1-1] 프레임워크 없이 SPA 만들기

[yujinkim126]

과제 체크포인트

기본과제

1) 라우팅 구현:

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

2) 사용자 관리 기능:

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

3) 프로필 페이지 구현:

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

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

• 재사용 가능한 컴포넌트 작성
  • Header 컴포넌트
  • Footer 컴포넌트
• 페이지별 컴포넌트 작성
  • HomePage 컴포넌트
  • ProfilePage 컴포넌트
  • NotFoundPage 컴포넌트

5) 상태 관리 초기 구현:

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

6) 이벤트 처리 및 DOM 조작:

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

7) 기본적인 에러 처리:

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

심화과제

1) 고급 라우팅

• 라우트 가드 구현
  • 로그인 상태에 따른 접근 제어
  • 비로그인 사용자의 특정 페이지 접근 시 로그인 페이지로 리다이렉션

2) 고급 이벤트 처리

• 이벤트 위임 활용

리뷰 받고 싶은 내용

• 전역으로 관리한 로그인 상태에 대한 리뷰를 받고싶습니다. 저는 로그인 상태를 class를 이용해 스토어를 구현했는데, 클래스 안에 너무 많은 함수와 정보가 있어 class의 역할을 하지 못하는 것 같다는 생각이 있어 이런 경우 그냥 전역 객체나 함수로 관리하는게 나을지에 대해 의견이 궁금합니다.

궁금한 점

• commit을 할 때 어느 정도 단위로 하는 게 좋을지 궁금합니다.

과제를 수행하면서 느낀점

• 아직 부족한 부분이 많다고 느꼈고, 실제로는 잘 되는 것 같지만 테스트가 실패하는 걸 보면서 테스트 코드의 중요성을 느꼈습니다!

과제 시작 전 생각

바닐라 JS는 생각도 못했던 내용이라 살짝 해낼 수 있을까 하는 걱정부터 들었습니다.

과제 제출 후 생각

생각보다는 덜 헤매고 구현한 것 같지만 조금 더 고민하면서 코드를 짜야겠다고 느꼈습니다.

기타

과제 난이도

4