🥔

✅ 자바스크립트 예외 ✔ 오류의 종류 ⏩ '구문' 오류 - 프로그램 실행 전에 발생 - 코드를 작성할 때 발생하는 오류 - 문법이 언어의 정의된 규칙을 따르지 않을 때 발생 ⏩ '런타임' 오류 - 프로그램 실행 중에 발생 - 예측 가능한 비정상적인 조건 또는 예외적인 사건을 의미 - 코드가 순차적으로 실행되다가 오류가 위치하는 부분 이후에 실행이 중단 ✔ JS 실행 중 발생하는 예외를 다루는 방법  ⏩ 기본 예외 처리 - 조건문을 사용해서 예외가 발생하지 않도록 지정 (권장하지 X)// HTML에 존재하지 않는 요소를 불러오는 경우document.addEventListener('DOMContentLoaded', () => { if (p) { // p 요소가 존재하는 경우에만 p.textConten..

✅ DOM (문서 객체 모델, Document Object Model) - HTML 안에서 요소(Element)로 불리는 객체를 JS에서는 문서 객체라고 불림 ✔ DOM 사용 방법 - JS에서 DOM에 접근하는 경우 요소를 선택, 추가, 수정, 삭제하는 메소드와 속성에 접근 O >> CRUD ✔ DOM 조작 방법  ⏩ DOMContentLoaded 이벤트- JS내에서 문서 객체를 조작할 때 사용 >> HTML의 모든 문서 구조(내용)가 모드 로드된 이후에 이벤트 발생- 문서 객체가 정립된 이후에 콜백 함수(화살표 함수)가 실행document.addEventListener('DOMContentLoaded', () => { // 해당 위치에 DOM 조작 코드를 작성});⏩ 문서 객체 가져오기- 전체 HTM..

✅ 모듈(module) ✔ 모듈의 정의 - 재사용 가능한 코드 조각  >> 함수, 변수 클래스, 파일 등을 포함 ✔ ES6 모듈 - ES2015 이후에 JS에서 공식적으로 모듈 시스템을 도입  >> import, export문을 통해 모듈을 가져오고 내보내는 방식 도입 ✔ Node.js 환경에서 ES6 모듈 시스템 활용 방법  >> package.json 파일에 type: "module"을 추가⏩ 프로젝트의 루트 디렉토리(폴더)에 package.json 파일 생성- npm init -y  ✅ import & export 문 (ES6 모듈 시스템) ✔ export 문 - 모듈에서 다른 파일로 함수, 변수, 클래스 등을 내보낼 때 사용⏩ Named Exports (이름 붙여 내보내기) - 하나의 모듈에서 여..

✅ 이벤트 - 웹 페이지에서 발생하는 대부분의 일(사건)을 의미 EX) 사용자가 버튼을 클릭, 웹 페이지가 로드, input 필드에 입력 등 ✔ 이벤트 핸들링 - 특정 이벤트에 반응해서 특정 동작을 실행하는 것- 이벤트 핸들러(이벤트 리스너)는 특정 이벤트가 발생했을 때 호출되는 함수  ✔ JS 이벤트 종류 (대표적으로 자주 쓰는 것) ⏩ 마우스 이벤트click: 요소를 클릭할 때 발생 ⏩ 키보드 이벤트keydown: 키를 누를 때 발생 ⏩ 폼 이벤트submit: 폼을 제출할 때 발생 change: 폼 요소의 값이 변경될 때 발생  ✔ 이벤트 핸들러 사용 예시 ⏩ HTML 요소 버튼 클릭 시 랜덤 색상 출력1. random 함수 정의: 랜덤 숫자 생성- Math.random() / Math.floor()..

✅ 내장객체 - 특정 작업 수행이나 복잡한 기능을 담은 메서드와 속성 제공  ✔ Number 객체의 기본 메서드  ⏩ toFixed() - 소수점 이하 N자리 까지만 출력 (반올림)let num = 123.4567;console.log(num.toFixed(3)); // 123.457console.log(num.toFixed(5)); // 123.45670console.log(num.toFixed()); // 123⏩ isNaN()- Number 객체에 바로 적용해 NaN인지 확인 (인자값으로 확인할 데이터 삽입) let notNum = Number('숫자로 변환할 수 없는 값');console.log(notNum); // NaNconsole.log(notNum === NaN); // false: NaN..

✅ 객체 (object) 관련된 데이터와 함수를 모아 놓은 집합객체 내부에서는 데이터와 함수를 프로퍼티(속성)과 메서드(기능)라고 불림(참조)데이터 타입 중 하나, 다양한 값을 담을 수 있는 컨테이너EX) '사람'이라는 객체를 정의특성 (속성, 프로퍼티) ➡ 변수- 객체가 가진 데이터(값) - 객체를 구성하는 정보의 일부, 해당 객체의 상태를 나타냄 - 이름, 나이, 성별, 직업, 주민등록번호, 키, 몸무게, ... 등 기능 (동작, 메서드) ➡ 함수- 객체가 수행할 수 있는 행동이나 기능을 정의 - 객체의 속성을 활용하거나 조작 가능- 공부하다, 걷다, 먹다, 말하다, 잠을 자다, ... 등  ✔ 객체의 기본 형태 (구조) let objectName = { 키1: 값1, 키2: 값2, 키3: 값3..

✅ 함수의 사용 용도  ✔ 코드 재사용 function sum(a, b) { return a + b;}let result = sum(1, 2); // 3console.log(result);console.log(sum(9328, 3423)); // 12751  ✔ 모듈화 & 추상화 복잡한 작업을 수행하는 코드를 함수로 분리 ➡ 각 함수가 수행하는 작업에 집중모듈성: 로직 단위로 작업을 나누어 관리할 수 있는 특성✔ 이벤트 처리 웹 페이지에서 발생하는 다양한 이벤트를 처리하는데 사용  ✅ 함수의 구현 방법  (생성)  ✔ function 키워드 사용 function 함수명(매개변수, parameter) { - 함수가 수행할 코드 return 결과값;}   ✅ 자바스크립트 함수 구조 ➡ 매개변수 & 인..

✅ 배열(Array) 여러 개의 변수를 한 번에 선언하여 다룰 수 있는 자료형 (참조 자료형)순차적으로 저장  ➡  데이터에 순서가 존재배열 내부의 데이터를 요소  ➡  요소에는 모든 타입의 데이터 가능기본으로 부여되는 순서 Index(인덱스, 0부터 1씩 증가)  ⏩ 일반 자료형 VS 참조 자료형- 일반 자료형일반 자료형은 원본 데이터와 복사된 데이터가 별도로 저장 서로 영향을 미치지 Xlet num1 = 10;let num2 = num1;console.log(num2); // 10num2 = 20;console.log(num1); // 10console.log(num2); // 20 - 참조 자료형 함수, 배열, 객체 등 (복합 자료형) ➡ 변수에 값이 아닌 '메모리 주소를 저장' 하여 '참조'let..

✅ 연산자 수학적 연산을 위한 코드산술, 할당, 비교, 논리  ✔ 산술 연산자 +, - *, / ⏩ 증감 연산자++, -- 형태 ➡ 수를 1씩 증가 또는 감소 시킬 때 사용 ** 1항(하나의 데이터)에 대한 연산식전위: 데이터 앞에 연산자 있을 경우(바로 값 변화)후위: 데이터 뒤에 연산자 있을 경우(그 다음 호출 시 값 반영)x = 10; // 변수 할당console.log(x++); // 10console.log(x); // 11console.log(++x); // 12x = 10;x++; // 10 (+1) x++; // 11 (+1)--x; // (-1) 12 = 11x++; // 11 (+1)x; // 12x++; // 12 (+1)++x; // (+1) 13 = 14--x; // (-1) 1..

✅ 자료형 (data type)  ✔ 기본 자료형 : string, number, boolean, null&undefined +) typeof 연산자 : 자료형을 출력하는 연산자let num = 10;let bool = true;console(typeof num); // numberconsole(typeof bool); // boolean 1. string (문자열)작은 따옴표(' '), 큰 따옴표(" "), 백틱(` `) 사용 가능let str1 = 'hello';let str2 = "hello";let str3 = `hello world`; ** 템플릿 문자열 - 문자열 내에 변수나 표현식을 사용할 수 있도록 하는 문자열 +) 줄바꿈도 인식 가능// 변수 선언let name = '홍길동';// 기본 ..