creamymood의 개발 공부 발자취 💭

역시 뭐든 기초를 탄탄하게 하고 봐야 합니다..자바스크립트에서 휘릭 넘겼던 "..." 전개 연산자.리액트 배열 상태 상태 다룰 때 자주 쓰인다고 🥺다시 복습 갑시다 - !배열에서 ... (전개 연산자) 뜻배열이나 객체의 내용물을 풀어서(펼쳐서) 넣는 거예요. ✅ 예시 1: 배열 복사const arr = [1, 2, 3];const copied = [...arr];console.log(copied); // [1, 2, 3]→ ...arr은 arr의 요소들을 하나씩 꺼내서 새 배열에 넣어요. 깊은 복사는 아니고 얕은 복사예요.  ✅ 예시 2: 배열 합치기const a = [1, 2];const b = [3, 4];const combined = [...a, ...b];console.log(combined);..

화이팅 !! 외치며 공부시작 ✨구조 분해 할당 이란 ?배열이나 객체에서 값을 뽑아서 변수에 쉽게 할당하는 문법 뭐하는거야  ? 왜 쓰는거야 ?1. 코드가 짧아지고 가독성이 좋아져!예를 들어, 객체에서 값을 가져올 때 보통 이렇게 해 !const user = { name: "Jane", age: 25 };const name = user.name;const age = user.age;console.log(name, age); // "Jane" 25😵 변수 하나씩 할당해야 해서 코드가 길어져... → 구조분해 할당을 쓰면?const { name, age } = user;console.log(name, age); // "Jane" 25✨ 딱 한 줄로 끝! 깔끔하고 보기 편해!  2. 배열이나 객체에서 필요한 ..

