wwxs 님의 블로그

예외(exception)오류부정확 하거나 유효하지 않은 동작오류의 종류1) '구문' 오류프로그램 실행 전에 발생코드를 작성할 때 발생하는 오류문법이 언어의 정의된 규칙을 따르지 않을 때 발생2) '런타임' 오류 : 프로그램 실행 중에 발생프로그램 실행 중에 발생예측 가능한 비정상적인 조건 또는 예외적인 사건을 의미코드가 순차적으로 실행되다가 오류가 위치하는 부분 이후에 실행이 중단 예외처리1. 기본 예외 처리조건문을 사용해서 예외가 발생하지 않도록 지정 (권장 x)2. 고급 예외 처리try catch 블럭을 사용 (+finally)try 블록 : 블록 내에서 실행된 코드는 예외 발생 여부를 감지 → 예외가 발생하면 즉시 실행이 중단되고 catch블록으로 제어가 이동catch 블록 : 예외가 발생했을 때 ..

DOM (문서 객체 모델, Document Object Model)웹 페이지를 문서 객체로 조작하고 관리할 수 있는 인터페이스 DOM 사용 방법 JS에서 DOM에 접근하는 경우 요소를 선택, 추가, 수정, 삭제하는 메서드와 속성에 접근 가능C(Create), R(UD DOM 조작 방법1) DOMContentLoadedJS 내에서 문서 객체를 조작할 때 사용HTML의 모든 문서 구조(내용)가 모두 로드된 이후에 이벤트 발생더보기(기본구조)document.addEventListener('DOMContentLoaded', () => { // 해당 위치에 DOM 조작 코드를 작성})2) 문서 객체 가져오기전체 HTML 구조를 객체로 인식하여 속성을 가져옴document.body / document.head 처..

비동기(async)비동기 프로그래밍 특정 코드의 실행 완료를 기다리지 않고 다음 코드를 실행하는 프로그래밍 방식프로그램의 실행 흐름을 차단하지 않고, '시간이 오래 소요'되는 작업 처리에 사용ex) '네트워크 요청(서버와의 통신)', 파일 I/O 등에 주로 사용더보기console.log('== 비동기 구현 ==');function anotherWork() { setTimeout(() => { const start = Date.now(); for (let i = 0; i  비동기 프로그래밍 - 콜백 함수다른 함수에 인자로 전달되어, 해당 함수에 의해 어느 시점에 호출되는 함수더보기// 콜백함수function greet(name) { console.log(`Hello, ${name}`);}더보..

모듈(Module)모듈의 정의 재사용 가능한 코드 조각 → 함수, 변수, 클라스, 파일 등을 포함모듈의 특징각각의 모듈은 독립성을 가짐다른 코드 내부에서 재사용 가능네임스페이스 관리: 모듈 자체의 이름을 가짐(다른 모듈과의 충돌을 방지)가독성 및 조직화 향상ES6 모듈ES2015 이후에 JS에서 공식적으로 모듈 시스템을 도입 → import, export문을 통해 모듈을 가져오고 내보내는 방식 도입스코프 격리 : 모듈 내에서 선언된 변수, 함수, 클래스 등은 모듈 외부에서 접근 x → 전역 변수의 사용 줄이고 이름 충돌을 방지재사용성과 유지보수성 향상더보기(import문 사용 예시)import { PI as PIE, multiply as mp } from './module02.js';console.log..

내장 객체자바스크립트의 내장 객체특정 작업 수행이나 복잡한 기능을 담은 메서드와 속성을 제공1. Number 객체의 기본 메서드    1) toFixed()소수점 이하 N자리까지만 출력 (반올림)    2) isNaN(), isFinite()각각 NaN인지 Infinity인지 확인더보기더보기(isNaN)let notNum = Number('숫자로 변환할 수 없는 값');console.log(notNum); // NaNconsole.log(notNum === NaN); // false: NaN 데이터는 비교연산자 사용이 불가console.log(Number.isNaN(notNum)); //true(isInfinity)console.log(10 / 0);console.log(-10 / 0);let in..

이벤트 (Event)웹 페이지에서 발생하는 대부분의 일(사건)을 의미ex) 사용자가 버튼을 클릭, 웹 페이지가 로드,  input 필드에 입력하는 것 등 이벤트 핸들링특정 이벤트에 반응해서 특정 동작을 실행하는 것을 의미이벤트 핸들러(이벤트 리스너)는 특정 이벤트가 발생했을 때 호출되는 함수JS이벤트의 종류더보기1) 마우스 이벤트click: 요소를 클릭할 때 발생 dblclick: 요소를 더블 클릭할 때 발생 mousedown: 마우스 버튼을 누를 때 발생 mouseup: 마우스 버튼을 뗄 때 발생 mouseover: 요소 위로 마우스를 올릴 때 발생 mouseout: 요소 밖으로 마우스를 뺄 때 발생 mousemove: 마우스가 움직일 때 발생 2) 키보드 이벤트keydown: 키를 누를 때 발생 ke..

