Portfolio


const 버튼 = document.querySelector('.button');
버튼.addEventListener('click', function(){});

// 버튼.addEventListener('click', '다른 곳에서 짠 함수이름'); // ex('click', helloworld100)
// function helloworld100() {
//    console.log('hello world');
//    console.log('hello world');
// }
// 버튼.addEventListener('click', ()=>{});


function 함수하나(출력){
    console.log('hello');
    출력('world');
}

함수하나(console.log);


let hojun = console.log;
hojun('hello world');


function 로그인(){
    if (로그인성공) {
			이미지로드();
			계좌연동(...계좌연동 이후 일어나는 코드...);
			...
		}
}


user.login(
    id, 
    pw, 
    로그인성공, 
    로그인실패, 
    이미지로드, 
    계좌연동...)


userData.login(
    id, 
    pw, 
    (user) => {
        userData.getData(
            user,
            (userData) => {
                ..콜백에 콜백..
            },
            (fail) => {
                ..콜백에 콜백..
            }
        );
    },
    (fail) => {
        ..콜백에 콜백..
    },
    (user) => { //이미지 로드
        ..콜백에 콜백..
    },
    (user) => { // 계좌 연동
        ..콜백에 콜백..
    },
);


let p = new Promise(function(resolve, reject) {
  // 실행코드
});

// resolve(value) — 작업이 성공적으로 마무리되면 호출, 결과는 value에 담김
// reject(error) — 작업이 실패시 호출, error는 error에 담김


// 쉬운 예제
let p = new Promise(function(resolve, reject) {
    resolve('hello world');
}).then(메시지 => {
    alert(메시지);
    return 메시지.split(' ')[0]
}).then(메시지 => {
    alert(메시지);
    return 메시지[0]
}).then(메시지 => {
    alert(메시지);
});

let p = new Promise(function(resolve, reject) {
    // resolve('hello world');
    reject('hello world');
}).then(메시지 => {
    alert(메시지);
    return 메시지.split(' ')[0]
}).then(메시지 => {
    alert(메시지);
    return 메시지[0]
}).then(메시지 => {
    alert(메시지);
}).catch(메시지 => {
    alert('catch 실행!! :' + 메시지);
});

let p = new Promise(function(resolve, reject) {
    // resolve('hello world');
    reject('hello world');
}).then(메시지 => {
    alert(메시지);
    return 메시지.split(' ')[0]
}).then(메시지 => {
    alert(메시지);
    return 메시지[0]
}).then(메시지 => {
    alert(메시지);
}).catch(메시지 => {
    alert('catch 실행!! :' + 메시지);
});

let p = new Promise(function(resolve, reject) {
    // resolve('hello world');
    reject('hello world');
}).then(메시지 => {
    alert(메시지);
    throw Error("에러 발생!")
    return 메시지.split(' ')[0]
}).then(메시지 => {
    alert(메시지);
    return 메시지[0]
}).then(메시지 => {
    alert(메시지);
}).catch(메시지 => {
    alert('catch 실행!! :' + 메시지);
});

let p = new Promise(function(resolve, reject) {
    // resolve('hello world');
    // reject('hello world');
    resolve('hello world');
}).then(메시지 => {
    alert(메시지);
    throw Error("에러 발생!")
    return 메시지.split(' ')[0]
}).then(메시지 => {
    alert(메시지);
    return 메시지[0]
}).then(메시지 => {
    alert(메시지);
}).catch(메시지 => {
    alert('catch 실행!! :' + 메시지);
});


// 모던자바스크립트 예제
let promise = new Promise(function(resolve, reject) {
  // 프라미스가 만들어지면 executor 함수는 자동으로 실행됩니다.

  // 1초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 'done'이 됩니다.
  setTimeout(() => resolve("끝남!"), 1000);
});
console.log('hello world');
console.log(promise);


// 모던자바스크립트 예제 (살짝 수정)
let promise = new Promise(function(resolve, reject) {
  // 프라미스가 만들어지면 executor 함수는 자동으로 실행됩니다.

  // 1초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 'done'이 됩니다.
  setTimeout(() => resolve("이제야 끝남!"), 10000);
});
console.log('hello world');
console.log(promise);


let promise = new Promise(function(resolve, reject) {
  // 프라미스가 만들어지면 executor 함수는 자동으로 실행됩니다.

  // 1초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 'done'이 됩니다.
  setTimeout(() => resolve(console.log('데이터를 성공적으로 받아옴')), 1000);
});
console.log('hello world');


// 모던자바스크립트 예제 (살짝 수정)
let promise = new Promise(function(resolve, reject) {
  // 1초 뒤에 에러와 함께 실행이 종료되었다는 신호를 보냅니다.
  setTimeout(() => reject("에러에러!!"), 3000);
});


let promise = new Promise(function(resolve, reject) {
  // 1초 뒤에 에러와 함께 실행이 종료되었다는 신호를 보냅니다.
  setTimeout(() => reject(new Error("에러 발생!")), 3000);
});


// 실행하지 마세요. pending에 빠집니다.
let promise = new Promise(function(resolve, reject) {
  console.log('hello world')
});


