[13팀 김보영] [Chapter 1-1] 프레임워크 없이 SPA 만들기

[BoYoung00]

과제 체크포인트

기본과제

1) 라우팅 구현:

• History API를 사용하여 SPA 라우터 구현
  • '/' (홈 페이지)
  • '/login' (로그인 페이지)
  • '/profile' (프로필 페이지)
• 각 라우트에 해당하는 컴포넌트 렌더링 함수 작성
• 네비게이션 이벤트 처리 (링크 클릭 시 페이지 전환)
• 주소가 변경되어도 새로고침이 발생하지 않아야 한다.

2) 사용자 관리 기능:

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

3) 프로필 페이지 구현:

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

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

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

5) 상태 관리 초기 구현:

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

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

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

7) 기본적인 에러 처리:

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

심화과제

1) 해시 라우터 구현

• location.hash를 이용하여 SPA 라우터 구현
  • '/#/' (홈 페이지)
  • '/#/login' (로그인 페이지)
  • '/#/profile' (프로필 페이지)

2) 라우트 가드 구현

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

3) 이벤트 위임

• 이벤트 위임 방식으로 이벤트를 관리하고 있다.

과제 셀프회고

• 이번 과제를 통해 프레임워크 없이 SPA를 직접 구현하면서 라우팅, 상태 관리, DOM 조작 등 웹 애플리케이션의 핵심 원리를 이해할 수 있었습니다. 특히 History API와 해시 라우터를 모두 적용하며 차이점을 체감했고, LocalStorage를 활용한 사용자 데이터 관리와 이벤트 위임 방식도 학습할 수 있었습니다. 다만, 상태 관리와 라우터 로직의 확장성, 그리고 DOM 조작의 효율성에서 개선이 필요하다고 느꼈습니다. 전반적으로 코드의 가독성과 유지보수성을 높이는 방법을 고민하게 되었고, 이를 통해 기초를 더욱 탄탄히 다져야겠다는 다짐을 했습니다.

기술적 성장

• History API와 DOM 조작에 대해 이해할 수 있게 되었습니다.
• 테스트의 중요성을 깨달았습니다.

코드 품질

• 모든 테스트에 통과한거 자체가 만족스럽습니다.
• 히스토리와 해시 라우터를 관리하는 부분에서 좀 더 생산성 있는 로직으로 수정하고 싶습니다.
• 일단 이벤트와 UI를 나누어 가독성 좋게 만드려고 노력했습니다.

학습 효과 분석

• 테스트 케이스에 맞추면서 구현을 하다보니 DOM 흐름에 대한 이해를 좀 더 깊이 이해할 수 있었습니다.

과제 피드백

• 여러 가지 디자인 패턴을 적용해볼 수 있도록 의도해주신 게 너무 좋은 것 같습니다.

리뷰 받고 싶은 내용

• 라우터 관련 코드에서 반복적으로 작성된 로직이 있다면, 이를 추상화하거나 간소화할 방법이 있을까요?
• DOM 조작 로직에서 성능적으로 개선할 여지가 있는지 검토해주세요.
• 컴포넌트 구조가 적절한지, 가독성과 유지보수성을 높일 방법이 있다면 알려주시면 감사하겠습니다!

[creco-hanghae]

네이밍을 UserNav 와 같은 걸로 바꿔보면 어떨까유?

[BoYoung00]

네 감사합니다!!