# React SPA

crg1050

✔️ 시작 React SPA가 도입된 배경과 어떻게 진행되는지 학습했다. 📍알게된 것 ✔️ SPA(Single Page Application) 등장 배경 예전 웹 사이트는 페이지 이동 시 페이지 전체를 불러 와야했다. 점점 증가되는 데이터 등으로 인해 트래픽 증가와 사용자 경험의 저하가 생기게 되었고 이로 인해 SPA가 등장하게 되었다.(페이지 전체를 불러오는 행위 : 깜빡인다.) SPA 등장 HTML 문서 전체가 아닌 업데이트 시 필요한 영역만 데이터를 받아 그 정보를 기준으로 해당 페이지를 업데이트한다. - 장점 사용자와의 인터렉션(Interaction)가 빠르게 반응한다. 서버 과부하 문제가 줄어든다. 전체 페이지를 렌더링할 필요가 없이게 더 나은 유저 경험을 제공한다. >Youtube, facebook, Gmail 등 ➤ SPA로 만들었다. 장

wangamy

오늘은 React SPA에 대해 알아보자! > 왜 React SPA를 사용해야할까? 웹페이지에서는 페이지를 유저에게 보여줄 때 즉, 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 페이지를 전달 받아와서 렌더링을 했다. 하지만, 규모가 커질수록 사용자와의 상호 작용이 많아지고 그에 따라, 속도 저하 등의 문제가 발생하게 됐다. 그래서 React에서는 이러한 문제를 해결하기 위해 SPA를 사용하고 있다! SPA 의 등장 배경, 개념, 장단점 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다. 위 이미지에서 볼 수 있듯이 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 M

jwo0o0

SPA(Single-Page-Application) 우선 SPA 라는 방식이 있다. 말 그대로 하나의 웹 애플리케이션, 웹 사이트가 하나의 페이지로 이루어지는 방식이다. 처음 이 말을 들으면 🧐 엥 어떻게 웹 사이트가 페이지 한개로 만들어져? 페이지가 엄청 많이 필요하지 않나? 라는 생각이 든다. 이 말을 이해하기 위해서 우선 전통적인 웹 사이트를 생각해보자. SPA의 등장 배경 그림 왼쪽의 전통적인 웹사이트에서는 페이지를 이동할 때 매번 html로 페이지 전체를 불러와야 했다. 그러나 사용자와 서비스 사이에 점점 더 많은 상호 작용이 생기는 쪽으로 발전했고, 중복되는 요소들(header, footer, 메뉴 창 등등)을 매번 불러오는 것은 서버와의 불필요한 트래픽을 발생 시켜 더 느린 반응성을

jjing9

SPA (Single Page Application) Single Page Application (SPA)는 한 개의 페이지로 구성된 어플리케이션을 말한다. 사용자가 애플리케이션을 사용하는 동안 서버로부터 전체 페이지를 다시 로드하지 않고, 필요한 데이터만 받아와 동적으로 화면을 갱신한다. SPA는 React, Angular, Vue.js 등의 프론트엔드 프레임워크에서 많이 사용된다. 이러한 프레임워크들은 SPA를 구현하기 위한 다양한 도우과 기능을 제공하는데 React에서는 React Router를 사용하여 SPA를 구현할 수 있다. 예시 public/index.html HTML 템플릿 파일, div id를 root로 해놓는다. src/index.js 자바스크립트의 시작점. 여기서 위의 root id를 가진 div를 잡아준다. src/App.tsx 라우터를 이용해 SPA를 구현해준다. 전통적인 웹 사이트를 만들 때 여러개의 페이지를 만들면

fejigu

🔎 새롭게 학습한 React SPA, 이전 학습들에 비해 어렵지 않은 개념이었지만 React SPA 개요, React SPA 개념, 장단점에 대해 간단하게 정리하며 복습하고자 한다. ✔️ React SPA 등장 배경 > → 웹페이지에서는 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 페이지를 전달 받아와서 렌더링을 했다. 하지만, 규모가 커질수록 사용자와의 상호 작용이 많아지고 속도 저하 등의 문제가 발생하게 된다. 그래서 HTML 문서 전체가 아닌,

uxolrv

💡 리액트에서 font awesome 사용하기 패키지를 설치한다. import문을 이용하여 FontAwesomeIcon을 불러온다. fontawesome 사이트에서 아이콘을 고른다. {} 안에 아이콘 이름, from 뒤는 설치한 아이콘 스타일을 작성하여 사용한다. 💡 useNavigate를 사용하여 뒤로가기 기능 만들기

tootb

React SPA 규모가 커질수록 사용자와의 상호작용이 많아지고 속도 저하 문제가 발생함에 따라 이 문제를 해결하기 위해 등장한 SPA SPA 등장배경과 개념 (Single Page Application) 전통적인 웹사이트는 페이지 전체를 로딩하여 시간이 오래걸리는 반면, SPA는 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않음 (ex. header, navigation, footer) 서버로부터 완전히 새로운 페이지를 불러오지 않고 화면 업데이트를 위해 필요한 데이터만 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식 장점 필요한 데이터만 받아서 업데이트하기 때문에 사용자와의 interaction이 빠름 서버에서 요청받은 데이터만 넘겨주므로 서버 과부하문제가 현저하게 줄어듦 더 나은 유저경험 제공 (전체페이지 렌더링하지 않아도 되기 때문) 대표적인 플랫폼: 유튜브, 페이스북, 지메일, 에어비엔비, 넷플릭스 등 단