오지이 오지이

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. Fetch API를 사용해서 서버로부터 데이터를 받아오고, 반대로 서버로 데이터를 전송하는 부분을 구현하겠습니다. Fetch API와 XMLHttpRequest의 가장 큰 차이점은 Fetch API는 Promise로 구현되어 있다는 점입니다. 다음은 데이터 조회(GET)입니다. XMLHttpRequest에 비해 훨씬 코드가 간결합니다. 그리고 GET인 경우 따로 HTTP 요청방법을 명시하지 않아도 됩니다. fetch() 함수를 통해서 데이터를 요청하고, 응답이 이루어지면 응답받은 결과는 then() 함수의 인수로 전달받게 됩니다. fetch('https://jsonplaceholder.typicode.com/p..

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위해 사용됩니다. 전체 페이지를 새로 고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있습니다. XMLHttpRequest는 이름에 XML이 붙어서 XML 데이터 통신으로 오해할 수 있는데, 모든 종류의 데이터를 받아올 수 있습니다. # 객체 생성 XMLHttpRequest 객체는 브라우저에서 제공하는 Web API이기 때문에 브라우저 환경에서만 정상적으로 동작됩니다. node.js 환경에서는 제공되지 않습니다. XMLHttpRequest 생성자 함수를 호출해서 생성합니다. const xhr = new XMLHttpRequest(); # 요청 전송 클라이언트(브라우저)에서 서버로 요청을 보내기 위해서는 HTTP Method, 요청..

일반적으로 배열에 저장된 요소에 접근하기 위해서는 배열에 저장된 순서인 인덱스 번호를 사용합니다. function getScores() { return [70, 80, 90]; } let scores = getScores(); let x = scores[0], // 배열의 인덱스 번호로 데이터에 접근 y = scores[1], z = scores[2]; Array Destructuring은 배열에 저장된 요소를 분해해서 배열의 순서에 따라 변수를 정의해서 사용할 수 있습니다. // 선언 변수가 배열 문법처럼 보이지만, 배열이 아니다. 배열 리턴 값을 순서대로 받기 위한 용도일 뿐. let [x, y, z] = getScores(); console.log(x); // 70 console.log(y); //..

Object Destructuring은 Object에 저장된 데이터를 분해하여 필요한 데이터만 바로 추출해서 사용할 수 있도록 합니다. function getPerson() { // Object로 데이터를 반환하는 함수 return { firstName: "John", lastName: "Doe", age: 37, email: "john@gmail.com", city: "New York", country: "USA" } }; let {fristName, lastName} = getPerson(); // 사용하려는 데이터가 저장되어 있는 키 이름만 정의하면 Object에서 해당 키를 갖는 값을 바로 추출해서 사용할 수 있음 console.log(firstName); // John console.log(la..

Spread Operator는 배열, 문자열과 같이 iteration 형태의 데이터를 요소 하나하나로 모두 분해해서 사용할 수 있게 해 줍니다. let arr1 = [4, 5, 6]; let arr2 = [1, 2, 3]; let arr3 = [...arr2, ...arr1]; // 배열의 데이터를 요소 하나하나로 모두 분해해서 새로운 배열에 요소로 할당 console.log(arr3); // [1, 2, 3, 4, 5, 6] let cd = "CD"; let alphabet = ['A', 'B', ...cd]; // 문자열을 캐릭터 한 글자씩 모두 분해해서 새로운 배열에 요소로 할당 console.log(alphabet); // ['A', 'B', 'C', 'D'] 참조 | 바닐라 자바스크립트

Object에 데이터를 저장하려면 키-값을 한 쌍으로 하여 데이터를 저장해야 합니다. 이때 키는 문자형으로 인식됩니다. 다음과 같이 person이라는 Object에 firstName: firstName, lastName: lastName 형태로 데이터가 저장되어 있습니다. 이때 키로 잡힌 firstName은 문자 그대로를 의미하며, 키에 할당된 값은 firstName인 변수 firstName에 할당된 값이 "John"이 됩니다. Object에서는 변수에 할당된 값을 키로 치환해서 사용할 수 없습니다. let firstName: "John"; let lastName: "Doe"; let person = { firstName: firstName, lastName: lastName }; 하지만 Object L..

일반적으로 문자열을 병합하기 위해서는 더하기(+) 기호를 사용합니다. 아래 예제처럼 말이죠. function hello(name) { console.log("Hello " + name + ". Welcome!"); // 문자열을 더하기 기호를 사용해서 하나의 문자열로 합침 } hello("Jeremy"); Template Literals는 변수에 할당된 문자열을 하나의 문자열로 병합할 때, 더하기(+)를 사용하지 않고 하나의 문자열로 만들 수 있도록 해 줍니다. 문자열에 백틱(`)을 사용하고, 문자열 안에서 변수 값에 ${변수명}을 사용하면 더하기(+) 기호 없이 바로 적용할 수 있습니다. 그래서 문자열에 변수의 값을 병합할 때 매우 효율적으로 사용할 수 있습니다. function hello2(name)..

함수를 정의할 때는 다음과 같이 함수 선언식과 함수 표현식을 사용해서 함수를 구현했습니다. // 함수 선언식 function hello(name) { return "Hello" + name; } // 함수 표현식 const hello2 = function (name) { return "Hello" + name; }; 화살표 함수는 함수를 정의하는 새로운 방법입니다. 화살표 함수를 사용해서 함수를 정의하면 함수 선언식이나 함수 표현식에 비해 구문이 짧아진다는 이점이 있습니다. 화살표 함수 내의 this는 언제나 상위 스코프의 this를 가리킵니다. // 일반적인 함수 표현은 아래의 화살표 함수로 쓸 수 있다. const hello3 = (name) => {return "Hello" + name}; // 파..