JudithHopps JudithHopps

⭐ 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..

⭐ 페이지에 자바스크립트 파일 여럿을 로드할 때 문제점들 1. 네임스페이스 문제 index.html 제대로 파는 자바스크립트 script1.js const x = 1; ​ console.log(x); script2.js const x = 2; ​ console.log(x); 같은 상수나 변수명이 둘 이상의 파일에서 사용되었으므로 오류 발생 다른 파일에 상수/변수명이나 함수명이 중복 사용되지 않았는지 확인해야 함 규모가 큰 웹페이지를 분업하여 만들 때 특히 큰 어려움 2. 파일의 순서 문제 index.js 제대로 파는 자바스크립트 script1.js const x = 1; ​ console.log(x); script2.js const y = 2; ​ console.log(x, y); 💡 script1.js..

index.html 제대로 파는 자바스크립트 변경 전... // 콘솔에서 실행한 뒤 결과 확인 document.querySelector('span').innerText = '텍스트 변경됨'; 이 스크립트를 위의 HTML 파일에 로드하여 사용하는 방법 1. 헤드에 스크립트로 로드 index.html 제대로 파는 자바스크립트 변경 전... script.js document.querySelector('span').innerText = '텍스트 변경됨'; 스크립트 동작하지 않음 - 스크립트 로드 시점에는 body 요소가 로드되지 않았음 스크립트의 크기가 클 경우 그 아래 요소들의 로드가 지연됨 - 동기적 로드 2. body 요소들 아래에 로드 index.html 제대로 파는 자바스크립트 변경 전... scrip..

🌐 예제용 서버 요청 경기 결과 https://showcases.yalco.kr/javascript/mockserver/race-result 각 선수들 정보 https://showcases.yalco.kr/javascript/mockserver/runners/{1~5} 학교 정보 https://showcases.yalco.kr/javascript/mockserver/schools/{1~3} Fetch API Web API에서 제공하는 기능 - 즉 브라우저에서 제공 네트워크로부터 리소스를 받아오기 위한 다양하고 강력한 기능들 제공 👉 MDN 문서 보기 보다 오래된 방법: 🔗 XMLHttpRequest fetch 메서드 네트워크 통신으로 원격에 요청을 보내고 답을 받아오는 프로미스를 반환 👉 MDN 문서 보..