24.08.13 day45 타입스크립트 경로 에러, SPA

타입스크립트 파일인 tsx로 작성을 하다보면 파일 url이나 이미지 url등이 인식을 못할 때가 있다.

타입스크립트는 자체적으로 파일 시스템이나 파일 경로에 직접 접근하는 기능을 제공하지 않기 때문에 생기는 에러인데, 코드의 문법과 타입을 검사하지만, 실제 파일이나 리소스를 로드하거나 접근하는 역할은 하지 않아서 이 부분을 직접 작성해 줘야 한다.

 

해결법은 이미지파일을 인식할 수 있게 타입을 지정해줘야 한다.

src폴더 내에 images.d.ts 파일을 작성해주면 해결된다.

declare module "*.png" {
  const value: string;
  export default value;
}

declare module "*.jpg" {
  const value: string;
  export default value;
}

declare module "*.jpeg" {
  const value: string;
  export default value;
}

declare module "*.svg" {
  const value: string;
  export default value;
}

---

SPA(Single Page Application)

SPA는 웹 애플리케이션의 한 종류로, 단일 HTML 페이지를 기반으로 동작하며, 페이지 간 전환이 있을 때마다 전체 페이지를 새로 로드하지 않고, 필요한 부분만 동적으로 업데이트하는 방식이다.

이 접근 방식은 전통적인 MPA(Multi-Page Application)와 비교하여 여러 장단점이 있다.

SPA의 특징

1. 초기 로드
   • SPA는 처음 로드할 때 모든 필수 리소스(HTML, CSS, JavaScript)를 한 번에 불러오며, 이후에는 페이지 전환 시 추가적인 데이터를 서버에서 받아와 필요한 부분만 업데이트한다.
2. 동적 콘텐츠 업데이트
   • 사용자가 페이지 내에서 탐색할 때, SPA는 URL이 변경되더라도 전체 페이지를 다시 로드하지 않는다. 대신 자바스크립트를 사용해 DOM의 특정 부분만 동적으로 변경할 수 있는데, 이는 React, Angular, Vue.js와 같은 프레임워크를 통해 쉽게 구현할 수 있다.
3. 빠른 사용자 경험
   • SPA는 페이지 전환 시마다 전체 페이지를 다시 로드하지 않기 때문에 매우 빠른 사용자 경험을 제공한다. 페이지가 전환될 때마다 전체 페이지가 깜빡이지 않고, 필요한 부분만 업데이트되기 때문에, 더 자연스럽고 부드러운 느낌을 줄 수 있다.
4. 라우팅
   • SPA는 클라이언트 측 라우팅을 사용하며, URL의 변경은 브라우저의 주소 표시줄에 반영되지만, 실제로는 자바스크립트가 해당 URL에 따라 렌더링할 콘텐츠를 결정하고, 전체 페이지를 다시 로드하지 않는다. React Router, Vue Router 등이 클라이언트 측 라우팅을 지원한다.
5. 상태 관리
   • SPA에서는 페이지 전환 시에도 상태가 유지되어 애플리케이션 상태를 클라이언트 측에서 관리한다. 예를 들어 사용자가 어떤 데이터를 입력했는지 등의 정보가 계속 유지될 수 있으며, 이는 Redux, Vuex와 같은 상태 관리 라이브러리를 통해 가능해진다.

SPA의 장점

1. 빠른 응답 속도: 필요한 데이터만 서버에서 받아오기 때문에 MPA  페이지 전환보다 훨씬 빠른 응답 속도를 제공한다.
2. 부드러운 사용자 경험: 페이지가 전환될 때 깜빡임 없이 매끄럽게 작동하여 사용자 경험이 향상된다.
3. 효율적인 서버 통신: 서버와의 통신은 필요한 데이터만 주고받기 때문에 트래픽이 줄어들고 서버 자원도 더 효율적으로 사용된다.
4. 개발자 경험 향상: SPA 프레임워크와 라이브러리들은 개발자에게 모듈화된 코드 구조, 재사용 가능한 컴포넌트, 강력한 상태 관리 기능 등을 제공하여 생산성을 높일 수 있다.

SPA의 단점

1. 초기 로드 시간 증가: 처음 로드 시 모든 리소스를 한 번에 불러오기 때문에, 초기 로딩 시간이 길어질 수 있다.
2. SEO 문제: 전통적인 방법으로는 검색 엔진이 SPA의 콘텐츠를 제대로 인덱싱하지 못할 수 있기 때문에, 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 같은 기술을 도입하기도 한다.
3. 브라우저 히스토리 관리: SPA에서는 브라우저의 뒤로 가기, 앞으로 가기 기능이 복잡해질 수 있으며, 이를 위해 추가적인 설정이 필요하다.
4. 자바스크립트 의존성: SPA는 자바스크립트에 크게 의존하므로, JS가 비활성화된 환경에서는 제대로 작동하지 않을 수 있다.

SPA의 예시

• Gmail: 한 번 로드된 이후에 이메일을 열거나 작성할 때마다 전체 페이지를 다시 로드하지 않고 필요한 콘텐츠만 업데이트한다.
• Trello: 작업 목록을 추가하거나 카드를 옮길 때 페이지 전환 없이 즉시 반영된다.
• GitHub: 레포지토리 내에서 파일을 탐색하거나 브랜치를 전환할 때 전체 페이지가 다시 로드되지 않고 필요한 부분만 동적으로 변경된다.

나중에 알았었는데 리액트 모듈인 React-router-dom도 SPA 방식으로 진행된다고 한다.

url을 페이지마다 넣을 수 있어서 그동안 페이지 변경이 되는 줄 알고 있었는데 a태그와 같은 Link 애들만 페이지 이동으로 들어가고 navigate, location 등의 기능은 페이지 변경이 발생하지 않는다.