자바스크립트

⌚ Day 2 - JavaScript로 시계만들기JavaScript 30의 두 번째 프로젝트는 '시계 만들기'이다. JavaScript도 사용되지만 CSS 테크닉도 필요한 좋은 프로젝트이다. 😃 HTML 코드1234567891011121314151617181920212223242526272829 clock CLOCK Back to List Javascript30 Day2 Colored by Color Scriptercs 시침, 분침, 초침과 시계 테두리, 시계의 중앙부를 만들었다.😃 CSS코드123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646..

프로그래밍 언어를 가장 빨리 익히는 방법에 여러 방법론이 있지만, 여러가지를 만들어보면서 해당 언어를 체득하는 것이 가장 좋다고 알려져있다. 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 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 도구 및 기타 실행 파일을..

🤔 리액트란? 리액트(React, React.js 또는 ReactJS)는 선언적, 효율적으로 유연하게 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리의 하나로, 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수되며 지금도 계속 업데이트 중인 프로젝트이다. 리액트의 개념은 다음과 같은 함수로 표현 가능하다. f(data) = View 페이지에 동적인 상호작용을 넣고 싶을 때 우리는 자바스크립트를 이용하게 된다. 하지만 웹 개발 시 DOM 관리 및 상태값 관리 작업은 프로젝트가 커질 수록 논리가 복잡해질 수록 귀찮고 머리 아파진다. 이러한 것들을 최소화하고 오직 기능 개발과 사용자 인터페이스(UI) 를 구현하는 것에 집중하기 위해 React 같은 라이브러리가 탄생되었다. 리액트의 특징 리액트는 ..

⌨ [JavaScript] 키보드 이벤트 함수onKeyDown키를 눌렀을 때 이벤트 발생이벤트 발생 후, 문자 입력Keycode 값을 받는다.키보드에 있는 모든 키를 인식한다. onKeyUp키를 눌렀다 놓았을 때 이벤트 발생문자 입력 후, 이벤트 발생 onKeyPress키를 눌렀을 때 이벤트 발생이벤트 발생 후, 문자 입력ASCII Code 값를 받는다.ASCII Code에 해당하지 않는 shift, ctrl, backspace, tab, 한/영 등의 키는 인식하지 못한다. CodeSandBox 예제