전체 글
꼭! 알아야하는 JavaScript 최신문법 (ES6, ES11) 사용법 정리 (2)
이번 포스팅에서는 자주 쓰이는 ES11 최신 문법 사용법에 대해 알아보겠습니다. 이전 포스트 자주쓰는 ES6 문법 사용법 정리(1) ES11 2020 Optional chainning Nullish coalescing operator 들어가기에 앞서 ES6 이후부터 추가된 많은 문법들이 익스플로러에서는 지원되지 않기 때문에 Babel을 이용해야 합니다. 1. Optional chainning const person1 = { name: 'dan', job: { title: 'Engineer', manager: { name: 'Bob', }, }, }; const person2 = { name: 'Bob' } // 💩💩💩💩 { function printManager(person) { console.log(p..
꼭! 알아야하는 JavaScript 최신문법 (ES6, ES11) 사용법 정리 (1)
이번 포스팅에서는 자주 쓰이는 JS 최신 문법 사용법에 대해 알아보겠습니다. 다음 포스트 자주쓰는 ES11 문법 사용법 정리(2) ~ES6 2015 Shorthand property names Destructuring assignment Spread syntax Default parameters Ternary Operator Template Literals 1. Shorthand property names const person = { name: 'dev_min', age: '19', } javascript 에서 object는 항상 key와 value로 이루어져 있습니다. const name = 'dev_min'; const age = '19'; const person1 = { name: name, ag..
JavaScript 30 Drum Kit 정리
요구사항 KeyBoard 입력을 받아 애니메이션 효과와 Drum 소리가 출력되게 vanilla JS를 이용해서 구현한다 기본 소스코드 A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 처리과정 & 코드분석 keydown 이 될때마다 로그를 찍어 봤음 keydown 됐을 때 실행할 익명함수 작성 evnet를 찍었을 때 keyCode 속성이 나옴 data-key를 이용함, event.keyCode 속성을 이용하여 동적으로 타겟을 잡음 key, audio 변수에 할당함 const audio = document.querySelect(`audio[data-key="${e.keyCode}"]`); const key = document.queryS..
브라우저 동작 원리
브라우저 동작 원리 구글의 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 어플리케이션 개발에서도 사용되는 범용 개발 언어가 되었다. 하지만 자바스크립트가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹 페이지/ 어플리케이션이다. 대부분의 프로그래밍 언어는 운영체제(O/S) 위에서 실행되지만 웹 어플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능하다. 브라우저의 핵심 기능은 사용자가 참고하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에..
CSS Variables
요구사항 css에서 변수를 사용하여 값을 설정 해보고 javascript로 css를 동적으로 컨트롤 해보자. 기본 소스코드 Update CSS Variables with JS Spacing: Blur: Base Color 처리과정 & 코드분석 css에서 :root 가상클래스에 변수를 추가해 주었다. (:root 에 추가해주는 것이 모든 요소에 변수를 정의하는 데에 도움이 된다.) 커스텀 속성 정의 부분 (--* 패밀리) :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img태그에 선언한 변수들을 이용해서 값을 설정함 캐스케이딩 변수 사용 부분 (var()함수) img { padding: var(--spacing); background: var(--b..