전체 글102 [자바스크립트 14일 완전정복] 13일차 - 테스트와 디버깅 자바스크립트를 사용하다 보면 버그(Bug)를 찾고 수정하는 과정(디버깅)이 꼭 필요해요.또한, 테스트(Test)를 통해 코드의 정확성을 검증하면 유지보수가 훨씬 쉬워집니다.오늘은 브라우저 개발자 도구 활용법, console.log()와 debugger, 그리고 Jest와 같은 테스팅 도구를 소개하겠습니다. 1. 브라우저 개발자 도구(DevTools) 활용웹 개발자에게 브라우저의 개발자 도구(DevTools)는 필수적인 도구예요.✔ F12 또는 Ctrl + Shift + I (Cmd + Opt + I on Mac)로 실행 가능 1.1 콘솔(Console) 패널 활용콘솔 패널은 자바스크립트 오류 확인 및 디버깅에 유용해요. (1) console.log()로 값 출력let name = "이예나";consol.. 2025. 3. 15. [자바스크립트 14일 완전정복] 12일차 - 객체 지향 프로그래밍(OOP) 기초 자바스크립트는 객체 기반 프로그래밍 언어로, 객체 지향 프로그래밍(Object-Oriented Programming, OOP) 개념을 활용하면 더 구조적인 코드 작성이 가능해요.오늘은 클래스와 생성자, 프로토타입 기반 객체 지향 개념, 상속과 super 키워드, 캡슐화와 다형성에 대해 배워보겠습니다. 1. 객체 지향 프로그래밍(OOP)이란?객체 지향 프로그래밍(OOP)은 데이터(속성)와 해당 데이터를 다루는 함수(메서드)를 하나의 객체로 묶어 관리하는 방식입니다.✔ 코드의 재사용성이 높아지고 유지보수가 쉬워짐✔ 코드가 구조적으로 정리되어 가독성이 좋아짐OOP의 주요 개념클래스(Class)와 생성자(Constructor): 객체를 생성하는 틀프로토타입(Prototype): 자바스크립트의 객체 상속 메커니.. 2025. 3. 14. [자바스크립트 14일 완전정복] 11일차 - 모듈과 웹팩(Webpack) 기초 자바스크립트가 발전하면서 코드를 효율적으로 관리하고 재사용할 수 있는 방법이 필요해졌어요.그 해결책 중 하나가 모듈 시스템(Module System)이며, 이를 효과적으로 번들링해주는 도구가 웹팩(Webpack)이에요.오늘은 모듈 개념, 웹팩(Webpack)과 바벨(Babel)의 기초 개념, 그리고 간단한 프로젝트에 적용하는 방법을 배워보겠습니다! 1. 모듈(Module)이란?1.1 모듈의 개념모듈(module)은 코드를 여러 파일로 나누어 관리할 수 있도록 하는 기능이에요.✔ 코드 재사용성이 높아짐✔ 파일 단위로 분리하여 유지보수 용이✔ 전역 변수 오염 방지 1.2 export와 import 기본 사용법(1) 모듈 파일에서 export 사용하기// math.js (모듈 파일)export func.. 2025. 3. 13. [자바스크립트 14일 완전정복] 10일차 - 브라우저 API 및 로컬 스토리지 자바스크립트는 단순히 웹 페이지의 요소를 조작하는 것뿐만 아니라, 브라우저의 다양한 기능을 활용할 수도 있어요.오늘은 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage), JSON 데이터 처리, Fetch API를 이용한 HTTP 요청, 그리고 에러 처리 방법을 배워보겠습니다. 1. 로컬 스토리지(LocalStorage)와 세션 스토리지(SessionStorage)1.1 스토리지 개념브라우저는 데이터를 저장할 수 있는 웹 스토리지(Web Storage) 기능을 제공합니다.localStorage: 데이터를 영구적으로 저장 (브라우저를 닫아도 유지됨)sessionStorage: 데이터를 세션 동안만 유지 (브라우저를 닫으면 삭제됨)✔ 쿠키보다 사용이 간편하고 저장할 수 있는.. 2025. 3. 12. [자바스크립트 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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 17 다음
