코딩하는 패션이과생

Todo List 프로젝트 소개Todo List(할 일 목록)는 JavaScript 학습에 완벽한 첫 번째 프로젝트입니다. DOM 조작, 이벤트 처리, 배열 다루기, 로컬 저장소 활용 등 실무에서 자주 사용하는 핵심 기능들을 모두 경험할 수 있습니다.🎯 학습 목표DOM 조작: 요소 생성, 수정, 삭제이벤트 처리: 클릭, 키보드 입력배열 메서드: push, filter, map 활용localStorage: 데이터 영구 저장실무 패턴: 코드 구조화와 함수 분리필요한 기능 정리우리가 만들 Todo List의 핵심 기능들:✅ 기본 기능할 일 추가하기할 일 완료 표시하기할 일 삭제하기할 일 목록 표시하기🚀 고급 기능브라우저 새로고침 후에도 데이터 유지전체 삭제 기능완료된 항목 숨기기/보기남은 할 일 개수 표시..

이벤트 개요마우스 이벤트와 키보드 이벤트는 사용자의 입력을 감지하여 웹페이지가 반응하도록 만드는 핵심 기능입니다. 이 두 이벤트를 활용하면 클릭, 호버, 키 입력 등 다양한 상호작용을 구현할 수 있습니다.🔍 기본 HTML 예제 마우스 영역이벤트 결과마우스 이벤트마우스로 수행할 수 있는 다양한 동작에 대응하는 이벤트들입니다.주요 마우스 이벤트 종류let mouseArea = document.getElementById('mouseArea');let output = document.getElementById('output');// 클릭 이벤트mouseArea.addEventListener('click', function(event) { output.textContent = '클릭됨!'; co..

이벤트 처리란?이벤트 처리는 사용자의 행동(클릭, 키 입력, 마우스 움직임 등)에 반응하여 JavaScript 코드를 실행하는 것입니다. JavaScript에서 이벤트를 처리하는 주요 방법은 onclick과 addEventListener입니다.🔍 기본 HTML 예제클릭하세요결과가 여기에 표시됩니다onclick 속성 사용법onclick은 가장 간단한 이벤트 처리 방법입니다. HTML 속성 또는 JavaScript 속성으로 사용할 수 있습니다.HTML에서 onclick 사용HTML onclick간단한 알림색상 변경JavaScript에서 onclick 사용// JavaScript 속성으로 설정let button = document.getElementById('myButton');button.onclick =..

실습 목표목표: 버튼을 클릭할 때마다 웹페이지의 배경색이 변경되는 인터랙티브 기능을 만들어봅시다.🎯 학습 포인트이벤트 리스너 활용DOM 스타일 조작배열과 랜덤 함수 사용사용자 인터페이스 개선기본 버전 만들기가장 간단한 형태부터 시작해보겠습니다.1단계: HTML 구조 배경색 변경하기 배경색 바꾸기 2단계: CSS 스타일링3단계: JavaScript 기본 기능실행 결과:첫 번째 클릭: 배경색이 연한 파란색으로 변경두 번째 클릭: 배경색이 연한 산호색으로 변경세 번째 클릭: 다시 연한 파란색으로 변경여러 색상으로 업그레이드이제 더 많은 색상을 사용해봅시다.개선된 JavaScript실행 결과:클릭할 때마다 7가지 색상이 순환하며 변경됩니다.버튼 텍스트도 다음 색상 이름으로..

DOM 조작이란?DOM 조작은 JavaScript로 HTML 요소의 내용, 스타일, 속성을 동적으로 변경하는 것입니다. 정적인 웹페이지를 사용자와 상호작용하는 동적인 웹 애플리케이션으로 만드는 핵심 기술입니다.🔍 기본 HTML 예제 원래 제목 원래 내용입니다. 클릭하세요내용 변경하기HTML 요소의 텍스트나 HTML 내용을 JavaScript로 변경할 수 있습니다.textContent vs innerHTMLlet title = document.getElementById('title');let description = document.querySelector('.description');// textContent: 순수 텍스트만 변경title.textContent = '새로운 제목';// innerH..

DOM 요소 선택이란?DOM 요소 선택은 HTML 문서에서 특정 요소를 JavaScript로 가져오는 과정입니다. 요소를 선택해야 내용을 변경하거나 이벤트를 추가할 수 있습니다.🔍 기본 HTML 예제 제목 홈 소개 설명문이 HTML에서 다양한 방법으로 요소를 선택할 수 있습니다.getElementById - ID로 선택getElementById()는 ID 속성으로 하나의 요소를 선택하는 가장 기본적이고 빠른 방법입니다.기본 문법// 문법document.getElementById('아이디명')// 사용 예제let header = document.getElementById('header');console.log(header); // ...특징과 활용// ID는 문서에..

콜백 함수란?콜백 함수(Callback Function)는 다른 함수의 매개변수로 전달되어, 특정 시점에 호출되는 함수입니다. "나중에 다시 호출(call back)한다"는 의미에서 콜백이라고 부릅니다.🔍 콜백 함수의 핵심 개념// 콜백 함수를 받는 함수function greetUser(name, callback) { console.log("안녕하세요, " + name + "님!"); callback(); // 콜백 함수 실행}// 콜백 함수 정의function showWelcome() { console.log("환영합니다!");}// 사용greetUser("김철수", showWelcome);실행 결과:안녕하세요, 김철수님!환영합니다!기본 사용법1단계: 간단한 콜백 함수// 계산 후 결..

화살표 함수란?화살표 함수(Arrow Function)는 ES6(ES2015)에서 도입된 함수 표현식의 간결한 문법입니다. => 기호를 사용하여 함수를 정의하며, 기존 함수 표현식보다 짧고 읽기 쉬운 코드를 작성할 수 있습니다. 특히 콜백 함수나 간단한 함수를 작성할 때 매우 유용합니다.🔍 왜 화살표 함수가 필요할까?// ES5 이전 방식 (길고 복잡)let numbers = [1, 2, 3, 4, 5];let doubled = numbers.map(function(num) { return num * 2;});// ES6 화살표 함수 (간결)let doubledArrow = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8..

연산자란?연산자(Operator)는 하나 이상의 피연산자(operand)에 대해 특정 연산을 수행하는 기호입니다. JavaScript에는 다양한 종류의 연산자가 있으며, 각각 고유한 역할을 합니다.🔍 연산자 분류// 이항 연산자 (binary operator)5 + 3; // 피연산자 2개// 단항 연산자 (unary operator)-5; // 피연산자 1개// 삼항 연산자 (ternary operator)condition ? value1 : value2; // 피연산자 3개산술 연산자➕ 기본 산술 연산자let a = 10;let b = 3;// 덧셈console.log(a + b); // 13// 뺄셈console.log(a - b); // 7// 곱셈console.log(a * b)..

자료형이란?자료형(Data Type)은 프로그래밍에서 데이터의 종류를 정의하는 개념입니다. JavaScript는 동적 타이핑 언어로, 변수의 자료형을 선언할 때 지정하지 않고 런타임에 결정됩니다.🔍 JavaScript 자료형 분류JavaScript의 자료형은 크게 두 가지로 나뉩니다:원시 자료형 (Primitive Types)String, Number, Boolean, undefined, null, Symbol, BigInt참조 자료형 (Reference Types)Object, Array, Function원시 자료형 개요📝 원시 자료형의 특징// 원시 자료형은 값 자체를 저장let a = 10;let b = a;a = 20;console.log(a); // 20console.log(b); // 10..