creamymood의 개발 공부 발자취 💭

클래스 리스트는 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 공격 가능성 있음)

JSON을 공부하기 앞서서.. 상위 개념을 이해하면 보다 이해가 쉽지 않을까 JSON의 상위 개념을 이해하는 방법:정보란 무엇일까요?우리가 일상에서 사용하는 정보는 사실 데이터라고도 할 수 있어. 예를 들어, "내 이름은 Jane이고 나이는 25살이에요."라는 말도 정보(데이터)야!데이터를 어떻게 기록할까?정보를 기록하거나 다른 사람에게 전달할 때, 어떻게 기록할지 정해야 해.이때 쓰는 방법이 바로 **"형식"**이야.예를 들어, 편지지나 이메일을 사용해서 정보를 전달하는 것처럼, 정보를 전달할 때는 특정한 형식이 필요해요. JSON이란?JSON은 바로 그 형식 중 하나.예를 들어, 정보를 편지로 쓴다고 하면, JSON은 그 편지지의 모양이라고 생각할 수 있어.JSON은 데이터를 간단하고 깔끔하게 기록할..

✅ JavaScript 객체란? 객체를 쉽게 이해하기📌 예제: 현실 세계의 객체👉 사람을 표현하는 객체를 만들면 이렇게 생각할 수 있어!"이름" → Jane"나이" → 25"사는 도시" → Toronto이걸 JavaScript **객체(Object)**로 표현하면?const person = { name: "Jane", age: 25, city: "Toronto"}; 키(Key) → name, age, city (정보의 이름)값(Value) → "Jane", 25, "Toronto" (정보의 내용) 객체 리터럴이란?그냥 {} 중괄호로 만든 객체야.const person = { name: "Jane", age: 25, sayHello: function() { console.log("Hel..

지난 게시글에 이어서..date에 대해 알아보기 전에, 궁금한 점 미리 짚고 넘어가기Q:  date는 기본적으로 자바스크립트에서 제공하는 기능인데 이걸 왜 생성자라고 불러 ? A : 자바스크립트에서 Date는 기본적으로 제공되는 내장 객체이지만, 이도 사실 생성자 함수의 역할을 해. 왜냐면 new Date()와 같이 new 키워드를 사용해서 새로운 객체를 만들 수 있기 때문이야.생성자 함수라는 말은 **"객체를 생성하는 함수"**라는 의미로, Date처럼 자바스크립트에서 기본적으로 제공되는 객체도 new를 통해 새로운 객체를 만들 수 있기 때문에 생성자 함수라고 불리는 거야.다만, Date는 특별히 날짜와 시간과 관련된 작업을 쉽게 처리할 수 있도록 내장되어 있는 거고, 우리가 만든 사용자 정의 생성자 ..

지난 기억 되짚고 가기... 사용자 생성자 함수(custom constructor function) 빌트인 생성자 함수 (built-in constructor)✔ 빌트인 생성자: 기본 제공되는 생성자 (Number(), String(), Array() 등)✔ 사용자 정의 생성자 함수: 개발자가 직접 만드는 생성자 (function Person() {})더보기응! 배열 자체는 화면에 직접 표시되지 않고, 반드시 렌더링(rendering) 과정이 있어야 화면에 보여질 수 있어. 🔍 왜 배열만으로는 화면에 보이지 않을까?배열은 JavaScript의 데이터 구조일 뿐이고, HTML 문서에 자동으로 반영되지 않아.즉, console.log(items); 하면 개발자 도구 콘솔에서 배열의 내용을 볼 수는 있지만..

공부하다가 단순히 생긴 호기심.객체라는 단어가 자주 등장해서, 이런 저런 개념이 섞여 복잡 했다 .. 특히 이벤트 객체랑, 생성자 함수의 객체랑객체라는 이름은 같은데 도저히 이해가 안되던 찰나...  Q : 자바스크립트에서 생성자 함수 파트의 객체 부분과 이벤트 함수 부분의 이벤트 객체는 이 두 객체는 서로 다른 의미지 ?A : 응, 서로 다른 의미야!   생성자 함수의 객체 : new 키워드를 사용해 생성자 함수를 호출하면 새로운 객체가 만들어져. 이벤트 객체 (Event Object)이벤트 핸들러에서 이벤트가 발생하면 브라우저가 자동으로 이벤트 객체를 생성해서 핸들러 함수의 첫 번째 인자로 전달해 줘.이 객체에는 이벤트 타입, 발생 위치, 키 입력 정보 같은 여러 속성이 들어 있어.생성자 함수에서의 ..

이름부터 생소한 생성자 함수와 객체..조금 쉽게 이해하기 위해, 아래에 비유를 먼저 정리해보았다. 사용자 생성자 함수(custom constructor function) 빌트인 생성자 함수 (built-in constructor)✔ 빌트인 생성자: 기본 제공되는 생성자 (Number(), String(), Array() 등)✔ 사용자 정의 생성자 함수: 개발자가 직접 만드는 생성자 (function Person() {})즉, "반대말"이라고 할 수 있지만, 둘 다 객체를 생성하는 방법 중 하나야! 😆생성자 함수는 상자 만드는 공장에 비유할 수 있어요.비유:상자 만드는 공장: 생성자 함수상자: 생성된 객체공장에서 만들 수 있는 상자는 여러 가지 종류가 있을 수 있고, 공장은 그 상자들을 정해진 규칙에 ..

이 코드가 if 문 안에 있는 이유는?→ 정상적으로 생성된 경우에만 입력창을 비우기 위해서! 입력값이 있을 때만 초기화해야 함tweetInput.value = '';은 입력창을 비우는 역할을 해.그런데 트윗이 생성되지 않았는데 입력창을 비우면 안 되겠지?if (tweetInput.value)가 참일 때만 실행되도록 하면,→ 유효한 트윗을 입력한 경우에만 입력창이 초기화됨.만약 if 문 밖에 있으면?이렇게 하면 트윗이 생성되지 않아도 입력창이 무조건 비워져.사용자가 트윗을 입력하지 않고 버튼을 눌러도 입력창이 지워지니까 불편한 UX가 될 수 있어.2️⃣ 트윗이 만들어진 후에 입력값을 지워야 함if 블록 안에서는 새로운 트윗이 생성되고,그 후에 tweetInput.value = '';을 실행하면→ 트윗이 정..

아무리 해도 이해가 안되던.. 이름부터 뭔가 어려운 trim.자꾸 등장해서,, 그냥 넘길 수 없기에 열심히 .. 하면 된다 ~ !🪚trim() 이란 ? - 자바스크립트에서 trim()은 문자열의 앞뒤에 있는 공백(띄어쓰기, 탭, 줄 바꿈 등)을 제거하는 역할을 합니다. 쉽게 말해, 문자열의 "군더더기"를 없애주는 기능이라고 생각하면 됩니다. - trim()은 문자열(string)의 앞뒤 공백(whitespace)을 제거하는 메서드입니다.🚫 주의: trim()은 문자열에만 사용 가능하며, HTML 요소나 숫자에는 적용할 수 없습니다. trim() 예시:let text = " 안녕하세요! ";let trimmedText = text.trim();console.log(text); // " 안녕하..