AJAX 개념정리 - Urlencoded와 Multipart type 이후 AJAX

 

0. 잡설

정보처리기사 24년 3회 실기에서 관련된 문제가 나왔었다.

 

네이버블로그나 티스토리블로그 등을 보면

URL의 구조에 대해서 묻는 문제가 있었는데,

순서대로

프로토콜(Scheme) :// Host Address:포트번호 (Authority) 

/ 리소스 디렉토리(Path) / 브라우저의 전달 파라미터 (Query) # html 내부 정보(fragment)

이런 구조였다 아마?

 

1. urlencoded

 

이전 과정에서

Express의 urlencoded 미들웨어를 이용하여  

request를 처리하고 분석하는 과정을 배웠다.

 

2. applcation/x-www-form-urlencoded 타입

 

기본적으로 HTTP에서 클라이언트-서버 간의 데이터통신과정은

application/x-www-form-urlencoded 라는 컨텐츠 타입(Content-type)을 사용한다.

application은 text, image등과 함께 애플리케이션에 의해 처리되는 데이터 형식이며

x는 extended, from은 HTML의 <form> 태그, urlencoded는 URL형식의 인코딩을 의미한다.

 

name=John+Doe&age=25&city=New+York

 

데이터를 key:value 형태로 전송하며, 이러한 여러개의 데이터들은 &으로 연결된다. 

간혹 카톡에서 구글url을 전달하면서

이러한 쿼리문자열(Querry String)을 잔뜩달아서 매우 긴 url을 전달하는 사람들이 있는데,

문제의 원인이 이 쿼리문자열에 있다고 보면 된다.

 

3. multipart/form-data 타입

 

그리고 이러한 Urlencoded 형태의 쿼리를 이용해서는

바이너리 데이터를 보내기에 부적합하다. 이미지나 PDF파일등에 대해서..

key:value로 보내는 것은 비효율적이다.

 

그래서 이러한 이미지나 PDF같은 파일들에 대해서는

application/x-www-form-urlencoded 타입이 아닌..

multipart/form-data 타입으로 서버에 데이터를 전달한다.

 

 

4. HTML에서 form의 enctype 설정

 

HTML상에서 file typle으로 유저로부터 이미지파일을 업로드 받아 form을 작성하고

action의 encrpyt type설정을 디폴트 값인 x-www-form-urlencoded가 아닌

multipart/form-data 로 설정해줘야 한다.

 

아니면 서버단에서 손상된 파일을 전송받는다.

바이너리파일을 urlencode하여 전송하기 때문이다.

 

<form action = "/profiles" method="POST" enctype="multipart/form-data">
	<div class="form-control">
    	<label for="username">User name</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div class="form-control">
    	<label for="username">User image</label>
        <input type="file" id="image" name="image" required accept="image/jpg,image/png">
    </div>
    <button class="btn">Save User</button>
</form>

 

 

5. app.js에서 multer 패키지 사용

 

서버사이드에서는

자바스크립트에 multer 패키지를 설치하여 이러한 파일을 업로드하고 저장할 수 있다.

npm install --save multer

 

const express = require('express');
const multer = require('multer');

...

const storageConfig = multer.diskStorage({
	destination : function(req, file, cb){
    	cb(null, 'images')
    },
    filename: function(req, file, cb){
    	cb(null, Data.now() + '-' + file.originalname);
    }
});
const upload = multer({dest:'images'}); // ./images 디렉토리를 저장디렉토리로 설정
const router = express.Router();

...

// upload의 single file에서 'image'옵션을 미들웨어로 사용하여 라우팅
router.post('/profiles', upload.single('image'), function(req, res){
	const uploadedImageFile = req.file;
    const userData = req.body;
});

 

 

 

6.

 

AJAX

 

AJAX는 Asynchronous Javascript And XML의 두문자어(Acronym)이다.

자바스크립트를 이용한 비동기적 Http Request 를 의미한다.

 

브라우저에서는 XMLHttpRequest와 fetch함수를 빌트인 기능으로 제공하며

이를 이용하여 브라우저의 app.js에서 JS코드를 작성하여

서버에 HTTP요청을 보낼 수 있다.

 

그 동안에는 브라우저가 GET이나 POST request를 URL에 보내고,

