[웹서비스 개발팀] CS(AJAX, redirect, Https) 조사

Anna Park·2024년 7월 7일

JavaScript Request Response ajax forward http https redirect ssl ssl인증서

webservice

목록 보기

12/33

20240706 CS 개념 조사하기

ajax 조사
forward, redirect 차이 조사
HTTP 조사(request, response)
HTTPS, ssl 인증서 조사

1. AJAX조사

1) 배경

AJAX 이전의 웹 환경에서는 클라이언트가 서버에 데이터를 요청하는 방법이 제한적이었습니다. 주로 브라우저 주소창에 URL을 입력하거나 HTML의 <a> 태그나 <form> 요소를 통해 이루어졌습니다. 이 방식에서 서버는 요청받은 데이터와 함께 전체 HTML 파일을 다시 전송했습니다. 이는 비효율적일 뿐만 아니라, 페이지 전체가 새로 로드되면서 화면이 깜빡이는 현상을 야기했습니다.

1990년대 후반, 마이크로소프트는 자사의 인터넷 익스플로러에 자바 애플릿 대신 ActiveX 컨트롤을 도입했습니다. 이는 자바와의 법적 분쟁을 피하기 위한 조치였습니다. ActiveX의 일부로 개발된 XMLHTTP는 JavaScript를 통해 HTTP 요청을 보내고 응답을 받을 수 있게 해주는 핵심 기능을 제공했습니다. 이 기술은 후에 XMLHttpRequest라는 이름으로 표준화되었습니다. 2005년, 제시 제임스 게럿(Jesse James Garrett)이라는 개발자가 이러한 비동기 통신 기술들을 총칭하여 'AJAX'(Asynchronous JavaScript and XML)라고 명명했습니다.

2) AJAX의 정의

AJAX는 비동기적 웹 애플리케이션 제작을 위한 기법입니다. 이 기술을 사용하면 백그라운드에서 서버와 데이터를 교환하여 웹 페이지의 일부를 동적으로 업데이트할 수 있습니다.

주요 특징으로는 비동기성, 클라이언트 측 처리, 점진적 갱신이 있습니다. AJAX는 XMLHttpRequest 객체를 사용하여 서버와 통신하며, 주로 JSON 형식으로 데이터를 주고받습니다. 이 기술은 구글 맵스, 페이스북, 트위터 등 많은 현대적 웹 애플리케이션에서 광범위하게 사용되고 있습니다. AJAX를 통해 웹 애플리케이션은 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있게 되었습니다.

3) AJAX 요청 예제

function loadData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("data").innerHTML = this.responseText;
    }
  };
  xhr.open("GET", "https://api.example.com/data", true);
  xhr.send();
}

이 코드는 XMLHttpRequest 객체를 생성하고, 서버로부터 데이터를 비동기적으로 요청합니다. 응답이 오면 페이지의 특정 부분을 업데이트합니다. 이러한 방식으로 AJAX는 전체 페이지를 새로고침하지 않고도 동적으로 콘텐츠를 변경할 수 있게 해줍니다. 현대 웹 개발에서는 주로 Fetch API나 Axios 같은 라이브러리를 사용하여 AJAX 요청을 더 쉽게 처리합니다.

추가 조사자료

Fetch API와 Axios

Fetch API와 Axios의 장점:

코드 간결성:
XMLHttpRequest에 비해 더 간결하고 읽기 쉬운 코드를 작성할 수 있습니다.
Promise 기반:
비동기 작업을 더 쉽게 처리할 수 있으며, async/await 문법과 함께 사용하면 더욱 직관적인 코드 작성이 가능합니다.
에러 처리:
네트워크 오류나 HTTP 오류를 더 쉽게 처리할 수 있습니다.
요청/응답 변환:
JSON 데이터의 자동 파싱 등, 데이터 변환 작업을 자동화할 수 있습니다.
고급 기능:
요청 취소, 타임아웃 설정, 인터셉터 등의 고급 기능을 쉽게 사용할 수 있습니다.

Fetch API
- body안에 정보
- url은 ()안에 인자로
- body는 stringify()
- 일반적으로 API를 연동하기 위해 사용하던 방식입니다.
- 자바스크립트 bulit-in 라이브러리

const url = '요청할 주소'
const options = {
  method: 'POST',
  header: {
     'Accept' : 'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
     name: 'test'
  })
  
  fetch(url.options)
     .then(response => console.log(response))
}

Axios
- data안에 정보
- url은 option 객체 안에 값으로
- 운영 환경에 따라 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용합니다.
- ES6 Promise API를 사용합니다.
- HTTP Methods를 사용합니다.
- Request의 응답을 자동으로 JSON 형태로 만듭니다.
- try-catch, then-catch 문법
- GET, POST, DELETE, PUT&PATCH

const option = {
   url = '요청할 주소'
   method:'POST',
   header: {
     'Accept':'application/json',
     'Content-Type': 'application/json';charset=UTP-8'
   },
   data: {
      name: 'test'
   }
   
   axios(options)
      .then(response => console.log(response))
}

참고: 코드 부분은 Claude3.5
https://ko.wikipedia.org/wiki/Ajax
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
https://axios-http.com/kr/docs/intro

2. forward, redirect 차이 조사

Forward와 Redirect는 웹 애플리케이션에서 사용자의 요청을 다른 리소스로 전달하는 두 가지 다른 방식입니다.

