[비트캠프] 29일차(6주차4일) - AJAX 개요

 

15puzzle 발표

 

유용한 기능 정리

// 배열을 fill(값) 의 값으로 채운다. 값이 없으면 undefined로 채운다.
Array(cnt).fill()

// 특정 태그 앞에 태그를 붙인다.
parent.insertBefore(moveElement, standardElement)

// puzzleList를 배열로 복사해서 랜덤하게 섞는다.
newList = Array.from(puzzleList).sort(() => Math.random() - 0.5)

// 배열 내부 item을 하나씩 가져와 함수를 실행한 결과의 배열 다시 저장한다.
newList.map((li) => puzzle.append(li));

// string type 변수 앞에 + 붙이면 number type으로 변한다.
+str

// && 좌변이 true 일 때 우변이 실행된다.
(result.indexOf(false) === -1) && alert("Complete!")

 

 

 

AJAX (Asynchronous Javascript And XML)

 

 

웹페이지 가져오기

HTTP Client(Web Browser)가 HTTP Server(Web Server)에게:

1. HTML 요청 하면 응답 받아 HTML 파일을 생성한다.
2. CSS 요청 하면 응답 받아 CSS 파일을 생성한다.
3. JavaScript 요청 하면 응답 받아 JS 파일을 생성한다.
4. Image 요청 하면 응답 받아 Image 파일을 생성한다.

이를 모아 렌더링해서 화면에 표현한다. 이것을 Application 이라 한다. Application에 소속된 JS는 메모리를 공유한다.

 

HTML 문서에 연결된 자원들을 추가적으로 가져온다. → 요청이 추가적으로 발생!

 

 

웹 페이지와 애플리케이션

client가 server에: HTML 요청 하면 응답 받아 HTML 파일을 만든다. 연결 자원 요청하고 응답 받는 것을 반복한다.

이를 모아 렌더링 해서 화면에 표현한다.

 

HTML 요청 하면 응답 받는데 이걸 반복하며 추가 자원 요청/응답 한다. 이를 HTML, CSS, JS, Image 파일로 만들어 렌더링하여 화면으로 표현한다.

 

각 화면이 하나의 Application 이다. Application의 기준은 URL이다.

 

주소창에 URL 입력하면 요청/응답 진행되고 HTML, CSS, JS, Image... 를 받는다. 이를 렌더링하는데 Application이라 한다. 하나의 Application은 메모리를 공유한다.

그러나 한 Application에서 다른 Applicaiton의 메모리에 접근할 수 없다. 보안상 불가한데 이를 Sandbox로 동작한다고 한다.

 

 

AJAX (Asynchronous Javascript And XML)

현재 App의 실행을 유지한 상태에서 서버에 *자원을 요청하는 기술 (*자원: HTML, CSS, Javascript, XML, JSON, ...)

 

Client 에서 HTTP를 이용하여 ①요청을 Server1로 하면 ② 응답을 받고 받아온 자원을 ③ 실행한다. 이를 App.이라 한다.

App. 실행 중에 ④ 요청하여 ⑤ 응답 받고 받은 자원을 ⑥ 적용 한다.

 

여기서 Server2로 요청을 할 수 없다. HTML을 다운로드 받은 서버로만 AJAX 요청을 할 수 있다. 이를 "cross-domain 제약"이라 한다.

해결 방법은 CORS (Cross *Origin Resource Sharing)  (*Origin: HTML을 받은 원래 서버)

응답 헤더에 다음 항목 추가한다 : Access-Control-Allow-Origin

 

 

AJAX를 다루는 API

new XMLHttpRequest() 는 AJAX 요청이 필요한 도구를 준비시키는 생성자이다.

 

xhr.open("GET", "a.html", false) 로 HTTP 서버와 연결한다.

GET: HTTP 요청 메서드. 예) GET, POST, HEAD, PUT, DELETE, ...,

a.html: 요청하는 자원의 URL

false: 비동기 여부

 