5-1 값값이란 식(표현식)이 평가(=식을 해석하여 값 생성 및 참조 하는 것)되어 생성된 결과. 모든 값은 데이터 타입을 가지며, 메모리에 2진수로 나열 되어 저장.변수는 값을 저장하기 위해, 확보한 메모리 공간 또는 그 메모리 공간의 주소 및 이름이다.따라서 변수에 할당되는 것은 값이다.var sum = 10 + 20;sum 변수에 할당 되는 것은 10+20이 아닌, 평가된 결과의 숫자 30. 5-2 리터럴리터럴은, 사람이 이해 가능한 문자 또는 약속된 기호로써 값을 생성하는 표기법 단순한 숫자 3이 아닌, 숫자 리터럴. 사람이 이해할 수 있게 아라비아 숫자를 사용해 숫자 리터럴 3을 기술하면자바스크립트 엔진은 이를 "평가" 하여 숫자 값 3을 생성. 리터럴은 인간이 이해 가능한 문자(아라비아 숫자,..

4-1 변수란 무엇인가 ? 왜 필요한가 ? 인간과 비슷하게 디자인 된 컴퓨터는 예를 들어 연산을 수행 할 때,사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 연산과 기억을 수행하는 부품이 나뉘어져있다.CPU를 통해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이고메모리 셀 하나의 크기는 1 바이트. 즉 1바이트 단위로 데이터를 저장하거나 읽는다. 각 셀은 고유의 주소를 가지고 있다. 이 메모리 주소는 메모리 공간의 위치다. 예를들어 10 + 20의 연산을 수행할 때,숫자값 10과 20은 메모리 상의 임의의 위치에 기억되고, cpu는 이 값을 읽는다. 문제는 연산이 끝난 뒤 역시나 임의의 위치에 저장된 30이란 숫자다.연산을 했다는 것은 연산 결과..

짝수 표현num => num % 2 === 0🔹 % (나머지 연산자)란?%는 **나머지 연산자(modulus operator)**라고 해.어떤 숫자를 2로 나눈 나머지가 0이면 짝수, 1이면 홀수야. 🔹 어떻게 동작하는지 예제숫자(num)num % 2 (2로 나눈 나머지)짝수/홀수 판별11 % 2 = 1홀수 ❌22 % 2 = 0짝수 ✅33 % 2 = 1홀수 ❌44 % 2 = 0짝수 ✅55 % 2 = 1홀수 ❌ 즉, 2로 나눴을 때 나머지가 0이면 짝수라는 뜻!예를 들어, filter()에서 사용하면?const numbers = [1, 2, 3, 4, 5, 6];const evens = numbers.filter(num => num % 2 === 0);console.log(evens); // [2, 4..

먼저 콜백함수가 뭔지 먼저 쉽게 이해해보자.. 콜백 함수 쉽게 이해하기콜백 함수는 "나중에 실행해줘!" 라고 하는 함수야.📌 즉, 어떤 함수 안에서 다른 함수를 실행할 때 사용하는 함수라고 생각하면 돼! 🍕 피자 배달로 비유해볼게!네가 피자를 주문했어.가게에서 "피자가 완성되면 전화해줄게!" 라고 해.피자가 완성된 후, 가게가 너에게 전화(call back)!네가 전화를 받고 피자를 가지러 가.💡 이 전화가 바로 "콜백 함수"야!즉, 피자 가게(함수)가 바로 전화(콜백 함수)를 걸어서 네가 원하는 작업을 하도록 하는 거지. 📌 어디에 많이 쓰일까?콜백 함수는 비동기 작업(나중에 실행될 작업)에서 많이 사용돼!버튼 클릭 시 실행될 함수데이터를 가져오고 나서 실행될 함수타이머(몇 초 뒤 실행할 함수)..

매번 등장할 때 마다, 조금 헷갈려서 이번 기회에 열심히 공부 해보자. 화살표 함수 !1. 간단한 화살표 함수 예제// 전통적인 함수 표현식const add = function(a, b) { return a + b;};// 화살표 함수 표현식const addArrow = (a, b) => a + b;console.log(add(3, 4)); // 7console.log(addArrow(3, 4)); // 7위 예제에서 addArrow는 전통적인 함수 add와 동일한 역할을 합니다. 하지만 화살표 함수를 사용하면 코드가 더 간결해지죠. 2. 매개변수가 하나일 때// 매개변수가 하나일 때 괄호를 생략할 수 있어요.const square = x => x * x;console.log(square(5)); //..

어렵지만 하나하나 이해해가며 쌓는 성취감! 자바스크립트에서의 Math는 수학적 계산을 도와주는 빌트인 객체.이 객체에는 숫자와 관련된 여러 가지 유용한 기능들이 들어 있어 !쉽게 말하면, Math는 자바스크립트에서 수학 문제를 풀 때 사용할 수 있는 도구들이 모여있는 수학 도구 상자와 같아 :)1. Math 객체의 개념Math는 자바스크립트에서 내장 객체(Built-in Object)로, 별도로 선언하지 않고 바로 사용할 수 있어.이 객체에는 수학적 계산을 위한 함수와 상수들이 포함되어 있어요.예시: Math.random() // 0과 1 사이의 난수를 생성Math.PI // 원주율 3.14159...Math.pow(2, 3) // 2의 3승 (2 * 2 * 2) let randomNumber ..

클래스 리스트는 DOM(Document Object Model) 조작과 관련이 있어.  자바스크립트 공부하기 - DOM, 메서드아이고 끙끙 어렵다 어려워한 발자국이 험난한 개발자로의 길..  자바스크립트에서 DOM (Document Object Model)은 웹 페이지의 구조를 다루는 방법이야.간단하게 말하자면, DOM은 웹 페이지를 자바스creamymood.tistory.com 👉 JavaScript의 큰 목차로 보면 "DOM 조작(Document Manipulation)" 파트에 속해.👉 더 구체적으로는 "요소 선택 및 조작(Element Selection & Manipulation)" 부분에서 다뤄져! 📌 큰 흐름 정리HTML & CSSDOM (문서 객체 모델) 조작요소 선택 (getEleme..

나올 때 마다 까먹어. . 이젠 기억 하자는 의미로 다시 한번 정리 - 💬언제 써먹을지, 초 간 단 암 기  🔥 "HTML 있냐? 없냐?"innerHTML → HTML 포함! (HTML까지 바꿀 수 있음)👉 "inner에 HTML까지 들어간다!"textContent → 텍스트만! (HTML 태그 제거됨)👉 "text만 남는다!"📝 초간단 공식innerHTML → "HTML까지"textContent → "TEXT만"  이론💻innerHTMLHTML 태그까지 포함해서 가져오거나 변경할 수 있어!예를 들어, 안에 안녕이라는 태그가 있으면, innerHTML을 사용하면 안녕 그대로 가져와.HTML을 추가할 수도 있어서 보안에 주의해야 해! (XSS 공격 가능성 있음)