Ajax - Ajax 개요 및 Node.js 기본

Ajax는 자바스크립트처럼 특정한 프로그래밍 언어를 말하는 것이 아니다, 또한 jQuery와 같은 특정한 프레임워크를 지칭하는 것도 아니다. Ajax는 구현하는 방식을 말한다. 

예를 들어 포털 사이트에 로그인을할 때 아이디와 비밀번호를 입력을 하고 로그인 버튼을 누르면 데이터가 서버로 전송이 된다. 서버에서는 아이디와 비밀번호가 일치하는지 확인하고 일치한다면 로그인이 된 페이지를 출력하고 일치하지 않는다면 재입력을 요구하는 페이지를 출력한다. 모바일에서는 페이지가 전환되는 1~2초동안 페이지가 정지가 된다. 

Ajax를 사용하면 페이지를 전환하지 않고 서버에서 데이터를 받아와 사용자에게 보여줄 수 있다. SNS(트위터, 페이스북 등)에서도 사용을 한다. 개발자 입장에서는 Ajax를 사용하는 것은 귀찮은 일이지만, 사용자에게 편의성을 제공하기에 현재 대부분의 웹 사이트가 Ajax를 도입한다.

데이터 전송 방식

서버와 클라이언트가 데이터를 주고 받을 때 특정한 형식을 맞춰야 한다. 데이터 전송 형식에는 3가지 방식이 존재한다. CSV, XML, JSON 형식이 있다.

1. CSV(Comma Separated Value) 형식

CSV(Comma Separated Value)는 각 항목을 쉼표로 구분해 데이터를 표현하는 방식이다. CSV 형색의 특징은 다른 형식들에 비해 짧기 때문에 많은 양의 데이터를 전송할 때 활용하게 된다.

위는 CSV 형식의 문자열이 있을 때 이를 어떻게 분해하는지에 대한 이미지이다. CSV 형식의 문자열을 split() 메서드로 분해한다.

2. XML 형식

CSV 형식은 각각의 데이터가 무엇을 나타내는지 알기가 힘들다. 따라서 대부분의 개발자들가 다른 방식으로 데이터를 표현하는 방법을 찾아냈는데, 이것이 XML 형식이다. XML 형식의 특징으로는 HTML 처럼 태그로 데이터를 표현하는 특징이 있다.

HTML처럼 각각의 태그에 사용자 정의 속성을 넣어 데이터를 표현할 수 있다. 따라서 XML 형식을 이용하면 복잡한 데이터를 전달하는데 좋다. 단점으로는 닫는 태그와 여는 태그등이 쓸데없이 용량을 차지하는 단점이 있다.

3. JSON 형식

방금 살펴본 CSV 형식과 XML 형식의 단점을 모두 보완한 형식이 JSON 형식이다. JSON은 JavaScript Object Notation의 약자이다. 이것은 자바스크립트에서 사용하는 객체 형태로 데이터를 표현하는 방법이다. Ajax를 사용할 때 거이 표준으로 사용되는 데이터 표현 방식이기도 하다.

위의 코드를 보면 알겠지만, 자바스크립트에서 사용하는 객체이다. 다만 JSON에서는 객체, 배열, 문자열, 숫자, boolean 그리고 null 만 들어갈 수 있다. 그리고 문자열은 무조건 큰따옴표("")를 사용해야 한다. CSV 형식과 다르게 가독성이 좋다. 또한 XML 형식보다 적은 용량으로 데이터를 전달할 수 있다.

단점으로는 JSON 형식은 데이터의 양이 많아지면 데이터 추출 속도가 떨어지는 단점이 있어서 데이터의 양이 많다면 CSV 형식을 사용하는 것이 좋다. 지금까지 배운 세 가지의 형식을 정리하면 아래와 같다.

형식	장점	단점
CSV	용량이 적다.	가속성이 떨어진다.
XML	가독성이 좋다.	용량이 크고, 데이터의 양이 크면 분석 속도가 떨어진다.
JSON	용량이 적고, 가독성이 좋다.	데이터의 양이 크면 분석 속도가 떨어진다.

Node.js

Node.js는 자바스크립트를 기반으로 웹 브라우저가 아닌 곳에 쓸 수 있게 만들자는 생각으로 만들어졌다. CommonJS 표준이 작성이 된다. Node.js는 CommonJS 표준에 따라 크롬 V8 엔진을 기반으로 개발된 플랫폼이다. Node.js를 사용하면 웹 브라우저가 아닌 곳에서 자바스크립트로 프로그램을 개발할 수 있다. 

