[Javascript] Ajax / JSON-Server

2022. 4. 2. 00:31

#1. Ajax

1. Ajax의 개념

1) Ajax란?

Ajax란 Asynchronous Javascript And XML의 약자이다. (비동기식 자바스크립트와 XML)
- 에이잭스, 아작스, 아약스 등등 부르는 방법은 많다. (Ajax 만든 개발자가 아무렇게나 부르라고 했다고 한다.)
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나이다.
웹 페에지 전체를 다시 로딩하지 않고도 서버와 통신하여 웹 페이지의 일부분만 갱신할 수 있다.
- 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용한다.
Ajax는 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능이며, 본질적인 의미는 파일을 읽어오는 것이다.

※ 예전에는 XML을 사용했지만, 최근에는 데이터를 경량화한 JSON을 많이 사용한다.

비동기식이란? 동기식과는 다르게 비순차적으로 일이 진행됨을 뜻하며, 여기서는 웹페이지를 리로드하지 않고 데이터를 불러오는 방식을 말한다.
클라이언트란? 서버에서 정보를 가져와 사용자에게 보여줄 수 있고, 사용자와 상호작용을 할 수 있는 소프트웨어를 말한다.
서버란? 네트워크 상에서 접근할 수 있는 프로그램이자 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램을 말한다.
- 백엔드에서 다뤄지며, 사용자가 직접적으로 사용하지는 않는다.

2) 장점

웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부만을 갱신할 수 있다.
서버 처리를 기다리지 않고 비동기 요청이 가능하다.
웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
웹 페이지가 로드된 후에 서버로 부터 데이터를 받을 수 있다.
백그라운드 영역에서 서버로 데이터를 보낼 수 있다.
수신하는 데이터 양을 줄일 수 있다. (웹페이지의 속도 향상)

3) 단점

HTTP 클라이언트의 기능이 한정되어 있다.
페이지 이동없는 통신으로 인한 보안상의 문제가 있을 수 있다.
스크립트로 작성되므로 디버길이 용이하지 않다.
요청을 남발하면 역으로 서버 부하가 늘 수 있다.
Ajax를 지원하지 않는 브라우저에 대한 문제가 있다. (현재는 거의 모든 브라우저가 지원)
동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

2. 데이터 형식

1) CSV 형식

CSV 형식은 콤마( , )로 데이터의 속성을 나누고 줄바꿈으로 데이터를 나눈다.
용량이 적다는 장점이 있지만, 가독성이 떨어진다는 단점이 있다.

