소스 코드 JavaScript30/05 - Flex Panel Gallery/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I Learnedtransition 활용패널을 클릭 시 위 아래에서 글자가 나타나게 하는 트랜지션이다. 패널 요소 클릭 시 open-active 클래스가 토글되도록 했고, 디폴트 상태에서는 transform 속성의 값으로 translateY(+/-100%)를 주어 해당하는 요소를 숨겨두었다가 open-activ..

⭐️ 노션에서 보기모듈의 일반적 의미모듈(module): 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각일반적으로 모듈을 기능을 기준으로 파일 단위로 분리함모듈이 성립하려면 파일 스코프(모듈 스코프)를 가질 수 있어야 함자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음 (비공개 상태) = 모듈은 개별적인 존재로서 애플리케이션과 분리되어 존재함⇒ 하지만 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있음.모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능 (export)모듈 사용자는 모듈이 공개(export)한 자산 중 일부 또는 전체를 선택 해 자신의 스코프 내로 불러들여 재사용 할 수 있음 (import)모듈은 애플..

⭐️ 노션에서 보기에러 처리의 필요성에러가 발생하지 않는 코드를 작성하는 것은 불가능하며 에러는 언제나 발생할 수 있음발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료됨 console.log('[Start]'); foo(); // ReferenceError: foo is not defined // **발생한 에러를 방치하면 프로그램은 강제 종료된다.** // **에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다.** console.log('[End]');try … catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있음 console.log('[Start]'); **try** { foo(); ..

⭐️ 노션에서 보기제너레이터란?제너레이터(generator)코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수ES6에서 도입됨제너레이터와 일반 함수의 차이제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있음일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행함 = 즉, 함수 호출자(caller)는 함수를 호출한 이후 함수 실행을 제어할 수 없음제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있음 = 즉, 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있음 ⇒ 이는 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도(yield)할 수 있다는 것을 의미제너레이터 함수는 함수 호출자와 함수 상태를 주고 받을 수..

소스 코드 JavaScript30/04 - Array Cardio Day 1/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedArray.prototype.reduce()reduce 메서드는 사용할 때마다 사용법이 헷갈리는데 이번 기회에 확실히 알아두게 되었다. reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 콜백 함수의 첫 번째 인수로 accumu..

소스 코드 JavaScript30/03 - CSS Variables/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedDocument.documentElementDocument.documentElement 읽기 전용 속성은 문서의 루트 요소를 나타내는 Element를 반환한다. HTML 문서를 예로 들면  요소를 반환한다.function handleUpdate() { const suffix = this.dataset...

소스 코드 JavaScript30/02 - JS and CSS Clock/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedDate객체와 setInterval 함께 사용하기Date 객체와 setInterval 메서드 각각에 대해서는 이해하고 있었지만, setInterval의 첫 번째 인수로 전달하는 콜백 함수 내에서 Date객체를 적절히 활용하면 이렇게 시계 인터페이스도 구현해볼 수 있다니 흥미롭다. const seco..

소스 코드 JavaScript30/01 - JavaScript Drum Kit at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I Learnedaudio.currentTime = 0function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode..