Dseok의 코딩스터디

📌 개요React.js(프론트엔드)와 Express.js(백엔드)를 연결하는 방법을 단계별로 설명합니다.기본적인 개념과 프로젝트 폴더 구조, 설정 방법, API 요청 처리 방식까지 모두 다룹니다.📌 1. 프로젝트 폴더 구조React와 Express를 함께 사용하려면 아래와 같은 폴더 구조로 설정하는 것이 일반적입니다./my-app ├── /client (React 프로젝트) ├── /server (Express 프로젝트) ├── package.json/client → React 프론트엔드 (React 앱이 들어감)/server → Express 백엔드 (API 서버 구현)package.json → 전체 프로젝트 관리 📌 2. 프로젝트 생성✅ 1) 프로젝트 폴더 생성 및 이동 (Windows)mk..

# 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. ⭕️ 초경량 & 대용량 노트북 백팩 후기✅️ 구매 이유기존 가방이 오래되어 교체가 필요했습니다.노트북(맥북 M1 13인치)과 영어 원서를 매일 들고 다녀야 하는 제 생활 패턴에 맞는 제품을 찾고 있었습니다.예전 가방은 단순히 들고 다녀도 무게가 너무 부담스러워, 가볍고 실용적인 백팩이 절실했어요. ✅️ 선택 이유초경량 디자인 – 하루 종일 착용해도 전혀 부담이 없어서 이동 시 큰 장점을 느꼈습니다.넉넉한 수납공간 – 노트북, 영어 원서, 기타 개인 소지품을 한 번에 정리할 수 있어 편리합니다.심플하고 깔끔한 디자인 – 블랙 색상의 세련된 외관 덕분에 비즈니스, 캐주얼 모두에 잘 어울립니다.✅️ 디자인과 내구성견고한..

📌 data- 속성이란?data- 속성은 HTML 요소에 사용자 정의 데이터를 저장할 때 사용하는 속성입니다. 이 속성을 활용하면 HTML에 추가적인 정보를 포함하고, JavaScript를 통해 쉽게 접근하여 조작할 수 있습니다.✅ 기본 문법제품data-id="1234" → 사용자 정의 데이터 iddata-category="electronics" → 사용자 정의 데이터 categoryJavaScript에서 .dataset을 사용하면 이 데이터를 가져오거나 변경할 수 있습니다. 📌 data- 속성의 장점✅ HTML 요소에 추가 데이터를 저장 가능 (별도 변수 없이 관리 가능)✅ CSS, JavaScript와 쉽게 연동 가능✅ 서버와의 데이터 연동에도 활용 가능 (AJAX, JSON) 📌 data- 속..

📌 개요자바스크립트에서 DOM(Document Object Model)을 조작하는 방법을 배워보겠습니다.이 글에서는 바닐라 자바스크립트를 사용하여 다음 기능을 구현합니다:클릭 시 li 요소에 on 클래스를 추가/제거 (토글 기능)a 태그 버튼을 사용하여 새로운 li 요소를 동적으로 추가사용된 자바스크립트 메서드들에 대한 상세 설명이 기능을 통해 JavaScript로 DOM을 조작하는 기본적인 원리를 이해하고, 실무에서 활용할 수 있도록 학습해봅시다! 💡 📌 구현 목표✅ li 요소를 클릭하면 on 클래스를 추가하거나 제거하는 기능 ✅ a 태그 버튼을 클릭하면 새로운 li 요소를 동적으로 생성 ✅ 사용된 주요 JavaScript 메서드 설명 포함 ✅ 두 가지 예제 제공 📌 HTML 구조 ..

📌 .filter()란?jQuery.filter() 메서드는 선택한 요소 중 특정 조건을 만족하는 요소만 남기고 필터링할 때 사용됩니다. 주로 특정 클래스가 있는 요소만 선택, 특정 조건을 충족하는 리스트 항목 필터링 등에 활용됩니다.✅ 기본 문법$(selector).filter(criteria);criteria: 필터링할 기준 (CSS 선택자(".selecter"), 함수(funClick()), jQuery 객체("#selecter") 등 가능)반환값: 조건을 만족하는 요소만 포함된 jQuery 객체📌 .filter() 활용 예제 7가지1️⃣ 특정 클래스가 있는 요소만 선택$("div").filter(".active").css("background", "yellow");✅ 설명:  요소 중 .act..

