creamymood의 개발 공부 발자취 💭

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

💭부캠 커리큘럼 중 js가 끝나는 기념(?)으로 미니 프로젝트가 있는데 바로 계산기 만들기 ! ..  아직 자스가 익숙하지 않은 상태라.. 많은 난관이 있었지만 하나하나 해결하는 과정과 공부한 과정 기록해보기 :-) 부캠에서 큰 틀은 짜줬고, 거기서도 가이드라인이 있는 단계별로 진행 되는거라, 어디서부터 코드를 짜야하지.. 그러한 막연함은 없었고,  헷갈렸던 forEach나 기타 함수들을 빠삭하게 배울 수 있는 시간 재밌고 의미 있는 시간이었다. 또한 개발 공부를 하며 처음으로 해본 프로젝트라, 신선한 긴장감을 느낄 수 있었고, 출중한 팀원들에게 피해를 주지 않으려고 열심히 노력한 내 모습에서 작은 성장을 발견해서 뿌듯하다. 계산기 완성 했지만, 작동에 우선 초점을 두어 css나 기능적인 부분에서 아직..

비동기 데이터 통신....진짜 이건 이름부터 거부감(?)이 들었던 목차지만,서버랑 데이터를 주고 받으면서 직접 해보니까 흥미로운 파트 ! :)그러니 재밌게 공부해보자구요 💭 !! 이름부터 거부감이 든다면, 이름부터 쉽게 이해해보기 !비동기 데이터 통신을 쉽게 설명하자면, 친구에게 편지를 보내는 것과 비슷해요.만약 편지를 보내면, 그 친구는 즉시 답장하지 않고, 자신의 편한 시간에 답을 줄 수 있어요.즉, 편지를 보낸 사람이 기다리면서 다른 일을 할 수 있고, 답장이 올 때까지 기다리지 않아도 되죠.영어로는 "asynchronous communication"이라고 해요.Asynchronous communication means that the sender doesn't have to wait for an..

짝수 표현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..

자주 쓰이는 배열 메소드 중, 세개가 개념이 비슷하고 헷갈린 것 같아서 정리의 필요성을 느꼈다.이전 글 참조하기 ! 🍑 자바스크립트 공부하기 - 빌트인 생성자 배열지난 기억 되짚고 가기... 사용자 생성자 함수(custom constructor function) 빌트인 생성자 함수 (built-in constructor)✔ 빌트인 생성자: 기본 제공되는 생성자 (Number(), String(), Array() 등)✔ 사용자 정의 생creamymood.tistory.com  Q : map이 새로운 배열을 반환 하기 때문에 상수화 해줘야 하는구나 ?A: 맞아요! 😄 map()은 새로운 배열을 반환하기 때문에, 그 값을 저장하려면 변수에 할당하거나 상수로 선언하는 게 좋아요.예를 들어, map()을 사용..

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