SPA(Single Page Application)와 웹프론트 기술

현재 사용하고 있는 웹 프론트 기술에 대해서 정리가 필요할 듯하여 포스팅해본다. 개발자로 취업하고 제일 먼저 React를 개발했지만 사실 누군가 React가 뭐냐고 물어본다면 설명하기가 어렵다. 내가 쓰는 기술을 제대로 설명도 못한다니....😥

기술 하나하나에 대해 심도깊은 이해보다는 전반적으로 살펴보기 위한 것이다. 부족한 내용이 있다면 앞으로 계속 채워나갈 예정이다.

 

1. SPA(Single Page Application)

전통적인 웹

전통적인 웹에서 페이지 이동을 하면 서버에 요청을 하면 서버가 HTML 파일을 만들어서 클라이언트에 보내주고, 브라우저가 HTML을 반영해서 보여주기 전 새로고침이 일어난다. 이를 정적 웹 페이지라고 하는데 이는 '클라이언트에게 제공하기 위해 미리 작성되어 서비스되는 HTML 문서'라고 정의한다. 이는 사용성이 좋지 않으며, 변경이 필요없는 부분까지도 전체 페이지를 갱신하므로 비효율적이다.

 

SPA

정적 웹 페이지의 단점을 보안하고자 SPA가 나왔다. SPA는 페이지 이동시 AJAX로 요청하고, 서버는 JSON만 전달한다. 페이지 이동시 변경되는 부분만 JSON으로 받아온 뒤, 브라우저의 자바스크립트에서 받은 JSON을 토대로 DOM에 변경된 부분만 렌더링 한다.

필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험을 제공할 수 있다.

 

이를 그림으로 표현하면 다음과 같다.

 

여기서 DOM이란 용어가 나오는데 이에 대해 간단히 정리하자면 다음과 같다.

 

- 브라우저 객체 모델(BOM, Browser Object Model) : 브라우저와 관련된 객체들의 집합

- 문서 객체 모델(DOM, Document Object Model) : HTML, XML 문서에 접근하기 위한 일종의 인터페이스. HTML, CSS가 사용자에게 직접적으로 보이는 것이라면, DOM은 기계나 소프트웨어가 웹 사이트 구조를 어떻게 이해하는 지에 대한 표준

 

 

2. SPA UI : Axios

AJAX(Asynchronous Javascript And Xml)

데이터를 이동하고 화면을 구성하는데 있어 화면 갱신 없이 JavaScript 을 이용해서 필요한 데이터를 서버로 보내고 응답을 가져오는 방법이다. 즉, JavaScript를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것이다.

HTTP Client를 내장하고 있는 Angular와 다르게, React는 따로 내장클래스가 존재하지 않는다. 따라서 리액트에서 AJAX를 구현하려면 JavaScript 내장 객체인 XML Request를 사용하거나 다른 HTTP Client를 사용해야한다.

 

Axios

NodeJs와 브라우저를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

해당 정보를 불러오는 API를 부르기 위해 다음과 같이 사용한다.

import axio from 'axios';
const fetchDetail = (id) => {
    return axios.get(`${context}/sample/${id}`);
};

 

 

3. SPA UI : React

React

웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용한다. MVC 프레임워크에서 View 부분을 컴포넌트로 만들기 위한 스크립트 라이브러리이다. 

- React는 JavaScript를 기반으로 만들어진 JSX라는 문법을 사용한다. 이것은 JavaScript안에서 HTML문법을 사용해서 view를 구성할 수 있다.

- React는 Component 기반 라이브러리다. 여러부분을 분할해서 코드의 재사용성과 유지보수성을 증가시켜준다.

 

NodeJs

React 개발을 위해 필요한 JavaScript runtime Environment 이다.

NPM(Node Package Manager)를 이용해 다양한 모듈들을 다운받아 사용할 수 있다. NPM보다 속도가 빠른 yarn을 사용하기도 한다.

바벨이라는 컴파일러 도구를 추가로 다운받아 JavaScript 대신 JSX를 사용하는 것이 가능하다.

 

package.json

NPM script 및 javascript 라이브러리를 관리한다. 

npm install 명령어를 통해 해당 디렉토리에 node_modules라는 디렉토리가 생성되며 라이브러리가 다운로드 된다. 참고로 node_modules는 굉장히 파일이 크다..

 

4. SPA UI : Redux

Flux개념을 바탕으로 한 React에서 현재 가장 많이 사용되는 State관리 라이브러리이다. 

- Action : 어떤 동작에 대해 선언된 객체(Event)
- Action Creator : Action을 생성해 실제로 객체로 만들어주는 함수
- Reducer : 현재의 State와 Action을 인자로 받아 Store에 접근에 Action에 맞춰 State를 변경(Event에 대한 반응)
- Store : State 저장소
- Dispatch : 스토어의 내장 함수 중 하나. 액션 객체를 넘겨줘서 상태를 업데이트 하는 유일한 방법. 이벤트 트리
- Selector : 상태 값을 가져올 때 사용
- Saga : Redux의 미들웨어. 액션의 역할을 수행하고 다시 액션을 발행하여 데이터를 저장하거나 다른 이벤트 수행

 

Redux의 상태 흐름은 다음과 같다. 

 

5. SPA UI : React Router

페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. React는 단순히 view 라이브러리이기 때문에 Routing을 지원해줄 추가 라이브러리가 필요하다.

- Routing은 URL에 따라서 그에 상응하는 화면을 전송해주는 것을 말한다.
- React Router Redux : React Router와 Redux를 연계해주는 라이브러리

 

saga에서 다음과 같이 페이지 이동이 필요할 때 라우팅해준다.

 

6. SPA UI : React Redux

- stateToProps : Reducer(State)와 React 컴포넌트의 Props를 연결해주는 함수
- dispatchToProps : Action과 React 컴포넌트의 Prop을 연결시켜주는 함수. connect를 통해 stateToProps, dispatchToProps 를 React 컴포넌트와 연결

 

7. SPA UI : webpack

여러 개의 파일을 하나의 파일로 합쳐주는 javascript 모듈 번들러(module bundler)이다. 로더, 컴파일 속도 상승 등 여러가지 기능 제공한다. webpack-dev-server를 사용하면 리부트 없이 즉시 동적자원을 정적자원으로 활용 할 수 있다.

css, scss, font, script를 load하는 기능 제공한다. 여러 모듈로 나누어진 script를 가공함으로써 편의성을 제공한다. 개발(dev), 배포(prod) 설정을 따로 작성 가능하며, 공통적인 속성(common)도 작성하여 merge가 가능하다.