feature/router

[Minsoek96]

SPA Router

구현 핵심 포인트
SPA 방식의 라우팅을 구현하기 위해서 핵심 포인트는 사용자 시각의 URL은 변환 하지만 페이지 전환을 일어나지 않습니다.

• 페이지 새로고침 없이 현재 페이지의 DOM을 갱신 합니다.
• <a> 태그를 통한 이동은 페이지 전체를 새로고침하므로, 대신 Link 컴포넌트를 사용해 내부적으로 DOM 변환을 트리거합니다.
• Link는 URL과 DOM 변화를 연결하는 매처(Matcher)와 연동되어야 합니다.

제약 상황
실제 React Router처럼 리액트의 기술을 이용하여 구현은 불가능합니다.

• 의존해야 할 React가 모방 구현에 불과하여 기본적인 훅이 부족하기 때문입니다.
• 따라서 React 의존도를 최소화하면서, React Router의 동작을 모방하여 설계했습니다.

세부 처리 요약

URL의 변환은 어떻게 ?

• window.history API를 사용하여 URL 변환을 처리하였습니다.
• window.history는 페이지 새로고침 없이 브라우저의 세션 기록을 조작할 수 있습니다.
• window.location location.href="page"와 같은 방식은 새로고침을 유발하므로 SPA 적합하지 않습니다.

변환은 어떻게 감지

고려 사항 : 미완성된 React 훅에 의존하여 setState를 통한 업데이트 방식은 적절하지 않다고 판단했습니다. setState 없이 원하는 시점에 this.update()를 호출하는 것이 과제였습니다.

• 일반적인 이벤트 타입의 경우에서는 popstate가 존재하지만 해당 타입의 경우는 브라우저의 이전, 다음 페이지 이동을 관여하여 적합하지 않았습니다. 그외에도 hashchange, beforeunload등이 있지만 각각의 상황별로 조작해야하는 불편함이 있었습니다. 또한 원하는 타입이 있더라도 조건만 충족하면 동작하기 때문에 잠재적인 문제가 있다고 생각했습니다.
• 커스텀 이벤트를 사용하여 특정한 경우보다는 제가 원하는 시점에 해당 이벤트를 트리거할 수 있다는 점이 모든조건을 충족해주었기 때문에 커스텀 이벤트를 활용하여 처리해주었습니다.

매처는 어떻게 ?

• 구현 : React Router와 유사한 routes 객체를 통해 현재 경로(path.name)와 매핑되는 컴포넌트를 반환해주었습니다.
• React Router와 같이 컴포넌트를 직접 저장하고 반환하는 경우에는 항상 초기의 JSX(vnode)가 반환되는 문제가 있어 함수를 통해 반환하는 방식으로 처리하여 호출 시점에 최신화된 상태를 불러 올 수 있게 처리하였습니다.

동적 라우팅은 어떻게 ?

• :id 또는 :user와 같은 경로 매개변수를 파싱하도록 매처를 확장했습니다
• 파싱된 값을 매처가 반환하는 컴포넌트의 props로 전달하여 동적 데이터를 처리할 수 있도록 했습니다.

ACTIONS

비교 항목	aws s3 cp	aws s3 sync
불필요한 파일 재업로드	✅ 항상 다시 업로드	❌ 변경된 파일만 업로드
S3 PUT 요청 비용 증가	✅ 불필요한 요청 많음	✅ 필요할 때만 요청
데이터 전송 비용 증가	✅ 중복 데이터 전송	✅ 최소한의 전송

Job :

• 워크 플로우 기본 실행 단위
• 하나의 워크플로우에 여러 job을 포함할 수 있음
• 각 job은 독립적인 가상 환경에서 실행된다.

Deploy :

• 실제로는 그냥 job의 한종류
• 배포 작업을 수행하는 특별한 의미를 가진 job

---

useState boolean ? :

TodoContainer.tsx?t=1739624399835:67 Uncaught TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

문제

조건부 렌더링 ( boolean ? : ) 수행 시 특정 케이스에서 렌더링이 정상적으로 이루어지지 않는 문제가 발생

원인 분석

컴포넌트 업데이트가 발생할 때 상태가 초기화되고 0부터 다시 카운팅되는 과정에서, 조건부 렌더링의 store.states[hookIdx] 에 이미 값이 존재하여 새로운 initialState 값으로 적절하게 초기화되지 않는 문제를 확인

• 컴포넌트 재초기화 시 상태 카운터 0리셋
• 이전 렌더링의 상태 값이 store.states[hookIdx]에 그대로 유지됨
• 이전 와 다른 컴포넌트로 전환 시 새로운 initialState 값이 기존 상태를 덮어쓰지 못함
• 결과적으로 vNode와 실제 상태 간의 불일치 발생

if (store.states[hookIdx] === undefined || 
    typeof store.states[hookIdx] !== typeof initialState) {
    store.states[hookIdx] = initialState;
}