JudithHopps JudithHopps

17. 생성자 함수에 의한 객체 생성 17.1 Object 생성자 함수 자바스크립트 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다. //RegExp const regExp = new RegExp(/a+b/i) console.log(typeOf regExp) // object 19. 프로토 타입 19.13 프로퍼티 존재 확인 in 연산자 for-in 문을 사용하면 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다. var person = { 'first-name': 'Ung-mo', 'last-name': 'Lee', gender: 'male' };..

[참고] 1.도서 http://www.yes24.com/Product/Goods/92742567 모던 자바스크립트 Deep Dive - YES24 『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드 www.yes24.com 2. 웹사이트 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com 자바스크립트의 특징 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 자바스크립트는 기존의 프로그래밍 언어에서 많은 영향을 받았다. 기본 ..

⭐ addEventListener - EventTarget의 기능 첫 번째 인자로 주어진 이름의 이벤트 발생시 두 번째 인자로 주어진 콜백함수 실행 👉 MDN 문서 보기 👉 이벤트 목록 MDN 문서 보기 click 이벤트 요소가 클릭되었을 때 document.querySelector('#button1') .addEventListener('click', () => { alert('ㅇㅇ 어서오고'); }); alert - 주어진 메시지로 알림 팝업 띄움 이벤트 객체 // ♻️ 새로고침 후 실행 document.querySelector('#button1') .addEventListener('click', (e) => { console.log(e); }); 프로토타입을 따라 올라가 볼 것 💡 이벤트 리스너에서의..

⭐ DOM의 모든 기능을 배우지는 않음 핵심 기능들을, 학습해 온 자바스크립트 지식과 접목하여 이해 add_to_queue 새 창에서 열기 I. 요소 선택 🔗 Document 또는 🔗 Element의 인스턴스 메서드들. 자식 클래스들로 상속됨 1. getElementsByTagName - 태그명으로 선택 👉 MDN 문서 보기 ( Document ) 👉 MDN 문서 보기 ( Element ) document에서 사용시 문서 전체에서 선택 const $sections = document.getElementsByTagName('section'); const $listItems = document.getElementsByTagName('li'); ​ console.log($sections); console.lo..

예제의 웹페이지 👇 소스 보기로 HTML 코드 확인 add_to_queue 새 창에서 열기 document 요소 확인해 볼 것 // DOM 구조도로 출력됨 document; Object.getPrototypeOf(document); 💡 아래의 프로퍼티로 들어가면 인스턴스 형태로 확인 가능 globalThis; chilren 프로퍼티로 타고들어가 볼 것 - DOM 구조도 반영 확인 HTML 이하 노드들 재귀적으로 출력 // document 내에 html 태그 요소를 선택하는 코드 const html = document.querySelector('html'); ​ console.log(html); // DOM 형태로 출력 console.log(html.children); function getNameAndC..

디버깅은 모든 소프트웨어에서 소스 코드의 오류 또는 버그를 찾아서 수정하는 과정입니다. VS Code의 디버깅 툴 타 에디터/IDE에서도 유사 기능들 제공 index.js let x = 1; const y = Math.ceil(Math.random() * 10); ​ const rollDice = () => { const result = Math.ceil(Math.random() * 6); return result; } ​ x += y; // 🔴 x *= y; x -= y; x ** (y % 3 + 1); // 🔴 ​ for (let i = 0; i 0.5) dice *= -1; // 🟡 x += dice; // 위에 조건부 넣을 시 브레이크포인트 추가 return x; } ​ x **= 2; // 🔴 ..

⭐ JSDoc 자바스크립트 코드에 주석을 달기 위한 🔗 마크업 언어 에디터, IDE에서는 작성된 내용에 따라 코드 힌팅 등의 기능 제공 👉 마치 타입스크립트 등의 언어처럼 인자 등의 자료형 제안 - 강제되지는 않음 도구를 통해 웹 문서 등으로 출력될 수 있음 📔 공식 문서 사이트 보기 사용해보기 실습할 폴더를 열고 임의의 .js 파일을 생성 /** 입력해보고 엔터 여러 번 입력해보기 기본 주석 const TITLE = 'JSDoc 사용하기'; /** 코드의 제목으로 사용될 문자열 */ 이후 라인에서 TITLE 상수 입력해보기 @type - 자료형 명시, @const - 상수임 명시 const PI = '3.14'; /** * 원주율 * @type {number} * @const */ 또는 아래와 같이 /..

I. 웹팩 Webpack 번들러 bundler - 프로젝트에 사용되는 파일들을 하나 또는 소수의 파일들로 압축 어플리케이션이 로딩 및 실행 속도 향상 각종 플러그인과 옵션을 사용하여 코드를 다양한 방법으로 변환/압축 가능 🧊 공식 사이트 보기 동종/유사 제품: RollUp, Parcel, Gulp, Vite... ⭐ 프로젝트에 사용해보기 0. 소스 저장소 분리하기 src 폴더를 만들고 .js파일들 모두 이동 1. 프로젝트에 웹팩 설치 npm install webpack webpack-cli --save-dev 2. 웹팩 설정 파일 webpack.config.js const path = require('path'); ​ module.exports = { entry: './src/main.js', outpu..