자바스크립트의 다양한 빌트인 메소드와 기능을 설명하는 튜토리얼을 다룹니다.
또한 다양한 상황에 사용할 수 있는 예제와 설명을 통해 바로 실제 상황에 적용할 수 있는 스크립트를 제공합니다.
원본: 자바스크립트로 드롭다운 메뉴를 만드는 방법 웹 서핑을 하면서 드롭다운 메뉴를 사용해 본 적이 있을 것 입니다. 이는 주로 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
원본: 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
원본: 자바스크립트의 alert, confirm, prompt 대화상자 알아보기 웹 프로젝트에서 사용자와의 상호 작용 기능은 대화형 애플리케이션을 만드는 데 있어 중요한 기능입니다. 자바스크립트는 개발자와 사용자가 효과적으로 소통할 수 있도록 다양한 대화상자를 내장하고 있습니다. 이 포스트에서는 일반적으로 사용되는 세 가지 대화상자인 alert box, confirm box, prompt box를 알아보겠습니다. 이제 부터 대화상자를 사용하는 목적과 예제를 스크립트 코드와 함께 설명하고, … Read more
원본: The best way to pad a string in JavaScript (padStart) 자바스크립트는 문자열에 다른 문자를 채우는 다양한 방법을 제공합니다. 하지만 모두가 여러 방법 중 가장 효율적인 방법을 사용하고 싶어 합니다. 이 포스트에서는 문자열에 다른 문자를 채우는 가장 좋은 방법을 알아보겠습니다. 조건문으로 문자열 채우기 문자열 채우기란 문자열에 다른 문자열이나 문자 시퀀스를 채우는 것을 의미합니다. 예를 들어, … Read more
원본: 자바스크립트 날짜 포맷 – How to Format a Date in JS 웹 페이지를 만들다 보면 뭔가 업로드된 시간을 표시하기 위해 날짜를 사용할 때가 있습니다. 이 포스트에서는 자바스크립트로 날짜의 포맷을 지정하는 방법과 moment.js로 알려진 유명한 자바스크립트 라이브러리를 사용하는 방법을 알아봅니다. 날짜 가져오는 방법 자바스크립트에서 new Date() 또는 Date() 생성자를 사용하여 날짜(현재 날짜 또는 특정 날짜)를 … Read more
원본: Converting JSON into Javascript Objects with JSON.parse() JSON 파싱은 문자열 형태의 JSON을 애플리케이션 내에서 사용할 수 있는 자바스크립트 객체로 변환하는 프로세스입니다. 자바스크립트에서 이를 수행하는 방법은 자바스크립트 표준에서 지정한 JSON.parse() 메소드를 사용하는 것 입니다. 이 메소드는 JSON 객체를 자바스크립트 문자열로 변환하는 JSON.stringify() 메소드의 반대 메소드 입니다. JSON.parse() 사용 방법 자바스크립트 프로그램은 다양한 소스에서 JSON 객체를 … Read more
원본: Converting Javascript Objects into Strings with JSON.stringify() JSON 문자열화는 자바스크립트 객체를 애플리케이션 내에서 사용할 수 있는 일반 문자열로 변환하는 작업입니다. 이를 수행하는 방법은 자바스크립트 표준에서 지정한 대로 JSON.stringify() 메소드를 사용하는 것 입니다. 이 메소드는 JSON 문자열을 자바스크립트 객체로 변환하는 JSON.parse() 메소드의 반대 메소드 입니다. JSON.stringify() 사용 방법 일반적으로 데이터베이스, REST API 등 데이터 저장소에는 … Read more
원본: 자바스크립트 동적 요소 추가, 제거 개발을 하다보면 웹 페이지의 요소를 사용하여 작업하는 상황이 꽤 많습니다. 이러한 작업의 예로는 새 요소를 삽입하거나 목록에서 요소를 제거하는 todo list 같은 것이 있습니다. 또는 사용자가 구매한 주식을 추적하는 앱 같은 작업도 있습니다. 이 포스트에서는 자바스크립트의 자식 요소를 쉽게 삽입, 제거, 교체하는 방법에 대해 알아보겠습니다. 요소 동적 삽입 자식 … Read more
원본: 자바스크립트로 배열 섞기 자바스크립트로 배열을 섞는 방법에는 Fisher-Yates 알고리즘, sort() 메소드, Lodash 함수 등이 있습니다. 이러한 배열을 섞는 작업은 무작위 데이터를 만드는 알고리즘 등에 필요한 일반적인 작업입니다. 다양한 방법을 활용해 프로젝트에 가장 적합한 방법을 적용할 수 있습니다. 이 포스트에서는 네 가지 배열 섞기 알고리즘에 대해 알아보겠습니다. Fisher-Yates 알고리즘으로 배열 섞기 Knuth shuffle 이라고도 알려진 … Read more
원본: 자바스크립트의 배열 중복 제거하는 3가지 방법 개발을 하다보면 배열에 있는 중복된 요소를 제거해야 하는 경우가 빈번히 발생합니다. 마트에서 같은 항목의 목록을 한 번만 인쇄해야 하거나, 기록이 중복된 학생을 제거하는 등 형태는 무한합니다. 이 포스트에서는 이런 다양한 형태의 중복된 요소를 여러가지 빌트인 메소드를 활용하여 제거하는 방법을 알아보겠습니다. Set 객체로 중복 제거 Set 객체를 사용하면 고유한 … Read more
원본: The JavaScript Map Object 자바스크립트의 Map 객체는 key/value 쌍의 모음으로, key는 객체, 함수 등 모든 타입이 될 수 있습니다. 객체를 생성하고 사용하는 방법과 일반 자바스크립트 Object와의 차이점을 알아보겠습니다. 스크립트를 작성하다 보면 key/value 쌍을 저장하고 조작해야하는 상황을 자주 보게됩니다. 기본 Object로도 이러한 작업을 할 수 있지만 Map 객체는 데이터 처리를 단순화 하고 효율적으로 처리하게 해주는 … Read more