async, await

개발 및 관리/Javascript 2022. 3. 21. 23:11 posted by HighLighter
반응형



----------------------------------------------------------------------------------

async function getName() {
  return "Mike";
}

console.log(getName());

----------------------------------------------------------------------------------

async function getName() {
  return "Mike";
}

getName().then((name) => {
  console.log(name);
});

----------------------------------------------------------------------------------

async function getName() {
  return Promise.resolve("Tom");
}

getName().then((name) => {
  console.log(name);
});

----------------------------------------------------------------------------------

async function getName() {
  // return Promise.resolve("Tom");
  throw new Error("err..");
}

getName().catch((err) => {
  console.log(err);
});

----------------------------------------------------------------------------------

// await

function getName(name) {
  return new Promise(( resolve, reject) => {
    setTimeout(() => {
      resolve(name);
    }, 1000);
  });
}

async function showName() {
  const result = await getName("Mike");
  console.log(result);
}

console.log("시작");
showName();

----------------------------------------------------------------------------------

const f1 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("2번 주문 완료");
    }, 1000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  });
};


f1()
  .then((res) => f2(res))
  .then((res) => f3(res))
  .then((res) => console.log(res))
  .catch(console.log);


----------------------------------------------------------------------------------

const f1 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("2번 주문 완료");
    }, 1000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  });
};

console.log("시작");
async function order() {
  const result1 = await f1();
  const result2 = await f2(result1);
  const result3 = await f3(result2);
  console.log(result3);
  console.log("종료");
}

order();

----------------------------------------------------------------------------------

const f1 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      // res("2번 주문 완료");
      rej(new Error("err..));
    }, 1000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  });
};

console.log("시작");
async function order() {
 try {
  const result1 = await f1();
  const result2 = await f2(result1);
  const result3 = await f3(result2);
  console.log(result3);
 } catch (e) {
  console.log(e);
 }
  console.log("종료");
}

order();

----------------------------------------------------------------------------------

const f1 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
       res("2번 주문 완료");
      // rej(new Error("err..));
    }, 1000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  });
};

console.log("시작");
async function order() {
 try {
  const result = await Promise.all([f1(), f2(), f3()]);
  console.log(result);
 } catch (e) {
  console.log(e);
 }
  console.log("종료");
}

order();

----------------------------------------------------------------------------------



반응형
반응형

setTimeout : 일정 시간이 지난 후 함수를 실행

clearTimeout : 예정된 작업을 없앤다.

setInterval : 일정 시간 간격으로 함수를 반복

clearInterval : 예정된 작업을 없앤다.

-----------------------------------------------------------------------------------

function fn() {
  console.log(3)
}

setTimeout(fn, 3000); // 3초 후에 log 찍어주기

-----------------------------------------------------------------------------------

setTimeout(function() {
  console.log(3)
}, 3000);

-----------------------------------------------------------------------------------

function showName(name) {
  console.log(name);
}

setTimeout(showName, 3000, 'Mike'); // 함수, 시간, 인수

-----------------------------------------------------------------------------------

clearTimeout : 예정된 작업을 없앤다.
// clearTimeout(tId);

const tId = function showName(name) {
  console.log(name);
}

setTimeout(showName, 3000, 'Mike'); // 함수, 시간, 인수

clearTimeout(tId); // 3초가 되기 전에 스케줄링 취소되어, 아무일도 일어나지 않는다.

-----------------------------------------------------------------------------------

function showName(name) {
  console.log(name);
}

const tId = setInterval(showName, 3000, 'Mike'); // setInterval : 계속 반복 수행, 3초 마다 Mike 찍힘

// 중간에 중단하려면, clearInterval(tId); 수행

-----------------------------------------------------------------------------------

setTimeout(function() {
  console.log(2) // 2번째 실행
}, 0); 
// 0초로 설정해도 바로 실행되지 않는다, 현재 실행중인 script가 종료된 이후에 실행
// 브라우저는 기본적으로 4ms 내외의 대기시간 존재