📌 개요HTML에서 특정 부모 요소 안의 자식 요소들을 배열로 가져와 속성을 컨트롤하거나, 사용자가 입력한 내용을 동적으로 추가하는 기능을 구현하는 방법을 설명합니다.이를 위해 HTML, CSS, JavaScript를 활용하여 리스트 관리 시스템을 만들어 보겠습니다.📌 구현 목표부모 요소 안의 자식 요소들을 배열로 가져와서 속성 변경버튼 클릭 시 새로운 자식 요소를 추가하는 기능입력한 텍스트 값을 리스트로 추가하는 기능 📌 HTML 구조 자식 요소 컨트롤 & 추가 첫 번째 아이템 두 번째 아이템 세 번째 아이템 배경색 변경 추가 마지막 항목 ..

📌 .eq()란?jQuery.eq() 메서드는 선택한 요소 중 특정 인덱스에 있는 요소를 선택할 때 사용됩니다.0부터 시작하는 인덱스 값을 전달하여 원하는 요소를 쉽게 찾을 수 있습니다.✅ 기본 문법$(selector).eq(index);index: 선택한 요소 중 가져오고 싶은 요소의 0부터 시작하는 인덱스 번호반환값: 선택한 요소의 특정 인덱스에 해당하는 jQuery 객체📌 .eq() 활용 예제 7가지1️⃣ 특정 리스트 항목 선택하기$("li").eq(2).css("color", "red");✅ 설명:  요소 중 세 번째 요소(0부터 시작, index=2) 의 글자색을 빨간색으로 변경합니다. 2️⃣ 버튼 클릭 시 특정 div 스타일 변경$("#changeStyle").on("click", func..

📌 .offset()이란?jQuery.offset() 메서드는 HTML 요소의 문서(document) 기준 위치를 가져오거나 설정하는 기능을 합니다. 주로 스크롤 애니메이션, 고정 위치 UI, 드래그 앤 드롭 기능 등 다양한 곳에서 활용됩니다.✅ 기본 문법$(selector).offset(); // 요소의 위치를 가져오기$(selector).offset({ top: value, left: value }); // 요소의 위치 설정$(selector).offset() : 선택한 요소의 top(Y 좌표)과 left(X 좌표) 값을 반환합니다.$(selector).offset({ top: value, left: value }) : 요소를 원하는 위치로 이동시킵니다. 📌 .offset() 활용 예제 7가지..

GitHub를 사용하다 보면 다양한 상황에 직면하게 됩니다.그때마다 문제를 해결해야 하지만, Git 명령어는 종류가 많아 기억하기 어려운 경우가 많죠.그래서 제가 GitHub 명령어를 상황별로 정리한 엑셀 파일을 만들었습니다!이 파일을 다운로드하면 필요한 명령어를 빠르게 찾아볼 수 있어 Git을 더욱 효율적으로 활용할 수 있습니다. 📌 주황색 배경으로 표시된 항목은 제가 직접 사용해보고 요약한 명령어입니다!실제 사용 경험을 바탕으로 정리했기 때문에 더 실용적으로 활용할 수 있을 거예요. ✅ 무료 배포!✅ 저작권 없습니다.✅ 누구나 쉽게 사용 가능! 💡 자주 방문해서 좋아요와 댓글로 소통해 주세요!함께 배우고 성장하는 공간이 되었으면 좋겠습니다. 😊

📌 .append()란?jQuery.append() 메서드는 선택한 요소의 마지막 자식 요소로 새로운 요소를 추가할 때 사용됩니다. 주로 동적 컨텐츠 추가, 리스트 업데이트, 실시간 채팅 메시지 삽입 등에 활용됩니다.✅ 기본 문법$(selector).append(content);$(selector) : 요소를 선택합니다..append(content) : 선택한 요소의 마지막에 content를 추가합니다.📌 .append() 활용 예제 7가지 1️⃣ 새로운 요소 추가하기$("#list").append("새로운 아이템");✅ 설명: 요소의 마지막에 새로운 요소를 추가합니다. 2️⃣ 여러 개의 요소 동시 추가$("#box").append("첫 번째 문장두 번째 문장");✅ 설명: 한 번의 .append..