본문 바로가기
반응형

Programming/Javascript15

[JS] 자바스크립트의 동기(Synchronous)와 비동기(Asynchronous) 처리 방식 🔄 자바스크립트의 동기(Synchronous)와 비동기(Asynchronous) 처리 방식1. 동기(Synchronous)란?동기 방식이란 하나의 작업이 끝날 때까지 다음 작업이 대기하는 구조를 의미합니다. 코드는 작성된 순서대로 순차적으로 실행됩니다.✅ 예시console.log("A 작업 시작");console.log("B 작업 시작");console.log("C 작업 시작");🧠 결과A 작업 시작B 작업 시작C 작업 시작모든 작업이 한 개의 흐름(thread) 위에서 순서대로 실행됩니다.2. 비동기(Asynchronous)란?비동기는 기다리지 않고 다음 작업으로 넘어가는 방식입니다. 대표적으로 setTimeout, setInterval, AJAX 호출, 이벤트 리스너, 파일 읽기 등이 있습니다.✅.. 2025. 4. 28.
[JS] JavaScript Date 객체에 대해 알아보자 📅 JavaScript Date 객체 완전 정복JavaScript의 Date 객체는 날짜와 시간을 다루기 위한 표준 도구입니다. 이 자료에서는 Date 객체의 생성, 구성 요소 추출, 수정, 포맷팅까지 실무에서 유용하게 활용할 수 있는 방법을 정리합니다.1. Date 객체 생성 방법기본 생성let date1 = new Date(); // 현재 시스템 날짜 및 시간 기준console.log(date1);위 코드는 현재 시간을 기준으로 Date 객체를 생성합니다.new Date()는 내장 생성자 함수로, 반드시 new 키워드와 함께 호출해야 올바른 Date 인스턴스를 생성합니다.특정 날짜 지정let date2 = new Date("1989-09-29T23:10:10"); console.log(date2);.. 2025. 4. 25.
[JS] 자바스크립트 배열 메서드 조작, 탐색 변형까지 프론트엔드 실무를 하다 보면 가장 많이 다루게 되는 자료 구조 중 하나가 바로 배열(Array) 입니다. 오늘은 배열을 다룰 때 사용하는 핵심 메서드들을 요소 조작 / 순회 & 탐색 / 배열 변형으로 나누어 하나씩 살펴보겠습니다.1. 요소 조작 메서드 (Element Manipulation)✅ push(): 배열 끝에 요소 추가let arr1 = [1, 2, 3];arr1.push(4, 5, 6);console.log(arr1); // [1, 2, 3, 4, 5, 6]const newLength = arr1.push(7, 8);console.log(newLength); // 8실무 Tip: 서버에서 페이지네이션으로 데이터 일부를 받아올 때 기존 배열에 추가하는 데 자주 사용됩니다.✅ pop(): 배열 끝.. 2025. 4. 24.
[JS] 자바스크립트 반복문으로 배열과 객체 순회하기 자바스크립트에서 데이터를 처리할 때 배열과 객체를 순회(iteration)하는 방법은 매우 중요합니다. 이번 글에서는 배열과 객체를 효과적으로 순회하는 방법을 실무 예제와 함께 알아보겠습니다.순회(iteration)란?순회란 배열이나 객체와 같은 데이터 구조에 저장된 여러 개의 값에 순서대로 접근하여 처리하는 작업을 말합니다.1. 배열(Array) 순회하기1-1. 기본 for 문을 이용한 배열 순회가장 기본적인 방법으로 배열의 길이를 이용하여 각 인덱스에 접근하는 방법입니다.const arr = [1, 2, 3];for (let i = 0; i 1-2. for...of 반복문을 이용한 배열 순회for...of는 배열을 순회하는데 특화된 방법으로 값을 바로 접근할 수 있어 편리합니다.const arr = .. 2025. 4. 24.
[JS] 원시 타입(Primitive Type)과 객체 타입(Object Type)의 이해 및 활용 📌 원시 타입과 객체 타입자바스크립트의 데이터 타입은 크게 원시 타입(Primitive Type)과 객체 타입(Object Type)으로 나눌 수 있습니다.🔹 나눈 이유데이터가 메모리에 저장되고 복사되는 방식이 서로 다르기 때문입니다.원시 타입: Number, String, Boolean, Null, Undefined값 자체가 변수에 저장되고 복사됩니다.메모리에 저장된 값이 직접 변경되지 않습니다(불변성).객체 타입: Object (Array, Function, RegExp 등 포함)값이 메모리 주소(참조값)를 통해 변수에 저장되고 복사됩니다.메모리에 저장된 값이 직접 변경될 수 있습니다(가변성).📌 원시 타입 예시let p1 = 10;let p2 = p1;p2 = 20;console.log(p1).. 2025. 4. 24.
[JS] Spread 연산자와 Rest 매개변수 정리 자바스크립트에서 개발을 하다 보면 자주 사용하는 편리한 문법들이 있습니다. 특히 ES6에서 도입된 Spread 연산자와 Rest 매개변수는 현대 웹 개발에서 필수적인 기능 중 하나입니다. 이 둘의 개념과 사용법을 명확히 이해해보겠습니다.1. Spread 연산자(...)Spread는 말 그대로 '흩뿌리다', '펼치다'라는 뜻입니다. Spread 연산자는 배열이나 객체에 저장된 값들을 개별적인 요소로 펼쳐주는 역할을 합니다.1-1) 배열에서의 Spread 사용 예시배열을 결합하거나 특정 요소를 중간에 삽입할 때 매우 유용합니다.let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];// arr2 안에 arr1의 요소들을 삽입하고 싶다면?arr2 = [4, ...arr1, 5, 6];con.. 2025. 4. 23.
반응형