함수의 필요성다음 코드를 먼저 살펴보겠습니다. const num = 1;const num2 = 2;const result = num + num2;console.log(result);const num3 = 1;const num4 = 2;const result2 = num3 + num4; 두 숫자를 더하는 간단한 코드이지만, 똑같은 덧셈 연산이 반복되고 있습니다.이처럼 반복되는 작업을 줄이고, 코드를 재사용할 수 있도록 도와주는 것이 바로 함수입니다.함수 정의와 호출함수를 정의하고 호출하는 기본적인 형태는 다음과 같습니다.function add(num1, num2) { return num1 + num2;}const sum = add(3, 4); // 호출console.log(sum); // ..

자료형 구분자바스크립트에서 변수는 다음 두 가지 방식 중 하나로 값을 저장합니다.원시 타입 (Primitive Type)숫자(number), 문자열(string), 불리언(boolean), null, undefined참조 타입 (Reference Type)객체(object), 배열(array), 함수(function) 등이 둘은 변수에 값이 직접 저장되느냐, 아니면 주소만 저장되느냐에 따라 동작 방식이 다릅니다.원시 타입원시 타입은 값 자체가 변수에 직접 저장되는 구조입니다.메모리에는 그 값이 그대로 들어가며, 변수 간의 값 복사는 단순 복사일 뿐 서로 영향을 주지 않습니다.let number = 2;let number2 = number;console.log(number); // 2console.lo..

// 함수 선언function doSomething(add) { console.log(add); const result = add(2, 3); console.log(result);}function add(a, b) { const sum = a + b; return sum;}// 함수 호출// doSomething(add);const addFun = add;console.log(add);addFun(1, 2);함수함수는 특정 작업을 수행하는 코드 블록입니다. 반복적인 작업을 간단하게 재사용하고, 유지보수를 편하게 할 수 있도록 해줍니다.함수 선언function add(a, b) { const sum = a + b; return sum;}function: 함수 선언 키워..

// async & await// clear style of using promise :) // (비동기 처리를 더 명확하고 간결하게 작성할 수 있는 방법)// 1. asyncasync function fetchUser() { // do network reqeust in 10 secs.... // (네트워크 요청이 10초 걸린다고 가정) return 'ellie';}const user = fetchUser(); user.then(console.log); console.log(user); // (fetchUser는 비동기 함수이므로 user는 Promise 객체이며, then으로 결과를 처리)// 2. await ✨// (await 키워드를 사용해 비동기 흐름을 동기식처럼 작성)// delay 함수는..

🔍 동기(Synchronous) vs 비동기(Asynchronous)구분동기 (Synchronous)비동기 (Asynchronous)실행 순서위에서 아래로 한 줄씩느린 작업은 예약하고 다음 작업 먼저 진행처리 방식하나 끝나야 다음 실행뒤에서 처리하고 완료되면 알려줌예console.log(), 계산setTimeout(), API 호출, 파일 읽기 등문제점느린 작업 하나 때문에 멈춤콜백, Promise, async/await 필요🔨 JS에서 왜 비동기가 필요할까?자바스크립트는 한 번에 하나씩만 실행할 수 있는 언어 (싱글 스레드)그래서...서버 응답 기다림파일 읽기타이머, 이미지 로딩같이 시간 오래 걸리는 작업을 할 때, 동기로 하면 전체 멈춰버림 😱→ 그래서 비동기로 처리하고,→ 다 끝나면 알려주는 ..

'use strict';// JavaScript is synchronous.// Execute the code block by order after hoisting.// hoisting: var, function declaration// (자바스크립트는 기본적으로 동기적이며, 호이스팅 이후 코드 순서대로 실행됨)// (hoisting: 변수와 함수 선언이 코드 맨 위로 끌어올려지는 현상)console.log('1');setTimeout(() => console.log('2'), 1000); // (1초 뒤 '2'를 비동기로 출력)console.log('3'); // (먼저 '1', '3' 출력 후, 1초 뒤에 '2' 출력)// Synchronous callback// (동기 콜백 함수)function p..

HTTP (HyperText Transfer Protocol)HyperText Transfer Protocol인터넷에서 **클라이언트(브라우저)**와 서버 간에 데이터를 주고받을 때 사용하는 통신 프로토콜요청(Request)과 응답(Response) 구조HTTP 메서드: GET, POST, PUT, DELETE 등상태 코드: 200 OK, 404 Not Found, 500 Internal Server ErrorAJAX (Asynchronous JavaScript And XML)Asynchronous JavaScript And XML:비동기적으로 서버와 데이터를 주고받는 기술전체 페이지를 다시 로드하지 않고도 부분 업데이트 가능주로 XMLHttpRequest (XHR) 또는 fetch API 사용현재는 J..

이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.// Q1. make a string out of an array (배열을 문자열로 변환){ const fruits = ['apple', 'banana', 'orange']; // join(separator): 배열의 요소를 하나의 문자열로 합침. separator로 구분자를 지정할 수 있음. const result = fruits.join(','); // 요소들을 ','로 구분하여 문자열로 변환 console.log(result); // "apple,banana,orange"}// Q2. make an array out of a string (문자열을 배열로 변환){ const fruits = '..

이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.'use strict';// Array🎉 (배열)// 1. Declaration (배열 선언)const arr1 = new Array(); // 배열 생성자 사용const arr2 = [1, 2]; // 배열 리터럴 사용 (일반적으로 더 많이 사용됨)// 2. Index position (인덱스 위치)const fruits = ['🍎', '🍌'];console.log(fruits); // 배열 전체 출력console.log(fruits.length); // 배열 길이 출력console.log(fruits[0]); // 첫 번째 요소 출력 (🍎)console.log(fruits[1]); // 두 번째 요소..

이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다. 1. 객체(Object)객체는 JavaScript에서 관련된 데이터와 기능을 묶어서 관리하는 데이터 타입입니다. 즉, 하나의 개체(Entity)를 표현하는 방식으로, 여러 속성(데이터)과 메서드(기능)를 포함할 수 있습니다. 📌 객체는 key: value 형태로 구성되며,. 또는 [] 표기법으로 접근할 수 있습니다.const obj1 = {}; // 'object literal' (객체 리터럴) 문법const obj2 = new Object(); // 'object constructor' (객체 생성자) 문법객체 리터럴 {} vs 객체 생성자 new Object(){} 리터럴 방식이 더 직관적이고 간결하여..