본문 바로가기

JavaScript

 (83)
[JavaScript] Ajax [Ajax] Ajax는 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해주는 기술이다. Ajax는 Asynchronous JavaScript And XML의 줄임말로, 이는 자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 처리한다는 뜻) 리퀘스트를 보내고 리스폰스를 받는데 기반이 되는 기술들의 집합을 의미한다. 예를들어, 구글 맵 웹페이지를 들 수 있는데 구글 맵에서 서울특별시 중구 을지로 쪽을 보다가 '명동 성당'의 정보가 보고 싶어졌다고 가정하면 명동 성당 아이콘을 클릭하면 됨. 이렇게 명동 성당을 클릭했을 때, 초창기의 웹이었다면 아..
[JavaScript] Promise 객체 만들기 [Promise 객체 만들기] new Promise () : 새로운 promsie 객체를 생성하는 코드 위 함수를 가르켜 'Executor' 함수 라고 한다. 여기서 두 파라미터 resolve, rejected 는 특별한 기능을 가지고 있음. resolve : 생성될 promise 객체를 fulfilled 상태로 만들 수 있는 함수가 연결 됨. reject : 생성될 promise 객체를 rejected 상태로 만들 수 있는 함수가 연결 됨. [promise 객체가 fulfilled 인 경우] const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('success'); }, 2000); }); p.then((result) => { ..
[JavaScript] Arrow Function [일반 함수 표현] 다음 코드를 실행하면, const getTwice = function(number) { return number * 2; }; console.log(getTwice(5)); const myBtn = document.querySelector('#myBtn'); myBtn.addEventListener('click', function () { console.log('button is clicked!'); }); 10 이 출력된다. [Arrow Function 표현] const getTwice = (number) => { return number * 2; }; console.log(getTwice(5)); const myBtn = document.querySelector('#myBtn');..
[JavaScript] finally 메소드 [finally 메소드] 어떤 작업의 성공 유무 (fulfilled, rejected) 에 상관없이, 항상 실행하고 싶은 콜백이 있을 때 사용하는 메소드 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }) .catch((error) => { console.log(error); }) .finally(() => { console.log('exit'); }); 어떤 경우에도 exit 이 출력되며, .finally 메소드 안의 콜백은 작업성공 결과, 작업실패 정보가 필요 없어서 파라미터가 필요하지 않음. 위와 같은 결과가 출력됨..
[JavaScript] 마지막에 써야하는 catch 메소드 [catch 메소드가 마지막에 있지 않은 경우] 다음 코드를 실행시키면, fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error); }) .then((result) => { console.log(result); throw new Error('test'); }); fetch 함수는 정상실행되어 response 가 잘 전달 되었으나, 그 뒤에서 발생한 에러는 잡지 못했음. rejected 상태의 promise 가 남고 딱히 처리를 안해주면 웹 브라우저는 에러로 인식함. [catch 메소드가 마지막에 있는 경우] 다음과 같이 catch 함수..
[JavaScript] catch 메소드 rejected 상태가 되면 실행할 콜백을 설정하는 방법으로는 다음과 같은 방법이 있음. 1. then 메소드의 두번째 콜백함수를 설정 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text(), (error) => { console.log(error); }) .then((result) => { console.log(result); }); 2. catch 메소드 활용 : promise 객체가 rejected 상태가 되면 실행할 콜백을 등록하는 메소드 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) ..
[JavaScript] rejected 상태에서 실행할 콜백 첫번째 then 메소드는 두개의 콜백을 가지고있음. 첫번째 콜백은 fulfilled 상태가 되면 실행할 콜백이고, 두번째 콜백은 rejected 상태가 되면 실행할 콜백임. 만약 promise 객체가 rejected 상태가 됐을 때 실행할 콜백을 설정하고 싶다면, then 메소드의 두번째 파라미터에 원하는 콜백을 넣어주면 됨. 첫 번째 콜백 : promise 객체가 fulfilled, 작업 성공 결과를 가져옴 두 번째 콜백 : promise 객체가 rejected, 작업 실패 정보 가져옴 [작업 성공 : 첫번째 콜백] fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text(), (error) => { con..
[JavaScript] Promise Chaining [Promise Chaining] 이처럼 fetch 함수에서 3번 콜백함수가 실행되면 4번 콜백함수가 이어서 실행되는데, then 메소드 뒤에는 이런식으로 계속해서 then 메소드를 붙이는 것이 가능하다. 다음 코드를 실행해보면, console.log('시작!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { const users = JSON.parse(result); return users[0]; }) .then((user) => { console.log(user); const { address } = user; return address; }) .the..

티스토리툴바