객체(object)관련된 데이터와 함수를 모아 놓은 집합객체 내부에서는 데이터와 함수를 프로퍼티(속성)과 메서드(기능)라고 불림더보기객체지향 프로그래밍실세계에 존재하고 인지하는 모든 것을 객체로 표현(참조)데이터 타입 중 하나, 다양한 값을 담을 수 있는 컨테이너 객체의 구조 : 객체 지향 프로그램의 객체 - 고유한 특성과 동작을 가지는 것특성 (속성, 프로퍼티) - 변수객체가 가진 데이터(값)객체를 구성하는 정보의 일부, 해당 객체의 상태를 나타냄기능 (동작, 메서드) - 함수객체가 수행할 수 있는 행동이나 기능을 정의객체의 속성을 활용하거나 조작 가능더보기(기본 구조)let objectName = { // 키1 : 값1, // 키2 : 값2, // 키3 : 값3, // ... // >> 값의..

콜백 함수다른 함수에 인자로 전달되어, 그 함수의 내부에서 실행되는 함수콜백 함수의 중요성비동기 처리 : 순차적인 코드 흐름을 개발자가 원하는 방식으로 제어 가능이벤트 리스너 처리 : 사용자 행동에 반응하는 이벤트 내부에서 동작 가능콜백 함수의 응용 사례서버 요청 처리이벤트 처리타이머 함수콜백 함수 예제 코드더보기// 1) 선언적 함수를 사용한 콜백 함수 구현console.log('=== 콜백함수: 선언적 함수 ===');// 0부터 2까지를 "콘솔창에 출력" >> 3번 실행function callback1(callbackFunc) { // callbackFunc 매개변수 (함수를 데이터로 전달받음) // 함수 내부에서 다양한 기능, 동작 작성 가능 for (let i = 0; i { // con..

배열(Array)'여러 개'의 데이터를 '순차적'으로 나열한 자료 구조다양한 타입을 하나의 배열에 저장 가능0부터 시작하는 인덱스 번호를 가짐(1씩 증가) - 각각의 데이터를 "요소"라고 부름 - 크기가 고정 X / 프로그램 실행 중 동적으로 사용 가능배열 사용 목적집합적 데이터 관리 용이순차적 접근다양한 데이터 타입을 함께 저장 배열 생성1) 리터럴(literal, 문자그대로의) 방식가장 직관적이고 간편함[ ](대괄호) 안에 원하는 요소들을 , (콤마)로 구분하여 나열 2) Array 생성자 사용 방식새로운 배열 생성 시 배열의 크기나 초기값을 지정하는 방법 배열 요소 접근 & 수정각 요소는 고유한 인덱스를 통해 접근 & 수정 가능1) 요소 접근배열명[인덱스번호]2) 요소 수정배열명[인덱스번호] = 수..

Function : 특정 작업을 수행하거나 값을 계산하는 데 사용되는 코드의 묶음(집합) 1) 코드 재사용더보기// 덧셈 예제코드function sum(a, b){ return a + b;}let result = sum(1, 2); // 3console.log(result);console.log(sum(297421,123879));2) 모듈화 & 추상화: 복잡한 작업을 수행하는 코드를 함수로 분리모듈성 : 로직(코드 흐름) 단위로 작업을 나누어 관리할 수 있는 특성3) 이벤트 처리: 웹 페이지에서 발생하는 다양한 이벤트를 처리하는데 사용더보기(예시)let button = document.querySelector('button');function message(){ // 웹 문서의 요소들과 묶이는 기능..