전체 글104 [자바스크립트 14일 완전정복] 9일차 - DOM 조작과 이벤트 핸들링 자바스크립트로 웹 페이지의 요소를 변경하고, 사용자와 상호작용하는 기능을 구현하려면 DOM(Document Object Model) 조작과 이벤트 핸들링을 이해해야 해요.오늘은 DOM 요소 선택, 요소 변경, 이벤트 리스너 추가/제거, 그리고 이벤트 객체 활용 방법을 배워보겠습니다. 1. DOM(Document Object Model)이란?웹 페이지의 HTML 구조를 자바스크립트에서 조작할 수 있도록 트리 구조로 표현한 객체 모델을 DOM이라고 해요.이 DOM을 이용하면 HTML 요소를 선택하고, 수정하고, 스타일을 변경할 수 있습니다. 2. DOM 요소 선택 방법자바스크립트에서는 여러 가지 방법으로 HTML 요소를 선택할 수 있어요.2.1 document.getElementById() - ID로 요.. 2025. 3. 11. [자바스크립트 14일 완전정복] 8일차 - 비동기 처리 (Async & Await, Promise) 자바스크립트는 싱글 스레드(Single Thread) 기반 언어라서 한 번에 하나의 작업만 실행할 수 있어요. 하지만, 비동기 처리(Asynchronous Processing) 개념을 활용하면 시간이 오래 걸리는 작업(예: API 요청, 파일 읽기 등)을 중단하지 않고 효율적으로 실행할 수 있습니다.오늘은 비동기 처리의 핵심 개념인 동기 vs 비동기, setTimeout과 setInterval, Promise, 그리고 async/await를 배워보겠습니다. 1. 동기(Synchronous) vs. 비동기(Asynchronous) 개념1.1 동기 처리란?동기(Synchronous) 방식은 코드가 순차적으로 실행되는 방식이에요.console.log("작업 1 시작");console.log("작업 2 실행".. 2025. 3. 10. [자바스크립트 14일 완전정복] 7일차 - ES6+ 문법과 최신 자바스크립트 자바스크립트는 지속적으로 발전하고 있으며, ES6(ECMAScript 2015) 이후 도입된 새로운 문법들은 코드를 더 간결하고 직관적으로 작성할 수 있도록 도와줍니다. 오늘은 ES6+에서 추가된 핵심 개념인 템플릿 리터럴, 구조 분해 할당, 기본 매개변수, 스프레드 연산자, let과 const의 차이를 학습해 보겠습니다. 1. 템플릿 리터럴 (Template Literal)기존 문자열을 다룰 때는 ", '로 감싸야 하고, 문자열 안에 변수를 넣으려면 + 연산자를 사용해야 했어요. **템플릿 리터럴(Template Literal)**을 사용하면 백틱(```)을 이용해 더 직관적으로 문자열을 작성할 수 있습니다.1.1 기본 사용법let name = "이예나";let age = 28;// 기존 방식 (E.. 2025. 3. 9. [자바스크립트 14일 완전정복] 6일차 - 고급 배열 메서드와 깊은 복사 vs 얕은 복사 자바스크립트에서 배열을 다룰 때 단순히 push()나 pop() 같은 기본 메서드만 사용하면 비효율적인 경우가 많아요.오늘은 고급 배열 메서드인 forEach(), map(), filter(), reduce()의 활용법을 배우고, 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)의 차이점을 이해해 보겠습니다. 1. 고급 배열 메서드 활용하기1.1 forEach() - 배열 요소를 순회하며 실행forEach()는 배열의 각 요소에 대해 주어진 함수를 실행하는 메서드예요. 단, 배열을 변경하거나 새로운 배열을 반환하지 않고 단순히 반복(iterate)하는 용도로 사용됩니다.let numbers = [1, 2, 3, 4, 5];numbers.forEach((num) => { console.. 2025. 3. 8. [자바스크립트 14일 완전정복] 5일차 - 객체와 배열 자바스크립트를 다루면서 가장 자주 만나게 되는 개념 중 하나가 객체(Object)와 배열(Array)입니다. 객체는 데이터를 구조적으로 관리하는 데 필수적이며, 배열은 데이터를 효율적으로 저장하고 조작하는 데 유용한 도구입니다. 오늘은 객체를 생성하고 다루는 방법, this 키워드의 개념, 배열의 기본적인 활용법에 대해 자세히 알아보겠습니다. 1. 객체(Object)란?객체는 키(key)와 값(value)으로 이루어진 데이터 구조입니다. 자바스크립트에서 객체를 활용하면 여러 개의 관련된 값을 하나로 묶어 다룰 수 있습니다.1.1 객체 생성 방법객체를 생성하는 방법은 여러 가지가 있지만, 가장 많이 사용되는 두 가지 방법은 객체 리터럴(Object Literal)과 new Object()입니다.(1) 객.. 2025. 3. 7. 맥북 에어 M4 출시! 성능·디자인·가격까지 완벽한 업그레이드 애플의 새로운 맥북 에어 M4가 오는 3월 12일 출시됩니다. 이번 모델은 성능과 디자인에서 눈에 띄는 업그레이드를 이루며, 더욱 강력해진 M4 칩을 탑재해 이전 세대보다 향상된 속도를 제공합니다. 특히 가격 대비 성능이 뛰어나, 맥북을 새로 구매하려는 사용자들에게 매력적인 선택지가 될 전망입니다.M4 칩으로 한층 더 강력해진 성능맥북 에어 M4의 가장 큰 특징은 바로 M4 칩입니다. 애플이 자체 설계한 이 칩은 10코어 CPU(고성능 코어 4개, 고효율 코어 6개)와 최대 10코어 GPU를 갖추고 있으며, 머신 러닝을 가속화하는 16코어 뉴럴 엔진도 포함되어 있습니다.M4 칩은 이전 세대인 M3와 비교했을 때 더욱 빠르고 효율적인 성능을 제공합니다. 예를 들어, iMovie 및 Adobe Photosh.. 2025. 3. 6. 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음
