[Web Hacking] Web Trend

과거의 웹은 새로운 페이지를 보려면 전체 새로고침을 해야 했습니다.

지금은 비동기 통신, 실시간 연결 등 기술로 새로고침 없이 더 빠르게 새로운 페이지를 볼 수 있게 되었습니다.

이것을 가능하게 해 준 기술을 나열해 보겠습니다.

 

1. Ajax (Asynchronous JavaScript snd XML)

Ajax는 페이지 전체를 새로고침하지 않고, 백그라운드에서 서버와 데이터를 주고받는 기술을 말합니다.

 

사용자가 버튼을 누르는 등의 행위를 통해 서버에 요청을 보낼 때,

브라우저가 필요한 부분만 조용히 서버에 요청을 보내고, 필요한 데이터만 받아 화면 일부를 변경합니다.

 

조금이라도 변화가 생기면 전체 새로고침을 해야 했던 과거와 달리,

현재는 이 기술을 통해 특정 부분의 데이터만 받아와 화면을 갈아 끼웁니다.

 

이로 인해 속도가 더 빨라지고, 화면이 덜 깜빡여서 사용자 경험이 좋아집니다.

 

 

2. Ajax에서 데이터를 보내는 방법

 

Ajax 요청 시 주로 2가지의 방법을 이용하여 데이터를 전송합니다.

 

 

2-1. Query String

 

/search?query1=abc&query2=qwe

 

URL에 파라미터를 추가하여 서버에 값을 전달합니다.

 

 

2-2. Header

HTTP 요청 패킷 헤더에 여러 부가정보를 담습니다.

 

Content-Type: application/json
Authorization: Bearer <Token>

 

 

다음과 같은 때에 사용합니다.

 

• 데이터 형식 명시
• 인증 토큰 전달
• 캐시 정책 설정
• 브라우저/클라이언트 정보 전달

 

 

3. Ajax에서 데이터를 보내는 방법

주로 2가지 방법을 사용합니다.

 

3-1. JSON

키(Key)와 값(Value) 형태로 데이터를 표현하는 텍스트 포맷이며,

오늘날 많이 쓰이는 데이터 형식입니다.

 

데이터 예시:

 

{
  "홍길동": {
    "나이": 28,
    "주소": "서울",
    "취미": "축구"
  },
  "김철수": {
    "나이": 29,
    "주소": "대구",
    "취미": "농구"
  }
}

 

3-2. XML

XML은 태그 기반으로 데이터를 표현하는 데이터 형식입니다.

JSON 보다 사용 빈도가 높지 않습니다.

 

데이터 예시:

 

<people>
  <홍길동>
    <나이>29</나이>
    <주소>서울</주소>
  </홍길동>
  <김철수>
    <나이>28</나이>
    <주소>대구</주소>
  </김철수>
</people>

 

 

5. WebSocket

기본적으로 HTTP는 1회성 요청-응답을 보내며, 상대방의 상태를 저장하지 않는 stateless입니다.

이러한 구조는 실시간 데이터 처리에는 적합하지 않습니다. 실시간으로 클라이언트가 계속 데이터를 달라고 요청을 반복해야 하기 때문입니다.

 

이를 위해 연결을 유지할 필요성이 생겼습니다.

WebSocket은 클라이언트와 서버가 연결을 계속 유지하면서 양방향으로 데이터를 주고받는 기술입니다.

 

한 번 연결을 맺은 뒤 계속 통신할 수 있습니다.

 

 

6. Frontend 기술

예전에는 HTML+CSS+JS로 페이지를 만들었습니다.

하지만 유지보수 등의 이유로 컴포넌트 기반 개발 방식이 만들어지게 됩니다.

 

React / Vue 등의 프론트앤드 개발 도구는 페이지 내의 여러 요소들(로그인 박스, 검색창, 게시물 테이블)을 컴포넌트로 나누어 관리할 수 있게 해 줍니다.

 

React나 Vue 등의 프론트앤드 프레임워크를 사용함으로써 프론트앤드 서버와 백앤드(API) 서버를 분리할 수 있습니다.

 

프론트엔드

• React, Vue, Next.js 등
• 사용자가 보는 화면 담당

백엔드

• API 서버
• DB 처리, 인증, 비즈니스 로직 담당

 

[그림 1] 통신 구조

 

[그림 1]의 아래 구조를 이용하여 하나의 HTML 페이지를 기반으로 동작하면서, 필요한 내용을 동적으로 바뀌는 웹앱을 SPA (Single Page Application)라고 합니다.

 

깡통 HTML에서 Javascript를 ㅈ

 

7. SEO와 SPA

 

SEO는 검색엔진최적화(Search Engine Optimization) 입니다.

 

특정 페이지가 검색엔진에 잘 노출되려면 검색엔진이 페이지 내용을 잘 읽어야 합니다.

하지만 SPA의 특성 상 초기 HTML이 비어 있고, Js가 실행되어야 내용이 보이는 경우가 많습니다.

 

SEO에서의 약점을 해결하기 위해 Next.js가 등장하게 됩니다.

 

8. Next.js

 

Next.js는 React 기반 프레임워크로,

React의 장점을 유지하면서도 SEO 개선을 할 수 있는 기술입니다.

 

React에서 몇 가지 코드를 더 추가하면 SEO 약점을 보완할 수 있습니다.

 

Next.js의 장점은 아래와 같습니다.

• 서버 사이드 렌더링(SSR) 가능
• 정적 사이트 생성(SSG) 가능
• SEO 대응에 유리
• 라우팅, API 기능 등 구조화가 잘 되어 있음

 

9. SPA와 하이브리드 앱

SPA 구조는 웹앱을 앱처럼 보이게 만드는 데 유리합니다.
그래서 모바일 앱에서도 하이브리드 앱 구조와 잘 연결됩니다.

 

아래와 같은 방식입니다.

• 화면은 웹 기술(HTML/CSS/JS)로 만들고
• 앱 껍데기(WebView) 안에서 실행

 

이때 SPA 구조를 사용하면 앱처럼 자연스러운 화면 전환을 만들기 쉽습니다.