console.log(1);  // 1번째 실행

-----------------------------------------------------------------------------------

// setInterval, clearInterval

let num = 0;

function showTime() {
  console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
}

setInterval(showTime, 1000);

-----------------------------------------------------------------------------------

// setInterval, clearInterval

let num = 0;

function showTime() {
  console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
  if ( num> 5) {
    clearInterval(tId);
  }
}

const tId = setInterval(showTime, 1000);

반응형
반응형


const user = {
  name : 'Mike'
}

user.name

user.hasOwnProperty('name');

user.hasOwnProperty('age');

-------------------------------------------------------------------------------------------------------

const user = {
  name : 'Mike',
  hasOwnProperty : function() {
console.log('hello')
  }
}

user.hasOwnProperty();

-------------------------------------------------------------------------------------------------------

const bmw = {
color : "red",
wheels : 4,
navigation : 1,
drive() {
  console.log("drive..");
},
};

const benz = {
color : "black",
wheels : 4,
navigation : 1,
drive() {
  console.log("drive..");
},
};

const audi = {
color : "blue",
wheels : 4,
drive() {
  console.log("drive..");
},
}; 

-------------------------------------------------------------------------------------------------------

const car = {
wheels : 4,
drive() {
  console.log("drive..");
},
};

const bmw = {
color : "red",
navigation : 1,
};

const benz = {
color : "black",
};

const audi = {
color : "blue",
}; 

bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;

bmw
bmw.color;
bmw.wheels;


-------------------------------------------------------------------------------------------------------

const car = {
wheels : 4,
drive() {
  console.log("drive..");
},
};

const bmw = {
color : "red",
navigation : 1,
};

bmw.__proto__ = car;

const x5 = {
color : "white",
name : "x5",
};

x5.__proto__ = bmw;

x5.name;

x5.color;

x5.navigation;

for( p in x5){
console.log(p);
}

x5;
Object.keys(x5);
Object.values(x5);

for( p in x5){
  if(x5.hasOwnProperty(p)){
console.log('o', p);
  } else {
  console.log('x', p);
  }
}


-------------------------------------------------------------------------------------------------------

const car = {
  wheels : 4,
  drive() {
console.log("drive..");
  },
};


const Bmw = function ( color ){
  this.color = color;
};

const x5 = new Bmw("red");
const z4 = new Bmw("blue");

x5.__proto__ = car;
z4.__proto__ = car;

x5

5.wheels

-------------------------------------------------------------------------------------------------------

const Bmw = function ( color ){
  this.color = color;
};


Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function() {
  console.log("drive..");
};

Bmw.prototype.navigation = 4;
Bmw.prototype.stop = function() {
  console.log("STOP!..");
};


const x5 = new Bmw("red");
const z4 = new Bmw("blue");

//x5.__proto__ = car;
//z4.__proto__ = car;


x5.wheels;
x5.drive();

x5.stop();

z4

z4 instanceof Bmw

z4.constructor === Bmw

-------------------------------------------------------------------------------------------------------

const Bmw = function ( color ){
  this.color = color;
};

Bmw.prototype = {
  wheels : 4,
  drive() {
console.log("drive..");
  },
  navigation : 1,
  stop() {
    console.log("STOP!");
  },
};

const x5 = new Bmw("red");
const z4 = new Bmw("blue");

z4.constructor === Bmw // false

-------------------------------------------------------------------------------------------------------

const Bmw = function ( color ){
  this.color = color;
};

Bmw.prototype = {
  constructor : Bmw,
  wheels : 4,
  drive() {
console.log("drive..");
  },
  navigation : 1,
  stop() {
    console.log("STOP!");
  },
};

const x5 = new Bmw("red");
const z4 = new Bmw("blue");

z4.constructor === Bmw  // true

-------------------------------------------------------------------------------------------------------

const Bmw = function (color) {
  this.color = color;
};

const x5 = new Bmw("red");

-------------------------------------------------------------------------------------------------------


