- [o] History API를 사용하여 SPA 라우터 구현
- [o] '/' (홈 페이지)
- [o] '/login' (로그인 페이지)
- [o] '/profile' (프로필 페이지)
- [o] 각 라우트에 해당하는 컴포넌트 렌더링 함수 작성
- [o] 네비게이션 이벤트 처리 (링크 클릭 시 페이지 전환)
- [o] 주소가 변경되어도 새로고침이 발생하지 않아야 한다.
- [o] LocalStorage를 사용한 간단한 사용자 데이터 관리
- [o] 사용자 정보 저장 (이름, 간단한 소개)
- [o] 로그인 상태 관리 (로그인/로그아웃 토글)
- [o] 로그인 폼 구현
- [o] 사용자 이름 입력 및 검증
- [o] 로그인 버튼 클릭 시 LocalStorage에 사용자 정보 저장
- [o] 로그아웃 기능 구현
- [o] 로그아웃 버튼 클릭 시 LocalStorage에서 사용자 정보 제거
- [o] 현재 로그인한 사용자의 정보 표시
- [o] 사용자 이름
- [o] 간단한 소개
- [o] 프로필 수정 기능
- [o] 사용자 소개 텍스트 수정 가능
- [o] 수정된 정보 LocalStorage에 저장
- [o] 재사용 가능한 컴포넌트 작성
- [o] Header 컴포넌트
- [o] Footer 컴포넌트
- [o] 페이지별 컴포넌트 작성
- [o] HomePage 컴포넌트
- [o] ProfilePage 컴포넌트
- [o] NotFoundPage 컴포넌트
- [o] 간단한 상태 관리 시스템 설계
- [o] 전역 상태 객체 생성 (예: 현재 로그인한 사용자 정보)
- 상태 변경 함수 구현
- 상태 업데이트 시 관련 컴포넌트 리렌더링
- [o] 사용자 입력 처리 (로그인 폼, 프로필 수정 등)
- [o] 동적 컨텐츠 렌더링 (사용자 정보 표시, 페이지 전환 등)
- [o] 잘못된 라우트 접근 시 404 페이지 표시
- [o] location.hash를 이용하여 SPA 라우터 구현
- [o] '/#/' (홈 페이지)
- [o] '/#/login' (로그인 페이지)
- [o] '/#/profile' (프로필 페이지)
- [o] 로그인 상태에 따른 접근 제어
- [o] 비로그인 사용자의 특정 페이지 접근 시 로그인 페이지로 리다이렉션
- [o] 이벤트 위임 방식으로 이벤트를 관리하고 있다.
- 자바스크립트에 대한 기본기 향상
- 이벤트 처리에 대한 이해
- SPA의 개념
- 중복된 함수 로직(이벤트함수)이 있을 것 같습니다.
- 자바스크립트에 대한 기본기 향상
- SPA에 대핸 이해
- 모르겠는 부분에 대해서 학습 메이트분께서 친절하게 알려주셨습니다.
- 나와 같은 고민을 하는 사람들의 질문을 들으면서 저의 문제도 같이 해결해가는 과정이 좋았습니다
- react의 useState와 useEffect 같이 과제 요구사항으로 있는 상태관리 초기 구현에 대해 어떻게 코딩을 할지 더 고민이 필요할 것 같습니다.
- 1주체 과제가 마무리 되고 과제 출제자 분의 코드를 보며 어떻게 개발하면 좋을지 학습할 수 있으면 좋을 것 같습니다
- 중복된 함수 로직이나 불필요하게 작성된 코드가 있는지 알고 싶습니다.
- 현재 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의 의존성을 낮추고 테스트 가능성을 높이는 구조 개선 방안이 있을까요? -->