chLog

JS 웹 스토리지 정리 (Cookies, LocalStorage, SessionStorage)📌 1. Client-side Storage란?웹 브라우저를 통해 사용자의 로컬 환경에 데이터를 저장하는 기술서버와의 통신 없이 빠르고 효율적인 데이터 접근이 가능📌 2. Client-side Storage의 특징퍼포먼스 개선: 서버 요청 최소화로 성능 향상오프라인 액세스: 네트워크 없이도 데이터 접근 가능사용자 경험 개선: 개인 설정 및 이전 상태 저장 가능📌 3. 종류 및 특징 비교🔹 1) Cookies✅ 수명: expires 지정 가능 (기본은 브라우저 종료 시 삭제)✅ 용량: 약 4KB✅ 서버와 매 요청마다 전송됨✅ 보안에 취약 (XSS, 탈취 우려)✅ 사용 예: 로그인 세션, 사용자 추적생성 예시..

📌 자바스크립트 예외 처리 (Exception Handling)🔹 오류(Error)란?오류는 부정확하거나 유효하지 않은 동작을 의미합니다.SyntaxError : 문법 오류ReferenceError, TypeError, 등은 런타임 중 발생하는 예외.🔹 예외(Exception)의 종류1️⃣ 구문 오류 (Syntax Error)프로그램 실행 전, 코드 작성 시 문법 오류로 인해 발생.언어의 규칙을 따르지 않을 때 발생합니다.console.log('-- 구문 오류 예제 --');// console.log('프로그램이 시작되었습니다' // 닫는 괄호 없음2️⃣ 런타임 오류 (Runtime Error)프로그램 실행 중에 발생하는 예외.오타나 예외적인 상황으로 인해 실행이 중단될 수 있음!console.lo..

📌 DOM (Document Object Model)🔹 DOM이란?DOM(Document Object Model)이란 웹 페이지를 문서 객체로 조작하고 관리할 수 있는 인터페이스입니다.✅ 문서 객체란?HTML 안에서 요소(Element)로 불리는 객체를 의미합니다.JavaScript에서 문서 객체는 HTML 요소를 의미합니다.🔹 DOM 사용 방법JavaScript를 사용하여 HTML 요소를 문서 객체로 선택, 추가, 수정, 삭제할 수 있습니다. 즉, CRUD(Create, Read, Update, Delete) 작업이 가능합니다.🔹 DOM 조작 방법1️⃣ DOMContentLoaded 이벤트HTML 문서가 모두 로드된 후에 실행되는 이벤트입니다.// 문서가 모두 로드된 후 실행document.ad..

