내가 알아가는 내용을 같이 공유하는 공간

안녕하세요. 오늘은 자바스크립트 DOM(Document Object Model)에 대해 알아볼게요. DOM(Document Object Model) HTML 문서는 브라우저가 읽을 때 트리 구조(계층 구조)로 변환돼요. 이때 HTML의 각 요소(div, h1, p 등)를 문서 객체(Document Object)로 만들어 JS가 접근, 수정, 추가, 삭제할 수 있게 해주는 것이 DOM이에요. 안녕 DOM 배우는 중이에요!document └── body ├── h1 └── p그래서 JS는 document.body나 document.querySelector() 같은 걸로 이 요소들을 불러오고 조작할 수 있어요. DOM 조작 기본 순서 1. DOMContentLoaded 이벤트 H..

안녕하세요. 오늘은 자바스크립트에서 매우 중요한 개념인 비동기(Asynchronous)에 대해 알아볼게요. 자바스크립트 비동기(Asynchronous) 비동기는 작업이 동시에 또는 순서에 상관없이 진행되는 방식을 의미해요. 즉, 하나의 작업이 끝날 때까지 기다리지 않고, 다른 작업을 먼저 실행할 수 있도록 처리 방식이에요. 동기(Synchronous) vs 비동기(Asynchronous) 구분설명실행 방식예제동기(Sync)순서대로 한 줄씩 실행앞의 코드가 끝나야 다음 코드 실행일반적인 함수 실행비동기(Async)기다리지 않고 다음 코드로 넘어감특정 작업 완료 후 “나중에” 실행setTimeout, fetch 등동기 코드 예제console.log('1');console.log('2');consol..

안녕하세요. 오늘은 자바스크립트 고차 함수(High-Order Function)와 콜백 함수(Callback Function)에 알아볼게요. 1. 콜백 함수 (Callback Function) 콜백 함수는 다른 함수의 인자로 전달되어, 이 함수는 내부에서 실행되는 함수예요. 즉, 함수를 "값처럼 전달"해서 특정 시점이나 조건에서 실행되도록 하는 함수예요.function greeting(name) { console.log(`안녕하세요, ${name}님!`);}// callback 함수를 매개변수로 받는 함수function processUserInput(callback) { const name = '홍길동'; callback(name); // 전달받은 함수를 실행}// 함수 실행processUser..

안녕하세요. 오늘은 자바스크립트 함수(Function)에 대해 알아볼게요. 자바스크립트 함수(Function) 함수는 특정 작업을 수행하거나 값을 계산하는 코드의 묶음이에요. 사용 목적은 코드의 재사용성과 프로그램의 모듈화 / 구조화, 그리고 이벤트 처리가 있어요.function 함수명(매개변수) { // 수행할 코드 return 반환값;} 함수 선언 방식 1. 함수 선언식(Function Declaration) 함수 선언식은 function 키워드 + 함수명을 얘기해요. 호이스팅이 적용돼서 선언 이전 호출이 가능해요.greet(); // 가능function greet() { console.log('안녕하세요! (함수 선언식)');} 2. 함수 표현식(Function Expression)..

안녕하세요. 오늘은 자바스크립트 배열(Array)에 대해 알아볼게요. 배열(Array) 배열은 여러 개의 데이터를 하나의 변수로 순서대로 저장할 수 있는 자료 구조예요. 자바스크립트의 배열은 다양한 타입의 데이터를 한 배열 안에 저장할 수 있고, 배열의 크기가 고정되지 않아 동적으로 변경이 가능해요. +) 인덱스(index)는 0부터 시작하고, 각 데이터를 요소(element)라고 불러요 배열 생성 방법 1. 리터럴(Literal) 방식 리터럴 방식은 가장 일반적으로 사용하는 방식이에요. 대괄호[] 안에 요소들을 쉼표(,)로 구분해 나열하고, 장점은 간결하고 직관적이에요.let fruits = ['사과', '오렌지', '망고'];let numbers = [1, 2, 3, 4, 5];let mixe..

