Dseok의 코딩스터디

React의 useState는 함수형 컴포넌트에서 상태(state)를 관리하는 가장 기본적인 Hook입니다. 이를 사용하면 컴포넌트 내부에서 동적인 값을 저장하고 업데이트할 수 있습니다. 예를 들어, 버튼 클릭 횟수, 입력 폼 데이터, 체크박스 상태 등을 관리할 때 사용됩니다. 화살표 함수가 아닌 function 함수로 사용한 이유가 있습니다!!급하시면 복사붙혀넣기 해도 좋지만, 직접 따라치면서 function 함수를 화살표 함수로 바꿔보시라는 취지로 넣었습니다!! ✅ useState란?useState는 React의 내장 Hook 중 하나로, 컴포넌트의 상태를 추가할 수 있도록 도와줍니다. 기본적으로 useState는 배열을 반환하며, 첫 번째 요소는 상태 값, 두 번째 요소는 상태를 변경하는 함수(se..

📌 push()와 pop()란?push()와 pop() 메서드는 JavaScript의 배열(Array) 조작 메서드로, 데이터를 쉽게 추가하거나 제거할 수 있습니다.이 메서드는 스택(Stack) 자료구조처럼 LIFO(Last In First Out) 원칙을 따릅니다. ✅ 기본 문법// push(): 배열의 끝에 요소 추가array.push(element);// pop(): 배열의 마지막 요소 제거array.pop();push(element): 배열의 끝에 새로운 요소를 추가하고 배열의 길이를 반환pop(): 배열의 마지막 요소를 제거하고 제거된 값을 반환📌 push() & pop() 실용 예제 10가지1️⃣ 배열에 요소 추가 및 제거추가제거✅ 설명: 버튼을 클릭하면 배열에 아이템을 추가하거나 제거할 ..

https://coding-studing.tistory.com/37위 포스팅에서 removeAttribute()에 대해서 언급한 적이 있습니다.그래서 오늘은 removeAttrubute()에 대해 다양한 예제를 통해 알아보고자 합니다.📌 removeAttribute()란?removeAttribute() 메서드는 HTML 요소의 특정 속성을 제거하는 JavaScript의 내장 메서드입니다.즉, 처럼 특정 속성을 가진 요소에서 원하는 속성(예: style, id, class 등)을 제거할 수 있습니다.✅ 기본 문법 element.removeAttribute("속성이름");element : 속성을 제거할 대상 요소"속성이름" : 삭제할 속성의 이름📌 .removeAttribute() 실용 예제 10가지1️..

📌 개요웹 개발을 하다 보면 특정 요소의 인라인 스타일을 제거해야 할 때가 있습니다.인라인 스타일(style="color: red;")을 직접 추가하는 경우, CSS 파일보다 우선순위가 높아 쉽게 덮어쓰기 어렵습니다.이 문제를 해결하는 JavaScript 및 jQuery의 5가지 방법을 소개합니다! 📌 1. removeAttribute('style') 사용 (JavaScript)가장 쉬운 방법으로, 요소의 style 속성을 완전히 제거합니다.스타일 제거안녕하세요!✅ 설명: removeAttribute("style")을 사용하면 모든 인라인 스타일이 제거됩니다. removeAttr() 이 속성에 대해서는 조만간 자세히 알아보겠지만 여기서 간단히 알아보겠습니다. removeAttribute()는 HTML..

📌 .after()란?jQuery.after() 메서드는 선택한 요소의 바로 다음 위치에 새로운 요소를 삽입하는 기능을 합니다. 즉, 기존 요소 뒤에 새로운 요소를 추가할 때 사용됩니다. 요소를 무조건 뒤에 새로 추가한다!!✅ 기본 문법$(selector).after(content);selector : 기준이 되는 요소content : 추가할 요소 (HTML, 텍스트, jQuery 객체 등 가능)📌 .after() 실용 예제 10가지1️⃣ 텍스트 뒤에 요소 추가하기안녕하세요! ✅ 설명: 태그 뒤에 태그를 추가하여 "반갑습니다!"라는 텍스트를 강조합니다. 2️⃣ 버튼 클릭 시 요소 추가추가여기 뒤에 추가됩니다.✅ 설명: 버튼 클릭 시 태그 뒤에 요소가 추가됩니다. 3️⃣ 여러 요소 뒤에 새로운 ..

📌 .find()란?jQuery.find() 메서드는 선택한 요소 내부에서 특정 자식 요소를 찾는 기능을 합니다. 이 메서드는 모든 하위 요소(손자, 증손자 포함) 중에서 특정 요소를 검색할 때 사용됩니다.✅ 기본 문법$(selector).find("child-selector");selector : 검색할 부모 요소child-selector : 찾고 싶은 하위 요소의 선택자반환값 : 해당하는 하위 요소의 jQuery 객체📌 .find() 실용 예제 10가지1️⃣ 특정 부모 요소 내부의 모든 찾기Hello, how are you?Me? I'm good.✅ 설명: 내부의 모든 요소를 찾아 글자색을 빨간색으로 변경합니다. 2️⃣ 리스트 내부의 .active 클래스가 있는 항목 찾기 첫 번째 항목 ..

📌 .ready()란?jQuery.ready() 메서드는 DOM(Document Object Model)이 로드된 후 실행되는 이벤트 핸들러입니다.즉, 웹 페이지의 HTML 요소들이 준비된 후 JavaScript 코드를 실행할 수 있도록 도와줍니다.💡 왜 중요할까?HTML 요소가 아직 생성되지 않은 상태에서 JavaScript를 실행하면 오류가 발생할 수 있음.ready()를 사용하면 HTML 요소가 모두 로드된 후 실행되므로 안정적인 코드 실행 가능✅ 기본 문법$(document).ready(function() { // 실행할 코드});또는 단축 문법$(function() { // 실행할 코드}); 📌 .ready() vs $(window).load() 차이점메서드실행 시점실행 대상.r..

📌 .hasClass()란?jQuery.hasClass() 메서드는 선택한 요소에 특정 클래스가 있는지 확인하는 기능을 합니다.주로 CSS 스타일 적용 여부를 체크하거나, 특정 동작을 조건부로 실행할 때 활용됩니다.✅ 기본 문법$(selector).hasClass("클래스명");selector : 클래스 여부를 확인할 요소클래스명 : 확인할 클래스 이름반환값 : true(클래스가 있음), false(클래스가 없음) 📌 .hasClass() 실용 예제 10가지1️⃣ 특정 요소가 클래스 포함 여부 확인if($("#box").hasClass("active")) { console.log("#box에 active 클래스가 있습니다.");} else { console.log("#box에 active ..

📌 개요Node.js를 이용하여 Express 서버를 구축하는 방법을 설명합니다. 또한, Babel을 사용하여 최신 JavaScript 문법을 활용하고, Nodemon을 설정하여 서버 자동 재시작 기능을 추가하는 방법까지 다룹니다.이 글을 따라 하면 Node.js 서버를 효율적으로 구성하고 관리하는 방법을 익힐 수 있습니다. 📌 1. 프로젝트 생성 및 기본 설정✅ 1) Node.js 프로젝트 생성 (package.json 만들기)먼저, 프로젝트 폴더를 만들고 초기 설정을 진행합니다.// 원하는 폴더 밑에서 아래 코드를 작동시킵니다.npm init -y✅ 설명: npm init -y를 실행하면 기본 package.json 파일이 생성됩니다. 📌 2. Express 설치Express는 간단한 웹 서버를..

📌 개요Vue.js 또는 React.js를 처음 설치할 때, 강의를 따라 하다 보면 초반부터 예상치 못한 오류에 봉착할 때가 있습니다.그중에서도 Windows OS의 보안 설정 문제로 인해 프로젝트 생성이 안 되는 경우가 종종 발생합니다.이 문제를 해결하기 위해 PowerShell의 보안 설정을 변경하는 방법을 소개합니다. 📌 문제 상황Windows에서는 보안상의 이유로 특정 스크립트 실행을 막아두었기 때문에, React 또는 Vue 프로젝트 생성 시 오류가 발생할 수 있습니다.이 문제를 해결하려면 PowerShell의 실행 정책을 변경해야 합니다.📌 해결 방법✅ 1. Windows PowerShell을 관리자 권한으로 실행Windows 검색창에서 PowerShell을 검색합니다.**"관리자 권한으..