Just..Eric

얼마전에 JavaScript로 코드를 작성하다가,JavaScript에서 forEach 메서드와 async/await를 함께 사용할 때, 예상치 못한 동작으로 코드가제대로 동작하지 않는 문제를 겪었다.찾아보니 이는 forEach 메서드가 비동기 코드를 동기적으로 처리하지 않기 때문이라고한다.문제 설명forEach 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하지만, 해당 콜백이 비동기 함수일 경우 이를 제대로 처리하지 못한다.즉, async/await를 사용하더라도 forEach는 각 콜백의 완료를 기다리지 않고 다음 요소로 넘어간다.이는 forEach가 내부적으로 비동기 코드를 다루는 방식 때문이다.예제 코드다음은 forEach와 async/await를 함께 사용했을 때 발생하는 문제를 보여주는 예제..

JavaScript를 배우거나 사용하면서 중요하게 접하게 되는 개념 중 하나는 동기(synchronous)와 비동기(asynchronous)의 차이입니다. 이 글에서는 이 두 개념의 차이를 기본적인 예시부터 실용적인 예시까지 다양한 방법으로 설명해 드리겠습니다. 1. 기본 개념 구분 동기(Synchronous) 비동기(Asynchronous) 동작 원리 코드가 순차적으로 실행. 한 작업이 완료될 때까지 다음 작업 대기. 코드는 바로 다음 작업으로 넘어가며, 특정 작업의 완료를 기다리지 않음. 장점 코드의 흐름이 명확하며 예측하기 쉽다. 여러 작업을 동시에 처리 가능하여 효율적. 단점 긴 작업이 진행되는 동안 전체 프로세스가 멈출 위험이 있음. 코드의 흐름이 복잡해질 수 있고, 콜백, 프로미스 등의 메커니..

JavaScript의 localStorage 활용하기 여러분 안녕하세요! Eric입니다. 오늘은 웹 페이지에서 데이터를 로컬에 저장하는 방법 중 하나인 localStorage를 활용하는 방법에 대해 알아보겠습니다. 추가로 JSON.stringify()와 JSON.parse()의 사용법도 함께 다룰 예정입니다. 1. localStorage란? localStorage는 웹 페이지의 데이터를 브라우저에 저장하는 방법 중 하나로, 사용자가 브라우저를 닫거나 페이지를 새로 고침해도 데이터가 사라지지 않습니다. 각 데이터는 key-value 쌍으로 저장되며, 문자열 형태로 저장됩니다. 2. localStorage에 데이터 저장하기 localStorage에 데이터를 저장하는 방법은 간단합니다. localStorage..

안녕하세요, 여러분! 오늘은 JavaScript를 이용해 나이와 띠를 계산하는 간단한 함수를 만들어 보겠습니다. 이 함수는 사용자의 생년월일을 입력받아 그에 해당하는 나이와 띠를 계산하고, 이를 웹 페이지에 표시합니다. 먼저, HTML 구조를 살펴보겠습니다. 'age'와 'zodiac'라는 id를 가진 두 개의 div 요소가 있습니다. 이곳에 JavaScript를 통해 계산된 나이와 띠 정보가 표시됩니다. ... 다음으로, JavaScript 코드를 살펴보겠습니다. 먼저, 사용자의 생년월일을 'birthDay' 변수에 저장합니다. let birthDay = "2001-02-21"; 만나이 계산하기 그리고 'calculateAge'라는 함수를 만듭니다. 이 함수는 생년월일을 입력받아 오늘 날짜와 비교하여 ..

안녕하세요, 여러분! Eric 입니다! 오늘은 JavaScript에서 사용되는 for 문에 대해 알아보고, 이를 활용하기 위해 자주 사용되는 enumerable과 iterable 개념을 함께 알아보겠습니다. 1️⃣ for 문 먼저 가장 기본적인 for 문을 살펴보겠습니다. 이 for 문은 초기식, 조건식, 증감식을 사용하여 주어진 범위의 반복을 처리합니다. 예시: for (let i = 0; i < 5; i++) { console.log(i); } 2️⃣ for...in 문 for...in 문은 객체의 모든 열거 가능한(enumerable) 속성에 대해 반복 작업을 수행합니다. 이 때, 배열이나 다른 반복 가능한(iterable) 객체를 사용할 수 있습니다. 예시: const person = { name..

안녕하세요! Eric입니다 웹 브라우저의 핵심 기능 중 하나인 이벤트 루프(Event Loop)에 대해 알아보도록 하겠습니다. 이벤트 루프는 웹 브라우저에서 동시성을 유지하고, 다양한 비동기 작업을 처리하는 역할을 담당합니다. 그러면 웹 브라우저의 이벤트 루프가 어떻게 작동하는지 알아보시죠! ✅ 이벤트 루프(Event Loop)란? 이벤트 루프는 웹 브라우저에서 발생하는 비동기 이벤트를 처리하기 위해 사용되는 역할을 하는 무한 루프이다. JavaScript는 싱글 스레드 언어이므로, 이벤트 루프를 사용하여 동시성을 유지하며, 다양한 작업을 동시에 처리할 수 있다. 🔄 이벤트 루프의 작동 원리 예시) 하단처럼 JavaScript 코드가 작성되어있으면, 어떠한 순서대로 결과가 나올까? console.log(..