Programming/JavaScript14 JAVASCRIPT key down 이벤트 설정 과 키보드 key code // 바닐라document.addEventListener('keydown', function(event) { //반대는 keyup console.log('Key pressed:', event.key); // 누른 키의 값 출력 console.log('Key code:', event.code); // 누른 키의 코드 출력 // 특정 키에 대한 작업 예시 if (event.key === 'Enter') { console.log('Enter key was pressed'); }});// jQuery$(document).on('keydown', function(event) { // 반대는 keyup console.log('Key pressed:'.. 2024. 10. 17. JavaScript 번들러 JavaScript 의 번들러는 웹 개발 과정에서 매우 중요한 역할을 하는 도구이다. 개발자가 작성한 여러 JavaScript 파일과 모듈을 하나의 파일 또는 몇 개의 파일로 결합하는 역할을 한다. 이 과정은 웹 페이지의 로딩 시간을 줄이고, 네트워크 요청의 수를 최소화하여 성능을 향상시키는 데 도움을 준다. JavaScript 번들러에 대해 알아보자JavaScript 번들러의 기능1. 모듈 결합: 개발자가 사용하는 다양한 JavaSciprt 모듈 및 파일을 하나 또는 여러 개의 번들로 결합한다. 이는 브라우저가 한 번에 많은 파일을 다운로드 할 필요가 없게하여 로딩 시간을 감소 시킨다.2. 최적화: 파일을 결합하는 과정에서 코드를 압추갛고, 불필요한 공백이나 주석을 제거하여 파일 크기를 줄인다. 또한 .. 2024. 9. 11. JavaScript console API의 종류 JavaScript 를 하다보면 console.log() 를 사용할때가 많다. 다들 console.log 만 알고 다른건 잘 모르더라..디버깅 작업을 도와주는 이 console API는 여러가지고 있고 발생하는 오류를 추적하는데 엄청 도움이 된다.한번 자세히 알아보자.1. console.log()콘솔에 일반적인 메시지를 출력할 때 사용한다. 가장 기본적인 메서드이고 문자열, 숫자, 객체, 배열 등 다양한 타입의 데이터를 출력 할 수 있다.console.log('Hello, World!'); // 문자열 "Hello, World!"console.log(42); // 숫자 42console.log({ name: 'Alice', age: 30 }); // 객체 { name: 'Alice', age: 30.. 2024. 8. 30. JavaScript 클립보드에 복사기능 구현 주소, 계좌번호등 웹상에서 클릭시 클립보드에 복사하는 기능을 구현해야하는 일들이 있다.JavaScript를 사용하여 간단하게 하는 방법을 알아보자1. HTML 버튼 추가복사 기능을 시작 할 버튼을 추가(버튼외에 여러 방법으로도 가능)클립보드에 복사 2.JavaScript 함수 구현위에서 생성한 버튼 클릭히 실행할 함수를 구현한다. 모던 브라우저용 코드 이 코드는 더 안전하고, 프로미스 기반으로 에러 핸들링이 가능하다.이렇게 간단한 코드로 클립보드에 복사가 가능하다. document 코드보다는 navigator를 사용하여 코드를 구현해보자. 2024. 8. 26. JavaScript 에서 중복 실행을 방지하는 방법 웹을 이용하다보면 한번만 클릭하는데 나도 모르게 더블 클릭을 하게 되는 경우가 있다.보통은 별일 없지만 가끔 시스템 에러를 유발하는 경우가 있다.그래서 JavaScript에서 중복 실행을 방지하는 방법들에 대해 알아보자1. 버튼 비활성화버튼을 클릭한 후 즉시 버튼을 비활성화하여 더 이상 클릭 할 수 없게 만든다.Click Me 2. 플래그 사용플래그를 사용하여 이벤트가 실행 중인 동안 두 번째 클릭을 무시하도록 하는 방법Click Me 3. once 옵션 사용once 옵션을 사용하여 이벤트가 한 번만 발생하도록 설정Click Me 4. 버튼의 disabled 속성 및 비동기 작업 처리비동기 작업(AJAX) 동안 버튼을 비활성화한 후, 작업이 완료되면 버튼을 활성화 시킨다.Click Me이렇듯 JavaSc.. 2024. 8. 22. var - let - const 차이점과 사용법 JavaScript 에서 변수를 선언하는 방법에는 var , let ,const 세 가지 방법이 있다.다른 특성과 사용법을 가지고 있으면 ES6 이후 개발자들은 let 과 const 를 더 선호하는 추세이다.이번엔 이 세가지의 차이점과 특성을 비교해 보자1. varvar는 가장 오래된 선언 방식이다var 의 특징Function Scope: var 로 선언된 변수는 함수 내에서만 유효하며, 함수 밖에서는 접근할 수 없다. 하지만 Block Scope 를 가지지 않기 때문에 if, for 등의 블록내에서 선언해도 함수 전체에서 접근할 수 있다.Hoisting: var로 선언된 변수는 선언이 끌어올려지기 때문에 선언문 이전에 변수에 접근할 수 있다.console.log(x); // undefinedvar x.. 2024. 8. 20. 이전 1 2 3 다음 728x90 반응형 LIST