반응형

프로그래밍/Javascript(ES6) 22

[Javascript/ECMAScript6/ES6] 모달 만들기

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 모달 만들기 모달이란, 다음 이미지와 같이 기존의 내용을 가리고 나타나는 메시지박스 같은 형태의 UI 를 의미합니다. 이번에는 이런 UI 를 HTML 과 JavaScript 를 사용하여 만들어보겠습니다. 우선, Codesandbox 에서 새로운 Vanilla Sandbox 를 만드세요. 그리고, index.js 를 열고 맨 위 import "./styles.css"; 하단의 코드를 지워주세요. 이번에 우리는 스타일링을 할 것이기 때문에 css 를 불러와야 합니다. 그 다음에, index.html 을 열어서 다음과 같이 수정해주세요. 안녕하세요! 내용내용내용 버튼 열기 이렇게 화면이 나타났나요? 그 다음엔, 버튼 아래에 다음 내용을 보여주세요...

[Javascript/ECMAScript6/ES6] 클릭시(증가,감소) 카운터 만들기

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 카운터 버튼을 클릭하면 숫자가 올라가거나 내려가는 카운터입니다 UI 만들기 0 +1 -1 위와 같은 결과물이 나타났나요? 우리가 보여준 h2 와 button 태그에 id 값을 설정해주었는데요, 이렇게 id 값을 설정해주면 JavaScript 에서 쉽게 해당 DOM 을 선택 할 수 있습니다. 여기서 DOM 이란, 각 태그에 대한 정보를 지니고 있는 JavaScript 객체입니다. DOM 선택하기 우선, DOM 을 선택해봅시다. index.js 를 다음과 같이 만듭니다. const number = document.getElementById("number"); const increase = document.getElementById("increas..

[Javascript/ECMAScript6/ES6] async/await

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. async/await async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해줍니다. 기본적인 사용법을 알아봅시다. function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process(); async/await 문법을 사용할 때에는, 함수를 선언 할 때 함수의 앞부분에 async 키워드를 붙여주세요..

[Javascript/ECMAScript6/ES6] Promise

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. Promise 프로미스는 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능입니다. 이전에는 비동기 작업을 처리 할 때에는 콜백 함수로 처리를 해야 했었는데요, 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었습니다. 한번 숫자 n 을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현해봅시다. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(in..

[Javascript/ECMAScript6/ES6] Scope 와 Hoisting 에 대한 이해

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. Scope Scope 란, 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미합니다. Scope 는 총 3가지 종류가있습니다. Global (전역) Scope: 코드의 모든 범위에서 사용이 가능합니다. Function (함수) Scope: 함수 안에서만 사용이 가능합니다. Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용이 가능합니다. const value = 'hello!'; function myFunction() { console.log('myFunction: '); console.log(value); } function otherFunc..

[Javascript/ECMAScript6/ES6] spread 와 rest

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. spread 와 rest 이번에는 ES6 에서 도입된 spread 와 rest 문법에 입니다. 서로 완전히 다른 문법인데요, 은근히 좀 비슷합니다. spread 일단 spread 문법부터 알아봅시다. spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 입니다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠수있습니다. 예를 들어서 다음과 같은 객체들이 있다고 가정해봅시다. const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임..

[Javascript/ECMAScript6/ES6] 비구조화 할당 (구조분해) 문법

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 비구조화 할당 (구조분해) 문법 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수있었습니다. const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 그리고, 함수의 파라미터에서도 비구조화 할당을 할 수 있었습니다. const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object); 그런데 여기서 만약 b 값이 주어지지 않았다고 가정해봅시다. c..

[Javascript/ECMAScript6/ES6] 조건문 더 스마트하게 사용하기

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 조건문 더 스마트하게 사용해보자 특정 값이 여러 값중 하나인지 확인해야 할 때 만약, 여러분이 특정 값이 여러 값 중 하나인지 확인을 해야 하는 상황이 생겼다고 해봅시다. 그러면, 이러한 시도를 할 수도 있을 것입니다. function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } console.log(isAnimal('개')); // true console.log(isAnimal('노트북')); // false 비교해야 할 값이 ..

[Javascript/ECMAScript6/ES6] 함수의 기본 파라미터

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 함수의 기본 파라미터 한번, 우리가 원의 넓이를 구하는 함수를 만들어보겠습니다. function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(4); console.log(area); // 50.26548245743669 여기서 Math.PI 는 원주율 파이(π) 값을 가르킵니다. 만약 우리가 이 함수에 r 값을 넣어주지 않으면 어떤 결과가 나타날까요? function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(); console.lo..

[Javascript/ECMAScript6/ES6] 단축 평가 (short-circuit evaluation) 논리 계산법

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 단축 평가 (short-circuit evaluation) 논리 계산법 true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. 예를 들어서 다음과 같은 코드가 있다고 가정해보겠습니다. const dog = { name: '멍멍이' }; function getName(animal) { return animal...

반응형