안녕하세요. 오늘은 자바스크립트 제어문의 두 번째 시간으로 반복문(Loop)에 대해 알아볼게요. 자바스크립트의 반복문 (Loop) 자바스크립트의 반복문은 같은 코드 블록을 여러 번 반복 실행할 때 사용하는 제어문이에요. 예를 들어, 숫자를 1부터 10까지를 출력하거나, 배열의 모든 요소를 하나씩 확인할 때 등 사용해요. 반복문 종류 1. for 반복문 for 문은 정해진 횟수만큼 반복할 때 사용해요.for (초기화식; 조건식; 증감식) { // 반복해서 실행할 코드}// 초기화식: 반복을 시작하기 전에 한 번 실행 (반복 변수 선언)// 조건식: 반복을 계속할지 결정 (true일 동안 실행)// 증감식: 반복이 한 번 끝날 때마다 실행 (변수 값 변경)// 예제 1/* i = 0부터 시작 ..

안녕하세요. 오늘은 자바스크립트의 제어문(control) 중 하나인 조건문(Condition)에 알아볼게요. 들어가기 앞서서 제어문에 대해 간단히 알아본다면. 자바스크립트 제어문은 "프로그램의 흐름(실행 순서)을 제어하는 문장들"을 말해요. 자바스크립트의 조건문(Condition) 조건문은 특정 조건의 참(true) 또는 거짓(false) 여부에 따라 실행할 코드를 결정할 때 사용해요. 즉, 프로그램의 흐름(제어)을 바꾸는 역할을 하고, 주로 비교 연산자(>, 나 논리 연산자(&&, ||, !)가 사용이 돼요. 이 연산자의 결과는 항상 불리언(boolean) 값으로 평가해요. 1. if, else if, else 문 if문은 조건식이 참일 때 코드 블록을 실행하고, else if문은 앞의 조건이 ..

안녕하세요. 오늘은 자바스크립트 기초 개념 중 자료형(Data Type) 종류 중 두 번째 참조 자료형(Reference Type)에 대해 알아볼게요. 참조 자료형(Reference Type) 참조 자료형은 값이 저장된 메모리 주소(참조)를 저장해요. 즉, 변수가 직접 값을 담는 것이 아니라 객체(Object)가 위치한 주소를 가리키는 구조예요. 기본 자료형은 하나의 값 자체를 저장하니 잘 비교해 주세요. 참조 자료형의 종류 참조 자료형은 객체의 일반 객체, 배열(Array), 함수(Function)가 있고, 추가적인 객체 타입으로 날짜(Date), 정규표현식(RegExp), Map, Set 등이 있어요. 1. 객체 (Object) 객체는 여러 데이터를 키(key)와 값(value) 쌍으로 ..

안녕하세요. 오늘은 자바스크립트 기초 개념 중 자료형(Data Type)은 크게 기본 자료형(Primitive Type)과 참조 자료형(Reference Type)으로 나눌 수 있는데요. 우선 첫 번째로 기본 자료형 부터 알아볼게요. 기본 자료형(Primitive Type) 기본 자료형에는 다음과 같이 string, number, boolean, null, undefined 타입이 있어요. 1. 문자열 (string) 문자열은 작은따옴표(' '), 큰따옴표(" "), 또는 백틱(`)으로 감싸서 표현해요. 세 가지 방법 모두 문자열을 만들 수 있지만, 백틱(`)을 사용하면 템플릿 리터럴(Template Literal)을 쓸 수 있어요. ** 템플릿 문자열 (Template Literal) ..

안녕하세요. 오늘은 자바스크립트 호이스팅에 대해 알아볼게요. 호이스팅(Hoisting) 호이스팅은 변수와 함수의 선언(declaration)이 코드가 실행되기 전에 자바스크립트 엔진에 의해 최상단으로 끌어올려지는 동작을 말해요. 즉, 실제로 코드가 작성된 순서와는 달리, 선언이 먼저 처리되고 나중에 실행되는 것처럼 동작해요. 변수 호이스팅 변수는 크게 세 가지 var, let, const로 각각의 호이스팅 동작이 달라요. var var로 선언한 변수는 선언이 호이스팅 되지만, 초기화는 호이스팅 되지 않아요.console.log(a); // undefinedvar a = 5;console.log(a); // 5var a; // 선언만 호이스팅console.log(a); // ..