자바스크립트 기초 문법 정리

byeol·2023년 4월 26일

XMLHTTPRequest ajax js

이번에 프론트 개발자들과 협업하게 되면서 자바 스크립트에 대해서
정리해야할 필요성을 느끼게 되었습니다.

(이전에 개인 프로젝트를 하면서 주먹구구식으로 했던 것이 계속 마음 속에 남아 있기도 하고)

기억해둬야할 것을 중심으로 정리하겠습니다.

let, const, var 변수선언

var은 같은 Javascript안에 같은 이름의 변수를 선언해도 오류가 나지 않습니다.
따라서 권장하지 않는 방법입니다.

let은 변수를 선언하고 값을 고칠 수 있으나 const는 고칠 수 없습니다.
따라서 const는 상수를 선언할 때 사용합니다.

===, ==

Java 기준에서 '=='가 Javascript에서는 비교할 때 타입을 비교하지 않습니다.
따라서 '10'과 10을 같다고 생각합니다.

'10' == 10 은 true가 반환됩니다.
그러나 '10'===10은 false를 반환합니다.
타입까지의 비교는 ===를 사용합니다.

**

let x =3
let y = 10
console.log(y ** x) // 1000

몇 승을 의미합니다.

in ( key,attribute in {} check)

in은 키 값이 존재하는지
혹은 그 index가 존재하는지
그리고 그 attribute가 존재하는지를 나타냅니다.

forEach(), map(), filter() ,

forEach(), map()

배열의 요소들을 하나씩 들리는 forEach()
map()은 요소들의 값을 하나씩 들려가면 변경
filter()는 조건을 만족하는 처음 발견된 요소를 반환합니다.

object, map

object

위와 같이 선언시 키와 value로 들어갑니다.

object의 메소드 keys(), entries(), values()

map

for의 of

function

class

Promiss

XMLHttpRequest

브라우저는 주소창이나 HTML의 form 태크 또는 a 태크를 통해 HTTP 요청 전송 기능을 기본 제공합니다. 자바스크립트를 이용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용해야 합니다. Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공합니다.

객체 생성

const xhr = new XMLHttpRequest();

프로토타입 프로퍼티

readyState
요청상태를 나타냅니다.
해당 프로퍼티로 클라이언트와 서버간 통신의 진행 상태를 알 수 있습니다.
0 = 초기화되지 않은 상태
1 = 로드되지 않은 상태 즉 send() 호출되지 않은 상태
2 = 로드된 상태
3 = 상호작용 상태로 데이터 일부분만 받은 상태
4 = 완료 상태
onreadystatechange : 요청상태가 변경될 때 발생하는 이벤트
responseText : 서버응답에 반환된 본문 콘텐츠
responseXML : 서버 응답이 xml인 경우 프로퍼티에 xml 본문 콘텐츠로 채워진다.
status : 서버 응답이 xml인 경우 이 프로퍼티에 xml 본문 콘텐츠로 채워진다.
- 200 = 성공
- 400 = 페이지를 찾을 수 없음
statusText : 응답으로 반환된 상태 메세지

HTTP 요청 전송

// 0. 객체 셍성
const xhr = new XMLHttpRequest();

// 1. HTTP 요청 초기화 & 비동기 방식으로 Request를 오픈한다
xhr.open('GET', '/users');

// 2. HTTP 요청 헤더 설정 (MIME 타입 지정: json)
xhr.setRequestHeader('content-type', 'application/json');

// 3. Request를 전송한다
xhr.send();

Ajax(Asynchronous JavaScript And XML)

Ajax 는 프로그램 언어는 아닙니다.
JavaScript 의 라이브러리 중 하나입니다.
브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 페이지를 새로고침 하지 않고, 페이지의 일부만을 위한 데이터를 로드하는 기법입니다.
이름에 XML 이 들어가지만, 데이터를 일반 텍스트 또는 JSON 으로 전송하는 것이 일반적입니다.
Ajax는 브라우저에 내장된 XMLHttpRequest 객체를 사용하여 웹서버에서 데이터를 요청하고,
JavaScript 와 HTML DOM 을 이용해 받아온 데이터를 보여주거나 이용한다.

XMLHttpRequest가 아닌 JQuery를 통해 쉽게 구현 가능합니다.

XMLHttpRequest(XHR)를 사용한 코드

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // 요청에 대한 콜백
 if (xhr.readyState === xhr.DONE) { // 요청이 완료되면
   if (xhr.status === 200 || xhr.status === 201) {
     console.log(xhr.responseText);
   } else {
     console.error(xhr.responseText);
   }
 }
};
xhr.open('GET', 'https://localhost:3000'); // 메소드와 주소 설정
xhr.send(); // 요청 전송 
// xhr.abort(); // 전송된 요청 취소

Jquery를 사용한 코드

var serverAddress = 'https://localhost:3000';

// jQuery의 .get 메소드 사용
$.ajax({
   url: serverAddress,
   type: 'GET',
   success: function onData (data) {
       console.log(data);
   },
   error: function onError (error) {
       console.error(error);
   }
});