최연탄 원본: 자바스크립트 정규 표현식으로 특수문자 제거 알파벳이나 숫자가 아닌 구두점, 악센트, 기호 등 읽을 수 없는 문자를 특수문자 라고 합니다. 문자열을 읽거나 이해하기 더 쉽도록 문자열에서 특수문자 제거를 해야합니다. 이 작업을 가장 간단하게 하는 방법은 정규 표현식을 사용하는 것 입니다. 포스트를 시작하기 전에 자바스크립트의 정규 표현식에 대해 간단하게 살펴보고 넘어가겠습니다. 자바스크립트의 정규 표현식 정규 표현식은 … Read more
원본: 자바스크립트로 범위 내의 랜덤 숫자 생성하기 자바스크립트의 Math.random()은 0과 1 사이의 난수를 생성하는 랜덤 함수입니다. 즉, 0과 같거나 크고 1 보다 작은 값을 리턴합니다. (0 <= x < 1) 다른 범위의 숫자가 필요한 경우 간단한 수학을 사용하여 원하는 범위의 값을 얻을 수 있습니다. 참고로 이 메소드는 암호학적으로 안전한 랜덤 값을 생성하지 않습니다. 보안과 관련된 … Read more
원본: 자바스크립트의 round(), ceil(), floor()를 사용하여 반올림 이 포스트에서는 자바스크립트의 round(), ceil(), floor() 메소드를 사용하여 숫자를 반올림, 올림, 내림 하는 방법을 알아보겠습니다. 위의 모든 메소드는 Math 객체의 정적 메소드입니다. 즉, Math 객체의 인스턴스에서 메소드를 호출하는 것이 아니라 Math.method()와 같은 형태로 직접 호출합니다. (Math에는 생성자가 없습니다.) 참고로 이 메소드는 숫자(정수, 소수)에 대해서만 호출할 수 있으며, 그 … Read more
원본: HTML로 라디오 버튼 만들기 방문자를 늘리기 위해 매년 새로운 웹 기술이 도입되지만, 시간이 지나도 변하지 않는 기술도 있습니다. 이번 포스트에서 그런 요소 중 하나인 HTML 라디오 버튼에 대해 알아보겠습니다. Form 양식에서 라디오 버튼 타입을 통해 여러 가지 옵션 중 하나를 선택하는 필드를 본 적 있을 것 입니다. HTML에서는 편리하게도 input 태그의 type 으로 라디오 … Read more
원본: 자바스크립트에서 문자열 제거 방법 자바스크립트의 문자열은 기본 자료형으로 작은따옴표(‘), 큰따옴표(“), 백틱(`)으로 묶인 일련의 문자를 가집니다. 문자열은 수정할 수 없습니다(immutable). 즉, 문자열을 변경하려면 원래 문자열은 놔두고 새 문자열을 만들게 됩니다. 문자열을 조작해주는 빌트인 메소드로 문자열을 수정하고 변환할 수 있으며, 이는 더 적은 코드로 작업을 더 쉽게 만듭니다. 문자열을 조작하는 작업 중 하나는 문자열에서 문자를 제거하는 … Read more
원본: JavaScript Substring Method 이번 포스트에서는 자바스크립트의 substring() 메소드를 효과적으로 사용하는 방법에 대해 알아보겠습니다. 여기서는 메소드의 작동 방식을 알아보기위해 예제와 패턴, 특이점 등을 확인해 보겠습니다. 일반적으로 substring() 메소드는 문자열의 일부를 추출하고 저장할 때 사용하는 String 객체의 메소드입니다. 추출하는 동안 원본 문자열은 그대로 유지되며 대상 부분만 새 문자열로 리턴됩니다. 문자열의 특정 부분을 가져올 때 사용하기 좋습니다. … Read more
원본: 자바스크립트 체크박스 이 포스트에서는 자바스크립트를 사용하여 체크박스가 선택되었는지 확인하고, 선택된 값을 가져오고, 모든 체크박스를 선택/해제하는 방법을 알아보겠습니다. 체크박스 생성 체크박스를 생성하기 위해서는 다음 예제와 같이 <input> 요소의 type 속성을 checkbox로 설정하면 됩니다: 가용성과 접근성을 향상시키기 위해 체크박스와 <label> 요소를 항상 연결하여 사용하는 것이 좋습니다. 이렇게 하면 다음과 같이 레이블을 클릭해도 체크박스가 선택되거나 해제됩니다: 또는: … Read more
원본: HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element 대부분의 웹 페이지나 응용프로그램에서는 드롭다운 메뉴를 사용하여 정보 목록을 표시합니다. 우리는 이를 사용하여 탐색 메뉴, Form 옵션 등을 만들 수 있습니다. 웹 사이트나 프로그램의 메뉴를 보면 ‘메뉴를 만들기 복잡할 것 같다’라는 생각이 들 것 입니다. 맞습니다. 경우에 따라 복잡해지기도 합니다. … Read more
원본: 자바스크립트로 드롭다운 메뉴를 만드는 방법 웹 서핑을 하면서 드롭다운 메뉴를 사용해 본 적이 있을 것 입니다. 이는 주로 Form 양식에서 사용자 입력 수집하기, 웹 애플리케이션에서 탐색 메뉴 구현 등에 사용됩니다. 드롭다운은 애플리케이션의 레이아웃 흐름을 깨지 않고 여러 기능을 제공하는 가장 좋은 방법입니다. 웹 외에도 exe 프로그램, 운영체제 등에서 사용됩니다. 이 포스트에서는 HTML, CSS, 자바스크립트를 … Read more
원본: Forms and Form Input Fields form 양식은 사용자가 제공한 정보를 HTTP를 통해 서버로 제출하게 하는 요소로, 자바스크립트 웹 초기 버전에서 서버와의 상호 작용 이후에는 항상 새 페이지로 이동한다는 가정 하에 설계된 요소입니다. 하지만 이제는 DOM의 일부이며 form 필드를 나타내는 DOM 요소는 다른 요소에는 없는 속성과 이벤트를 지원합니다. 이를 통해 입력 필드를 검사, 제어하고 기존 … Read more
원본: 자바스크립트 배열 – 배열 생성 방법 배열은 순서가 있는 요소의 목록을 가지는 자료구조입니다. 이 포스트에서는 자바스크립트를 사용하여 배열을 생성하는 4 가지 방법을 알아보겠습니다. 할당 연산자로 배열 생성 자바스크립트에서 가장 일반적으로 배열을 만드는 방법은 다음과 같이 배열 변수를 할당하는 것 입니다: 개발자 도구를 켜고 console.log() 메소드를 사용하여 배열 값을 확인하면 4 개의 요소를 가진 배열이 … Read more
원본: JavaScript Console Log: Best Logging Techniques 자바스크립트의 console.log() 메소드와 고급 자바스크립트 로깅 기술은 현대 웹 개발에 중요한 위치를 차지하고 있습니다. Safari, Chrome 등 브라우저의 개발자 도구 없이는 대부분의 프로젝트에서 채택하고 있는 애자일 방법론에 따른 빠른 릴리즈 주기를 맞출 수 없을 것 입니다. 이러한 도구는 앱이 실제 환경에서 어떻게 작동하는지를 보여주고, 개발자가 소스 코드를 자세히 … Read more
원본: 크롬 개발자 도구 가이드 프론트 엔드 개발자나 테스터로서 작업 시 웹 애플리케이션의 버그를 찾고 수정하는 작업은 쉬운 일이 아닙니다. 왜냐면 API 호출이나 불확실한 사용자 상호 작용 때문에 예기치 않은 오류가 발생하기 때문입니다. 하지만 요즘 나오는 최신 브라우저에는 오류를 디버깅할 수 있는 개발자 도구를 함께 제공하고 있습니다. 개발자 도구를 사용하면 개발자와 테스터가 실행 중인 웹 … Read more
원본: Try/Catch in JavaScript – How to Handle Errors in JS 자바스크립트 코딩 시 버그와 오류 발생은 불가피한 요소입니다. 개인 프로젝트에 오류가 있어서 밤새 디버깅했는데 단순한 쉼표 같은 것이 원인이었다면 허탈했을 것 입니다. 하지만 고객이 보고한 오류는 좀 더 진지하게 심각합니다. 오류는 개발자를 짜증나고 고통스럽게 합니다. 이 포스트에서는 이러한 고통을 줄이기 위해 try…catch 라는 자바스크립트 … Read more
원본: How to Validate URL in JavaScript Uniform Resource Locator(URL)은 인터넷의 페이지나 파일을 연결합니다. 이는 인터넷에 있는 서버의 주소 역할을 합니다. 유효한 URL은 특정 패턴을 따르므로 패턴을 알고 있으면 URL이 유효한지 확인하고, 피드백을 제공하고, 오류를 발생시키는 등의 작업을 할 수 있습니다. 이 포스트에서는 자바스크립트 문자열이 유효한 URL인지 확인하는 세 가지 방법을 알아보겠습니다. URL 생성자로 검증 … Read more
원본: 자바스크립트의 템플릿 리터럴 사용 방법 템플릿 리터럴은 ES6에서 도입된 자바스크립트의 기능입니다. 이는 문자열 작업 시 보다 유연하고 유지 관리가 쉽도록 도와줍니다. 이 포스트에서는 템플릿 리터럴을 사용하는 방법, 구문, 이점 및 사용 사례를 알아보겠습니다. 또한 태그가 지정된 템플릿 리터럴(tagged template literals)이라는 강력한 기능에 대해서도 알아보겠습니다. 템플릿 리터럴 이란? 템플릿 리터럴은 문자열 작업을 편리하게 수행할 수 … Read more
원본: How to Get the Current URL with JavaScript – JS Location Tutorial 동적 웹이나 대화형 웹 애플리케이션을 만들기 위해 자바스크립트로 작업을 많이 할 것 입니다. 이런 다양한 작업들 중에는 웹 페이지의 현재 URL을 가져오는 작업도 있을 것 입니다. 이 포스트에서는 자바스크립트의 window.location 객체를 사용하여 현재 페이지의 URL을 가져오는 방법을 알아보겠습니다. window.location 사용 방법 window.location … Read more
원본: JavaScript Fetch API For Beginners – Explained With Code Examples Fetch API는 웹에 요청을 보내고 그에 해당하는 응답을 받을 수 있는 자바스크립트 API 입니다. 이 포스트에서는 자바스크립트 Fetch API를 사용하여 외부 API에 GET, POST, PUT, PATCH, DELETE 등의 HTTP 요청을 보내는 방법을 알아보겠습니다. Fetch API 란? REST API 서버에 HTML form과 같은 데이터의 요청을 … Read more
원본: How to Store Data in LocalStorage in JavaScript LocalStorage API는 사용자 컴퓨터에 kay/value 타입의 데이터를 관리하는 간단한 저장소에 대한 접근을 제공합니다. 클라이언트 측에 데이터를 저장하면 서버의 데이터베이스 쿼리 수를 줄일 수 있기 때문에 웹 애플리케이션의 성능을 높이는 데 도움이 됩니다. 이를 통해 서버 리소스를 확보할 수 있으며 잠재적으로 인프라 비용을 절감할 수 있습니다. LocalStorage가 … Read more
원본: classList in JavaScript 웹 사이트에서 버튼을 클릭할 때마다 요소의 상태가 변화하고, 애니메이션이 이루어지고, 사용자의 상호 작용에 따라 스타일이 어떻게 동적으로 변경되는지 궁금하지 않나요? 답은 자바스크립트의 간단하면서도 강력한 기능인 classList 속성에 있습니다. 이 포스트에서는 프론트엔드 개발 기술을 크게 향상시킬 수 있는 자바스크립트의 기본 개념인 classList 속성에 대해 알아보겠습니다. 개념 이해 매력적인 웹 경험 구축에는 스타일이 … Read more