JavaScript

[Javascript] 대화 상자 alert, confirm, prompt 사용하기

안녕하세요. 대화 상자 alert, confirm, prompt를 사용하는 방법에 대해 알아볼게요. 사용자와 상호작용하기 위한 웹 페이지를 만들기 위해서는 위에 기능에 대해 알고 있으면 좋습니다. Window.alert() alert 실행 하기 alert 메서드는 확인 버튼이 존재하면서 메시지를 지정할 수 있는 경고 대화 상자를 띄웁니다. 참고로 alert과 window.alert은 같습니다. window.alert('안녕하세요!'); alert('안녕하세요!'); alert은 인자로 대화 상자에 띄울 텍스트를 인자로 보내주면 됩니다. 주로 alert은 어떤 변경사항이 일어났거나, 사용자가 확인해야 하는 내용을 보여주기 위해 사용합니다. Window.confirm() confirm 실행 하기 confir..

[JavaScript] 타이머 사용하기

개념정리 delay의 단위는 1ms(1,000분의 1초)다. delay = 1ms setTimeout(Callback function, delay) : delay 이후에 Callback function을 실행한다. setInterval(Callback function, delay) : delay마다 Callback function을 반복 실행한다. setImmediate(Callback function) : Callback function을 즉시 실행한다. 위와 같은 타이머 함수들은 모두 timeoutID를 반환한다. timeoutID은 타이머를 식별할 때 사용한다. 아래와 같은 함수를 사용하면 timeoutID를 사용하여 타이머를 취소할 수 있다. clearTimeout(timeoutID) : time..

[JavaScript] console 사용하기

개념정리 console : node의 디버깅 콘솔에 접근할 수 있는 메서드를 제공합니다. console은 브라우저, Node.js 둘 다 사용 가능한 객체이다. 하지만 여기선 Node.js의 console을 예로 들겠다. 이 console 모듈은 웹 브라우저에서 제공하는 JavaScript 콘솔 메커니즘과 유사한 간단한 디버깅 콘솔을 제공합니다. - Node.js Documentation 💡 console 객체는 콘솔에 접근할 수 있게 하는 메서드다. console 사용법 console 매서드에 사용법을 순서대로 알아보자. Code - console.log console.log('안녕하세요.'); const name = 'Xsop'; const age = 21; const gender = 'men'; c..

[Node.js] Module로 변수, 함수 관리하기

개념정리 Module : 특정한 기능을 하는 함수나 변수들의 집합 💡 Module을 사용하면 비슷한 코드끼리 정리할 수 있어서 관리하기 편함. Module을 여러 프로그램에 해당 모듈을 재사용할 수 있음. Module 사용법 Code - Module.js const hi = 'Hello, World!'; function print(name, str) { console.log(`${name}, ${str}`) } module.exports = { hi, print }; Code - Index const Module = require('./Module.js'); Module.print('Xsop', Module.hi) 💡 module.exports로 모듈을 만들 수 있다. 모듈을 만들 때 객체 형식으로만 가..

[JavaScript] async, await (Promise를 간결하고 깔끔하게!)

개념정리 async : Promise를 간결하고, 코드를 깔끔하게 정리하기 위한 문법이다. 💡 async의 장점! async를 사용하면 코드가 동기적으로 실행되는 코드처럼 보인다. async 장점 Code - Promise // Promise function findAndSaveUser(Users) { Users.findOne({}) .then(user => { user.name = 'zero'; return user.save(); }) .then(user => { return Users.findOne({ gender: 'm' }); }) .then(user => { // Code }) .catch(err => { console.error(err); }); } Code - async // async, a..

[JavaScript] Promise(프로미스) Callback 지옥을 해결하는 방법!

개념정리 Promise : Callback hell 일명 콜백 지옥 현상을 해결할 수 있는 객체이다. 💡 Callback hell 일명 콜백 지옥 현상을 해결할 수 있는 객체이다. Promise 사용법 Code // Callback const condition = true; // true면 resolve, false면 reject const promise = new Promise((resolve, reject) => { if (condition) { resolve('성공'); } else { reject('실패'); } }); // 다른 코드가 들어갈 수 있음 // Promise promise .then(value => { console.log(value); // 성공(resolve)한 경우 실행 }) ..

[JavaScript] Class 알아보기

개념정리 Class : 객체를 만들기 위한 템플릿(function 처럼 중복을 방지하기 위해 태어남) Point! 객체를 자주 만들기 위해서 형식을 제공해줘서 중복을 방지하기 위한 템플릿 Class가 필요한 이유 Code const firstDeveloper = { name: 'Lion', age: 22, part: 'Back-End', programLanguage: ['JavaScript', 'Node.js'] } const twoDeveloper = { name: 'Jane', age: 21, part: 'Front-End', programLanguage: ['JavaScript'] } ... 반복되는 객체(여기서는 ~Developer)를 만들 때 코드의 길이가 길어지고, 중복이 많아진다. (name..

[JavaScript] 화살표 함수(this 바인딩) 알아보기

화살표 함수 Code function add1(x, y) { return x + y; }; const add2 = (x, y) => { return x + y; }; const add3 = (x, y) => x + y; const add4 = (x, y) => (x + y); function not1(x) { return !x; }; const not2 = x => !x; 화살표 함수를 사용하면 코드를 짧게 줄일 수 있다. 사용법 함수를 선언할 때 function 선언문 대신 ⇒ 기호로 함수 선언 // function function add(x, y) { return x + y; } // 화살표 함수 const add = (x, y) => { return x + y; } 함수 내부에 return문 밖에 ..

[JavaScript] 변수 선언자 var, let, const 차이점

개념정리 var : 변수 선언자이고, 해당 변수가 속한 범위(scope) 최상단으로 올려버리는 현상이 생긴다. 불필요하게 전역 변수를 선언한다. (오류발생 위험 커짐) let : 변수 선언자이고, const 변수 선언자와 같이 블록 스코프를 가지므로, 블록 밖에서는 변수에 접근을 할 수 없다. const : 변수 선언자이고, var 변수 선언자와 같이 블록 스코프를 가지므로, 블록 밖에서는 변수에 접근을 할 수 없다. let 변수 선언자와 const 변수 선언자는 서로 차이점이 존재한다. const는 한 번 값을 할당하면 다른 값을 할당할 수 없다. (다른 값을 할당하려고 하면 Error 발생) 블록이란? JavaScript에서 {}(중괄호)[Ex. function, if, for, while 문]를 블..