연도,제조사,모델,설명,가격
1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""","",4900.00
1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00
1996,Jeep,Grand Cherokee,"MUST SELL!air, moon roof, loaded",4799.00

2) XML 형식

XML 형식은 CSV 형식의 가독성을 개선하기 위해 나온 데이터 형식이다.
태그로 속성과 데이터를 구분하며, 태그이름은 작성자가 마음대로 지정할 수 있다. (시작태그와 끝태그는 같아야한다.)
가독성은 좋지만 용량이 크며, 데이터가 많아지면 분석 속도가 느려진다는 단점이 있다.

<info>
  <name>김모씨</name>
  <age>21</age>
  <job>학생</job>
  <phone>010-1111-2222</phone>
</info>
<info>
  <name>이모씨</name>
  <age>28</age>
  <job>직장인</job>
  <phone>010-1111-2222</phone>
</info>
<info>
  <name>박모씨</name>
  <age>26</age>
  <job>직장인</job>
  <phone>010-1111-2222</phone>
</info>

3) JSON 형식

JSON 형식은 자바스크립트의 객체 형태로 데이터를 전송하는 형식이다.
XML 형식과 CSV 형식의 단점을 최소화한 형식으로, 현재 가장 많이 쓰이는 형식이다.
가독성도 좋고, XML 형식 보다 용량도 적다는 장점이 있지만, 여전히 데이터 양이 많으면 분석 속도가 느려진다는 단점이 있다.

 {
    "이름": "박모씨",
    "나이": 25,
    "성별": "남",
    "주소": "지구에 있는 대한민국",
    "회사": "서울특별시 강남구 어딘가"
 }

3. 데이터 전송 방식

GET : 지정한 url의 데이터를 열람하기 위한 메서드
- 데이터를 단순히 읽어오는 경우에 쓰인다.
- 데이터 전송량이 POST 방식 보다 적고, url에 정보가 고스란히 담겨 있어 보안에 취약하다.
- 그만큼 사용이 간편하여 대부분의 http 호출에 GET 방식이 사용된다.
POST : 지정한 url에 데이터를 생성하기 위한 메서드
- 데이터를 생성, 수정, 삭제하는 경우 사용한다. (PUT, DELETE의 역할까지 가능)
- 로그인의 경우 사용자의 아이디와 패스워드만 서버에 전송하면 되지만, 그렇게 하면 사용자의 개인정보가 url에 노출되므로 POST 방식을 사용한다.
PUT : 지정한 url의 데이터를 개인하기 위한 메서드
DELETE : 지정한 url의 데이터를 삭제하기 위한 메서드
HEAD : 지정한 url의 헤더 정보를 요청하는 메서드

※ 위 방식 중 GET, POST 방식이 많이 쓰이며, 둘의 차이는 데이터의 변경 유무이다.

4. Ajax 사용하기

1) XMLHttpRequest

자바스크립트에서 Ajax를 구현하려면 XMLHttpRequest 객체를 반드시 생성해야한다.
XMLHttpResquest 객체를 생성한 후 생성된 객체를 통해 Ajax를 구현한다.

// Ajax 기능을 수행하는 통신 객체
const xhr = new XMLHttpRequest();

2) XMLHttpRequest의 메서드

onreadystatechange
- 비동기 통신시 서버와의 통신이 이루어 진 후 동작될 메서드를 말한다.
- 객체의 상태가 변화할 때 마다 호출되는 이벤트
- onreadystatechange 메서드 내에서 조건에 따라 처리하는 방식이 달라질 수 있다.

const xhr = new XMLHttpRequest();

// 보통 콜백함수로 값을 받는다.
xhr.onreadystatechange = e => {
  const ajax = e.target;
};

send( )
- 데이터 교환을 요청하는 메서드.

xhr.send();

open("데이터전송방식", "url주소", [async])
- 서버와 데이터를 교환할 때 필요한 정보를 입력한다.
- 첫번째 파라미터에는 GET, POST 등 데이터 전송 방식을 지정한다.
- 두번째 파라미터에는 데이터를 교환할 서버의 url을 지정한다.
- 세번째 파라미터에는 비동기로 진행할 것인지에 대해서 지정한다.

xhr.open("GET", "example.json");

3) 상태값에 대한 처리

readyState : Ajax 통신의 진행중인 상태를 알려준다.
- 0 : 초기화 되지 않은 상태 (open 메서드가 아직 호출되지 않은 상태)
- 1 (==XMLHttpRequest.OPEND) : open 메서드가 호출된 상태 (send 메서드는 호출되지 않은 상태)
- 2 (==XMLHttpRequest.HEADERS_RECEIVED) : 송신완료, 요청을 시작한 상태 (요청은 하지 않았지만, 데이터가 아직 오지 않은 상태)
- 3 (==XMLHttpRequest.LOADING) : 수신 중인 상태 ( == XMLHttpRequest.LOADING, 데이터가 들어오고 있는 상태)
- 4 (== XMLHttpRequest.DONE): 수신 완료 (데이터를 모두 받은 상태)

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = e => {
  const ajax = e.target;
  
  if(ajax.readyState == XMLHttpRequest.DONE) { //또는 == 4 {
    ..readyState가 4인 경우 실행될 코드..
  }
}

status : 데이터 수신의 성공 여부를 판단해 주는 속성.
- 0 : 로컬로 접근 성공을 의미한다.
- 200 : 해당 url로 접근 성공을 의미한다.
- 400 : 접근 권한이 없음을 의미한다.
- 403 : 접근이 거부되었음을 의미한다.
- 404 : 해당 url이 없음을 의미한다. (404 Not Found)
- 50x : 서버의 오류를 의미한다. (이 경우 프론트엔드에서 고칠 수 없으므로 백엔드에서 처리해야한다)

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = e => {
  const ajax = e.target;
  
  if(ajax.readyState == XMLHttpRequest.DONE { //또는 == 4 {
    if(ajax.status == 200) {
      ..status가 200인 경우 실행될 코드..
    }
  }
}

statusText : status의 상태를 텍스트로 반환한다.
reponseXML : 받은 데이터를 XML 타입으로 변환 시켜준다.

reponseText :
- 받은 데이터를 텍스트 타입으로 변환 시켜준다. (통신을 통해 읽어온 내용)
- 데이터 타입이 string이므로 JSON 객체로 변환이 필요하다.
  - 변환 시 JSON.parse( )를 주로 사용한다.

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = e => {
  const ajax = e.target;
  
  if(ajax.readyState == XMLHttpRequest.DONE { //또는 == 4 {
    if(ajax.status == 200) {
    
      // 통신을 통해 읽어온 데이터의 타입이 string이므로 JSON 객체로 변환
      const json = JSON.parse(ajax.responseText);
    }
  }
}

#2. JSON-Server

1. JSON-Server 의 개념

JSON-Server란?

별도의 서버가 없는 환경에서 작업을 진행하고자 할 때 사용할 수 있는 라이브러리이다.
간단한 JSON 파일 구성만으로 프론트엔드가 Ajax로 연동할 수 있는 테스트 RestfulAPI 서버를 구축할 수 있다.
각 테이블간의 참조무결성 제약조건은 보장되지 않는다.

2. JSON-Server 사용하기

1) 설치하기

npm install -g json-server

-g 는 global의 줄임말이다.
이 옵션이 적용된 경우 특정 폴더에 종속되는것이 아니라 현재 컴퓨터의 사용자 계정에 대해 전역으로 사용할 수 있게 된다.
설치 위치가 명령어 실행 위치와 상관없이 사용자 홈 디렉토리 내의 위치로 지정된다.

※ 설치 에러

위 설치 명령어로 설치 진행 중 에러가 발생하여 설치가 안되었다.
찾아본 결과 명령어 앞에 sudo를 붙이고 다시 설치하면 문제없이 진행 된다.

sudo npm install -g json-server

2) JSON 데이터 만들기

JSON 데이터는 key:value 형식으로 만들어야한다.
Primary Key 역할을 하는 필드의 이름은 반드시 id로 지정되어야 한다. (한글은 안되는 것 같다.)

{
  "table1": [
    {"컬럼1" : "값", "컬럼2": "값", "컬럼n": "값"},
    {"컬럼1" : "값", "컬럼2": "값", "컬럼n": "값"},
    {"컬럼1" : "값", "컬럼2": "값", "컬럼n": "값"},
    {"컬럼1" : "값", "컬럼2": "값", "컬럼n": "값"}
  ],
  "table2": [
    {"컬럼1" : "값", "컬럼2": "값", "컬럼n": "값"}
  ],
  "table3": [
    {"컬럼1" : "값", "컬럼2": "값", "컬럼n": "값"}
  ]
}

3) JSON-Server 가동하기

json-server --watch 데이터파일경로 [--port 사용하려는 포트번호]

//ex.
json-server --watch example.json

JSON-Server 를 가동할 때는 해당 json 파일이 있는 폴더에서 터미널(cmd)을 열어야 한다.
사용하려는 포트번호를 입력하지 않을 경우 기본값으로 3000번에서 열린다.
정상적으로 접근하면 Resource 부분에 Primary key 역할을 하는 부분의 id값이 함께 출력된다. (빨간박스 부분)

url 입력창에 http://localhost:포트번호/테이블이름 형식으로 접근한다.
- JSON-Server로 JSON파일에 접근할 때는 가동중인 터미널(cmd)를 종료하면 안된다.

저작자표시 비영리 변경금지

'국비수업 > JavaScript' 카테고리의 다른 글

[Javascript] CRUD (0)	2022.04.07
[Javascript] Axios / openAPI (0)	2022.04.04
[Javascript] 라이브러리 활용 (0)	2022.04.01
[Javascript] 데이터 읽기, 쓰기 / window 객체 (0)	2022.03.31
[Javascript] Form 요소 (0)	2022.03.28

{ chanCo }