자바스크립트 비동기 프로그래밍 정리📌 비동기 프로그래밍이란?✅ 특정 코드의 실행 완료를 기다리지 않고 다음 코드를 실행하는 프로그래밍 방식✅ 네트워크 요청, 파일 I/O 등 시간이 오래 걸리는 작업에 사용✅ 실행 흐름을 차단하지 않음📌 동기 vs 비동기🔹 동기 프로그래밍 예시console.log('== 동기 구현 ==');function work() { const start = Date.now(); for (let i = 0; i 🔹 비동기 프로그래밍 예시console.log('== 비동기 구현 ==');function asyncWork() { setTimeout(() => { const start = Date.now(); for (let i = 0; i ..

자바스크립트 모듈 정리📌 모듈이란?재사용 가능한 코드 조각으로, 함수, 변수, 클래스, 파일 등을 포함합니다.✅ 각 모듈은 독립성을 가짐✅ 다른 코드 내부에서 재사용 가능✅ 네임스페이스 관리가 가능하여 충돌 방지✅ 스코프가 격리되어 외부 접근 제한 가능📌 ES6 모듈ES2015(ES6) 이후부터 JavaScript에서는 공식적으로 모듈 시스템을 도입했습니다. 이를 통해 import와 export 문을 사용하여 모듈을 관리할 수 있습니다.🔹 Node.js 환경에서 모듈 사용Node.js에서는 ES6 모듈 시스템을 사용하려면 package.json 파일에 다음을 추가해야 합니다.{ "type": "module"}🔹 프로젝트 루트 디렉토리에 package.json 파일 추가npm init -y📌 모..

자바스크립트 내장 객체 정리📌 내장 객체란?기능을 구현할 때 직접적인 구현이 아닌 객체를 불러와 기능을 사용하는 것 ✅ JavaScript는 다양한 내장 객체(Built-in Objects)를 제공✅ 특정 작업을 수행하거나 복잡한 기능을 간편하게 구현할 수 있도록 도움을 줌.📌 Number 객체Number 객체는 수치형 데이터를 처리하는 속성과 메서드를 포함한 내장 객체입니다.🔹 toFixed(N) - 소수점 반올림let num = 123.4567;console.log(num.toFixed(3)); // '123.457'console.log(num.toFixed(1)); // '123.5'console.log(num.toFixed()); // '123' (기본값: 0자리 반올림)🔹 isNaN()..

자바스크립트 이벤트(Event) 정리📌 이벤트(Event)란?웹 페이지에서 발생하는 특정 행동이나 동작을 의미✅ 이벤트 핸들링(Handling): 특정 이벤트에 반응하여 특정 동작을 실행하는 것을 의미✅ 이벤트 핸들러(리스너): 특정 이벤트가 발생하면 호출되는 함수📌 JS의 이벤트 종류마우스이벤트설명click요소를 클릭할 때 발생dblclick요소를 더블 클릭할 때 발생mousedown마우스 버튼을 누를 때 발생mouseup마우스 버튼을 뗄 때 발생mouseover요소 위로 마우스를 올릴 때 발생mouseout요소 밖으로 마우스를 뺄 때 발생mousemove마우스가 움직일 때 발생키보드 이벤트설명keydown키를 누를 때 발생keyup키를 뗄 때 발생keypress키를 누르고 있을 때 발생 (현재는 ..

자바스크립트 객체(Object) 기초 정리📌 객체(Object)란?객체는 관련된 데이터와 함수를 모아놓은 집합으로, 속성(프로퍼티)와 메서드(기능)로 구성됩니다.속성(Property): 객체가 가진 데이터 (예: 이름, 나이, 직업 등)메서드(Method): 객체가 수행할 수 있는 행동 (예: 걷다, 말하다 등)🔹 객체지향 프로그래밍이란?객체를 중심으로 프로그램을 구성하는 방식으로, 실세계의 모든 것을 객체로 표현하는 프로그래밍 패러다임입니다.📌 객체 생성 및 멤버 접근🔹객체 생성 방법✅ 객체 리터럴 방식let person = { name: "홍길동", age: 25, greet: function() { console.log("안녕하세요, " + this.name + "입니다."); ..

JavaScript 콜백 함수 (고차 함수)📌 콜백 함수 (Callback Function)✅ 다른 함수의 인자로 전달되어, 그 함수 내부에서 실행되는 함수✅ JavaScript에서 함수는 '자료형'이며, 변수에 할당하거나 함수의 매개변수로 전달 가능function funcType() {}console.log(typeof funcType); // function🔹 콜백 함수의 필요성 (응용 사례)비동기 처리: 순차적인 코드 흐름을 개발자가 원하는 방식으로 제어이벤트 리스너 처리: 사용자 행동에 반응하는 이벤트 내부에서 동작 가능서버 요청 처리, 타이머 함수: 프로그램의 실행 흐름 제어🔹 콜백 함수 예시✅ 선언적 함수를 사용한 콜백 함수console.log("=== 콜백(선언적 함수) ===");fu..

JavaScript 배열 & 함수 정리📌 배열 (Array)✅ 배열은 여러 개의 데이터를 순차적으로 나열한 자료 구조✅ 다양한 타입을 하나의 배열에 함께 저장 가능✅ 크기가 고정되지 않음 (동적)✅ 인덱스는 0부터 시작🔹 1. 배열 생성 방식✅ 리터럴 방식let fruits = ['사과', '오렌지', '망고'];let mixed = [1, '문자', true, null, [1, 2]];✅ 생성자 방식let arr1 = new Array(3); // 길이만 설정 (빈 값)let arr2 = new Array('사과', '오렌지'); // 초기값 설정🔹 2. 배열 요소 접근 & 수정let sports = ['축구', '야구', '농구'];console.log(sports[1]); // 야구sports..