[1팀 강은화] Chapter 1-1. 프레임워크 없이 SPA 만들기

[murramge]

과제 체크포인트

기본과제

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

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

과제 셀프회고

생각보다 어려웠다,..
디테일이 부족해서 header에서 style 변하는 부분을 신경 못써서 계속 통과를 못했었다.
처음에는 클래스로 만들어 봤는데 뭔가 코드가 깔끔하게 안 떨어져서 함수형으로 다시 바꾸는 과정에서도 많이 배웠고,
자바스크립트를 정확하게 모른다는 생각이 많이 들었다. 사실 지금도 확실히 막 와닿진 않아도
어떤 방식으로 구현되고 돌아가는 지 정도는 알았다. 좀 더 공부해 볼 예정이다.
그래도 나름 시간이 남아서 게시글까지 구현을 해보았다. 게시글을 쓰고, 로그인이 되었을 때만 게시글을 쓸 수 있게 만들었다.
리팩토링도 고민을 많이 하긴 했는데 어떻게 관심사를 분리할 지도 고민을 했다.

기술적 성장

• 새로 학습한 개념
  history api
  eventListener
  이벤트 위임과 이벤트 중단

• 기존 지식의 재발견/심화
  브라우저 동작 원리를 좀 더 실전으로 알게 된 느낌.
  그냥 구현하게 되면 브라우저에 띄워지지도 않아서 무조건 원리를 알아야 코딩을 했었다.

• 구현 과정에서의 기술적 도전과 해결
  처음에 그냥 관심사를 기준으로 다 분리했는데 그냥 떠지지도 않아서 하나하나 따져보면서 공부를 했음. (그림 그려가며;;)
  그래서 일단 root에 innerHTML으로 페이지들을 만들어주고, 그 페이지 안에서도 함수형을 사용해서 init을 이용해서 기능들을 동작할 수 있도록 하나하나 구현해 주었다. 뭔가 이걸 분리할수도 있을 것 같은데 오히려 페이지 안에서 바로 어떤 기능이 있는 지 볼 수 있어서 이대로 뒀다.

코드 품질

• 특히 만족스러운 구현
  그래도 심화적으로 게시글까지 구현한 부분이 나름 재미있었다. 비슷한 개념으로 응용해본 느낌이라서 좋았음.

• 리팩토링이 필요한 부분
  header부분은 사실 참고를 했다. 나랑 제일 비슷하게 짜신 분을 보며 확인을 했는데도 안되어서 router에서 기존 path를 불러와서 작업을 해주었다. 뭔가 더 좋은 방법이 있을 듯 한데.. 좀 더 고민해봐야 함.

• 코드 설계 관련 고민과 결정
  최대한 기능적으로 분리하려고 노력을 많이 했다. 그리고 무턱대고 나누는 것을 별로 좋아하지 않아서 그런 흐름에 맞게 구분했다. 많이 나눈편은 아닌데 나는 개인적으로 엄청 다 분리를 하면 오히려 못 알아 보겠어서 이렇게 뒀다.

학습 효과 분석

• 가장 큰 배움이 있었던 부분
  그냥..전반적인 브라우저 동작 원리.. 진짜 잘 모르고 있었구나 반성을 하게 되었음.

• 추가 학습이 필요한 영역
  사실 전반적으로 알 뿐 아직 많이 부족하고 메서드들을 다 몰라서 많이 헤맸음;;

• 실무 적용 가능성
  사실 자바스크립트를 사용하진 않아서 잘 모르겠지만 진짜 이벤트를 깊게 사용해야할 땐 무조건 원리 파악해서 필요해보임

과제 피드백

• 과제에서 모호하거나 애매했던 부분
  이게 그.. 유효성 검사를 해 주어야 했는 지? 이런 부분과 그 헤더 부분에서 클릭 시 파랗게 되는 부분을 까먹었어서 아쉬웠음
  내 잘못임.

• 과제에서 좋았던 부분
  테스트 코드를 바탕으로 확실하게 구현이 될 수 밖에 없었다는 부분과 e2e 테스트가 좀 신기했다.

리뷰 받고 싶은 내용