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

[keyonnaise]

과제 체크포인트

기본과제

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

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

과제 셀프회고

과제 발제 당시, 나는 쉽게 문제를 해결하고 여유롭게 리팩토링하며 과제를 마무리할 수 있을 것이라 예상했다, 하지만 실제 개발 과정은 예상과는 달랐다.
특히, React 개발에 익숙해진 상태에서 바닐라 자바스크립트로 전환하며 느낀 불편함이 상당했다. React가 얼마나 편리한 도구인지 새삼 깨닫는 계기가 되었다.

코드 구현 후 테스트 코드를 실행하며 마주한 붉은색 콘솔은 나를 당황하게 만들었다. 예상치 못한 에러 로그로 가득찼고 코드 작성보다 테스트를 붙잡고 있는 시간이 더 길었던 것 같다.
특히 클래스명이 테스트 코드에 작성된 클래스명과 다르다던가, 이벤트 처리 오류 등 사소한 실수들이 테스트 실패로 이어졌으며, TDD에 대한 회의감마저 들었다.
과연 앞으로 TDD를 꾸준히 실천할 수 있을지에 대한 의문이 들었고, 테스트 코드 작성의 어려움을 실감했다.

하지만 이번 과제를 통해 바닐라 자바스크립트의 기본기를 다지고, 해시 라우터 등 새로운 경험을 할 수 있었다. 특히, 항상 타입스크립트를 사용하던 나에게 자바스크립트의 특징을 다시 한번 되새기는 기회가 되었다. JSDoc을 사용해 보았지만, 아직은 타입스크립트의 강력한 타입 시스템에 더 익숙하기 때문에 자바스크립트와 JSDoc보다는 타입스크립트를 주로 사용할 것 같다.

이번 과제를 통해 개발 과정에서 예상치 못한 어려움에 직면할 수 있다는 것을 다시 한 번 깨닫게 되는 시간이 되었다.

[2024-12-21]
과제를 마무리하고 다른 분들 어떻게 하셨나 궁금해서 PR 둘러보던 중 웹 컴포넌트로 구현하신 분이 있었다. 와... 머리를 딱 쳤는데 r3f를 그렇게 만지작 거리면서 커스텀 엘리멘트를 그렇게 만들었으면서 저 생각을 왜 못했지 했다. 나중에 저렇게 리팩토링 해봐야지

기술적 성장

• JSDoc을 활용한 자바스크립트 작성
• 해시 라우터의 경험
• 옵저버 패턴의 경험

등이 가장 크게 느껴진다.
추가로 a.js 파일과 b.js 파일에서 c.js 파일을 import 하면 c.js 파일 top level에 작성된 console.log('Call')가 2번 실행될 줄 알았는데 1번 실행되더라
지금까지는 별생각이 없었는데 지금와서 보니까 신기하더라

코드 품질

전반적으로 품질이 마음에 들진 않지만 시간내 했다는 것에 의의를 두고있다.
특히 다음 코드를 보면

import { storage } from "./utils/storage";
import { useUserStore } from "./stores/useUserStore";

window.isHashRouter = false;

/**
 * 앱 초기화
 * @returns {void}
 * @description
 * 1. 로컬 스토리지에서 사용자 정보 가져오기
 *    - 로컬 스토리지에 사용자 정보가 있다면 `userStore`의 `setProfile` 함수를 호출하여 사용자 프로필 설정
 */
(function () {
  const user = storage.getItem("user");

  if (user) {
    const { setUser } = useUserStore();
    setUser(user);
  }
})();

// NOTE: 뭔가 애매르송한 await import
await import("./router");

top level await 를 활용하여 router를 불러온 부분이 있는데 이 부분이 자꾸 눈에 밟히고 있다.
어떻게 하면 좋을지 남은 시간 계속 생각해봐야 할 것 같다.

그리고 즉시 실행 함수를 활용해 초기화를 진행했는데, 즉시 실행 함수를 통해 초기화하는 방법이 나은지
함수를 선언하고 따로 실행하는 방법이 나은지 판단이 어렵다. 그냥 개인의 취향인건가?
기회가 되면 물어봐야겠다.

학습 효과 분석

이번 과제에서 가장 큰 배움이 있었던 것은 역시 JSDoc과 옵저버 패턴의 활용인 것 같다.
근데 솔직히 타입스크립트 쓰지 JSDoc은 글쌔...

전반적으로 코드를 좀 더 이쁘고 깔끔하게 작성하고 싶은데 디자인 패턴에 대해 심도 있게 공부해 봐야겠다.
인프런에 제로초님 디자인패턴 강의 올라와있던데 봐야지.

근데 어제 맨토링에서 준일 코치님이 디자인 패턴 별로 중요도가 떨어진다? 하시는 걸 들었는데...

과제 피드백

계속 중복되는 내용이지만 바닐라 자바스크립트를 가지고 이렇게 코드를 작성해본게 오랜만이라 새롭고 좋았다
근데 과제 하는 내내 타입스크립트가 너무 그립더라

그리고 TDD는 글쌔...
나중에 TDD 과정에서 제대로 사용해봐야 알겠지만 지금은 안쓰는게 더 좋다는 느낌이 든다.
TDD 때문?이라고는 할 순 없지만 덕분에 필드 검증, user 데이터에 role 값 넣어서 라우팅 가드하려고 했는데 그것도 다시 짰다.
이 외에도 클래스 이름이나 이벤트 위치나 사용하는데 문제는 없지만 TDD에서 걸러지는 것들이 많았다.
정신 나가는 줄

리뷰 받고 싶은 내용

• 해시 라우터는 실제로 본 적이 드문 것 같다. 지금까지 관심이 없었던 것인지는 모르겠지만 실제로 현업에서 많이 사용하는지?
• 과제를 진행할 때 JSDoc을 활용해서 진행해 봤는데, 타입스크립트처럼 타입 힌트가 잘 제공되는 것도 아닌 것 같고 그렇다고 타입 가드가 되는 것도 아닌 것 같다.
  사용법은 타입스크립트 이상으로 불편한 것 같은데 실제로 많이 쓰이는지?
• TDD는 추후 TDD 주차에서 제대로 경험해 봐야겠지만 현재 느낀 바로는 득보다 실이 많은 것 같다(실제로 생각 없이 필드 값 검증하는 로직 넣었다가 다 걷어냄) 아니면 테스트 코드를 먼저 보고 과제를 시작해야 했는지?
• 항상 모든 프로젝트에서 파일과 디렉토리 구조를 설정할 때마다 고민. 지금 과제에서도 고민하다가 그냥 React에서 구조 잡듯이 해봤음. React나 Next.js에서는 디렉토리 구조 설정에 대한 가이드라인이 명확한데, 일반적으로 많이 사용되는 파일 구조 설계 방식에 대해 추천할 만한 아티클이라던지 best practice가 있는지? 솔직히 취향의 영역? 이라는 것은 알지만 항상 고민되는 부분이라 질의 함.

피드백 받고 싶은 내용이라기보다는 궁금한 거 나열인 것 같긴 한데 아는 게 없어서 뭘 어떻게 피드백 받아야 하는지도 모르겠음. 일단 본인이 모르는지부터 알아야 제대로 무언가를 물어볼 수 있을 것 같아서 일단 당장 생각나는 것들 나열해 봤음.
그리고 사실 검색하거나 AI 돌리면 나오는 내용보다는 코치님의 생각이나 경험적인 것들?을 좀 더 알고 싶은 마음도 있었음.

[CodyMan0]

onMount?.() 에서에 . 이 왜 있어야해요? 궁금해서 여쭤봐요