1) Forward:

특징:

서버 내부에서 처리됩니다.
클라이언트는 forward가 발생했음을 알지 못합니다.
URL이 변경되지 않습니다.
요청과 응답 객체가 그대로 유지됩니다.
동일한 서버 내의 자원으로만 forward할 수 있습니다.

과정:

클라이언트가 서버에 요청을 보냅니다.
서버는 요청을 받아 내부적으로 다른 리소스로 요청을 전달합니다.
최종 리소스가 클라이언트에게 응답을 보냅니다.

사용 예(Java Servlet):

request.getRequestDispatcher("/other-resource").forward(request, response);

2) Redirect:

특징:

클라이언트 측에서 새로운 요청이 발생합니다.
클라이언트는 redirect가 발생했음을 알 수 있습니다.
URL이 변경됩니다.
새로운 요청과 응답 객체가 생성됩니다.
다른 서버의 자원으로도 redirect할 수 있습니다.

과정:

클라이언트가 서버에 요청을 보냅니다.
서버는 클라이언트에게 새로운 URL로 이동하라는 응답(주로 302 상태 코드)을 보냅니다.
클라이언트는 새로운 URL로 다시 요청을 보냅니다.
새로운 URL의 리소스가 클라이언트에게 응답을 보냅니다.

사용 예(Java Servlet):

response.sendRedirect("<https://example.com/new-page>");

주요 차이점:

요청 횟수: Forward는 1번, Redirect는 2번의 요청이 발생합니다.
URL 변경: Forward는 URL이 변경되지 않지만, Redirect는 URL이 변경됩니다.
성능: Forward가 일반적으로 더 빠릅니다(요청이 1번이므로).
데이터 공유: Forward는 request 객체를 통해 데이터를 공유할 수 있지만, Redirect는 새로운 요청이므로 불가능합니다.
서버 범위: Forward는 동일 서버 내에서만 가능하지만, Redirect는 다른 서버로도 가능합니다.

사용 상황:

Forward: 내부 처리 로직에 따라 다른 리소스로 처리를 위임할 때 사용합니다.
Redirect: 사용자의 브라우저 주소를 변경해야 하거나, 외부 리소스로 이동해야 할 때 사용합니다.

요약하자면 둘 다 사용자를 다른 페이지로 이동시키는 기능을 수행하지만, 그 과정과 결과에서 차이가 있습니다. Forward는 서버 내부에서 "조용히" 페이지를 전환하는 반면, Redirect는 브라우저에 새로운 페이지로의 이동을 명시적으로 지시합니다.

참고 : https://m.blog.naver.com/yl9517/222458464088
https://dev-handbook.tistory.com/35
http://www.differencebetween.net/technology/difference-between-forward-and-redirect/

3. HTTP조사(request,response)

1) HTTP란?

HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다.즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다. 따라서 HTTP 서버가 80번 포트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 된다.HTTP는 1989년 팀 버너스 리(Tim Berners Lee)에 의해 처음 설계되었으며, WWW(World-Wide-Web) 기반에서 세계적인 정보를 공유하는데 큰 역할을 하였다.

HTTP는 암호화가 되지 않은 평문 데이터를 전송하는 프로토콜이였기 때문에, HTTP로 비밀번호나 주민등록번호 등을 주고 받으면 제3자가 정보를 조회할 수 있었다. 그리고 이러한 문제를 해결하기 위해 HTTPS가 등장하게 되었다.

4. HTTPS, SSL인증서 조사

1) HTTPS란?

HyperText Transfer Protocol over Secure Socket Layer, HTTP over TLS, HTTP over SSL, HTTP Secure 등으로 불리는 HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다. HTTPS는 HTTP와 다르게 443번 포트를 사용하며, 네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 암호화를 지원하고 있다. URL이 https://로 시작합니다.

2) SSL인증서

SSL 인증서는 웹사이트의 신원을 확인하고 암호화된 연결을 설정하는 데 사용되는 중요한 보안 도구입니다. 이는 공개키 기반 구조(PKI)를 활용하며, 공개키, 개인키, 주체 정보, 발급자 정보, 유효 기간 등의 주요 구성 요소로 이루어져 있습니다.
SSL/TLS의 동작 방식은 다음과 같습니다. 먼저 클라이언트가 서버에 연결을 요청하면, 서버는 SSL 인증서를 클라이언트에게 전송합니다. 클라이언트는 이 인증서의 유효성을 확인한 후, 서버와 안전한 암호화 방식을 협상합니다. 이 과정이 완료되면 암호화된 데이터 전송이 시작됩니다.

SSL 인증서는 여러 가지 중요한 장점을 제공합니다. 데이터를 암호화하여 중간자 공격을 방지하고, 웹사이트의 신원을 확인하여 피싱 사이트를 방지합니다. 또한 사용자에게 안전함을 보장하여 웹사이트의 신뢰성을 향상시키며, 검색 엔진 랭킹에도 긍정적인 영향을 미쳐 SEO 개선에도 도움이 됩니다.

참고: https://mangkyu.tistory.com/98
https://developer.mozilla.org/en-US/docs/Glossary/HTTPS
https://developer.mozilla.org/en-US/docs/Web/Security/Transport_Layer_Security
https://www.ssl.com/faqs/faq-what-is-ssl/