const Bmw = function (color) {
  const c = color;
  this.getColor = function () {
    console.log(c);
  };
};

const x5 = new Bmw("red");

-------------------------------------------------------------------------------------------------------

반응형
반응형


call, apply, bind : 함수 호출 방식과 관계없이 this를 지정할 수 있음

1. call : call메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있습니다.
 
const mike = {
  name : "Mike",
};

const tom = {
  name : "Tom",
};

function showThisName() {
  console.log(this.name);
}

showThisName();
showThisName.call(mike);
showThisName.call(tom);

-----------------------------------------------------------------------------------------------------

const mike = {
  name : "Mike",
};

const tom = {
  name : "Tom",
};

function showThisName() {
  console.log(this.name);
}

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
}

update.call(mike, 1999, "singer"); 
console.log(mike);

update.call(tom, 2002, "teacher"); 
console.log(tom);

**********************************************************************************************************
**********************************************************************************************************

2. apply : apply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같습니다.
call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받습니다.

const mike = {
  name : "Mike",
};

const tom = {
  name : "Tom",
};

function showThisName() {
  console.log(this.name);
}

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
}

update.call(mike, [1999, "singer"]); 
console.log(mike);

update.call(tom, [2002, "teacher"]); 
console.log(tom);

-----------------------------------------------------------------------------------------------------

const minNum = Math.min(3, 10, 1, 6, 4);
const maxNum = Math.max(3, 10, 1, 6, 4);

console.log(minNum);
console.log(maxNum);

-----------------------------------------------------------------------------------------------------

const nums = [3, 10, 1, 6, 4];
const minNum = Math.min(nums);
const maxNum = Math.max(nums);

console.log(minNum); //NaN
console.log(maxNum); //NaN

-----------------------------------------------------------------------------------------------------

const nums = [3, 10, 1, 6, 4];
const minNum = Math.min(...nums);
const maxNum = Math.max(...nums);

console.log(minNum);
console.log(maxNum);

-----------------------------------------------------------------------------------------------------

const nums = [3, 10, 1, 6, 4];
const minNum = Math.min.apply(null, nums);
// = Math.min.apply(null, [3, 10, 1, 6, 4]);

//const maxNum = Math.max.apply(null, nums);
const maxNum = Math.max.call(null, ...nums);
// = Math.max.apply(null, [3, 10, 1, 6, 4]);

console.log(minNum);
console.log(maxNum);

****************************************************************************************************************
****************************************************************************************************************

3. bind : 함수의 this값을 영구히 바꿀 수 있습니다.

const mike = { 
  name : "Mike",
};

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
}

const updateMike = update.bind(mike);

updateMike(1980, "police");
console.log(mike);

-----------------------------------------------------------------------------------------------------

const user = { 
  name : "Mike",
  showName : function() {
    console.log(`hello, ${this.name}`);
  },
};

user.showName();

let fn = user.showName;

fn();

-----------------------------------------------------------------------------------------------------

const user = { 
  name : "Mike",
  showName : function() {
    console.log(`hello, ${this.name}`);
  },
};

user.showName();

let fn = user.showName;

fn.call(user);
fn.apply(user);

let boundFn = fn.bind(user);
boundFn();

-----------------------------------------------------------------------------------------------------

반응형

ES6에 추가된 스펙, Class

개발 및 관리/Javascript 2022. 3. 18. 22:28 posted by HighLighter
반응형


const User = function (name, age) {
  this.name = name;
  this.age = age;
  this.showName = function () {
    console.log(this.name);
  };
};

const mike = new User("Mike", 30);

class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const tom = new User2("Tom", 19);

------------------------------------------------------------------------------------------

const User = function (name, age) {
  this.name = name;
  this.age = age;
  //this.showName = function () {
    //console.log(this.name);
  //};
};

User.prototype.showName = function() {
  console.log(this.name);
};

const mike = new User("Mike", 30);

class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const tom = new User2("Tom", 19);

