[6팀 남궁철] Chapter 1-1. 프레임워크 없이 SPA 만들기

[nkcfe]

과제 체크포인트

기본과제

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

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

과제 셀프회고

기술적 성장

1. 새로 학습한 개념

   • History API를 활용한 SPA 라우팅 구현 방법
   • 바닐라 JS에서의 컴포넌트 패턴 구현
   • Observer 패턴을 활용한 상태 관리
   • 테스트 환경에서의 유지 보수
   • 해시기반 라우팅의 개념

2. 기존 지식 재발견

   • 이벤트 위임의 실제 사용 방법
   • 바닐라 자바스크립트를 활용한 DOM조작
   • SPA의 동작원리에 대한 깊은 이해
   • 클로저를 이용한 상태 관리
   • 싱글톤 패턴의 장점

3. 구현 과정에서의 어려움

   • 옵저버 패턴 및 클로저를 이용한 상태관리 구축
   • 싱글톤을 활용한 라우팅 설계에 대한 어려움
   • 테스트 환경 실행 및 코드리딩의 어려움

코드 품질

1. 만족스러운 구현

   • 재사용 가능한 컴포넌트 구조 설계 (header, nav, footer)
   • 클로저를 활용한 전역 상태관리 설계
   • History Api를 이용한 Router 설계
   • 테스트 통과하도록 코드 구현

2. 리팩토링이 필요한 부분

   • 이벤트 핸들러 설정 관련 부분
   • 상태 관리 구독 관련 부분

3. 코드 설계 고민 및 결정

   • 아키텍처 선정 고민
     • 관심사 분리가 명확하고 기존에 사용하여 러닝커브가 없기에 적용
   • 상태 관리 설계시의 고민
     • 클로저와 클래스를 활용한 패턴을 고민했으나, 평소 애매모호한 지식을 가진 클로저를 학습하고자 결정.

학습 효과 분석

1. 가장 큰 배움이 있었던 부분

   • React가 해결하고자 했던 부분에 대해 학습
     • DOM 조작의 불편성, 컴포넌트 기반 재사용성, 상태 관리 및 라이프 사이클
   • 브라우저 API의 실제 활용 및 적용
   • 문제 해결 능력 상승

2. 추가 학습이 필요한 부분

   • 컴포넌트의 라이프 사이클 적용하는 방법 mount, unmount
   • 이벤트 핸들러의 적용 방법

3. 실무 적용 가능성

   • 컴포넌트 설계 패턴에 대해서 적용해볼 수 있을 것 같습니다.

과제 피드백

1. 모호, 애매한 부분

   • 아키텍쳐 선정 부분
     • 현 프로젝트 규모에서 fsd를 적용하는게 적절한지 의문이 들었습니다.
   • 네비게이션 컴포넌트에서 동적으로 스타일링을 적용하는것이 성능적으로 좋지 않을까 하는 생각이 들었습니다.
   • 이벤트 핸들러 적용 방법
     현재 방법으로는 클린업을 구현하지 못해 이벤트가 중복으로 선언되지 않을까 하는 생각이 있습니다.

2. 과제에서 좋았던 부분

   • 기존에 사용하던 router 시스템에 대한 이해
   • 자바스크립트 기본기의 향상
   • 디자인 패턴을 실제로 적용해본 경험

리뷰 받고 싶은 내용

1. 아키텍쳐

   • 현재 적용한 fsd구조가 과연 현 프로젝트에서 적절한지가 궁금합니다. 적절하지 않다면 어떤 아키텍쳐가 가장 적절한지 알고싶습니다.

2. 이벤트 핸들러의 처리 방식

   • use-profile-form.js, profile-form.js 파일을 참고해주시면 document에 이벤트 위임을 하는 방식으로 구현을 하였고, event.target을 받아 명시적으로 처리하고자 하는 폼인지 확인하는 로직으로 구현을 하였습니다. 현 프로젝트에서는 단점들이 크게 부각되지 않는다고 생각해 적용한 방법이나, 언마운트시에 리스너가 자동으로 제거되지 않아 중복되고 document에서 모든 submit event를 수신하진 않을까 하는 생각이 있어 조금 더 적절한 방법이 무엇이 있을지 리뷰해주시면 감사하겠습니다.

3. 라이프 사이클 구현 방식

• create-store.js 파일을 참고해주시면 리스너 추가 함수를 구현하여 구독관련 로직을 만들어 보려고 노력하였으나, 라이프 사이클을 적용하는데 많은 어려움이 있었습니다.
  • 컴포넌트의 마운트, 언마운트 시점을 어떻게 알 수 있을까요?
  • 위 과정이 해결된다면 상태 변경 시 불필요한 리렌더링을 막으려면 어떤 방식을 사용해야할까요? 떠오른 것은 mutationObserver를 활용하는 방법인데 더 좋은 방법이 있다면 알려주시면 감사하겠습니다.