뭉균의 개발일지

🚪 들어가며  안녕하세요 뭉균입니다! 1월에 신입 프론트엔드 개발자로 취업하여 곧 2달차가 됩니다. 그동안 다양한 업무를 하고 있었고 그 중, 최근에 프로젝트를 진행하며 마주쳤던 이벤트 버블링의 개념에 대해 공유하고자 포스팅하게 되었습니다😎   📚 이벤트 버블링이란?  HTML 요소에서 발생한 이벤트가 해당 요소의 상위 요소(부모, 조상)로 전파되는 현상을 의미합니다.즉, 특정 요소에서 이벤트가 발생하면, 그 이벤트는 해당 요소에서 먼저 실행된 후 부모 요소, 그 부모의 부모 요소 등으로 전파됩니다.  클릭하세요   button#child을 클릭하면 "자식 요소 클릭!" 경고창이 뜹니다.이후 클릭 이벤트가 부모 요소인 div#parent로 전파되어 "부모 요소 클릭!..

📜 들어가며 매일매일 JS를 사용해서 개발을 하고 있지만, 배열의 메소드들의 의미가 혼동되어 이를 바로잡고자 이번 포스팅을 진행하게 되었습니다! 모든 메소드를 정리하지는 않았고 많이 사용되는 메소드 위주로 작성했습니다 👨‍💻  ✅ 배열 생성Array.from(): 유사 배열 객체나 반복 가능한 객체를 배열로 변환합니다.Array.isArray(): 주어진 값이 배열인지 확인합니다.// Array.from()const str = "hello";const arrFromStr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']// Array.isArray()console.log(Array.isArray(arrFromStr)); // true  ✅ 데이터 추가/제거push..

🚪 들어가며 예시 코드를 Next.js로 작성하여 이번 포스팅을 Next.js로 분류하였고 바닐라 js나 react에서도 비슷한 방식으로 구현할 수 있습니다. 예시 코드에서 스타일링은 tailwind CSS를 통해 간단히 구현했습니다.   📚 개념 정리  모달 창(Modal)은 화면 위에 나타나는 팝업 창으로, 사용자가 그 창을 닫거나 조작하지 않으면 배경의 다른 요소들과 상호작용할 수 없게 만듭니다. 주로 사용자에게 중요한 정보를 전달하거나 특정 작업을 완료하도록 요구할 때 사용됩니다.모달 창은 일반적으로 absolute 또는 fixed 포지셔닝을 사용하여 화면의 중앙에 위치시키며, 배경은 흐리게 하거나 클릭할 수 없도록 막습니다. 저는 fixed를 사용하여 모달 창을 만들었습니다.   🖥️ 예시..

🚪 들어가며    JavaScript에서 화살표 함수는 ES6(ECMAScript 2015)에서 새롭게 도입된 기능입니다. 화살표 함수는 간결한 문법으로 함수 표현식을 작성할 수 있게 해주며, 특히 this 바인딩 방식에서 기존의 일반 함수와 중요한 차이가 있습니다. 이 외에도 다양한 특징들을 일반함수와 비교하여 알아보겠습니다. 해당 포스팅에서 등장하는 예시코드는 JavaScript로 작성했습니다.   📌 함수 선언 방식 일반 함수: 함수 선언식 또는 함수 표현식으로 정의할 수 있습니다.function regularFunction() {} // 함수 선언식 화살표 함수: 함수 표현식으로만 사용할 수 있습니다.const arrowFunction = () => {}; // 함수 표현식 여기서 등장하는..