[1팀 이한목] Chapter 1-1. 프레임워크 없이 SPA 만들기

[hanmok]

과제 체크포인트

기본과제

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) 이벤트 위임

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

과제 셀프회고

기술적 성장

Javascript 기초 학습
DOM 이 생기는 시점과 JS 코드가 불러와지는 시점
event 의 위임, querySelector 를 통한 component 변경 및 값 조회 방법

코드 품질

• 특히 만족스러운 구현: 폴더 구조 및 Router 구현부
• 리팩토링이 필요한 부분: localStorage 구현
• 코드 설계 관련 고민과 결정: router 를 다른곳에서도 사용할 수 있도록 addRoute 를 이용

학습 효과 분석

• 가장 큰 배움이 있었던 부분: Javascript 의 기본적인 활용법
• 추가 학습이 필요한 영역: HashRouter, 이벤트 버블링 및 캡쳐링

과제 피드백

• 과제에서 모호하거나 애매했던 부분: username 및 이메일 validator
• 과제에서 좋았던 부분: 페이지 새로고침이 일어나는 경우 테스트가 통과하지 못하는 테스트케이스

리뷰 받고 싶은 내용

파일 및 폴더의 이름과 구조, 또한 변수와 함수의 명명법에 대해 피드백 받고싶습니다.

storage 의 경우 테스트를 통과하는 것에 주로 초점을 맞추어 작성하여서 기능적으로 더 광범위하게 적용될 수 있는 구현 방법에 대해서도 피드백 부탁드립니다.