xhr.send() 로 HTTP 서버에 요청 정보 보낸다.

→ 서버가 응답하면 리턴한다 (Synchronous 요청 일때)

→ 서버 응답과 상관없이 즉시 리턴한다 (Asynchronous 요청 일때)

 

xhr.responseText 는 응답 데이터를 담은 프로퍼티이다.

 

 

AJAX 구동 시스템

127.0.0.1:5500 서버는 VSCode에서 실행한다. client가 ① 요청하면 HTML을 ② 응답 받는다.

127.0.0.1:8000 서버는 NodeJS에서 실행한다. client가 ③ 요청하면 HTML을 ④ 응답 받는다. 그리고 이를 VSCode에서 받은 HTML에 ⑤ 출력한다.

 

 

일반요청

일반 요청은 클릭시 바로 창 띄운다.

// ex07\exam01-0.html

<button id="btn1">요청</button><br>
<textarea id="ta" cols="80" rows="10"></textarea>

<script>
"use strict"

document.querySelector("#btn1").onclick = () => {
	// 웹브라우저가 지정한 URL로 요청을 수행한다.
  window.location.href = "http://www.naver.com";
};

 

 

NodeJS와 Express 라이브러리

NodeJS 로 app.js를 실행하여 미니 웹서버를 생성 및 실행하려 한다. 이를 위해 app.js가 있는 폴더에 Express라는 외부라이브러리 다운로드 및 장착 해야한다.

App에 Express 라이브러리를 장착하는 방법은 다음과 같다.

# App 폴더에 라이브러리 다운로드
$ npm install express --save
# Node Package Manager. NodeJS 용 라이브러리를 자동으로 다운로드
# express: 라이브러리 이름
# --save: 설정 파일에 라이브러리 정보 추가 → package.json ← 생성하려면 $ npm init

 

 

NodeJS Application 구조

• 노드 App. 디렉토리/
  • app.js, ..., *.js ← entry point (진입점, 프로그램 시작 파일)이라 한다.
  • package.json ← NodeJS App. 설정 파일이다. App. 설명, 제작자, 라이센스, 의존 라이브러리 정보 등... 들어있다.
  • node_modules (npm install 명령을 실행할 때 자동 생성된다. git repo.에 백업하지 말라! 반드시 .gitignore 파일에 등록할 것!)
    • express 등이 있다. ← 다운로드 받은 라이브러리 폴더들이다.

 

npm install 라이브러리명

$ npm install 라이브러리명

위 명령은 다음과 같다.

해당 이름을 가진 라이브러리를 다운로드 한다.

① node_modules 폴더가 없으면 생성한다.

② 라이브러리가 없으면 다운로드 한다. 설정된 조건에 따라 버전을 검사해서 적절한 버전을 다운로드 한다.

 

 

npm install 라이브러리

$ npm install #라이브러리명

위 처럼 라이브러리명 안줄 경우 다음과 같다.

① 작업 폴더(명령을 실행하는 폴더)에서 package.json 파일을 찾는다.

② 라이브러리가 없으면 다운로드 한다. 설정된 조건에 따라 버전을 검사해서 적절한 버전을 다운로드 한다.

• node_modules 폴더가 없으면 생성한다.
• 라이브러리가 없으면 다운로드 한다. 설정된 조건에 따라 버전을 검사해서 적절한 버전을 다운로드 한다.

 

명령 프롬프트에서 다음과 같이 서버 가동한다.

C:\Users\bitcamp\git\bitcamp-ncp\javascript\ex07>node app.js
3000번 포트에서 서버 시작했음!

 

 

npm 사용

① npm init  // package.json 생성한다.

② npm install 라이브러리 --save  // 라이브러리 다운로드한다. --save는 라이브러리 정보를 package.json에 등록하는 옵션이다. 필요할 때마다 여러번 반복한다.

위 두 가지는 처음 딱 한번 수행하는 명령어이다.

           ↓

③ npm install