------------------------------------------------------------------------------------------

const User = function (name, age) {
  this.name = name;
  this.age = age;
  //this.showName = function () {
    //console.log(this.name);
  //};
};

User.prototype.showName = function() {
  console.log(this.name);
};

//const mike = new User("Mike", 30);
const mike =  User("Mike", 30);

class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

//const tom = new User2("Tom", 19);
const tom =  User2("Tom", 19);

------------------------------------------------------------------------------------------

const User = function (name, age) {
  this.name = name;
  this.age = age;
  //this.showName = function () {
    //console.log(this.name);
  //};
};

User.prototype.showName = function() {
  console.log(this.name);
};

const mike = new User("Mike", 30);

class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const tom = new User2("Tom", 19);


for(const p in mike){
  console.log(p);
}

for(const p in tom){
  console.log(p);
}

//***********************************************************************************************************************

//***********************************************************************************************************************

Class : 상속

//extends

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
   console.log("drive..");
  }
  stop() {
    console.log("STOP!");
  }
}

class Bmw extends Car {
  park() {
    console.log("PARK");
  }
}

const z4 = new Bmw("blue");

-------------------------------------------------------------------

// Class : method overriding[1]

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
   console.log("drive..");
  }
  stop() {
    console.log("STOP!");
  }
}

class Bmw extends Car {
  park() {
    console.log("PARK");
  }
  stop() {
    console.log("OFF");
  }
}

const z4 = new Bmw("blue");

-------------------------------------------------------------------

// Class : method overriding[2]

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
   console.log("drive..");
  }
  stop() {
    console.log("STOP!");
  }
}

class Bmw extends Car {
  park() {
    console.log("PARK");
  }
  stop() {
    super.stop();
    console.log("OFF");
  }
}

const z4 = new Bmw("blue");

z4.stop();

-------------------------------------------------------------------

// Class : method overriding[3]

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
   console.log("drive..");
  }
  stop() {
    console.log("STOP!");
  }
}

class Bmw extends Car {
  constructor() {
    super();
    this.navigation = 1;
  }
  park() {
    console.log("PARK");
  }
}

const z4 = new Bmw("blue");

z4

-------------------------------------------------------------------

// Class : method overriding[3]

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
   console.log("drive..");
  }
  stop() {
    console.log("STOP!");
  }
}

class Bmw extends Car {
  constructor(color) {
    super(color);
    this.navigation = 1;
  }
  park() {
    console.log("PARK");
  }
}

const z4 = new Bmw("blue");

z4;

반응형

JavaScript 디버깅, Java 디버깅

개발 및 관리/Javascript 2022. 3. 17. 22:22 posted by HighLighter
반응형

JavaScript 디버깅 - DOM 객체, 함수 오류 검토

https://youtu.be/STivPZTyNmc

이클립스에서 자바 디버깅하기

https://youtu.be/6ONHEclZDYc

[추가 기능] 이클립스에서 디버깅하기

https://youtu.be/99s-NqbGbow

코딩의 시작과 끝, 디버깅 | 실력있는 개발자의 필수 무기

https://youtu.be/IwC-BVM2_YQ

반응형
반응형

요즘 자바스크립트를 공부하고 있습니다. 자바스크립트에서 자바와 유사한 예외처리가 있습니다

1. 자바스크립트 예외 처리 - throw

function sum1(x, y) {
 return x + y;
};

function sum2(x, y) {
  if( typeof x !== 'number' || typeof y !== 'number') {
throw '숫자가 아닙니다.'
  }
 return x + y;
}

console.log(sum1(1, 2));
console.log(sum1('a', 2));

console.log(sum1(1, 2));
console.log(sum1('a', 2));

2. 자바스크립트 예외 처리 - try catch, Error 객체

--------------------------------------------------------------------

--2-1. 
function f2() {
  console.log('f2 start');
  console.log('f2 end');
}

function f1() {
  console.log('f1 start');
  f2();
  console.log('f1 end');
}

