MINYA

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

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 카운터 버튼을 클릭하면 숫자가 올라가거나 내려가는 카운터입니다 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..

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 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 키워드를 붙여주세요..

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

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 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..

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

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 비구조화 할당 (구조분해) 문법 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수있었습니다. 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..

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

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 함수의 기본 파라미터 한번, 우리가 원의 넓이를 구하는 함수를 만들어보겠습니다. 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..

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 단축 평가 (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...