윈도우의 CMD 명령 프롬프트, PowerShell이나 비쥬얼 스튜디오 코드의 터미널을 통해 위의 코드를 Node.js로 실행하면 나오는 결과이다.

Node.js는 기능을 확장하고자 모듈이라는 개념을 사용한다. Node.js에 기본적으로 있는 모듈을 내부 모듈이라고 한다. 

OS 모듈을 추출하는 방법은 Node.js에서 require('os')코드를 실행하면 된다. 추출을 하게 되면 많은 결과가 나오는데 정리하면 아래와 같다.

메서드 이름	설명
hostname()	운영체제의 호스트 이름을 리턴한다.
type()	운영체제의 이름을 리턴한다.
plattform()	운영체제의 플랫폼을 리턴한다.
arch()	운영체제의 아키텍처를 리턴한다.
release()	운영체제의 버전을 리턴한다.
uptime()	운영체제가 실행된 시간을 리턴한다.
loadavg()	로드 에버리지 정보를 담은 배열을 리턴한다.
totalmem()	시스템의 총 메모리를 리턴한다.
freemem()	시스템의 사용 가능한 메모리를 리턴한다.
cpus()	CPU의 정보를 담은 객체를 리턴한다.
getNetworkInterfaces()	네트워크 인터페이스의 정보를 담은 배열을 리턴한다.

외부 모듈은 Node.js가 기본적으로 갖지 않고 개인 또는 단체가 만들어 배포하는 모듈을 말한다. 외부 모듈은 사용하려면 별도로 설치해야 한다. 

위는 HTTP 모듈로 서버를 생성하고 실행하는 과정이다. 위의 예시를 풀어 쓴다면 이렇게 된다.

1. const http = require('http');
앞서 설명했듯이 Node.js의 기능은 모듈이라고 하는 외부 어플리케이션 혹은 라이브러리를 통해 제공이 된다. 이코드는 그런 모듈들 중 가장 기본적인 HTTP 모듈을 로드해서 로컬 상수에 할당하는 코드이다. 별로의 프레임워크를 사용하지 않는 다면 대부분 이 코드로 시작하게 된다.

2. http.createServer((req, res) {...}
createServer 메서드로 새로운 서버를 생성하고, 매개변수로 아무런 이름이 없는 익명 함수가 전달이 된다. 각각 서버 요청(req, request)와 서버 응답(res, response)를 의미한다.

3. res.writeHead(200, {'Content-Type': 'text/plain'});
서버 응답 매개변수에 writeHead라는 메서드를 활용하여 응답 상태와 응답 헤더를 보내고 있다. 응답 해더에는 Content-Type 외에도 다른 정보들을 포함시킬 수 있다.

4. res.end('Hello, World!\n');
end 메서드로 통신의 종료를 알린다. end 메서드는 문자열뿐만 아니라 버퍼가 될 수 있는 데이터 청크도 넣을 수 있다. 또한 문자열의 경우 두 번째 매개변수로 문자열의 인코딩을 지정할 수 있다. 기본값은 UTF-8이므로 이외에 인코딩을 써줘야 할 경우에만 입력하면 된다.

5. ...}).listen(1337, '127.0.0.1');
createServer와 이에 매개변수로 전달된 익명함수를 종결하고 listen 메서드로 해당 포트(1337)로 들어오는 연결들을 대기한다. 이 때 listen 메서드는 반드시 생성된 서버 뒤에 붙어야 하며 포트를 명시해줘야 한다. 두 번째 매개변수인 호스트 네임(127.0.0.1)은 반드시 제공하지 않아도 되는데, 이 경우엔 http://localhost와 같은 웹 주소로 연결을 허용한다. 이 listen은 Node.js의 알파이자 오메가라고 할 수 있는 비동기로, http 연결이 맺어지기 전까지 프로그램 실행을 차단하지 않는다.

또 웹 서버를 만들때는 express라는 외부 모듈을 사용한다. 

위는 express 모듈을 이용해 만든 예시이다. 위에도 있었지만 포트는 컴퓨터와 컴퓨터를 연결하는 정보의 출입구 역할을 한다. 포트는 0번부터 65535번까지 존재한다. 범위 내에서 자유롭게 포트를 변경해도 문제가 없다. 서버를 종료할 때는 Ctrl + C 를 눌러 종료하고 화살표 위(↑) + Enter 키를 누르면 복원할 수 있다.

JavaScript-01.js

0.00MB