[2팀 노정우] [Chapter 1-1] 프레임워크 없이 SPA 만들기

[melroh629]

과제 체크포인트

기본과제

#### 1) 라우팅 구현:

• History API를 사용하여 SPA 라우터 구현
  • '/' (홈 페이지)
  • '/login' (로그인 페이지)
  • '/profile' (프로필 페이지)
• 각 라우트에 해당하는 컴포넌트 렌더링 함수 작성
• 네비게이션 이벤트 처리 (링크 클릭 시 페이지 전환)
• 주소가 변경되어도 새로고침이 발생하지 않아야 한다.

2) 사용자 관리 기능:

• LocalStorage를 사용한 간단한 사용자 데이터 관리
  • 사용자 정보 저장 (이름, 간단한 소개)
  • 로그인 상태 관리 (로그인/로그아웃 토글)
• 로그인 폼 구현
  • 사용자 이름 입력 및 검증
  • 로그인 버튼 클릭 시 LocalStorage에 사용자 정보 저장
• 로그아웃 기능 구현
  • 로그아웃 버튼 클릭 시 LocalStorage에서 사용자 정보 제거

3) 프로필 페이지 구현:

• 현재 로그인한 사용자의 정보 표시
  • 사용자 이름
  • 간단한 소개
• 프로필 수정 기능
  • 사용자 소개 텍스트 수정 가능
  • 수정된 정보 LocalStorage에 저장

4) 컴포넌트 기반 구조 설계:

• 재사용 가능한 컴포넌트 작성
  • Header 컴포넌트
  • Footer 컴포넌트
• 페이지별 컴포넌트 작성
  • HomePage 컴포넌트
  • ProfilePage 컴포넌트
  • NotFoundPage 컴포넌트

5) 상태 관리 초기 구현:

• 간단한 상태 관리 시스템 설계
  • 전역 상태 객체 생성 (예: 현재 로그인한 사용자 정보)
• 상태 변경 함수 구현
  • 상태 업데이트 시 관련 컴포넌트 리렌더링

6) 이벤트 처리 및 DOM 조작:

• 사용자 입력 처리 (로그인 폼, 프로필 수정 등)
• 동적 컨텐츠 렌더링 (사용자 정보 표시, 페이지 전환 등)

7) 라우팅 예외 처리:

• 잘못된 라우트 접근 시 404 페이지 표시

과제 셀프회고

기술적 성장

history API에 대해서 기본적인 개념을 알아볼 수 있는 시간이었으나 과제 제출에 급급하여 학습의 의미가 떨어진 것 같아 성장하지 못한 기분입니다.

코드 품질

클래스 형태로 잘 짜보고 싶었으나 절차지향적 코드로 짠 것 같아 개선이 필요해 보입니다.

학습 효과 분석

• react router 의 기본적인 작동 방식 이해
• 라우팅 방식
• 렌더링과 이벤트 등록

과제 피드백

과제의 완성도가 떨어지는데 , 설계에 실패했다고 생각합니다. 설계를 어떻게 시작해야 할지 감이 잡히지 않아, 다시 시작하게 되고 이 때문에 시간을 너무 많이 잡아 먹었습니다. 정확히 개념을 이해하는 것이 아니라 과제를 한다는 것에 너무 중점을 둔 것 같아 아쉬움이 가득합니다.

리뷰 받고 싶은 내용

기능 구현은 됐는데 TEST를 통과하지 못하는 이유가 뭘까요 ㅠㅠ ...

[Songchangyeop]

헤더에서 로그인 여부에 따른 각 네비게이션 노출을 이렇게 관리하니 직관적이고 좋은것 같습니다 👍👍

data-set에 action을 통해 로그아웃을 처리하는 부분도 좋아요 배워갑니다 ㅎㅎㅎ

[Songchangyeop]

PR에 리뷰 받고 싶은내용 중 테스트 통과가 되지 않는다고 하셔서 살펴보는데
여기서는 로그아웃 a태그에 id가 없어서 그렇지 않을까 하고 예상해 봅니다 !

자세히 더 살펴보고 싶은데 시간이 부족해서 아쉽네요 ㅠㅠㅠ

// basic.test.js

      const logoutButton = document.getElementById("logout");
      logoutButton.click();

      expect(localStorage.getItem("user")).toEqual(null);

[gmkim716]

저도 테스트 코드를 통해 코드를 수정해나가는 것을 해본 경험이 부족해서 과제에 시간을 너무 많이 사용하게 되는 것 같았어요. 다음 주차부터는 모르는 것 생기면 바로바로 공유하면서 같이 효율적으로 공부해봅시다!! :)