console.log('will : f1');
f1();
console.log('did : f1');

--------------------------------------------------------------------

--2-2.
function f2() {
  console.log('f2 start');
  //throw '에러';
  console.log('f2 end');
}

function f1() {
  console.log('f1 start');
  f2();
  console.log('f1 end');
}

console.log('will : f1');
f1();
console.log('did : f1');

--------------------------------------------------------------------
--2-3.
function f2() {
  console.log('f2 start');
  throw '에러';
  console.log('f2 end');
}

function f1() {
  console.log('f1 start');
  try {
    f2();
  } catch (e) {
    console.log(e);
  }
  console.log('f1 end');
}

console.log('will : f1');
f1();
console.log('did : f1');

--------------------------------------------------------------------
--2-4.
function f2() {
  console.log('f2 start');
  throw new Error('에러');
  console.log('f2 end');
}

function f1() {
  console.log('f1 start');
  f2();
  console.log('f1 end');
}

console.log('will : f1');
try {
  f1();
} catch (e) {
  console.log(e);
}

console.log('did : f1');

--2-5.
--------------------------------------------------------------------

<!DOCTYPE html>
<head>
  <title>Error Handling Basics</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf=8">
  <style>
      .box {
          width: 150px;
          height: 150px;
          border: 1px solid #000;
      }
  </style>
</head>

<body>
    <h1>Error Handing Basics</h1>
    <ul >
        <li>recovering form unexpected situations (errors)</li>
    </ul>
    <hr class="hr">
    <div id="myBox"></div>

    <script>
        function changeBackgroundColor(element, color) {
            element.style.backgroundColor = color;
        }

        const myBox = document.getElementById("myBox");
         
        try {
            changeBackgroundColor(myBox, "blue");
        } catch (e) {
            // console.log(e);
            // console.dir(e);
            alert("something went wrong. sorry about that.")
        } finally {
            console.log(20);
        }

        prompt("What is your name?");
    </script>
</body>


--------------------------------------------------------------------

How to Handle Errors - Basics of Error Handling in JavaScript - Tutorial

https://youtu.be/G8Jux_bsIXU

--------------------------------------------------------------------
3. 자바스크립트 예외 처리 - promise의 catch함수

--3-1.

function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

try {
  wait(3);
} catch (e) {
  console.error(e);
}

--------------------------------------------------------------------
--3-2.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3).catch( e => {
  console.log(e);
});

--------------------------------------------------------------------
--3-3.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3).catch( e => {
  console.log('1st catch', e);
});

--------------------------------------------------------------------
--3-4.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3)
  .catch( e => {
  console.log('1st catch', e);
})
  .catch( e => {
  console.log('2nd catch', e);
});

--------------------------------------------------------------------
--3-5.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3)
  .catch( e => {
  console.log('1st catch', e);
  throw e;
})
  .catch( e => {
  console.log('2nd catch', e);
});

--------------------------------------------------------------------
--3-6.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3)
  .then( () => {
  console.log('done!!!');
  },
  e => {
    console.log('1nd catch in Then', e);
  }
 )
  .catch( e => {
  console.log('2nd catch', e);
});

반응형
반응형

*자바스크립트 엔진이란?

우리의 코드를 전달받는 JS엔지는 [console]을 찍거나 [화면]을 그리거나 [네트워크 통신]하는 기능이 내부에 없다.

alert함수는 브라우저에서 제공하는 JS엔진의 날개 API(= Application Programming Interface) JS엔진 자체에 alert함수가 있는 것이 아니다.

1. 자바스크립트 클로저? 간단히 핵심만 파악하기

https://youtu.be/MbYShFxp-j0

2. 자바스크립트 대표적 클로저 실수를 let으로 해결?

https://youtu.be/RZ3gXcI1MZY

3. 코좀봐코 - 화살표 함수에서 간단히 객체 리턴할 때 왜 괄호()가 필요한 거죠?

https://youtu.be/sTMeRamEwwk

