creamymood의 개발 공부 발자취 💭

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() {})즉, "반대말"이라고 할 수 있지만, 둘 다 객체를 생성하는 방법 중 하나야! 😆생성자 함수는 상자 만드는 공장에 비유할 수 있어요.비유:상자 만드는 공장: 생성자 함수상자: 생성된 객체공장에서 만들 수 있는 상자는 여러 가지 종류가 있을 수 있고, 공장은 그 상자들을 정해진 규칙에 ..

자바스크립트 공부하면서 아직 flex에서 못벗어난 나..더보기Q : html flex 공부하고 있는데,  flex direction이나 뭐 기타 등등 속성이 많잖아.문법이, 다 하나하나 단계별로 적어야 하는거야, 아니면 필요한거만 적어도 되는거야 ? A : HTML에서 flex 관련 속성들은 필요한 것만 적어도 됩니다. 예를 들어, flex-direction이나 justify-content, align-items 등은 각자의 역할이 있어서, 그 속성이 필요할 때만 사용하면 됩니다.간단히 말하면, 필요한 속성만 적으면 되고, 기본값을 그대로 두는 경우에는 생략할 수 있어요. 예를 들어, flex-direction의 기본값은 row이기 때문에, 특별히 방향을 바꾸지 않으면 굳이 명시할 필요는 없습니다.

이 코드가 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); // " 안녕하..

"토글(Toggle)"은 자바스크립트의 특정한 기능이 아니라 **"패턴(pattern)"**이야!즉, 자바스크립트의 특정한 문법이나 내장 기능이라기보다는, 변수를 업데이트하는 방법 중 하나라고 보면 돼.✅ 토글이 포함되는 개념토글 패턴은 자바스크립트의 제어 흐름(control flow)과 상태(state) 관리와 관련 있어!아래 세 가지 개념에서 주로 사용돼:변수 업데이트 (State Management)true ↔ false 같은 불리언 값 바꾸기1 ↔ 2 ↔ 3 같은 숫자 값 변경"ko" ↔ "en" 같은 문자열 변경조건문 (Conditional Statements)if...else 또는 ? : (삼항 연산자)로 상태 변경classList.toggle()처럼 특정 조건에서 클래스 추가/제거이벤트 핸들..