JudithHopps JudithHopps

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 개미군단 개미 군단이 사냥을 나가려고 합니다. 개미군단은 사냥감의 체력에 딱 맞는 병력을 데리고 나가려고 합니다. 장군개미는 5의 공격력을, 병정개미는 3의 공격력을 일개미는 1의 공격력을 가지고 있습니다. 예를 들어 체력 23의 여치를 사냥하려고 할 때, 일개미 23마리를 데리고 가도 되지만, 장군개미 네 마리와 병정개미 한 마리를 데리고 간다면 더 적은 병력으로 사냥할 수 있습니다. 사냥감의 체력 hp가 매개변수로 주어질 때, 사냥감의 체력에 딱 맞게 최소한의 병력을 구성하려면 몇 마리의 개미가 필요..

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

디버깅은 모든 소프트웨어에서 소스 코드의 오류 또는 버그를 찾아서 수정하는 과정입니다. 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 문서 보..