[7팀 김주광] [Chapter 1-1] 프레임워크 없이 SPA 만들기

[Dayglow0926]

과제 체크포인트

기본과제

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 만들기는 저에게는 쉽지않은 어려운 과제였습니다.
SPA 에 대한 지식은 있지만 어떤 식으로 구현하면 좋을지 전혀 감을 잡지 못한 상태에서 코치님의 참고자료를 덕분에
SPA 동작 방식을 잘 알게되습니다.

또 상태관리를 통해 값이 변경 되었을때 리렌더링이 되도록 하는 방법은 전역변수를 통해 관리하려는데
리렌더링은 어떻게 구현할 수 있을까에 대한 의문은 우연히 확인한 옵저버 패턴을 학습하여 구현하게되었습니다.,
해시 라우터에 대해서는 전혀 지식이 없어서 찾아보고 이해하고 이해했지만 테스트를 통과하는데 많은 시간을 소요하였습니다.

그래도도 늦게까지 저를 도와주신분도 계셔서 힘을 낼 수 있었고,
SPA 를 구현하면서 React 에 대해 조금더 이해 할 수 있는 시간이였던거 같습니다.

기술적 성장

• 새로 학습한 개념

  • SPA의 동작원리를 이해하게 되었습니다.
  • historyAPI 를 새로 알게되었습니다.
  • 옵저버 패턴을 적용하여 상태관리를 할 수 있다는 것을 배웠습니다.
  • hashRouter 를 알게되었습니다.

• 구현 과정에서의 기술적 도전과 해결

  • 상태관리를 구현하기 위해 전역변수와 리렌더링에 대해서 여러 도전을 했었습니다.
    그 중에 데이터를 바꾼후 화면을 다시 호출하도록 하여 성공은 했지만 제가 원하던 방식이 아니였습니다.
    그리고 팀원분들과 이야기를 하며 싱글톤 패턴으로 푸셨다는 이야기를 듣고 디자인 패턴을 보고 옵저버 패턴을 알게되었습니다.
    그리고 해당 내용을 이해하고 적용하며 제가 원하던 상태관리를 구현할 수 있었습니다.

코드 품질

옵저버 패턴과 Router 를 구현하며 관심사를 잘 분리했다고 느꼈습니다.

하지만 Router 를 생성자 안에 넣는 방식으로 브라우저 라우터와 해시 라우터를 구분해서 사용할 수 있도록 했지만
더 좋은 방법이 있을 것 같다는 생각이 듭니다.

학습 효과 분석

React 를 조금 더 이해하는 과제였습니다.
사실 추가 학습을 어떤것을 해야할지 아직 생각하지 못했으며,
해시라우터는 실무에서도 잘 사용할 수 있을 것이라 판단하였습니다.

과제 피드백

저는 이번 과제의 내용이 좋다고 생각합니다.
이번 과제를 통해 다양한 기술을 배우고 적용할 수 있는 시간이 되었으며,

다음과제를 기대하고 있습니다.

리뷰 받고 싶은 내용

이번 과제를 진행하면서 사실 이해가 되지 않는 부분이 있습니다.

테스트를 진행하면서 심화과정에서 에러가 많이 발생하였습니다.
화면에서는 정상적으로 작동이 되지만 테스트 코드에서는 페이지를 찾지 못하는 경우가 있었습니다.

예를 들면 제가 해시 라우터를 구현할때 main.js 에 해시라우터와 브라우저 라우터 모두 바라보도록 진행했고
main.hash.js 에서는 main.js 를 import 를 진행했습니다.
그런데 제가 브라우저를 통해 테스트 할때는 정상적으로 보이는데 테스트 코드에서는 페이지를 찾지 못하는 현상이 있었는데

main.js 의 코드를 main.hash.js 에 넣고 main.js 를 브라우저 라우터만 사용하도록 수정하니 테스트 코드를 통과하였습니다.

해당 문제를 계속 고민했지만 왜 그런지 이해를 할 수 가 없습니다.

그리고 Router 와 HashRouter를 제가 잘 구현을 했는지가 궁금합니다. 그리고 보완할 부분을 제안해 주실 수 있을까요?