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

안녕하세요. 오늘은 리액트 JSX에 대해 알아볼게요. JSX JSX(JavaScript XML)은 자바스크립트 코드 안에서 HTML과 유사한 구조를 작성할 수 있게 해주는 문법 확장이에요. 즉, 리액트에서 UI를 설계할 때 “화면 구조를 직관적으로 코드로 표현하기 위한 문법”이라고 이해하면 돼요. 기존의 React.createElement()를 직접 쓰는 대신,HTML처럼 보이는 문법으로 더 가독성 좋고 직관적인 UI 코드를 작성할 수 있게 해 줘요. JSX 필요성 기존 리액트 코드는 다음처럼 생겼어요. function Hello() { return React.createElement('h1', null, '안녕하세요!');}이 방식은 문법적으로는 정확하지만, HTML 구조를 한눈에 파악하기 어..

안녕하세요. 오늘은 자바스크립트 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) ..