JudithHopps JudithHopps

⭐ 페이지에 자바스크립트 파일 여럿을 로드할 때 문제점들 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 문서 보..

async 함수 프로미스를 기반으로 동작 마치 동기 코드처럼 직관적으로 코딩을 할 수 있음 👉 MDN 문서 보기 function getMult10Promise (number) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(number * 10); }, 1000); }); } async function doAsyncWorks () { const result1 = await getMult10Promise(1); console.log(result1); ​ const result2 = await getMult10Promise(2); console.log(result2); ​ const result3 = await getMult10P..

콜백 지옥 callback hell setTimeout(() => { console.log(1); setTimeout(() => { console.log(2); setTimeout(() => { console.log(3); setTimeout(() => { console.log(4); setTimeout(() => { console.log(5); }, 500); }, 500); }, 500); }, 500); }, 500); 💡 연속적으로 비동기 코드를 써야 하는 경우 위와 같이 콜백 함수 안에 또 다른 콜백 함수를 넣어야 하는 상황 발생 - 콜백 지옥 횟수가 많을수록 가독성도 낮아지고 직관성이 떨어짐 실전에서는 더더욱 복잡하고 난해해짐 🏃🏃🏃 릴레이 예제 철수, 영희, 돌준, 정아, 길돈이 치례로 이어..

⏲️ setTimeout 함수 첫 번째 인자로 넣은 콜백 함수를 두 번째 인자로 넣은 수 만큼의 밀리초 후 실행 Web API, Node.js 등 자바스크립트 환경의 기능 - 언어의 기능이 아님 👉 MDN 문서 보기 setTimeout(() => { console.log('타임아웃!'); }, 1000); ⭐ 비동기 asynchronous 코드 동기 synchronous 코드와 달리, 코드가 순서대로 실행되지 않음 console.log('하나'); ​ setTimeout(() => { console.log('둘'); }, 1000); // 💡 0으로 바꿔 다시 실행해 볼 것 ​ console.log('셋'); 일반적으로 타임아웃, 네트워크 요청 등 시간이 걸리는 작업에 사용 당장 할 수 있는 것들을 먼저..

I. 프로토타입 prototype 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어 오늘날에는 클래스가 더 널리 사용되지만, 사용하기에 따라 보다 강력하고 효율적 ⭐ 자바스크립트의 모든 객체는 Prototype을 가짐 const obj = {}; ​ console.log(obj); [[Prototype]] 펼쳐서 살펴볼 것 console.log( obj.toString() ); console.log( obj.valueOf() ); 빈 객체임에도 위의 메서드들이 사용 가능한 것은 프로토타입 때문 II. Object - 모든 것의 조상 아래 각 객체의 [[Prototype]]의 [[Prototype]]이 Object임 확인 각 [[Prototype]]의 메서드들 확인 console.log(..

I. ⭐️ this - "이곳의~" 기본적으로 자신이 속한 곳을 가리킴 - 문맥 context 💡 함수의 호출 방식에 따라 가리키는 바가 달라짐 - 자바스크립트 특성 1. 전역에서의 this console.log(this); 💡 아래의 환경들에서 각각 실행해 볼 것 브라우저의 콘솔창: Window 객체 - globalThis와 같음 Node.js의 REPL: global 객체 - globalThis와 같음 .js문서로 작성 후 실행 - 빈 객체 Node.js에서 각 .js 문서들은 이후 배울 모듈로서 실행되기 때문 2. 함수 안에서의 this 느슨한 모드와 엄격 모드에서 다르게 동작 function func () { console.log(this); // globalThis } ​ func(); 'use..