SPA, Router의 특징

SPA (Single Page Application)

SPA는 웹 애플리케이션 또는 웹사이트가 단일 페이지로 구성되어 사용자와의 상호작용을 동적으로 재작성함으로써 사용자에게 더 부드럽고 빠른 페이지 전환을 제공하는 접근 방식입니다. 이러한 애플리케이션은 초기 페이지 로드 시 서버로부터 필요한 모든 HTML, JavaScript, CSS를 로드한 후, 새로운 페이지를 요청할 때마다 전체 페이지를 새로고침하는 대신 JavaScript를 사용하여 현재 페이지의 내용을 동적으로 업데이트합니다.

SPA의 특징

• 속도와 반응성: 전체 페이지를 다시 로드할 필요가 없기 때문에 사용자 경험이 개선되고, 애플리케이션의 반응성이 증가합니다.
  

• 프론트엔드 중심의 구조: 모든 로직이 클라이언트 측에서 처리되므로 서버의 부하가 줄어듭니다.
  

• SEO 문제: 초기 SPA 개발에서는 검색 엔진 최적화(SEO)가 어려웠으나, 현재는 서버사이드 렌더링(SSR)이나 프리렌더링 같은 기술로 많은 문제가 해결되고 있습니다.
  

• 초기 로딩 지연: 필요한 모든 자원을 한 번에 로드하기 때문에 시작 시 로딩 시간이 길어질 수 있습니다.

SPA의 장점

• 사용자 경험(UX) 향상: 페이지 새로고침 없이 필요한 부분만 업데이트되기 때문에, 애플리케이션이 데스크탑 애플리케이션과 유사한 부드러운 사용자 경험을 제공합니다.
  
• 효율적인 자원 활용: 초기 로드에 필요한 리소스들이 한 번에 로드된 후, 추가 데이터만 필요에 따라 요청되므로 네트워크 사용량이 줄어듭니다.
  
• 프론트엔드와 백엔드의 분리: 백엔드는 API 서비스로서 기능하며, 프론트엔드와의 연결은 API를 통해 이루어집니다. 이 구조는 개발과 유지보수를 용이하게 합니다.
  

SPA의 단점

• JavaScript 의존성: SPA는 JavaScript에 크게 의존하므로, 사용자가 JavaScript를 비활성화한 경우 애플리케이션 사용이 불가능할 수 있습니다.
  
• 초기 구동 속도: 모든 스크립트와 자원을 초기에 로드해야 하기 때문에, 애플리케이션의 초기 로딩 시간이 길어질 수 있습니다. 이는 사용자의 첫 인상에 부정적인 영향을 미칠 수 있습니다.
  
• 메모리 사용: SPA는 한 번 로드되면 페이지를 떠날 때까지 메모리를 계속 사용하므로, 잘못 관리된 경우 메모리 누수가 발생할 수 있습니다.
  

Router

웹 애플리케이션에서 Router는 URL을 애플리케이션의 특정 부분이나 컴포넌트와 매핑하는 역할을 합니다. 사용자가 URL을 통해 특정 상태나 뷰로 직접 접근하거나, 애플리케이션 내에서 네비게이션을 할 때 해당 위치로 안내하는 기능을 수행합니다.

Router의 특징

• 경로 설정: 사용자가 요청하는 URL에 따라 특정 컴포넌트를 렌더링하도록 설정합니다.
  
• 동적 라우팅: 애플리케이션의 상태가 변경되어도 URL은 그에 맞게 동적으로 변화할 수 있습니다.
  
• 히스토리 관리: 브라우저의 뒤로 가기/앞으로 가기와 같은 네비게이션을 지원하며, 사용자의 네비게이션 히스토리를 관리합니다.
  
• 가드: 특정 조건에 따라 사용자가 라우트에 접근하는 것을 제한할 수 있는 기능을 제공합니다(예: 로그인 상태 확인).
  
• 레이지 로딩: 컴포넌트나 모듈을 필요할 때만 로드하도록 설정하여 초기 로드 시간을 단축하고, 성능을 개선할 수 있습니다.
  

Router의 주요 기능

• 중첩된 라우트: 라우터는 중첩 구조를 지원하여, 대규모 애플리케이션의 다양한 레이아웃과 뷰를 효율적으로 관리할 수 있습니다. 각 레벨에서 라우트를 설정하여, 애플리케이션의 구조를 명확하게 할 수 있습니다.
  
• 프로그래매틱 네비게이션: 코드를 통해 명시적으로 다른 경로로 이동하거나 이전 페이지로 돌아갈 수 있습니다. 이는 사용자 이벤트나 애플리케이션 로직에 따라 동적으로 라우트를 조작할 때 유용합니다.
  
• 동적 로딩과 코드 분할: 최신 프론트엔드 프레임워크들은 라우터를 통해 필요한 컴포넌트만 동적으로 로딩하고, 코드 분할을 사용하여 애플리케이션의 성능을 최적화합니다. 사용자가 실제로 방문하는 라우트에 필요한 코드만 로드하게 됩니다.
  

다음시간에 계속…