# spa
리액트 SPA(Single-Page Application)
전통적인 웹사이트는 사용자가 다른 페이지로 이동하면 브라우저가 페이지를 보여주기 위해 매번 HTML파일로 된 "페이지 전체"를 불러와 렌더링을 했다. 하지만 웹사이트가 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게
(SEB_FE) Section2 Unit5 React SPA
SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.SPA의 장, 단점에 대해 이해하고 설명할 수 있다.와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다.React에서 npm으로 React Router를 설치(np
리액트 라우터로 SPA 개발
기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 HTML을 받아 오고, 이 페이지 로딩할 때마다 서버에서 리소스를 전달받아 화면에 보여주었다. 즉, 사용자에게 보이는 화면을 서버 측에서 준비했다. 요즘은 웹에서 제공되는 정보가 매우 많아 서버 측에서 모든 뷰를 준
JavaScript와 Webpack을 이용한 SPA만들기
SPA는 전통적인 Multi Page Application (MPA)와 달리 페이지를 다시 로드하지 않고, 동적으로 페이지의 일부분만 변경하는 웹 어플리케이션이다. 이것은 사용자 경험을 향상시키고, 더 빠르고 반응성 있는 웹 애플리케이션을 만드는 데 매우 유용하다.SP
Vercel로 SPA 배포하면 일어나는 404 에러 해결하기
Vercel로 SPA 프로젝트를 배포하고, 접속을 하면 잘되는 것처럼 보인다. 하지만 그 상태에서 새로고침을 해보면 404 에러를 내뱉는데, 해결해보자
Nuxt(Server Side Rendering) 배포와 통신
Nuxt 서비스 배포 방법 Nuxt.js 서비스를 배포하는 방법은 프로젝트를 생성할 때 선택한 Universal 모드의 배포 방식에 따라 다르다. 아래 2가지 유형에 따른 배포 방법을 살펴보자. SSR(Server Side Rendering) SSR 모드는 위 그
프로젝트 issue 기록 (feat. SPA 사이트 권한 설계)
글 작성 배경 작년부터 대기업 프로젝트를 Vue를 이용하여 구축하고 있다. 구글 맵 기반으로 구축된 이번 프로젝트를 통해 다양한 문제가 있었고, 그 중에 나를 너무 힘들게 했던 문제들을 하나하나 정리해보고 기록해보려고 한다. 권한 관리 비교분석 비동기 처리 프로젝
Multi Page Application vs Single Page Application
Multi Page Application vs Single Page Application
javascript 로 SPA 구현하기
폴더구조 index.html src/route/route.js src/api/api.js src/storage/storage.js src/index.js src/App.js src/page/Page1.js src/page/page1/SubPage.js
React 기초 정리
React는 SPA 개발의 하나로 Facebook에서 개발한 UI 라이브러리로, 복잡한 UI를 간단한 컴포넌트(Component)로 나누어 관리할 수 있도록 도와줍니다. React는 UI의 상태에 따라 뷰를 자동으로 업데이트하고, 재사용성이 높은 컴포넌트를 통해 개발
대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편
많이들 이용하는 Static Site Generation은 사실 HTML이 아니라 다른걸 미리 생성합니다... SSG의 정확한 작동 방식에 대해 살펴보고, SSG을 이용해 로딩 속도를 개선한 경험을 말씀 드리고자 합니다.
SPA
SPA는 Single Page Application 의 약자이다.SPA는 서버로 부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.SPA는 단일 페이지로 기존의 서버사이드렌더링(SSR)
SPA 그리고 CSR, SSR
단일 페이지 어플리케이션.배포가 간단하고 네이티브 앱과 비슷한 사용자 경험을 제공한다.SPA는 최초 접근시 어플리케이션 구동에 필요한 정보를 한 번만 다운받는다. 새로운 데이터로 다른 페이지에 접근시 새로운 데이터만 다운받아 불필요한 트래픽을 감소시키고, 변경되는 부분
React - SPA 에서 특정 조건일 때 페이지 이동하기 useNavigate
일반적으로 Onclick 인 경우에 페이지 이동할 때에는 아래와 같이 컴포넌트의 return에서 Link를 사용하여 쉽게 사용이 가능했다.이번에 작업하면서 어려움을 겪었던 부분은Submit에 성공 할 때에 다른 페이지를 이동 해야하는 경우였다.처음에는 React 함수의
