[17팀 석금용][Chapter1-2] 프레임워크 없이 SPA 만들기

.github/pull_request_template.md

@@ -2,65 +2,59 @@
 
 ### 기본과제
 
-#### 1) 라우팅 구현:
-- [ ] History API를 사용하여 SPA 라우터 구현
-   - [ ] '/' (홈 페이지)
-   - [ ] '/profile' (프로필 페이지)
-   - [ ] '/404' (Not Found 페이지)
-- [ ] 각 라우트에 해당하는 컴포넌트 렌더링 함수 작성
-- [ ] 네비게이션 이벤트 처리 (링크 클릭 시 페이지 전환)
-
-#### 2) 사용자 관리 기능:
-- [ ] LocalStorage를 사용한 간단한 사용자 데이터 관리
-   - [ ] 사용자 정보 저장 (이름, 간단한 소개)
-   - [ ] 로그인 상태 관리 (로그인/로그아웃 토글)
-- [ ] 로그인 폼 구현
-   - [ ] 사용자 이름 입력 및 검증
-   - [ ] 로그인 버튼 클릭 시 LocalStorage에 사용자 정보 저장
-- [ ] 로그아웃 기능 구현
-   - [ ] 로그아웃 버튼 클릭 시 LocalStorage에서 사용자 정보 제거
-
-#### 3) 프로필 페이지 구현:
-- [ ] 현재 로그인한 사용자의 정보 표시
-   - [ ] 사용자 이름
-   - [ ] 간단한 소개
-- [ ] 프로필 수정 기능
-   - [ ] 사용자 소개 텍스트 수정 가능
-   - [ ] 수정된 정보 LocalStorage에 저장
-
-#### 4) 컴포넌트 기반 구조 설계:
-- [ ] 재사용 가능한 컴포넌트 작성
-   - [ ] Header 컴포넌트
-   - [ ] Footer 컴포넌트
-- [ ] 페이지별 컴포넌트 작성
-   - [ ] HomePage 컴포넌트
-   - [ ] ProfilePage 컴포넌트
-   - [ ] NotFoundPage 컴포넌트
-
-#### 5) 상태 관리 초기 구현:
-- [ ] 간단한 상태 관리 시스템 설계
-   - [ ] 전역 상태 객체 생성 (예: 현재 로그인한 사용자 정보)
-- [ ] 상태 변경 함수 구현
-   - [ ] 상태 업데이트 시 관련 컴포넌트 리렌더링
-
-#### 6) 이벤트 처리 및 DOM 조작:
-- [ ] 사용자 입력 처리 (로그인 폼, 프로필 수정 등)
-- [ ] 동적 컨텐츠 렌더링 (사용자 정보 표시, 페이지 전환 등)
-
-#### 7) 기본적인 에러 처리:
-- [ ] 잘못된 라우트 접근 시 404 페이지로 리다이렉션
-- [ ] 로그인 실패 시 에러 메시지 표시
-
-### 심화과제
-
-#### 1) 고급 라우팅
-- [ ] 라우트 가드 구현
-   - [ ] 로그인 상태에 따른 접근 제어
-   - [ ] 비로그인 사용자의 특정 페이지 접근 시 로그인 페이지로 리다이렉션
-
-#### 2) 고급 이벤트 처리
-
-- [ ] 이벤트 위임 활용
+#### 1) createVNode
+
+- [ ] 올바른 구조의 vNode를 생성해야 한다
+- [ ] 여러 자식을 처리해야 한다
+- [ ] 자식 배열을 평탄화해야 한다
+- [ ] 중첩 구조를 올바르게 표현해야 한다
+- [ ] JSX로 표현한 결과가 createVNode 함수 호출과 동일해야 한다
+
+#### 2) createElement
+
+- [ ] 문자열 입력에 대해 텍스트 노드를 생성해야 한다
+- [ ] 숫자 입력에 대해 텍스트 노드를 생성해야 한다
+- [ ] null 입력에 대해 빈 텍스트 노드를 생성해야 한다
+- [ ] false 입력에 대해 빈 텍스트 노드를 생성해야 한다
+- [ ] 배열 입력에 대해 DocumentFragment를 생성해야 한다
+- [ ] 함수 컴포넌트를 처리해야 한다
+- [ ] 올바른 속성으로 요소를 생성해야 한다
+- [ ] 이벤트 리스너를 연결해야 한다
+- [ ] 중첩된 자식 요소를 올바르게 처리해야 한다
+- [ ] 깊게 중첩된 구조를 처리해야 한다
+- [ ] 혼합 콘텐츠(텍스트와 요소)를 처리해야 한다
+- [ ] 빈 자식 배열을 처리해야 한다
+- [ ] undefined 자식을 무시해야 한다
+- [ ] 불리언 속성을 처리해야 한다
+- [ ] 데이터 속성을 처리해야 한다
+
+#### 3) 컴포넌트를 jsx로 정의하여 사용했는지 확인하기
+- [ ] Post
+- [ ] PostForm
+- [ ] Header
+- [ ] Navigation
+- [ ] Footer
+- [ ] HomePage
+- [ ] LoginPage
+- [ ] NotFoundPage
+- [ ] ProfilePage
+- [ ] HomePage를 렌더링 했을 때 html 문자열로 잘 변환되는지 확인
+
+### 심화 과제
+
+#### 1) Diff 알고리즘 구현
+
+- [ ] 초기 렌더링이 올바르게 수행되어야 한다
+- [ ] diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
+- [ ] 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
+- [ ] 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
+- [ ] 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다
+
+#### 2) 이벤트 위임 구현
+
+- [ ] 이벤트가 위임 방식으로 등록되어야 한다
+- [ ] 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
+- [ ] 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다
 
 ## 리뷰 받고 싶은 내용
 

.prettierignore

@@ -0,0 +1,8 @@
+__tests__
+*.md
+.babelrc
+vite.config.js
+
+# Ignore GitHub workflow files
+.github/workflows/**/*.yml
+.github/workflows/**/*.yaml

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true
+}