거니의 velog

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

* HTML 을 사용하면 브라우저에서 우리가 보여주고 싶은 UI (유저 인터페이스) 를 보여줄 수 있다. 만약에 사용자의 인터랙션 (상호작용) 에 따라 동적으로 UI 를 업데이트하고 싶다면, JavaScript 를 연동해주어야 한다. * 보통 인터랙션이 많은 경우에는 Vanilla JavaScript (별도의 라이브러리/프레임워크를 사용하지 않는 형태) 를 사용해서 하기에는 코드의 양도 많아지고 코드 관리도 어려운 편이라 보통 React, Vue, Angular 등의 도구를 사용한다. * 그래도, 해당 도구 없이 하는 기본적인 방법 또한 이해를 해둬야 앞으로 라이브러리/프레임워크를 공부하게 될 때 이해에 도움을 주므로, 간단한 예제 몇가지를 함께 만들어보자. 1. 카운터 * 첫번째로 만들어볼것은, 버튼을..

2. 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 의 앞부분에 await 을 넣어주면 해당 프로미스가 끝날때까지 ..

1. Promise * 프로미스는 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능이다. 이전에는 비동기 작업을 처리 할 때에는 콜백 함수로 처리를 해야 했었는데, 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었다. * 한번 숫자 n 을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현해보자. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseA..

* 자바스크립트의 동기적 처리와 비동기적 처리에 대해서 알아보자. * 만약 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있다. 하지만 이를 비동기적으로 처리를 한다면 흐름이 멈추지 않기 때문에 동시에 여러 가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. * 그러면, 한번 코드를 보고 이해해보자. * 연산량이 많은 작업을 처리하는 함수를 만들어보자. * 우선, Codesandbox 의 설정에서 sandbox.config.json 을 열어서 Infinite Loop Protection 이라는 속성을 비활성화하자. * 그 다음에, index.js 를 ..

8. 자바스크립트의 Scope 에 대한 이해 * 이번에는 자바스크립트의 Scope 에 대해서 알아보자. Scope란, 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미한다. Scope 는 총 3가지 종류가 있다. 1. Global (전역) Scope : 코드의 모든 범위에서 사용이 가능하다. 2. Function (함수) Scope : 함수 안에서만 사용이 가능하다. 3. Block (블록) Scope : if, for, switch 등 특정 블록 내부에서만 사용이 가능하다. (1) 예시를 통한 Scope 이해 * 한번, 예시 코드를 보고 Scope 를 이해해보자. const value = 'hello!'; function myFunction() { console.log..

7. spread 와 rest * 이번에는 ES6 에서 도입된 spread 와 rest 문법에 대해서 알아보자. 서로 완전히 다른 문법이지만, 은근히 좀 비슷한 면이 있다. (1) spread * 일단 spread 문법부터 알아보자. spread 라는 단어가 가지고 있는 의미는 '펼치다, 퍼뜨리다' 이다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있다. * 예를 들어 다음과 같은 객체들이 있다고 가정해보자. const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; co..

5. 조건문 더 스마트하게 쓰기 * 이번에는 조건문을 조금 더 스마트하게 작성하는 방법에 대해 알아보자. (1) 특정 값이 여러 값 중 하나인지 확인해야 할 때 * 만약, 여러분이 특정 값이 여러 값 중 하나인지 확인을 해야 하는 상황이 생겼다고 가정해 보자. * 예를 들면, 이러한 시도를 할 수도 있을 것이다. function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } console.log(isAnimal('개')); // true console.log(isAnimal('노트북')); // false * 비교해야 할 값이 많아질수록 코드는 더 길어질 것이다. * 이러한 코..

3. 단축 평가 (short-circuit evaluation) 논리 계산법 * 이번에는 논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보자. * 우리가 이전에 연산자를 배울 때, 다음과 같은 사항을 잘 숙지했을 것이다. true && true // true true && false // false true || false // true false || true // true * 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아니다. 문자열이나 숫자, 객체를 사용할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라진다. * 예를 들어, 다음과 같은 코드가 있다고 가정해 보자. const dog = { name: '멍멍..

* 이번에는 알고 있으면 유용한 다양한 자바스크립트 문법을 알아보자. 이번에 소개할 대부분의 문법은 ES6 이상의 버전에서만 사용할 수 있는 문법이지만, 그렇지 않은 문법도 은근히 있다. 1. 삼항 연산자 * 첫 번째로 배울 문법은, 삼항 연산자이다. 이 문법은 ES6 문법은 아니고 이전부터 있었던 문법이다. const array = []; let text = ''; if (array.length === 0) { text = '배열이 비어있습니다.'; } else { text = '배열이 비어있지 않습니다.'; } console.log(text); * 예를 들어 위와 같이 특정 조건에 따라 text 값이 달라야 하는 상황이 있다고 가정해 보자. 그런 경우에는 다음과 같이 코드를 작성할 수 있다. cons..