서버에서 라우터로 받아서 정해진 작업을 수행하여 response를 받아왔는데,

그걸 놔두고 AJAX를 쓸까?하는 의문이 든다.

 

7.

 

기존의 웹사이트가 불편했던 점은

request와 response를 받아온 다음에는 항상 새로운 페이지를 로딩했다는 점이다.

request를 요청하고, 새 HTML 페이지를 반환받는 것은 불편하다.

 

URL을 통해 Get된 페이지 

EJS를 활용한 새롭게 렌더링 된 페이지, 다른 URL로 리다이렉트된 페이지..

항상 페이지를 Reload해야했다.

 

8.

가령 게시판의 새로운 댓글을 실시간으로 확인하고 싶은데..

새로운 댓글을 확인하기 위해

해당 웹페이지의 글, 게시글 목록, 광고데이터 등의 데이터까지 

굳이 새로 받아와야할 필요가 있을까?

 

댓글에 해당하는 데이터만 받아오고 싶다.

그게 효율적일 것 같다.

여기서 AJAX를 쓰면 된다.

 

9.

브라우저 사이드의 app.js에서 동일한 JS Script Code만을 가지고

필요한 부분 데이터만을 서버와 통신하고

HTML 파일 전체를 리로딩할 필요없이 웹페이지를 수정하고 제공하는 방법이

AJAX인 것이다.

 

10.

XML과 JSON

 

브라우저에서는 AJAX와 관련된 두가지 빌트인 기능을 제공한다.

XMLHttpRequest 객체와 fetch함수 이다.

 

이제는 자주 쓰이지는 않는 XML이지만,

먼저 XML부터 알아볼 필요가 있다.

 

XML은 Extensible Markup Language의 약어이다.

<post-comment>
    <title>It's title</title>
    <comment-text> does xml data sent well </comment-text>
</post-comment>

 

원시적인 HTML처럼 보이는 형태이며 파싱하기 편하지만 직관적이지는 않은 형태이다.

HTML도 XML기반으로 만들어졌지만, HTML은 표준이 되었고

XML는 너무 장황(verbose)해서 사용되지 않는다.

 

JSON형식은 압축되고 간단한 방식이다.

key-value 형식으로 직관적이고, 파싱하기도 쉽다.

{
    "title":"This is my title!",
    "conmmentText" : "does json data sent well?"
}

 

그래서 요즘 웹개발에서는 JSON파일을 표준으로 애용한다.

 

11.

 

JSON은 텍스트파일이며, 규칙을 가지고 구조화된 텍스트 파일이다.

 

주의할 점은 데이터를 저장할 때, 큰따옴표(")로 래핑해야하며

작은 따옴표(')는 사용하면 안된다. 이부분이 JS와 다르다.

 

그리고 숫자, 불리안, nested array같은 데이터타입도

JSON에서는 지원한다.

왠만한 컴퓨터상의 데이터들은 JSON으로 표현된다.

 

12.

 

그럼에도 불구하고, 왜 XML을 설명하고

빌트인 기능으로 XMLHttpRequest가 계속 나오느냐..

XML이 이제는 더이상 쓰이지 않더라도

XMLHttpRequest 객체는 JSON파일에 대해서도 완벽히 작동하기 때문이다.

 

그래서 태세우스의 배나, 홍철없는 홍철팀처럼 

XML없는데 XML과 관련된 개념이 계속해서 튀어나온다.

 

AJAX라는 용어는 구식이다.

Asynchronous JavaScript and XML라는 단어들 중에서

 

Async의 비동기라는 뜻은 실제로 비동기적으로 통신하니 맞는 말이다.

하지만 유즘 시대에는 XML파일을 더이상 사용하지 않고 JSON만을 사용하기에

AJ는 유효한데 AX는 별의미가 없는 상황이다. 

 

13.

어쨌든

그래서 AJAX를 배울 때에는 

이러한 XMLHttpRequest 객체에 대해 먼저 알아보고,

 

Modern HTML에서 fetch()함수를 이용해서 어떻게 XMLHttpRequest 객체를

대체하는지 배우는 방향으로 학습을 하게 된다.

 

 

14.

 

개념은 여기까지고

AJAX의 GET메소드와 POST메소드가 어떻게 이뤄지는지 

튜토리얼을 진행하자.