[19팀 이재혁][Chapter 1-1] 프레임워크 없이 SPA 만들기

[jhlee0409]

과제 체크포인트

기본과제

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) 고급 이벤트 처리

• 이벤트 위임 활용

리뷰 받고 싶은 내용

• 성능적으로 문제가 되는 지점이 있을까요?
• 오버엔지니어링에 속하는 부분이 있을까요?
• Component 클래스의 구현 정도과 활용정도, 미숙한 부분이 있을까요?
  • 코치님의 아티클을 참고하여 개념만 잡은 뒤 시행했습니다.
• 오히려 더 코드를 복잡하게 만드는 요소가 있을까요?

궁금한 점

• StorageController 와 UserController 의 경우 싱글톤으로 구현하지 않고 최상단 App 컴포넌트에서 호출 후에 props로 내려서 관련 컴포넌트들이 사용하도록 만들었는데 데이터 관리 및 성능상 큰 문제가 없을까요?
• class 내 에서 변수를 정의 할때 class 최상단에 정의한 후에 constructor에서 this에 담는 경우가 보이는데 이는 어떤 이유 때문인가요?
• NotFoundComponent와 ErrorBoundaryComponent 경우 같은 컴포넌트 이지만 라우터의 역할이 들어간 다른 컴포넌트와는 달리 Route 인스턴스를 생성할 때 props로 내려주거나 setup()에서 호출을 하는데 뭔가 모든 컴포넌트를 한 곳에서 호출을 하고 관리하고 싶다는 생각이 들었습니다. 이럴 때 구조를 어떻게 가져가면 좋을까요? 아니면 이렇게 라우터의 역할을 하는 컴포넌트와 아닌 컴포넌트를 나누는게 좋을까요?

과제를 수행하면서 느낀점

과제 시작 전 생각

• SPA에 대해서 직접 구현을 해본다는 생각을 하지 않아서 무작정 어렵게 느껴졌습니다
• 테스트 통과에 대한 걱정은 물론이며 바닐라에 익숙치 않은 저에게는 순수 바닐라로 좋은 아키텍처를 가져갈 수 있을까? 라는 걱정이 있었습니다,

과제 제출 후 생각

• 코치님의 학습자료와 블로그 아티클들을 보면서 큰틀을 생각할 수 있었고 이를 활용해 최대한 요구사항에 맞게 변형하여 적용하려 노력했습니다
• 아키텍처와 코드 퀄리티에 조금 더 집중하고자 했습니다.
• 다시 한번 단순하게 이론과 개념을 아는 것과 이를 체득화하여 적용하는 것은 역시 다르구나 라는 걸 느끼게 되었습니다, (특히 this와 class를 사용할 때 많이 느꼈습니다.)

기타

과제 난이도

• 4 점입니다!