heyday2024 님의 블로그
[React 2주차(1)] React: SPA 본문
React
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizati
react.dev
- React 공식 홈페이지: "React는 UI 를 만들기위한 라이브러리"
React는 라이브러리일까 아님 프레임워크일까??
- 프레임워크?
- Spring Framework : Java 기반의 웹(백엔드) 프레임워크
- FE까지 가능한 full stack coverage framework
- JSP, Thymeleaf
- Vue.js, Angular.js : Javascript 기반 웹 프론트엔드 SPA 프레임워크
- Django, Flask : Python 기반의 웹 프레임워크
- Ruby on Rails
- .NET Framework
- Express.js, NestJS : Javascript 기반 웹 백엔드 프레임워크
- Spring Framework : Java 기반의 웹(백엔드) 프레임워크
- 개발자가 기능 구현에만 ‘딱’ 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 ‘기술의 조합’
- 라이브러리?
- React.js
- react-router-dom
- redux
- 공통 기능의 모듈화가 이루어진 프로그램의 집합
<구분>
| 라이브러리 | 프레임워크 | |
| 정의 | 특정 기능을 수행하기 위해 필요한 코드의 집합임. | 애플리케이션 개발을 위한 전체 구조와 규칙을 제공함. |
| 제어 흐름 | 개발자가 직접 호출하여 사용함. | 프레임워크가 제어를 맡고, 개발자는 그에 맞춰 코드를 작성함 |
| 의존성 | 필요할 때만 선택적으로 사용함. | 프레임워크에 맞춰 전체 구조를 따라야 함. |
| 유연성 | 사용자가 원하는 대로 조합하여 사용할 수 있음. | 규칙과 구조에 따라야 하므로 유연성이 제한될 수 있음. |
| 예시 | React, Lodash, jQuery | Angular, Vue.js, Spring, Django |
- 프레임워크는 보통 전체 애플리케이션 구조를 정의하고 제어를 가지는 반면, React는 개발자가 컴포넌트를 작성하고 이를 원하는 대로 호출하여 사용할 수 있도록 하여 제어의 주체가 개발자임. 그러므로 React 는 라이브러리!!
==> 그 자체만으로 프레임워크라고 불리기엔 React는 제공하는 기능이 부족함.
- 즉, 라이브러리는 프레임워크에 비해 자유도가있음: React는 상태관리나 라우팅을 위해 다른 라이브러리(Redux, React-router-dom)를 추가로 사용할 수 있고, 아키텍처나 패턴을 강제하지 않으며 자유롭게 컴포넌트를 구성하고 조합할 수 있음.
===> Redux, React-router-dom이 합쳐졌으면 프레임워크가 되었을수도 있음.
제어의 역전(IoC : Inversion Of Control)
--> 객체 지향 프로그래밍에서 객체의 생성 및 관리를 개발자가 아닌 외부 컨테이너나 프레임워크가 맡도록 하는 디자인 패턴 ( 주로 프레임워크에서 사용되는 개념임 )
- 본래 개발 시 ‘제어’를 하는 것은 개발자의 역할
- 프레임워크를 사용하는 경우 시키는대로 코드를 짜게 되면 프레임워크가 알아서 제어의 흐름을 가져가는 것
리액트 특징
(1) SPA (Single Page Application)
하나의 HTML 페이지로 구성되어 있으며, 사용자와의 상호작용에 따라 페이지의 내용을 동적으로 변경하는 방식임. 페이지 전환 시 전체 페이지를 새로 로드하지 않고, 필요한 부분만 업데이트하여 빠른 사용자 경험을 제공함.
(MPA: multi page application과 반대 개념)
(2) 인기가 많음. (npm trends)
npm에 등록된 패키지의 다운로드 수를 의미하는 npm trends에서 SPA 아키텍쳐 기술을 살펴보았을 때 react.js 인기가 매우 높음
(3) UI가 필요한 모든 부분에서 사용 가능
웹 뿐만 아니라 React Native를 활용한 모바일 앱에서도 활용 가능. VR에서도 씀.
(4) 커뮤니티가 막강함.
다양한 리액트 관련 정보 공유 그룹이 많음.
SPA
하나의 페이지로 이루어져 있는 애플리케이션을 뜻함.
대표적으로 React, Vue, Angular 가 있음.
SPA 란 개념이 나오기 전 웹 애플리케이션을 구축하는 전통 방식은
MPA(Multi-Page Application) 과 SSR(Server-Side Rendering)를 사용!!
MPA는 2개 이상의 HTML 페이지들로 구성된 웹 앱으로, 각 페이지가 서버에서 렌더링이되어 클라이언트에 전송됨(SSR)
<동작원리>
1. 요청(클라이언트에서 서버에 응답 요청),
2. 생성(서버에서 요청에 따라 새로운 HTML 파일 만들어냄),
3. 응답(새로 만든 HTML 파일을 클라이언트에게 보내줌)
즉, 최초 보여주었던 페이지 이외에 새롭게 서버가 생성한 페이지가 존재함으로 MPA임.
그리고, 초기 화면 로딩 시 서버에서 완성된 HTML 페이지를 만들어 브라우저에 전송하는 방식을 사용함으로 SSR임.
<SSR의 렌더링 !== 브라우저의 렌더링(페인팅)>
서버가 HTML 문서를 구성하는 데이터를 처리하고 이를 HTML 형태로 변환하여 브라우저에 전송하는데, 이 때 HTML 문서 자체를 생성하는 과정을 SSR의 렌더링이라고 함!!
전송된 HTML은 브라우저가 받고, 이를 시각적인 페이지로 사용자에게 표시하는 단계를 브라우저에서의 렌더링이라고함.
==> 이런 전통 방식 (SSR)은 초기 페이지 로딩 속도를 향상시키고, 검색 엔진 최적화(SEO)에 유리함(각 페이지가 독립적으로 서버에서 렌더링이되기 때문에 검색엔진이 쉽게 컨텐츠를 크롤링할 수 있음)
===>근데, 페이지 전환 시 전체 페이지를 로드해야되기 때문에 렌더링 속도가 느리고, 서버의 부하를 증가시킬 수 있음.
전통적인 MPA가 가지는 이런 문제점들을 해결하기 위해 등장한 !!!!
SPA
SPA는 하나의 html 페이지로 이루어진 어플리케이션.
<동작원리>
1. 요청(클라이언트가 특정 UI 요소를 클릭하거나 하는 이벤트 발생 시 서버에 데이터 요청 ---> 필요한 데이터만을 요청하는 API 호출형태)
- 예시....
- REST API: Representational State Transfer, HTTP 프로토콜을 기반으로 데이터를 주고받는 방식(CRUD 작업)
- GraphQL: Facebook에서 개발한 API 쿼리 언어로, 클라이언트가 필요한 데이터만 명시적으로 요청하고 서버에서 제공하도록 설계됨.
2. 응답( 서버는 클라이언트의 요청을 처리한 후 필요한 데이터를 JSON 형태로 클라이언트에게 전송함. 클라이언트에서는 이 데이터를 받아 처리하기 전까지 UI(사용자 인터페이스)에는 변화가 없. ),
3. 렌더링( 응답 받은 JSON 데이터는 클라이언트의 JavaScript가 처리하고, 이를 기반으로 DOM을 업데이트하여 사용자 인터페이스(UI)에 반영)
- 이 때 JS 프레임워크 또는 라이브러리(React, Angular, Vue 등)가 DOM을 조작하여 실제로 화면에 보이는 요소 변경(렌더링함.)
SPA
- 서버에서 처음 로드된 하나의 웹 페이지만을 유지하며, 사용자와의 상호작용에 따라 필요한 데이터만 서버에서 받아와 동적으로 페이지 내용을 변경함.
- 페이지 이동 시 전체 페이지를 서버에서 다시 생성해서 보내는 것이 아니라, 브라우저가 필요한 정보만을 받아와 업데이트함.
- 이는 CSR과 밀접한 관련이 있으며, 클라이언트(브라우저)에서 데이터를 기반으로 화면을 업데이트하는 방식임.
- CSR (Client-Side Rendering)
- 화면을 재구성(DOM을 업데이트)하는 주체는 브라우저임(서버는 json 형태로된 필요 데이터 정보만을 응답으로 보냄).
- 서버가 아닌 클라이언트(브라우저)에서 데이터를 기반으로 렌더링을 수행하므로, CSR은 브라우저에서 사용자 인터페이스(UI)를 생성한다는 의미임.
- 서버는 필요한 데이터만을 전송하고, 브라우저가 이를 받아서 화면을 렌더링하여 사용자에게 보여줌.
어떻게 html파일 하나를 가지고 여러 페이지를 이동할 수 있게 했을까?
Routing: URL 경로와 그 경로에 맞는 페이지 또는 컴포넌트를 연결하는 과정
(각 내비게이션의 메뉴를 선택하면 정해진 페이지로 이동하는 것. )
(웹 서비스 내부에서 어느 곳으로 가야할지를 안내해주는 것 = 라우팅 기술)
<Hashed Routing>
현대 프론트엔드 SPA 웹에서는 #가 표기된 해시라우팅 기술을 많이 사용하진 않음. (미관상 좋지 않아서...?)
- origin까지가 웹서버가 있는 위치
- Protocol: 데이터 전송 방식을 나타내며, 보통 http나 https를 사용함.
- Host: 웹 서버의 주소로, localhost는 현재 컴퓨터를 가리킴
- Port: 3000은 포트 번호로 서버의 특정 프로그램에 접근하는 경로.
- path : 같은 서버 내 특정 파일이나 리소스의 위치(어디로 접근할지 지정)
- query string: ? 뒤에 위치. 변수에 값이 할당된 형태로 조회 조건 나타냄. 여러 개 변수 사용 시 &로 추가.
- Fragment : 페이지 내 특정 부분으로 이동할 수 있도록 하는 식별자.
- anchor 즉, html 의 a 태그로 이동하게 함...
개발자도구 >> 네트워크 >>
이번에는 hash 이용해보자.
정리 ==> 서버에서는 url 중 해시(#) 이전까지의 영역을 요청함. 즉, #뒷부분은 서버에는 요청이 가지 않고, 클라이언트에서만 사용하는 값으로 클라이언트 전용 구성요소임을 알 수 있음!!
이것이 바로 SPA Architecture!!
단 한개의 페이지만은 서버에 요청한 상태에서 라우팅과 렌더링을 클라이언트에서 처리하는 것
<Browser Routing>
주로 UX를 위해 현재는 Browser Routing 방식 주로 채택함.
보다는 깔끔하게 경로처리가 되어있는 페이지
앞서 해시값 이전까지의 경로를 요청한다고 했는데 browser routing 방식처럼 사용하면, 또다른 경로를 요청하는 것 처럼 보일 수 있음(#이 아닌 /를 쓰니까)
하지만, 리액트는 번들리 도구를 이용해서 browser routing이어도 단 하나의 html만 요청할 수 있도록 내부 처리를 해줌.
- 리액트의 Browser Routing은 브라우저의 History API를 활용해 URL 경로에 따라 페이지를 이동하는 것처럼 보이게 처리하는 방식임
- History API: pushState, replaceState, popstate 이벤트 등을 통해 브라우저 URL을 변경하지만 실제로는 새로운 HTML 파일을 로드하지 않음.
이제 yarn 설치하러 갑니다ㅏㅏㅏㅏ~~~~
(+ 기가 막히게 해당 오류가 나서 튜터님이 올려주신 해결방법으로 해결 완료)
'프론트엔드 부트캠프' 카테고리의 다른 글
| [React 2주차 (3)] 컴포넌트와 JSX, props, state (1) | 2024.10.30 |
|---|---|
| [React 2주차(2)] 프로젝트 생성 (2) | 2024.10.29 |
| [React 1주차 (3)] 모듈, async, await (0) | 2024.10.29 |
| [React 1주차(2)] 자바스크립트 복습: template literals, destructuring, spread, rest, 화살표 함수, 조건 연산자 , 단축평가 (2) | 2024.10.29 |
| [React 1주차(1)] 자바스크립트 복습: 변수, 객체, 배열 (4) | 2024.10.28 |
