반응형 [javascript] 비동기 처리 개념 설명 자바스크립트는 싱글 스레드 기반으로 동작하는 언어이지만, 비동기 처리를 통해 효율적인 작업 수행이 가능합니다. 이번 문서에서는 setTimeout(), Promise, 그리고 async/await를 활용한 비동기 프로그래밍 개념을 정리하고, 다양한 예제를 통해 학습해 보겠습니다. 1. 비동기 처리란?비동기(asynchronous)란, 코드가 실행되는 동안 다음 코드가 즉시 실행되는 방식을 의미합니다.즉, 하나의 작업이 끝날 때까지 기다리지 않고 다른 작업을 수행할 수 있습니다.자바스크립트는 싱글 스레드로 동작하지만, 비동기 처리 기법을 통해 백그라운드에서 작업을 수행하고, 실행이 완료되면 결과를 반환할 수 있습니다. 2. setTimeout()을 이용한 비동기 처리setTimeout() 함수는 일정 .. 2025. 2. 16. [javascript] 삼항 연산자 기본 개념 자바스크립트에서 삼항 연산자(? :)는 if-else 문을 간결하게 표현할 수 있는 강력한 도구입니다. 이번 문서에서는 삼항 연산자의 기본 개념부터 활용 예제까지 다뤄보겠습니다. 1. 삼항 연산자란?삼항 연산자는 조건이 참인지 거짓인지에 따라 두 가지 값을 반환하는 연산자입니다.if-else 문을 한 줄로 표현할 수 있어 코드 가독성을 높이는 데 유용합니다.기본 문법const result = 조건 ? 값1 : 값2;위 코드는 조건이 참(true)이면 값1을 반환하고, 거짓(false)이면 값2를 반환합니다.예제 1: 기본적인 삼항 연산자 사용const age = 20;const message = age >= 18 ? "성인입니다." : "미성년자입니다.";console.log(message); // "성.. 2025. 2. 14. [javascript] 로컬 스토리지(Local Storage)란? 로컬 스토리지(Local Storage)란?로컬 스토리지는 웹 브라우저에 데이터를 저장하는 공간입니다. 사용자가 웹사이트를 방문하면, 해당 웹사이트는 브라우저에 데이터를 저장할 수 있으며, 이 데이터는 사용자가 페이지를 새로 고치거나 브라우저를 닫아도 유지됩니다.로컬 스토리지의 특징데이터 지속성: 브라우저를 껐다 켜도 데이터가 유지됩니다.도메인별 저장: 특정 웹사이트에서 저장한 데이터는 해당 웹사이트에서만 접근 가능합니다.5MB 저장 가능: 한 도메인당 최대 5MB까지 저장할 수 있습니다.보안 문제: 로컬 스토리지는 암호화되지 않으므로 중요한 정보(비밀번호, 카드 정보)는 저장하면 안 됩니다.로컬 스토리지 사용법 (JavaScript)데이터 저장하기localStorage.setItem("username".. 2025. 2. 9. [javascript] 자바스크립트 중급 문법 학습 자료 1. 스코프(Scope)와 호이스팅(Hoisting)📌 스코프란?스코프는 변수에 접근할 수 있는 범위를 의미합니다.전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉩니다.🔍 전역 스코프(Global Scope): 코드 어디서든 접근할 수 있는 범위🔍 지역 스코프(Local Scope): 함수나 블록 내부에서만 접근할 수 있는 범위✨ 전역 스코프 예제var globalVar = "나는 전역 변수야!";function showGlobal() { console.log(globalVar); // 어디서든 접근 가능}showGlobal(); // "나는 전역 변수야!"console.log(globalVar); // "나는 전역 변수야!"✅ 전역 변수는 프로그램 어디서든 접.. 2025. 2. 9. [javascript] 자바스크립트 화살표 함수의 모든것 1. 화살표 함수란?화살표 함수(Arrow Function)는 **ES6(ECMAScript 2015)**에서 도입된 함수 선언 방식으로, 기존의 function 키워드를 사용하는 방식보다 간결한 문법을 제공합니다. 또한, this의 바인딩 방식이 다르기 때문에 기존 함수와 차이점이 있습니다.기존의 **함수 표현식(Function Expression)**과 비교해보면 다음과 같습니다.기존 함수 표현식const add = function(a, b) { return a + b;};console.log(add(3, 5)); // 8화살표 함수const add = (a, b) => a + b;console.log(add(3, 5)); // 8✅ 차이점:function 키워드 생략중괄호({})와 return.. 2025. 2. 9. [javascript] 자바스크립트 전역변수 및 지역변수의 호출 및 반환 방법 1. 변수의 종류자바스크립트에서 변수는 범위(scope)에 따라 전역 변수(Global Variable) 와 지역 변수(Local Variable) 로 나뉩니다.전역 변수: 코드 어디에서든 접근할 수 있는 변수.지역 변수: 특정 블록({ }) 내에서만 접근할 수 있는 변수.2. 변수 선언 방법자바스크립트에서 변수를 선언하는 방법은 var, let, const를 사용하는 것입니다.var globalVar = "전역 변수"; // 전역 변수 선언function exampleFunction() { let localVar = "지역 변수"; // 지역 변수 선언 console.log(localVar); // 정상 출력: '지역 변수'}console.log(globalVar); // 정상 출력: '전역.. 2025. 2. 9. 자바스크립트 초급(기초) 문법 학습 자료 1. 변수와 상수 (var, let, const 차이)📌 변수와 상수란? 변수는 데이터를 저장할 수 있는 공간이며, 상수는 한 번 값이 할당되면 변경할 수 없는 값입니다.🔍 중요 개념:var: 기존 방식의 변수 선언 (사용을 지양해야 함)let: 변할 수 있는 값 (재할당 가능)const: 변하지 않는 값 (재할당 불가능)var oldVar = "이제 잘 사용하지 않아요";let myVar = "변할 수 있어요";const myConst = "변경할 수 없어요";✏️ 실습 문제:// let과 const를 사용하여 변수를 선언하고 값을 변경해 보세요.let variable = "초기값";console.log(variable);variable = "변경된 값";console.log(variable);co.. 2025. 2. 9. [javascript 초급 중급 고급] 자바스크립트 초급부터 고급까지 - 자바스크립트 커리큘럼 추천 자바스크립트를 공부하긴 해야겠는데,뭐부터 공부해야할지 모르겠고어디까지 알아야 '나 자바스크립트 좀 친다' 고 말할 수 있을지기준을 잡는데 도움이 되었으면 한다. 초급 (Beginner)목표: 자바스크립트의 기초 문법을 익히고, 브라우저에서 동작하는 간단한 스크립트를 작성할 수 있도록 한다.1. 기본 문법변수와 상수 (var, let, const 차이)데이터 타입 (문자열, 숫자, 불리언, 배열, 객체 등)연산자 (산술, 비교, 논리, 할당, 비트 연산자)조건문 (if, switch)반복문 (for, while, do-while)함수 선언 (function, return)기본적인 콘솔 출력 (console.log() 활용)2. 자바스크립트의 핵심 개념스코프(Scope)와 호이스팅(Hoisting)함수 .. 2025. 2. 8. [javascript, console.log] console.log와 console.error의 차이점 목적console.log: 일반적인 정보를 출력할 때 사용됨.console.error: 오류나 예외 상황을 출력할 때 사용됨.출력 형식console.log: 브라우저 콘솔에서 기본 텍스트로 표시됨.console.error: 일반적으로 빨간색으로 강조되어 표시됨.디버깅 및 로깅console.log: 개발 중 코드 실행 흐름을 확인하는 용도로 적합함.console.error: 오류 메시지를 강조하여 디버깅을 더 쉽게 할 수 있음.스택 트레이스(Stack Trace) 제공 console.error: 오류 발생 위치를 확인할 수 있도록 스택 트레이스를 함께 제공함.console.log: 기본적으로 스택 트레이스를 제공하지 않음.로그 레벨 및 필터링개발자 도구에서 console.error는 오류 필터에서 따로 확.. 2025. 2. 7. [javascript refactoring] 자바스크립트 리팩토링(최적화) 방법 및 예시 - 개선 원리 및 설명 포함 자바스크립트 리팩토링은 선택이 아니라 필수이다. 글을 시작하기 전, '자바스크립트 리팩토링(최적화)를 왜 해야 하는가?' 에 대한 물음에 답하자면,가독성 향상 – 코드를 더 이해하기 쉽게 만들어 유지보수를 용이하게 한다.재사용성 증가 – 중복 코드를 줄이고 모듈화를 통해 재사용성을 높인다.성능 개선 – 불필요한 연산을 줄여 코드 실행 속도를 향상시킨다.버그 예방 – 코드 구조를 명확하게 하여 오류 발생 가능성을 낮춘다.확장성 확보 – 변경 및 추가 기능 구현이 쉽도록 유연한 코드 구조를 만든다. 여러모로 리팩토링을 하는 게 좋아 보인다.단, 리팩토링을 한다고 코드가 짧아지는 게 아니라, 길어질 수도 있다. 1. 반복문 최적화변경 전:javascriptlet loopList = '';for (let i.. 2025. 2. 7. 이전 1 다음 반응형
