정규표현식으로 input 태그의 value 값의 공백을 제거하고, 해당 값이 이메일/전화번호 형식인 지 체크하는 javasciprt 로직 검사 // 1. 이메일 유효성 검사function isValidEmail(inputElement) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(inputElement.value.trim());}// 2. 전화번호 유효성 검사 (국내 010-1234-5678 형식)function isValidPhoneNumber(inputElement) { const phoneRegex = /^01[016789]-?\d{3,4}-?\d{4}$/; return phoneRegex.tes..
js
JavaScript에서 API를 통해 데이터를 가져오는 방법은 크게 3가지로 나눌 수 있다Fetch API (가장 기본적인 방법)Axios (라이브러리 활용)Async/Await (비동기 처리 가독성 개선) 1️⃣ Fetch API 사용 (기본적인 방법)fetch()는 JavaScript에서 가장 기본적으로 API 요청을 보내는 방법입니다.📌 예제: JSONPlaceholder에서 데이터 가져오기fetch("https://jsonplaceholder.typicode.com/posts/1") .then(response => response.json()) // JSON 형식으로 변환 .then(data => console.log(data)) // 데이터 출력 .catch(error => cons..
콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수를 의미함. JavaScript에서 비동기 처리나 재사용 가능한 로직을 만들 때 필수적으로 사용됨. 1️⃣ 콜백 함수의 기본 구조콜백 함수는 아래와 같은 구조로 사용됨function mainFunction(callback) { console.log("메인 함수 실행!"); callback(); // 콜백 함수 실행}function callbackFunction() { console.log("콜백 함수 실행!");}mainFunction(callbackFunction);📌 설명:mainFunction은 매개변수로 callback을 받음callback()을 호출하여 callbackFunction이 실행됨출력 결과:메인 함수 실행!콜백 함수 실행! ..
javascript에서 리다이렉트하는 방법은 여러 가지가 있기 때문에, 상황에 따라 가장 적절한 방법을 선택하는 것이 중요함 1. window.location.hrefwindow.location.href = "https://example.com";📌 특징:가장 널리 사용되는 일반적인 방법브라우저 히스토리에 기록됨 (뒤로 가기 가능)현재 페이지를 대체하지 않음 (사용자가 뒤로 갈 수 있음)✅ 사용 사례:사용자가 특정 페이지에서 다른 페이지로 이동해야 할 때로그인 후 메인 페이지로 이동 2. window.location.replacewindow.location.replace("https://example.com");📌 특징:현재 페이지를 대체함(뒤로 가기 방지)브라우저 히스토리에 남지 않음 (뒤로 가기 ..
클로저(Closure) 는 함수가 자신이 선언된 환경(Lexical Scope)의 변수를 기억하고, 해당 스코프 바깥에서도 계속 접근할 수 있는 개념✅ 클로저의 핵심 개념내부 함수(Inner Function)가 외부 함수(Outer Function)의 변수에 접근할 수 있음외부 함수가 실행을 마친 후에도 내부 함수가 외부 변수 값을 유지함데이터를 은닉(Encapsulation)하고 유지하는 데 유용 1. 기본적인 클로저 예제function outer() { let count = 0; // 외부 함수의 변수 (내부 함수가 접근 가능) return function inner() { // 내부 함수 (클로저) count++; // 외부 함수의 변수 사용 console.log(`현재 count 값..
JavaScript에서는 클래스 기반(Class-based) 방식과 함수형 기반(Functional) 방식 두 가지 스타일로 객체 지향 프로그래밍(OOP)을 구현할 수 있음비교 항목클래스 기반(Class-based)함수형 기반(Functional)핵심 개념class와 constructor를 사용하여 객체 생성function과 prototype을 사용하여 객체 생성인스턴스 생성new 키워드로 인스턴스를 생성함수를 호출하여 객체를 생성상속extends 키워드를 사용하여 상속 구현Object.create() 또는 클로저(Closure)를 활용하여 상속 구현this 사용 여부this를 사용하여 속성에 접근this 사용 없이 상태(state)를 직접 관리메모리 관리클래스의 메서드는 prototype에 저장되어 메..
**배열(Array)**은 JavaScript에서 여러 개의 값을 하나의 변수에 저장할 수 있는 자료구조입니다.JavaScript의 배열은 동적 크기(dynamic size) 를 가지며, 다양한 데이터 타입을 저장할 수 있습니다. ✅ 1. 배열 선언 및 초기화📌 배열 선언 방법// 방법 1: 대괄호([])를 사용한 배열 선언(가장 많이 사용)let arr1 = [1, 2, 3, 4, 5];// 방법 2: Array() 생성자 사용let arr2 = new Array(1, 2,3, 4, 5);// 방법 3: 빈 배열 선언 후 값 추가let arr3 = [];arr3[0] = 1;arr3[1] = 2;📌 배열 요소(Elements) 접근console.log(arr1[0]); // 1console.log(..
자바스크립트에서 객체나 배열을 복사할 때 **"얕은 복사(Shallow Copy)"**와 "깊은 복사(Deep Copy)" 개념을 정확히 이해하는 것이 중요합니다. 이를 제대로 이해하지 않으면 예상치 못한 버그를 만들 수도 있습니다! 😱오늘은 얕은 복사와 깊은 복사의 차이점과 실전에서 유용한 복사 방법을 정리해 보겠습니다. 🚀 🧐 1. 얕은 복사(Shallow Copy)란?얕은 복사는 객체의 1차원 프로퍼티(기본값)는 복사하지만, 중첩된 객체(참조 타입)는 주소값만 복사하는 방식입니다.✅ 얕은 복사 예제const original = { name: "Alice", skills: ["JS", "React"] };const copy = { ...original }; // 얕은 복사copy.name = ..
🔥 1. == vs ===의 충격적인 차이점자바스크립트에서 동등 연산자(==)와 일치 연산자(===)는 다르게 동작한다console.log(0 == "0"); // true (자동 형변환)console.log(0 === "0"); // false (자료형까지 비교)console.log(false == "0"); // true (자동 형변환)console.log(false === "0"); // false📌 왜 그럴까?== 연산자는 자동 형변환(coercion)을 수행하여 false와 "0"을 둘 다 숫자 0으로 변환하여 비교한다.=== 연산자는 자료형까지 엄격하게 비교하므로 false !== "0"이 된다.✅ 실전 팁: 가능하면 항상 ===를 사용하여 예기치 않은 버그를 방지하자! 🧐 2. [] ..
