[12팀 배성규] [Chapter 1-1] 프레임워크 없이 SPA 만들기

[pangkyu]

과제 체크포인트

기본과제

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가 어떤 방식으로 동작하는 지 기본적인 지식을 쌓는 경험이었습니다. 단순 구현을 위한 코드 구현이 아닌 자바스크립트가 어떻게 동작하는 지에 대해 아티클을 읽고 다른 사람의 코드를 보며 생각을 배우는 경험이 되었습니다.

돔에 접근하고 이벤트를 달아주는 과정에서 렌더링 방식에 대한 이해를 얻을 수 있었습니다.

과제 피드백

기존까지는 하나의 기능이 돌아가는 것에 집중했다면 과제에서는 테스트를 통과하기 위한 코드를 작성하면서 브라우저에서 동작하는 것으로 보인 부분이 사실은 의도대로 동작하는 것이 아니라는 것을 배우게 되는 좋은 경험을 할 수 있었습니다.

리뷰 받고 싶은 내용

• pangkyu@6e1addb
  처음 구현하려는 방향에서 렌더함수에서 path에 따라 각각 돔에 접근하려고 했었는데, 프로필 페이지를 구현하는 중에 테스트 케이스에서 null이 발생하며 테스트 케이스를 통과하지 못하는 결과를 받았습니다.
  하지만 브라우저에서 확인할 때는 정상적으로 값이 들어오는 거를 확인하고 핸들링까지 가능했었는데, 두 개의 차이가 나는 부분을 명확하게 이해하지 못했습니다.

ui를 보여주는 함수에 최대한 로직을 담지 않고 구현하려는 방식이 문제를 야기한 것인지 코치님의 의견과 개선 방향에 대한 의견을 듣고 싶습니다.

[creco-hanghae]

browserRouter 라고 하는 함수에서 history(URL)을 업데이트 하는 것 뿐만 아니라 ROUTES 에 해당하는 컴포넌트를 render 하는 로직도 포함하는게 의도하신 내용일까유?
router 라고 하는 친구에게 좀 많은 역할이 있는 것 같아서유 // render 라고 하는 이름의 함수 호출로 명시적으로 렌더링한다라는 걸 알려주는 것도 방법일 것 같습니다!

[pangkyu]

뭔가 돌아가는 코드에 집중하다보니 역할을 더 쌓아버린 듯 합니다
다음에는 조금 더 분리해서 작성해보도록 적용해보겠습니다!