본문 바로가기

Frontend

 (278)
[JavaScript] 구구단 게임 Math.random(); 0~0.1 사이의 무작위 수를 랜덤으로 추출 Math.ceil(); 내림 var a = Math.ceil(Math.random() * 9); var b = Math.ceil(Math.random() * 9); while (true) { var answer = prompt(`${a} x ${b} = ?`); // 퀴즈 - 정답 창 if (answer == (a * b)) { alert('정답입니다!'); var a = Math.ceil(Math.random() * 9); // 문제 새로 변경 var b = Math.ceil(Math.random() * 9); // 문제 새로 변경 } else { alert('오답입니다!'); } }
[JavaScript] async 함수가 리턴하는 promise 객체 다음의 코드를 실행하면, async function fetchAndPrint() { return 3; } fetchAndPrint(); async 가 붙은 함수는 항상 promise 객체를 return 한다. 따라서, fechAndPrint 함수는 promise 객체를 return 하며, 이는 fulfilled 상태이고 그 작업성공결과는 3이다. 다음 함수를 실행하면, async function fetchAndPrint() { return fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()); } fetchAndPrint(); 리턴된 promise 객체와 동일한 상태, 작업성공결과를 가진 promis..
[JavaScript] async/ await 의 catch/ finally 문 다음과 같이 잘못된 url 주소를 입력한 코드를 실행하면, async function fetchAndPrint() { const response = await fetch('https://jsonplaceholder.typicode.commm/users'); const result = await response.text(); console.log(result); } fetchAndPrint(); 다음과 같이 에러가 발생. [try catch 문] 이 문제를 해결하기 위해 try catch 문을 사용하면, async function fetchAndPrint() { try { const response = await fetch('https://jsonplaceholder.typicode.commm/users'..
[JavaScript] async/ await 다음 코드를 실행하면, // fetch('https://jsonplaceholder.typicode.com/users') // .then((response) => response.text()) // .then((result) => { console.log(result); }); async function fetchAndPrint() { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const result = await response.text() console.log(result); } fetchAndPrint(); 위의 주석처리한 promise chain 코드를 실행했을 때와 똑같이 response 가 잘 출력됨...
[JavaScript] axios fetch 함수는 Ajax 통신을 하는 함수이다. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax 통신을 할 수 있는 방법이 존재하는데, 그것은 바로 axios 라고 하는 외부 패키지를 사용하는 것이다. axios 패키지를 사용한 코드를 보면, axios .get('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log(response); }) .catch((error) => { console.log(error); }); 이 코드는 axios 패키지에서 제공하는 axios 객체를 사용해서 GET 리퀘스트를 보내고 그 리스폰스를 받는 코드이다. 자세히 보면 지금 코드에서 axios.get이라고 쓰여 있는..
[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');..

티스토리툴바