Create README.md

README.md

@@ -0,0 +1,121 @@
+## 과제 체크포인트
+
+### 기본과제
+
+#### 1) 라우팅 구현:
+- [o] History API를 사용하여 SPA 라우터 구현
+  - [o] '/' (홈 페이지)
+  - [o] '/login' (로그인 페이지)
+  - [o] '/profile' (프로필 페이지)
+- [o] 각 라우트에 해당하는 컴포넌트 렌더링 함수 작성
+- [o] 네비게이션 이벤트 처리 (링크 클릭 시 페이지 전환)
+- [o] 주소가 변경되어도 새로고침이 발생하지 않아야 한다.
+
+#### 2) 사용자 관리 기능:
+- [o] LocalStorage를 사용한 간단한 사용자 데이터 관리
+  - [o] 사용자 정보 저장 (이름, 간단한 소개)
+  - [o] 로그인 상태 관리 (로그인/로그아웃 토글)
+- [o] 로그인 폼 구현
+  - [o] 사용자 이름 입력 및 검증
+  - [o] 로그인 버튼 클릭 시 LocalStorage에 사용자 정보 저장
+- [o] 로그아웃 기능 구현
+  - [o] 로그아웃 버튼 클릭 시 LocalStorage에서 사용자 정보 제거
+
+#### 3) 프로필 페이지 구현:
+- [o] 현재 로그인한 사용자의 정보 표시
+  - [o] 사용자 이름
+  - [o] 간단한 소개
+- [o] 프로필 수정 기능
+  - [o] 사용자 소개 텍스트 수정 가능
+  - [o] 수정된 정보 LocalStorage에 저장
+
+#### 4) 컴포넌트 기반 구조 설계:
+- [o] 재사용 가능한 컴포넌트 작성
+  - [o] Header 컴포넌트
+  - [o] Footer 컴포넌트
+- [o] 페이지별 컴포넌트 작성
+  - [o] HomePage 컴포넌트
+  - [o] ProfilePage 컴포넌트
+  - [o] NotFoundPage 컴포넌트
+
+#### 5) 상태 관리 초기 구현:
+- [o] 간단한 상태 관리 시스템 설계
+  - [o] 전역 상태 객체 생성 (예: 현재 로그인한 사용자 정보)
+- [x] 상태 변경 함수 구현
+  - [x] 상태 업데이트 시 관련 컴포넌트 리렌더링
+
+#### 6) 이벤트 처리 및 DOM 조작:
+- [o] 사용자 입력 처리 (로그인 폼, 프로필 수정 등)
+- [o] 동적 컨텐츠 렌더링 (사용자 정보 표시, 페이지 전환 등)
+
+#### 7) 라우팅 예외 처리:
+- [o] 잘못된 라우트 접근 시 404 페이지 표시
+
+### 심화과제
+
+#### 1) 해시 라우터 구현
+- [o] location.hash를 이용하여 SPA 라우터 구현
+  - [o] '/#/' (홈 페이지)
+  - [o] '/#/login' (로그인 페이지) 
+  - [o] '/#/profile' (프로필 페이지)
+
+#### 2) 라우트 가드 구현
+- [o] 로그인 상태에 따른 접근 제어
+- [o] 비로그인 사용자의 특정 페이지 접근 시 로그인 페이지로 리다이렉션
+
+#### 3) 이벤트 위임
+
+- [o] 이벤트 위임 방식으로 이벤트를 관리하고 있다.
+
+## 과제 셀프회고
+
+<!-- 과제에 대한 회고를 작성해주세요 -->
+
+### 기술적 성장
+- 자바스크립트에 대한 기본기 향상
+- 이벤트 처리에 대한 이해
+- SPA의 개념
+
+### 코드 품질
+- 중복된 함수 로직(이벤트함수)이 있을 것 같습니다.
+- 
+
+### 학습 효과 분석
+- 자바스크립트에 대한 기본기 향상
+- SPA에 대핸 이해
+
+### 과제 피드백
+- 모르겠는 부분에 대해서 학습 메이트분께서 친절하게 알려주셨습니다.
+- 나와 같은 고민을 하는 사람들의 질문을 들으면서 저의 문제도 같이 해결해가는 과정이 좋았습니다
+- react의 useState와 useEffect 같이 과제 요구사항으로 있는 상태관리 초기 구현에 대해 어떻게 코딩을 할지 더 고민이 필요할 것 같습니다.
+
+## 리뷰 받고 싶은 내용
+
+1. 1주체 과제가 마무리 되고 과제 출제자 분의 코드를 보며 어떻게 개발하면 좋을지 학습할 수 있으면 좋을 것 같습니다
+2. 중복된 함수 로직이나 불필요하게 작성된 코드가 있는지 알고 싶습니다.
+3. 현재 ProfilePage 컴포넌트를 함수형으로 작성하여 header가 ProfileBody를 감싸는 형태로 구현하였습니다:
+const ProfilePage = (user) => `
+  ${header(ProfileBody(user), user)}
+`;
+위와 같은 방식이 아니라, 아래와 같이 직관적으로 코드의 가독성과 구조적 명확성을 보여줄 수 있게 자바스크립트로 코딩할 수 있는 방법이 있을까요?
+```
+<Header>
+  <ProfilePage> ... </ProfilePage>
+</Header>
+```
+
+참고링크: https://chatgpt.com/share/675b6129-515c-8001-ba72-39d0fa4c7b62
+
+모호한 질문의 예시)
+- 무엇을 질문해야 할지 몰라서 코치님이 보시기에 고쳐야할것들 전반적으로 피드백 부탁드립니다.
+- 코드 스타일에 대한 피드백 부탁드립니다.
+- 코드 구조에 대한 피드백 부탁드립니다.
+- 개념적인 오류에 대한 피드백 부탁드립니다.
+- 추가 구현이 필요한 부분에 대한 피드백 부탁드립니다.
+
+구체적인 질문의 예시)
+- 파일A의 함수B와 그 안의 변수명을 보면 직관성이 떨어지는 것 같습니다. 함수와 변수 이름을 더 명확하게 지을 방법에 대해 조언해 주실 수 있나요?
+- 현재 파일 단위로 코드를 분리했지만, 이번 주차 발제를 기준으로 봤을 때 모듈화나 계층화에서 부족함이 있는 것 같습니다. 특히 A와 B 부분에서 모듈화를 더 진행할지 그대로 둘지 고민하였습니다. (...구체적인 고민 사항 적기...). 코치님의 의견이 궁금합니다.
+- 옵저버 패턴을 사용해 상태 관리 로직을 구현해 보려 했습니다. 제가 구현한 코드가 옵저버 패턴에 맞게 잘 구성되었는지 검토해 주시고, 보완할 부분을 제안해 주실 수 있을까요?
+- 컴포넌트 A를 테스트 할 때 B와의 의존성 때문에 테스트 코드를 작성하려다 포기했습니다. A와 B의 의존성을 낮추고 테스트 가능성을 높이는 구조 개선 방안이 있을까요?
+-->