Web/JavaScript
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
2019.02.04🎨 Day3 - JavaScript로 CSS 업데이트하기JavaScript 30의 세 번째 프로젝트는 JavaScript를 통해 이미지의 CSS를 업데이트하는 프로젝트이다. 😃 HTML 코드123456789101112131415161718192021222324252627282930313233343536373839404142 clock UPDATE CSS VARIABLES WITH JS Spacing: Blur: Base Color: Back to List Javascript30 Day3 Colored by Color Scriptercs😃 CSS 코드12345678910111213141516171819202122232425262728293031323334:root { --base: #ffc600; --sp..
[JavaScript] ⌚ JavaScript로 시계만들기
[JavaScript] ⌚ JavaScript로 시계만들기
2019.02.03⌚ Day 2 - JavaScript로 시계만들기JavaScript 30의 두 번째 프로젝트는 '시계 만들기'이다. JavaScript도 사용되지만 CSS 테크닉도 필요한 좋은 프로젝트이다. 😃 HTML 코드1234567891011121314151617181920212223242526272829 clock CLOCK Back to List Javascript30 Day2 Colored by Color Scriptercs 시침, 분침, 초침과 시계 테두리, 시계의 중앙부를 만들었다.😃 CSS코드123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646..
[JavaScript] 🎹 JavaScript로 악기 만들기
[JavaScript] 🎹 JavaScript로 악기 만들기
2019.02.02🎹 Day 1 - JavaScript로 악기 만들기 JavaScript 30의 첫 번째 프로젝트는 '드럼 킷 만들기'이다. 특정 키보드 버튼을 누르면 해당하는 드럼 소리가 나와서 연주를 할 수 있는 프로젝트이다. 😃 HTML 코드 SYNTH PIANO A S D F G H J K L ; ' Back to List Javascript30 Day1 😃 JavaScirpt 코드 playSound = e => { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`li[data-key="${e.keyCode}"]`); if (audio) { audio..
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30
2019.02.02프로그래밍 언어를 가장 빨리 익히는 방법에 여러 방법론이 있지만, 여러가지를 만들어보면서 해당 언어를 체득하는 것이 가장 좋다고 알려져있다. 30일간 Vanilla JS( 프레임워크, 컴파일러, 라이브러리, 보일러 플레이트등이 없는 순수한 자바스크립트 )로 30개의 결과물을 만드는 JAVASCRIPT 30의 목적도 이와 같다.There is no formation without repetition반복 없이는 결과물도 없다JavaScript 30의 이용 방법은 매우 간단하다. 이메일을 이용해 가입하면, Wes Bos의 JavaScript 30 강의를 무료로 들을 수 있다. 유튜브 영상도 올라와있으니, 가입이 귀찮다면 유튜브를 통해 강의를 들어도 된다. 자 이제 매일 JavaScript 프로젝트를 만들며 J..
npx create-react-app ... 그래서 npx가 뭐길래?
npx create-react-app ... 그래서 npx가 뭐길래?
2018.12.26🤔 npx란 무엇인가? 우리가 리액트를 처음 시작할 때, 프로젝트를 만드는 패키지인 create-react-app이 있습니다. npx create-react-app my-app 여기서는 왜 npm이 아닌 npx를 사용하고 npx란 무엇일까요? 👨👦npm의 아들 npx는 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 npm@5.2.0 버전부터 새로 추가된 도구입니다. 따라서 npm@5.2.0 이상 버전만 깔려 있다면 npx 커맨드를 사용 가능합니다. npx는 npm 레지스트리의 패키지 사용 경험을 파악하기 위한 도구입니다 - npm은 레지스트리에서 호스팅되는 종속성을 매우 쉽게 설치하고 관리할 수 있으며, npx는 레지스트리에서 호스팅되는 CLI 도구 및 기타 실행 파일을..
[JavaScript] 키보드 이벤트 함수 onKeyDown, onKeyUp, onKeyPress 비교
[JavaScript] 키보드 이벤트 함수 onKeyDown, onKeyUp, onKeyPress 비교
2018.12.23⌨ [JavaScript] 키보드 이벤트 함수onKeyDown키를 눌렀을 때 이벤트 발생이벤트 발생 후, 문자 입력Keycode 값을 받는다.키보드에 있는 모든 키를 인식한다. onKeyUp키를 눌렀다 놓았을 때 이벤트 발생문자 입력 후, 이벤트 발생 onKeyPress키를 눌렀을 때 이벤트 발생이벤트 발생 후, 문자 입력ASCII Code 값를 받는다.ASCII Code에 해당하지 않는 shift, ctrl, backspace, tab, 한/영 등의 키는 인식하지 못한다. CodeSandBox 예제