[3팀 박수연] [Chapter 1-1] 프레임워크 없이 SPA 만들기

[Suyeon-B]

과제 체크포인트

기본과제

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

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

과제 셀프회고

기술적 성장

• 새로 학습한 개념
  • 이벤트 위임 방식을 알게 되었습니다.
  • history api를 사용해 페이지를 새로고침 하지 않고 url을 변경하고, url에 따라 다른 UI를 보여주는 원리를 알게 되었습니다.
• 기존 지식의 재발견/심화
  • 이번 과제를 통해 클라이언트 사이드 렌더링을 구현하며, 서버사이드도 궁금해져서 학습하게 되었습니다. 과거에는 SSR이 원래 자연스러웠다는 점, 규모가 큰 프로젝트일수록 CSR을 하면 자바스크립트 파일을 파싱해 화면에 렌더링하기 까지 오래 걸린다는 점, SSR에서 CSR이 자연스러워진 과정 등을 새로 알게 되었습니다.

코드 품질

• 특히 만족스러운 구현
  • 최대한 책임을 분리하려 노력해서 깔끔한 구조인 것 같습니다.
• 리팩토링이 필요한 부분
  • 유저 상태 관리가 매우 단순하고 확장성 없이 설계되었습니다. 다른 상태도 추가되기 편하도록 리팩토링이 필요합니다.
• 코드 설계 관련 고민과 결정
  • 헤더 컴포넌트에서 로그아웃 이벤트를 컴포넌트 내부에 등록하고 싶었는데, 헤더를 사용하는 만큼 중복으로 이벤트가 등록되는 문제가 있었습니다. 이런 경우 어떻게 설계해야할지 잘 모르겠어서 컴포넌트 바깥으로 빼두었는데, 개선하고 싶습니다.

학습 효과 분석

• 가장 큰 배움이 있었던 부분
  • 퇴근하고 과제를 하다 보니 좋은 코드보다 돌아가는 코드에 집중했던 것 같습니다. 약속도 최대한 잡지 말고 남는 시간을 모두 투자하면 좋겠다는 배움을 얻었습니다.. 모든 평일 약속을 토요일 저녁으로 미뤘습니다 😂
• 추가 학습이 필요한 영역
  • 이벤트 리스너를 최적화 하는 방식
  • 리액트가 이벤트 위임을 하는 방식

과제 피드백

• 과제에서 좋았던 부분
  • 테스트 코드의 장점을 체감했습니다.
    • 테스트 코드를 작성해본 적이 없어서, 처음에는 테스트 코드의 장점을 모른 채 코드를 작성했습니다.
    • 문제를 분리해서 해결하기 편했습니다.
    • 모든 문제를 해결하고, 코드 개선 과정에서 다른 문제가 발생하진 않는지 확인하기 편했습니다.

리뷰 받고 싶은 내용

• 헤더 컴포넌트에서 로그아웃 이벤트를 컴포넌트 내부에 등록하고 싶었는데, 헤더를 사용하는 만큼 중복으로 이벤트가 등록되는 문제가 있었습니다. 이런 경우 어떻게 설계해야할지 잘 모르겠어서 컴포넌트 바깥으로 빼두었는데, 어떤 방향으로 개선하면 좋을지 코치님의 의견이 궁금합니다.
• 리액트와 유사하게 이벤트 처리를 하고 싶어서 로그인 페이지와 프로필 페이지의 submit 이벤트에 대해서는 각 페이지에 핸들러를 달아 처리했는데, 이게 적절한 이벤트 위임 방식인지를 잘 모르겠습니다.
• createRouter 클래스에 render 매서드가 있는 게 어색하게 느껴집니다. 컴포넌트 레벨에서 렌더 함수가 있고, 그 함수를 호출하는 방식이 더 좋을 것 같다는 생각이 들었는데, 원래 자연스러운건지, 아니면 제가 모르는 더 좋은 방향이 있을지 궁금합니다.
• 코드 리뷰하기 편하시도록 얼마나 커밋을 분리할까 고민이 되었습니다. 그런데 너무 작게 쪼개면 오히려 불편하실 것 같다는 생각이 들어 우선 과제 1차 전부 커밋 후 수정한 건에 대해서만 추가 커밋을 했습니다. 어떤 커밋이 좋은 커밋이라고 생각하시는지 궁금합니다.
• 리뷰는 아니지만...! 질문이 하나 더 있습니다. e2e 테스트 돌려보면 과제 프로젝트는 굉장히 작은 규모임에도 느린 느낌이었습니다. 큰 규모의 프로젝트에서는 속도 관련 이슈가 없는지, 어떻게 해결하고 계시는지 궁금합니다..!

부족함이 많은 과제입니다 ㅠㅠ 내 직장 후임이다 생각하시고 편한 마음으로.. 날카롭게 지적해 주세요...!!!!!
이번 한 주도 고생 많으셨습니다! 감사합니다 🙇‍♀️ ❤️

[Blue-Kite]

안녕하세요 저는 클래스를 사용해본적이 거의 없는데 덕분에 잘 구경할 수 있었습니다! navigateTo 함수의 pushState 매개변수 역할이 궁금했습니다.

[2dowon]

PR description에 적어주신 것처럼 책임을 분리해서 깔끔하게 구조를 잡으시려고 한게 느껴졌습니다!
특히 저는 하나의 파일에서 모든 페이지에 대한 render를 하는 로직이 있었는데, 수연님은 각 페이지 안에 render 하는 함수가 따로 있고, index.js에서 이를 export해주고 있다는 부분에서 그렇게 생각했어요!

과제하느라 고생하셨습니다!! 저도 많이 배우고 갑니다!ㅎㅎ