new Promise((resolve, reject) => {...code...})
  .then(...code...)
  .then(...code...)
  .finally(...code...)
  .catch(...code...); // <-- .catch에서 에러 객체를 다룰 수 있음


// 모던자바스크립트 예제
new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});


// 모던자바스크립트 예제 (살짝 수정)
new Promise(function(resolve, reject) {

  setTimeout(() => reject('error'), 1000);

}).then(function(result) {

  alert(result + ' : 잘 수행!');
  return result + 'one';

}).catch(function(result) {

  alert(result + ' : 애러 발생!'); // 1
  return result + 'two';

}).then(function(result) {

  alert(result + ' : 잘 수행!'); // 2
  return result + 'three';

});


// 모던자바스크립트 예제
let p = new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 10000); // (*)

});
console.log('hello world');
let p2 = p.then(function(result) { // (**)

  console.log(result); // 1
  return result * 2;

});
console.log('hello world2');
let p3 = p2.then(function(result) { // (***)

  console.log(result); // 2
  return result * 2;

});
console.log('hello world3');
let p4 = p3.then(function(result) {

  console.log(result); // 4
  return result * 2;

});


// 모던자바스크립트 예제
let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000);
});

promise.then(function(result) {
  alert(result); // 1
  return result * 2;
});

promise.then(function(result) {
  alert(result); // 1
  return result * 2;
});

promise.then(function(result) {
  alert(result); // 1
  return result * 2;
});


// 모던자바스크립트
// 정리 전

loadScript('1.js', function(error, script) {

    if (error) {
      handleError(error);
    } else {
      // ...
      loadScript('2.js', function(error, script) {
        if (error) {
          handleError(error);
        } else {
          // ...
          loadScript('3.js', function(error, script) {
            if (error) {
              handleError(error);
            } else {
              // 모든 스크립트가 로딩된 후, 실행 흐름이 이어집니다. (*)
            }
          });
  
        }
      })
    }
  });

  // 정리 후
loadScript("/article/promise-chaining/one.js")
  .then(script => loadScript("/article/promise-chaining/two.js"))
  .then(script => loadScript("/article/promise-chaining/three.js"))
  .then(script => {
    // 스크립트를 정상적으로 불러왔기 때문에 스크립트 내의 함수를 호출할 수 있습니다.
    one();
    two();
    three();
  });


fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
    .then(function(response) {
        return response.json();

    })
    .then(function(json) {
        console.log(json);
        return json
    })
console.log(1);
console.log(2);


fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
    .then(function(json) {
        console.log(3);
        console.log(json.filter(s => s['시·도별(1)'] === '전국'));
        return
    })


// 1차 접종 퍼센트를 구해주세요!
fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
    .then(function(json) {
        console.log(3);
        console.log(json.filter(s => s['시·도별(1)'] === '전국').map(obj => obj['1차 접종 퍼센트']));
        return
    })


fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
    .then(function(response) {
        console.log(1);
        throw Error('애러났어유!')
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
    .then(function(json) {
        console.log(3);
        console.log(json.filter(s => s['시·도별(1)'] === '전국'));
        return
    })
    .catch(err => alert(err))


// 모던 자바스크립트 예제
async function f() {
  return 100;
}

f().then(alert); // 100


// 모던 자바스크립트 예제 (살짝 수정)
async function f() {
  return 100;
}

f().then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});


// 모던 자바스크립트 예제
async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();


// 모던 자바스크립트 예제 (살짝 수정)
async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 3000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
	return 100
}

f().then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});


// 모던 자바스크립트의 잘못된 예제 (https://ko.javascript.info/async-await)
// 보라님에게 제보해주세요.ㅎㅎ 시간이 지나면서 보완이 되어벼러서 잘못된 내용이 된 것입니다.

let response = await fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json');
let data = await response.json();


function one(){ two(); }
function two(){ three(); }
function three(){ console.log('end'); }


three()
two()
one()
anonymous // 가상 전역 컨텍스트, 이것도 마지막에 빠짐


console.log(1);
setTimeout(function(){
    console.log(2);
}, 1000) // setTimeout(()=> console.log(2), 1000)
console.log(3);


console.log(1);
setTimeout(실행, 1000)
console.log(3);
function 실행(){ console.log(2); }


[
  '{{repeat(10, 7)}}',
  {
    _id: '{{objectId()}}',
    id: '{{firstName()}}',
    pw: '{{guid()}}',
    index: '{{index()}}',
    picture: 'http://placehold.it/32x32',
    age: '{{integer(20, 40)}}',
    eyeColor: '{{random("blue", "brown", "green")}}',
    name: '{{firstName()}} {{surname()}}',
    gender: '{{gender()}}',
    company: '{{company().toUpperCase()}}',
    email: '{{email()}}',
    phone: '+1 {{phone()}}',
    address: '{{integer(100, 999)}} {{street()}}, {{city()}}, {{state()}}, {{integer(100, 10000)}}',
    grade: '{{random("새싹", "일반", "실버", "골드", "다이아몬드", "관리자")}}'
  }
]