이는 Git Repo.에서 프로젝트를 가져온 후 한 번만 실행한다.

 

 

AJAX - XMLHttpRequest()

XMLHttpRequest()
=> 동기/비동기 HTTP 요청을 할 때 사용한다.
=> 전체 페이지를 갱신하지 않고 페이지의 일부만 갱신하는 용도로 쓴다.
=> 서버는 요청에 대한 응답으로 HTML 일부 코드나 XML, JSON 데이터를 전송한다.
=> 이런 기법을 AJAX(Asynchronous JavaScript And XML)이라 부른다.

// exam01-1.html

<button id="btn1">요청</button><br>
<textarea id="ta" cols="80" rows="10"></textarea>

<script>
    "use strict"

    // 버튼을 클릭할 때 서버에 HTTP 요청하여 응답 결과를 textarea 태그에 출력한다.
    var ta = document.querySelector("#ta");

    document.querySelector("#btn1").onclick = () => {

        //1) AJAX 객체 준비 
        //한 번 사용후 기존 데이터 지우고 사용해야 하므로 외부에 선언하지 않고 내부에서 재정의해서 사용한다.
        var xhr = new XMLHttpRequest();

        //2) 서버에 소켓 연결(동기 방식으로 요청)
        // => 1번 파라미터: HTTP 요청 method. ex) GET, POST, HEAD ...
        // => 2번 파라미터: URL
        // => 3번 파라미터: 비동기 여부
        // 동기: 순차 진행, 비동기: 동시 진행
        xhr.open("GET", "http://127.0.0.1:3000/exam01-1", false);

        //3) 서버에 HTTP(규칙에 따라) 요청을 보낸다.
        // => 동기 방식으로 연결되었을 경우 서버에서 응답할 때까지 리턴하지 않는다.
        xhr.send();

        //4) 서버가 응답한 콘텐트를 꺼낸다.
        ta.value = xhr.responseText;
    };

주의! MIME Type 오타시 다운로드 하라는 창 뜬다.

// app.js

// express 라이브러리 로딩하기
const express = require('express');
const port = 3000;  // 웹서버 포트 번호

// express()를 호출하여 웹서버를 준비한다.
const app = express();

// 클라이언트 요청에 대해 호출될 메서드를 등록
app.get(                    // GET 요청이 들어왔을때 호출될 메서드 지정
  '/exam01-1',              // 요청 URL
  (req, res) => {           // 요청 핸들러: 요청이 들어왔을때 호출되는 메서드
    res.set('Access-Control-Allow-Origin', '*');  // CORS 문제 해결
    res.set('Content-Type', 'text/plain;charset=UTF-8');  // Content-Type 설정, MIME Type 설정 및 charset 설정 한다.
    res.send('Hello!');
  }
);

// 웹서버 실행하기
app.listen(
  3000,  // 포트 번호 지정
  () => {
    console.log(`${port}번 포트에서 서버 시작했음!`);
  }  // 서버가 시작되었을 때 호출될 함수 = 리스너 = 이벤트 핸들러

);

개발자 도구 - Network - exam01-1 선택 - Headers - Response Headers 에 Access-Control-Allow-Origin: * 로 확인된다.

 

AJAX : "Hello!"

위의 Server 그림에서

VSCode 에서 실행하는 서버는 localhost:5500

NodeJS 에서 실행하는 서버는 localhost:3000

 

아래 Client 그림에서

VSCode 서버로 ① 요청 한다. exam01-1.html을 ② 응답 받는다.

NodeJS 서버로 ③ AJAX 요청 한다. ④ 응답 (+Access-Control-Allow-Origin : CORS 문제 해결) 받는다.

응답받은 "Hello!" 를 exam01-1.html 에 ⑤ 적용 한다.

 

 

 

---

 

조언

 

*알고리즘 시험 통과해도 발표력 떨어지면 합격 바로 직전 면접에서 떨어질 수 있다.

 

 

---

 

과제

 

/