4. 자바스크립트 예외처리 1/4 - 예외란 무엇인가? throw?

https://youtu.be/EBmIHrLTVdg

5. 자바스크립트 예외처리 2/4 - try catch, Error 객체

https://youtu.be/wf6AlMj7TFA

6. 자바스크립트 예외처리 3/4 - promise의 catch함수

https://youtu.be/RRc_iVHdDKk

7. 자바스크립트 예외처리 4/4 - async/await의 예외

https://youtu.be/kngOWhzPHzg

8. 자바스크립트 promise? 나도 써보자, 기본 개념부터~

https://youtu.be/CA5EDD4Hjz4?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1

9. ES6 화살표 함수에 없는 3가지?

https://youtu.be/4zjKltnIBug?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1

10. 자바스크립트 개념잡기: 콜백 함수의 동기적 실행과 비동기적 실행

https://youtu.be/j0Viy3v97gY?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1

11. 자바스크립트 타이머는 지각쟁이? 그 이유는 싱글 콜 스택?

https://youtu.be/iNH4UQxZexs?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1

12. 자바스크립트 this? 간단히 핵심만 파악하기

https://youtu.be/PAr92molMHU?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1 

---------------------------------------------------------------------------------------------------

var:  함수 scope
let:  중괄호 scope
scope: 변수의 값을 볼 때 참조하는 곳

*******************
main.js
*******************

var btns = [
  documents.getElementById('btn0'),
  documents.getElementById('btn1'),
  documents.getElementById('btn2')
];

function setClick() {
  for (var i = 0 ; i < 3; i++) {
    btns[i].onclick = function() {
console.log(i);
    }
  }
}

setClick();

-----------------------------------------------------------------

var btns = [
  documents.getElementById('btn0'),
  documents.getElementById('btn1'),
  documents.getElementById('btn2')
];

function setClick() {
  for (let i = 0 ; i < 3; i++) {
    btns[i].onclick = function() {
console.log(i);
    }
  }
}

setClick();

반응형
반응형

자바 개발자라면 아래의 지식을 갖져야 편한게(?) 원활하게(?) 일 할 수 있을 것 같습니다.

꾸준히 공부하면 어느 순간에 아래의 역량들을 갖추기 않을 까 생각해봅니다.

1. JAVA FULL STACK 기본 역량

Core Java
Servlet
JSP
Spring
Spring boot
Hibernate
MySQL
React.JS
REST Services
GIT Version Control
JUnit

2. Java Proejct Ideas(수준별 프로젝트)

Easy: Tic Tac  Toe, Calculator, Chess, Type Speed Program

Mid: ATM Machine, Online Banking, Email System, Flappy Bird

Pro: Swing UI, Speech Recognition, Face Detection, VPN

반응형
반응형

grid가 설치된 RAC환경에서 svrctl stop database -d {db unique name} 하면 db가 immediate로 내려갑니다.

crsctl stop crs로 grid와 db를 동시에 내리면 abort로 내려갑니다.

sqlplus에서 shutdown immediate 내리면 immediate로 내려갑니다.

명령어 입력시 alert log를 보면 확인 가능합니다.

관련문서: The difference between using srvctl vs using sqlplus for start/stop one or more database nodes(Doc ID 753516.1)

1. Difference between using srvctl vs using sqlplus for start/stop one or more Oracle Database Instances

https://www.thegeekdiary.com/difference-between-using-srvctl-vs-using-sqlplus-for-start-stop-one-or-more-oracle-database-instances/

2. Oracle 시작/종료시 srvctl 와 sqlplus 무슨 차이가 있을까?

https://pat98.tistory.com/816

3. srvctl vs sqlplus instance를 shutdown/startup 할 때 차이점

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hanccii&logNo=220556949396

4. 11G R2 CLUSTER: AVOID USING SQLPLUS & LSNRCTL FOR ORACLE

https://blog.pythian.com/g11g-r2-cluster-avoid-using-sqlplus-lsnrctl-for-oracle/

반응형