자바스크립트 this 키워드 제대로 이해하기 (함수 / 객체 / 클래스에서)
·
Programing/javascript
자바스크립트의 this는 문맥(context)에 따라 다르게 동작하는 독특한 키워드입니다. 함수, 객체, 클래스 등 다양한 구조에서 this가 어떻게 달라지는지 제대로 이해하지 않으면 예기치 못한 결과를 초래할 수 있습니다. 이 글에서는 상황별 this의 의미와 사용법을 예제와 함께 설명합니다.✨ 전역 컨텍스트에서의 thisconsole.log(this); // 브라우저에서는 window, Node.js에서는 global전역에서의 this는 브라우저에선 window 객체를, Node.js에선 global 객체를 참조합니다.✨ 일반 함수에서의 thisfunction show() { console.log(this);}show(); // 브라우저 기준: window (strict 모드에서는 undefined..
자바스크립트 == vs === 비교 연산자의 차이와 올바른 사용법
·
Programing/javascript
자바스크립트에서 값을 비교할 때 가장 흔히 사용되는 연산자는 ==(느슨한 비교)와 ===(엄격한 비교)입니다. 이 둘은 겉보기에는 비슷하지만, 내부 작동 방식과 비교 결과는 전혀 다를 수 있습니다. 잘못 사용하면 의도치 않은 버그로 이어질 수 있기 때문에, 정확한 차이를 이해하고 상황에 맞게 사용하는 것이 중요합니다.✨ == (느슨한 동등 연산자)타입 변환을 허용함 (type coercion)비교 전에 두 값의 타입이 다르면 자동으로 형 변환 후 비교예시:'5' == 5 // true → 문자열 '5'가 숫자 5로 변환됨0 == false // true → false는 0으로 변환됨null == undefined // true → 둘은 느슨한 비교에서만 같음[] == '' /..
자바스크립트의 데이터 타입 완전 정복 (typeof, null, undefined)
·
Programing/javascript
자바스크립트를 다루다 보면 typeof, null, undefined의 개념에서 헷갈리는 경우가 많습니다. 특히 예상과 다른 결과값이나 데이터 타입 판별 문제로 디버깅이 어려울 때가 있죠. 이 글에서는 자바스크립트의 기본 데이터 타입을 정확하게 이해하고, typeof, null, undefined를 명확히 구분하는 방법을 정리해보겠습니다.✨ 자바스크립트의 기본 데이터 타입자바스크립트의 데이터 타입은 크게 원시 타입과 참조 타입으로 나뉩니다.✅ 원시 타입 (Primitive Types)string: 문자열 → 'hello', "abc"number: 숫자 → 10, 3.14, NaNboolean: 참/거짓 → true, falseundefined: 값이 할당되지 않은 변수null: 값이 "없음"을 명시big..
자바스크립트의 var, let, const 차이와 올바른 사용법
·
Programing/javascript
자바스크립트를 처음 접하면 가장 헷갈릴 수 있는 부분 중 하나가 변수 선언 방식입니다. var, let, const는 모두 변수를 선언하는 키워드지만, 작동 방식과 사용 범위에서 큰 차이를 보입니다. 이 글에서는 각 키워드의 특징과 차이점을 정리하고, 언제 어떤 키워드를 사용해야 하는지 명확히 이해할 수 있도록 설명합니다.✨ 1. var — 과거 방식의 변수 선언var name = "Alice";재선언 가능: 같은 변수명을 다시 선언해도 오류가 발생하지 않음재할당 가능: 값을 자유롭게 바꿀 수 있음함수 스코프(Function Scope): 함수 내부에서만 유효함. 블록(if, for, while) 내에서 선언해도 함수 전체에서 접근 가능호이스팅(Hosting): 선언이 코드 상단으로 끌어올려짐. 단, 초..
php 비밀번호 유효성 검사
·
Programing/PHP
연관글2025.04.22 - [Programing/javascript] - javascript 비밀번호 유효성 검사2019.01.05 - [Programing/PHP] - PHP 정규식 비밀번호 유효성 검사 에서 개선되었습니다.보안이 중요한 웹 애플리케이션에서는 사용자의 비밀번호가 일정 수준의 복잡성을 만족해야 합니다. 이 글에서는 PHP로 작성된 passwordCheck 함수를 통해 비밀번호의 길이, 문자 구성, 공백 여부 등을 검사하는 방법을 소개합니다.✨ 함수 설명function passwordCheck($password){ $lengthValid = strlen($password) >= 10 && strlen($password) \/?`~]/', $password); $hasWhites..
javascript 비밀번호 유효성 검사
·
Programing/javascript
연관글2025.04.22 - [Programing/PHP] - php 비밀번호 유효성 검사 회원가입 또는 비밀번호 변경 기능을 구현할 때, 사용자의 비밀번호가 보안 기준을 충족하는지를 확인하는 절차는 필수적입니다. 본 글에서는 JavaScript로 작성된 checkPasswordJson 함수의 구조와 검증 기준을 정리하고, 각 조건별 반환 메시지를 살펴봅니다.✨ 함수 설명function checkPasswordJson(password){ const lengthValid = password.length >= 10 && password.length /?`~]/.test(password); const hasWhitespace = /\s/.test(password); if (!lengthVali..
PHP 이메일 유효성 검사
·
Programing/PHP
연관글2025.04.22 - [Programing/javascript] - javascript 이메일 유효성 검사2019.01.05 - [Programing/PHP] - PHP 정규식 이메일 유효성 검사 글의 코드가 개선되었습니다.2025.04.21 - [Programing/javascript] - 이메일 입력 필드를 위한 한글 및 공백 제거 jQuery 같이 보면 좋은 글 사용자가 입력하는 이메일 주소가 형식에 맞는지를 검사하는 기능은 대부분의 회원가입, 로그인, 문의폼 등에 필수적으로 포함됩니다. PHP에서도 정규표현식을 통해 이 기능을 간단하게 구현할 수 있습니다. 본 글에서는 PHP로 작성된 isValidEmail 함수의 동작 방식과 정규표현식의 의미를 정리합니다.✨ 함수 설명function is..
javascript 이메일 유효성 검사
·
Programing/javascript
연관글2025.04.22 - [Programing/PHP] - PHP 이메일 유효성 검사2025.04.21 - [Programing/javascript] - 이메일 입력 필드를 위한 한글 및 공백 제거 jQuery 함께보면 좋은 글 사용자가 입력하는 이메일 주소가 형식에 맞는지를 검사하는 기능은 대부분의 회원가입, 로그인, 문의폼 등에 필수적으로 포함됩니다. JavaScript에서 이를 정규표현식으로 간단하게 처리할 수 있으며, 본 글에서는 isValidEmail 함수의 동작 방식과 정규표현식의 의미를 정리합니다.✨ 함수 설명function isValidEmail(email) { const EMAIL_PATTERN = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{..
국가별 여권번호 유효성 검사
·
Programing/javascript
여권번호는 국가마다 규칙이 다르기 때문에, 이를 검증할 때는 국가별로 적절한 정규표현식을 사용하는 것이 중요합니다. 이 글에서는 입력된 여권번호가 특정 국가의 규칙에 부합하는지를 검사하는 JavaScript 함수 isValidPassportNumber의 구조를 살펴보고, 실제 여권번호를 조회 또는 검증할 수 있는 공공 API가 있는지에 대해서도 함께 안내합니다.✨ 함수 설명function isValidPassportNumber(passportNumber, isoCode) { const passportPatterns = { KR: /^[A-Z]{1}\d{8}$/, // 대한민국 US: /^\d{9}$/, // 미..
윤년 기준으로 날짜 선택 옵션을 자동 변경하는 함수
·
Programing/javascript
2019.06.26 - [Programing/javascript] - JavaScript 윤년(leap year) 체크 글의 응용 버전입니다.php 윤년 체크는 2019.06.26 - [Programing/PHP] - PHP 윤년(leap year)체크 글을 참조해주세요. 웹 서비스에서 날짜를 기준으로 기간을 선택하는 UI를 제공할 때, 윤년(Leap Year)에 따라 '365일'이 아닌 '366일'로 바뀌어야 할 때가 있습니다. 이 글에서는 JavaScript를 활용해 윤년인 경우 자동으로 '일 수'를 변경해주는 함수 leapYearChangeTerm의 동작 방식을 소개합니다.✨ 함수 전체 코드function isLeapYear(year) { return (year % 4 === 0 && year..