티스토리

새로시작하는

검색하기

블로그 홈

새로시작하는

newclass.tistory.com/m

newclass 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

최신 JavaScript 문법 최신 JavaScript 문법템플릿 리터럴템플릿 리터럴은 백틱(`)을 사용하여 문자열을 더 쉽게 작성할 수 있는 기능입니다.1. 여러 줄 문자열// 기존 방식let message = '안녕하세요.\n' + '반갑습니다.';// 템플릿 리터럴 사용let message = `안녕하세요.반갑습니다.`;2. 표현식 삽입const name = '철수';const age = 25;// 기존 방식let greeting = '안녕하세요, ' + name + '님! 나이가 ' + age + '살이시군요.';// 템플릿 리터럴 사용let greeting = `안녕하세요, ${name}님! 나이가 ${age}살이시군요.`;3. 태그드 템플릿function highlight(strings, ...val.. 공감수 0 댓글수 0 2025. 3. 30.
모듈 시스템 모듈 시스템ES6 모듈 개념모듈은 JavaScript 코드를 재사용 가능한 독립적인 파일로 분리하는 방법입니다. 복잡한 애플리케이션을 더 작고 관리하기 쉬운 조각으로 나누어 개발할 수 있게 해줍니다.모듈의 장점:코드 재사용성 향상이름 충돌 방지 (각 모듈은 자체 스코프를 가짐)코드 구조화 및 유지보수 용이의존성 관리 개선import와 exportES6에서는 import와 export 키워드를 사용해 모듈 간에 기능을 공유할 수 있습니다.export모듈에서 다른 파일로 내보내고 싶은 변수, 함수, 클래스 등을 지정합니다.방법 1: 개별 내보내기// math.jsexport const PI = 3.14159;export function add(a, b) { return a + b;}export functi.. 공감수 0 댓글수 0 2025. 3. 30.
실전 비동기 프로그래밍 패턴 실전 비동기 프로그래밍 패턴타임아웃 처리Promise가 지정된 시간 내에 완료되지 않으면 거부되도록 타임아웃을 설정할 수 있습니다.function fetchWithTimeout(url, options = {}, timeout = 5000) { return new Promise((resolve, reject) => { // 주 Promise const fetchPromise = fetch(url, options) .then(resolve) .catch(reject); // 타임아웃 Promise const timeoutPromise = new Promise((_, reject) => { setTimeout(() => { reject(ne.. 공감수 0 댓글수 0 2025. 3. 30.
async/await async/awaitES2017에서 도입된 async/await는 Promise를 기반으로 하지만, 더 간결하고 동기식 코드와 유사한 방식으로 비동기 코드를 작성할 수 있게 해줍니다.async/await 기본 문법// async 함수 선언async function fetchUserData() { try { // await는 Promise가 이행될 때까지 기다림 const response = await fetch('https://api.example.com/users'); if (!response.ok) { throw new Error(`HTTP 오류! 상태: ${response.status}`); } const userData = await respon.. 공감수 0 댓글수 0 2025. 3. 30.
Promise PromiseES6에서 도입된 Promise는 비동기 작업의 최종 완료(또는 실패) 및 결과 값을 나타내는 객체입니다. 콜백 지옥 문제를 해결하고 더 나은 오류 처리를 제공합니다.Promise 기본 개념Promise는 다음 중 하나의 상태를 가집니다:대기(pending): 초기 상태, 이행되거나 거부되지 않음이행(fulfilled): 작업이 성공적으로 완료됨거부(rejected): 작업이 실패함// Promise 생성const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 const success = true; if (success) { resolve("작업 성공!"); // 이행 상태로 전환 } else { reject(.. 공감수 0 댓글수 0 2025. 3. 30.
콜백 함수 콜백 함수의 이해와 한계콜백 함수 기본콜백 함수는 다른 함수의 인자로 전달되어 나중에 실행되는 함수입니다. JavaScript에서 비동기 처리를 위한 전통적인 방법입니다.// 기본 콜백 예제function greeting(name, callback) { console.log(`안녕하세요, ${name}님!`); callback();}greeting("홍길동", function() { console.log("콜백 함수가 실행되었습니다.");});// 비동기 콜백 예제setTimeout(function() { console.log("3초 후에 실행됩니다.");}, 3000);// DOM 이벤트 콜백document.getElementById("myButton").addEventListener("clic.. 공감수 0 댓글수 0 2025. 3. 30.
비동기 프로그래밍 비동기 프로그래밍JavaScript는 단일 스레드 언어이지만, 비동기 프로그래밍을 통해 효율적으로 여러 작업을 처리할 수 있습니다. 이 챕터에서는 JavaScript의 비동기 처리 패턴과 그 발전 과정을 살펴보겠습니다.비동기 처리 개념동기식 vs 비동기식 처리동기식 처리(Synchronous Processing) :코드가 순차적으로 실행됩니다.한 작업이 완료될 때까지 다음 작업은 대기합니다.작업 흐름이 예측 가능하고 이해하기 쉽습니다.시간이 오래 걸리는 작업이 있으면 전체 프로그램이 차단됩니다.// 동기식 처리 예제console.log("작업 1");console.log("작업 2");console.log("작업 3");// 출력 순서: "작업 1", "작업 2", "작업 3"비동기식 처리(Asynchr.. 공감수 0 댓글수 0 2025. 3. 30.
실전 DOM 조작 예제 실전 DOM 조작 예제여기서는 자주 사용되는 DOM 조작 패턴들의 실전 예제를 살펴보겠습니다.동적 목록 관리사용자가 항목을 추가하고 삭제할 수 있는 간단한 할 일 목록 예제입니다.// HTML 구조:// // // 추가// // // 할 일 목록 관리 기능const todoInput = document.querySelector('#todo-input');const addButton = document.querySelector('#add-button');const todoList = document.querySelector('#todo-list');// 할 일 추가 함수function addTodo() { const text = todoInput.value.trim(); if (text ==.. 공감수 0 댓글수 0 2025. 3. 30.
이벤트 처리 이벤트 처리이벤트는 사용자의 행동(클릭, 키보드 입력 등)이나 프로그래밍적 변화(로딩 완료, 타이머 완료 등)에 반응하여 JavaScript 코드를 실행할 수 있게 해주는 메커니즘입니다.이벤트 리스너 등록요소에 이벤트 리스너(이벤트 핸들러)를 등록하는 방법입니다.// 1. addEventListener 메서드 (권장 방법)const button = document.querySelector('#myButton');button.addEventListener('click', function(event) { console.log('버튼이 클릭되었습니다!'); console.log('이벤트 객체:', event);});// 화살표 함수 사용button.addEventListener('click', (event.. 공감수 0 댓글수 0 2025. 3. 30.
요소 선택과 조작 요소 선택과 조작DOM을 다룰 때 첫 번째 단계는 조작하고자 하는 요소를 선택하는 것입니다. JavaScript는 다양한 요소 선택 방법을 제공합니다.요소 선택 메서드단일 요소 선택// ID로 요소 선택 (단일 요소 반환)const header = document.getElementById('header');// CSS 선택자로 첫 번째 일치하는 요소 선택const firstParagraph = document.querySelector('p');const activeElement = document.querySelector('.active');const formElement = document.querySelector('#contact-form');const nestedElement = document... 공감수 0 댓글수 0 2025. 3. 30.
DOM 조작 DOM 조작웹 페이지의 JavaScript에서 가장 강력한 기능 중 하나는 HTML 문서를 동적으로 조작할 수 있다는 것입니다. DOM(Document Object Model)은 HTML과 XML 문서를 위한 프로그래밍 인터페이스로, 웹 페이지의 내용, 구조, 스타일을 JavaScript로 접근하고 변경할 수 있게 해줍니다.DOM이란?Document Object Model의 이해DOM은 웹 페이지의 프로그래밍 인터페이스로 다음과 같은 특징을 가집니다:트리 구조: HTML 문서를 노드(node)라는 객체들의 트리로 표현객체 지향적: 문서의 각 부분을 객체로 표현하여 접근플랫폼/언어 독립적: 다양한 프로그래밍 언어에서 사용 가능동적 접근: JavaScript로 실시간 페이지 업데이트 가능DOM 트리 구조HT.. 공감수 0 댓글수 0 2025. 3. 30.
배열 배열배열은 여러 값을 순서대로 저장하는 객체입니다. JavaScript 배열은 다양한 타입의 요소를 함께 저장할 수 있습니다.배열 생성// 배열 리터럴const fruits = ["사과", "바나나", "오렌지"];// 빈 배열 생성 후 요소 추가const vegetables = [];vegetables.push("당근");vegetables.push("감자");vegetables.push("양파");// Array 생성자const numbers = new Array(1, 2, 3, 4, 5);// 지정된 길이의 빈 배열 생성const emptyArray = new Array(5); // 길이가 5인 빈 배열console.log(emptyArray.length); // 5// Array.from() - .. 공감수 0 댓글수 0 2025. 3. 30.
객체 JavaScript에서 객체와 배열은 데이터를 구조화하고 관리하는 핵심 데이터 타입입니다. 이 챕터에서는 객체와 배열의 생성, 접근, 조작 방법과 주요 개념들을 살펴보겠습니다.객체객체는 관련된 데이터와 함수(메서드)를 하나의 단위로 그룹화합니다. JavaScript는 객체 지향 언어이며, 거의 모든 것이 객체로 취급됩니다.객체 리터럴객체 리터럴은 중괄호 {}를 사용하여 객체를 생성하는 가장 간단한 방법입니다.// 기본 객체 생성const person = { name: "홍길동", age: 25, job: "개발자", isMarried: false};// 빈 객체 생성 후 속성 추가const car = {};car.brand = "현대";car.model = "소나타";car.year = 2023;.. 공감수 0 댓글수 0 2025. 3. 30.
함수 패턴 즉시 실행 함수 표현식(IIFE)즉시 실행 함수 표현식(Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 함수입니다.// 기본 IIFE 문법(function() { console.log("즉시 실행됩니다!");})(); // "즉시 실행됩니다!" 출력// 매개변수 전달(function(name) { console.log("안녕하세요, " + name + "님!");})("홍길동"); // "안녕하세요, 홍길동님!" 출력// 화살표 함수로 IIFE(() => { console.log("화살표 함수 IIFE");})(); // "화살표 함수 IIFE" 출력// 반환값 받기const result = (function() { const a = 5; c.. 공감수 0 댓글수 0 2025. 3. 30.
클로저(Closure) 클로저(Closure)클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 함수가 자신이 생성된 스코프 밖에서 실행될 때도 원래 스코프에 접근할 수 있는 현상을 말합니다.클로저의 기본 개념function createCounter() { let count = 0; // 외부에서 직접 접근할 수 없는 변수 return function() { count++; // 외부 함수의 변수에 접근 return count; };}const counter = createCounter();console.log(counter()); // 1 출력console.log(counter()); // 2 출력console.log(counter()); // 3 출력// 새로운 카운터 생성 (독립적인 count.. 공감수 0 댓글수 0 2025. 3. 30.
스코프 스코프변수의 접근 범위(스코프)와 클로저의 개념 및 활용에 대해 알아보겠습니다.변수 스코프JavaScript에서는 변수가 선언된 위치에 따라 접근 가능한 범위가 결정됩니다.전역 스코프(Global Scope)전역 스코프는 코드의 어느 위치에서나 접근할 수 있는 변수 영역입니다.// 전역 변수const globalVar = "전역 변수입니다";function showGlobal() { console.log(globalVar); // 전역 변수에 접근 가능}showGlobal(); // "전역 변수입니다" 출력// 블록 밖에서도 접근 가능if (true) { console.log(globalVar); // "전역 변수입니다" 출력}// 브라우저 환경에서 전역 객체(window)의 속성이 됨console... 공감수 0 댓글수 0 2025. 3. 30.
함수의 정의와 호출 함수는 JavaScript에서 코드를 구조화하고 재사용하는 핵심 개념입니다. 이 챕터에서는 함수의 정의 방법, 매개변수와 반환값 처리, 그리고 변수의 스코프와 클로저에 대해 알아보겠습니다.함수의 정의와 호출JavaScript에서 함수를 정의하는 여러 방법과 함수를 호출하는 방법에 대해 살펴보겠습니다.함수 선언문가장 기본적인 함수 정의 방법으로, function 키워드와 함수 이름을 사용합니다.// 기본 함수 선언function greet() { console.log("안녕하세요!");}// 함수 호출greet(); // "안녕하세요!" 출력// 매개변수를 가진 함수function greetUser(userName) { console.log(`안녕하세요, ${userName}님!`);}greetUser.. 공감수 0 댓글수 0 2025. 3. 30.
반복문 반복문반복문은 코드 블록을 여러 번 실행하는 데 사용됩니다.for 문가장 일반적인 반복문으로, 지정된 횟수만큼 코드 블록을 반복합니다.기본 구문:for (초기화; 조건; 증감) { // 조건이 참인 동안 반복될 코드}예제:// 기본 for 문for (let i = 0; i 0; i--) { console.log(i);}// 출력: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1// 중첩 for 문 (구구단 예제)for (let i = 2; i = 5) break; console.log(i); i++;}// 출력: 0, 1, 2, 3, 4for...in 문객체의 속성을 반복하는 데 사용됩니다.기본 구문:for (변수 in 객체) { // 객체의 각 속성에 대해 실행될 코드}예제:// 객체 .. 공감수 0 댓글수 0 2025. 3. 30.
제어문 JavaScript에서는 코드의 흐름을 제어하기 위한 다양한 제어문과 반복문을 제공합니다. 이러한 구문들은 조건에 따라 코드를 실행하거나 반복적으로 실행하는 데 사용됩니다.조건문조건문은 특정 조건이 참인지 거짓인지에 따라 다른 코드 블록을 실행하는 구문입니다.if, else if, else 문가장 기본적인 조건문으로, 조건에 따라 코드 블록을 실행할지 결정합니다.기본 구문:if (조건1) { // 조건1이 참일 때 실행될 코드} else if (조건2) { // 조건1이 거짓이고 조건2가 참일 때 실행될 코드} else { // 모든 조건이 거짓일 때 실행될 코드}예제:// 기본 if-else 사용법const age = 25;if (age = 90) { grade = "A";} else { if.. 공감수 0 댓글수 0 2025. 3. 30.
연산자 연산자JavaScript에서는 다양한 연산자를 사용하여 값을 조작할 수 있습니다. 연산자는 값에 대해 특정 연산을 수행하고 결과를 반환합니다.1. 산술 연산자산술 연산자는 수학적 계산을 수행합니다.연산자설명예제결과+덧셈5 + 27-뺄셈5 - 23*곱셈5 * 210/나눗셈5 / 22.5%나머지5 % 21**거듭제곱5 ** 225++증가let a = 5; a++;a는 6이 됨--감소let a = 5; a--;a는 4가 됨// 산술 연산자 예제let a = 10;let b = 3;console.log(a + b); // 13console.log(a - b); // 7console.log(a * b); // 30console.log(a / b); // 3.3333...console.log(a % b); // 1.. 공감수 0 댓글수 0 2025. 3. 30.
기초 문법과 데이터 타입 2. 기초 문법과 데이터 타입변수와 상수JavaScript에서 데이터를 저장하기 위해 변수와 상수를 사용합니다. ES6(ECMAScript 2015)부터 var, let, const 세 가지 방식으로 선언이 가능합니다.var, let, const의 차이점:1. var:함수 스코프(function scope)를 가짐재선언 및 재할당 가능호이스팅(hoisting)될 때 undefined로 초기화됨var name = "홍길동";var name = "김철수"; // 재선언 가능name = "이영희"; // 재할당 가능2. let:블록 스코프(block scope)를 가짐재선언 불가, 재할당 가능호이스팅될 때 초기화되지 않음(TDZ, Temporal Dead Zone)let age = 25;// let age =.. 공감수 0 댓글수 0 2025. 3. 30.
JavaScript 소개 1. JavaScript 소개JavaScript란?JavaScript는 웹 페이지에 동적인 기능을 추가하기 위해 개발된 프로그래밍 언어입니다. 1995년 Netscape의 Brendan Eich에 의해 만들어졌으며, 현재는 웹 개발의 핵심 요소로 자리잡았습니다.웹에서의 역할과 중요성:웹 페이지의 동적인 요소 제어사용자 상호작용 처리데이터 검증 및 처리웹 애플리케이션 개발서버 측 프로그래밍(Node.js)까지 확장HTML, CSS와의 관계:웹 개발에서 세 가지 핵심 기술은 다음과 같습니다.HTML: 웹 페이지의 구조와 내용을 정의CSS: 웹 페이지의 시각적 디자인과 레이아웃을 담당JavaScript: 웹 페이지의 동작과 상호작용을 구현이 세 요소는 함께 작동하여 완전한 웹 경험을 만들어냅니다. HTML이 .. 공감수 0 댓글수 0 2025. 3. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.