자바스크립트 대화상자 (alert, confirm, prompt)

원본: 자바스크립트의 alert, confirm, prompt 대화상자 알아보기 웹 프로젝트에서 사용자와의 상호 작용 기능은 대화형 애플리케이션을 만드는 데 있어 중요한 기능입니다. 자바스크립트는 개발자와 사용자가 효과적으로 소통할 수 있도록 다양한 대화상자를 내장하고 있습니다. 이 포스트에서는 일반적으로 사용되는 세 가지 대화상자인 alert box, confirm box, prompt box를 알아보겠습니다. 이제 부터 대화상자를 사용하는 목적과 예제를 스크립트 코드와 함께 설명하고, … Read more

String.padStart 자바스크립트 문자열 0으로 채우기

원본: The best way to pad a string in JavaScript (padStart) 자바스크립트는 문자열에 다른 문자를 채우는 다양한 방법을 제공합니다. 하지만 모두가 여러 방법 중 가장 효율적인 방법을 사용하고 싶어 합니다. 이 포스트에서는 문자열에 다른 문자를 채우는 가장 좋은 방법을 알아보겠습니다. 조건문으로 문자열 채우기 문자열 채우기란 문자열에 다른 문자열이나 문자 시퀀스를 채우는 것을 의미합니다. 예를 들어, … Read more

자바스크립트 Date 날짜 포맷 yyyy-mm-dd hh:mm:ss

원본: 자바스크립트 날짜 포맷 – How to Format a Date in JS 웹 페이지를 만들다 보면 뭔가 업로드된 시간을 표시하기 위해 날짜를 사용할 때가 있습니다. 이 포스트에서는 자바스크립트로 날짜의 포맷을 지정하는 방법과 moment.js로 알려진 유명한 자바스크립트 라이브러리를 사용하는 방법을 알아봅니다. 날짜 가져오는 방법 자바스크립트에서 new Date() 또는 Date() 생성자를 사용하여 날짜(현재 날짜 또는 특정 날짜)를 … Read more

자바스크립트 문자열 JSON 변환 (parse)

원본: Converting JSON into Javascript Objects with JSON.parse() JSON 파싱은 문자열 형태의 JSON을 애플리케이션 내에서 사용할 수 있는 자바스크립트 객체로 변환하는 프로세스입니다. 자바스크립트에서 이를 수행하는 방법은 자바스크립트 표준에서 지정한 JSON.parse() 메소드를 사용하는 것 입니다. 이 메소드는 JSON 객체를 자바스크립트 문자열로 변환하는 JSON.stringify() 메소드의 반대 메소드 입니다. JSON.parse() 사용 방법 자바스크립트 프로그램은 다양한 소스에서 JSON 객체를 … Read more

자바스크립트 JSON 문자열 변환 (stringify)

원본: Converting Javascript Objects into Strings with JSON.stringify() JSON 문자열화는 자바스크립트 객체를 애플리케이션 내에서 사용할 수 있는 일반 문자열로 변환하는 작업입니다. 이를 수행하는 방법은 자바스크립트 표준에서 지정한 대로 JSON.stringify() 메소드를 사용하는 것 입니다. 이 메소드는 JSON 문자열을 자바스크립트 객체로 변환하는 JSON.parse() 메소드의 반대 메소드 입니다. JSON.stringify() 사용 방법 일반적으로 데이터베이스, REST API 등 데이터 저장소에는 … Read more

자바스크립트 동적 HTML 생성, 추가, 제거

원본: 자바스크립트 동적 요소 추가, 제거 개발을 하다보면 웹 페이지의 요소를 사용하여 작업하는 상황이 꽤 많습니다. 이러한 작업의 예로는 새 요소를 삽입하거나 목록에서 요소를 제거하는 todo list 같은 것이 있습니다. 또는 사용자가 구매한 주식을 추적하는 앱 같은 작업도 있습니다. 이 포스트에서는 자바스크립트의 자식 요소를 쉽게 삽입, 제거, 교체하는 방법에 대해 알아보겠습니다. 요소 동적 삽입 자식 … Read more

자바스크립트 배열 무작위로 섞기 (shuffle)

원본: 자바스크립트로 배열 섞기 자바스크립트로 배열을 섞는 방법에는 Fisher-Yates 알고리즘, sort() 메소드, Lodash 함수 등이 있습니다. 이러한 배열을 섞는 작업은 무작위 데이터를 만드는 알고리즘 등에 필요한 일반적인 작업입니다. 다양한 방법을 활용해 프로젝트에 가장 적합한 방법을 적용할 수 있습니다. 이 포스트에서는 네 가지 배열 섞기 알고리즘에 대해 알아보겠습니다. Fisher-Yates 알고리즘으로 배열 섞기 Knuth shuffle 이라고도 알려진 … Read more

자바스크립트 배열 중복 제거

원본: 자바스크립트의 배열 중복 제거하는 3가지 방법 개발을 하다보면 배열에 있는 중복된 요소를 제거해야 하는 경우가 빈번히 발생합니다. 마트에서 같은 항목의 목록을 한 번만 인쇄해야 하거나, 기록이 중복된 학생을 제거하는 등 형태는 무한합니다. 이 포스트에서는 이런 다양한 형태의 중복된 요소를 여러가지 빌트인 메소드를 활용하여 제거하는 방법을 알아보겠습니다. Set 객체로 중복 제거 Set 객체를 사용하면 고유한 … Read more

자바스크립트 Map 객체 사용 방법

원본: The JavaScript Map Object 자바스크립트의 Map 객체는 key/value 쌍의 모음으로, key는 객체, 함수 등 모든 타입이 될 수 있습니다. 객체를 생성하고 사용하는 방법과 일반 자바스크립트 Object와의 차이점을 알아보겠습니다. 스크립트를 작성하다 보면 key/value 쌍을 저장하고 조작해야하는 상황을 자주 보게됩니다. 기본 Object로도 이러한 작업을 할 수 있지만 Map 객체는 데이터 처리를 단순화 하고 효율적으로 처리하게 해주는 … Read more

자바스크립트 Set 객체 사용 방법

원본: Understanding and Utilizing the JavaScript Set Object 자바스크립트의 Set 객체(집합)는 고유한 값의 모음이며, 각 값은 객체 내에서 한 번만 나타날 수 있습니다. 이 포스트에서는 Set 객체를 사용하는 목적, 사용 방법, 다른 자료구조와의 차이점을 알아보겠습니다. 스크립트를 작성하다 보면 종종 고유한 값의 컬렉션을 관리해야하는 시나리오를 마주하게 됩니다. Array나 Object로 이러한 상황을 처리할 수도 있지만 Set 객체는 … Read more

자바스크립트 배열 검색 (filter, find, includes, indexOf)

원본: 4 가지 자바스크립트 배열 검색 방법 자바스크립트에는 배열에서 항목을 검색하는 다양한 방법이 있습니다. 이 중 적합한 방법을 선택하는 것은 사용 사례에 따라 다릅니다. 예를 들면, 특정 조건을 충족하는 배열의 모든 항목을 가져오고 싶을 때, 조건을 충족하는 항목이 있는지 확인하고 싶을 때, 특정 값이 배열에 있는지 확인하고 싶을 때, 아니면 배열에 있는 값의 인덱스를 찾고 … Read more

Array.find 자바스크립트 배열 특정 값 찾기

원본: Exploring Array Find in JavaScript Array.find() 메소드는 ECMAScript 2015(ES6)에 도입되어 모든 최신 브라우저에서 지원되는 메소드입니다. 이 메소드는 배열내의 모든 요소를 검색하여 일치하는 첫 번째 요소를 리턴하거나 찾지 못한 경우 undefined를 리턴합니다. 리턴 값은 동적으로 array, string, number, object 등의 모든 자바스크립트 타입이 될 수 있습니다. 배열 내의 항목을 찾는 기능 면에서는 Array.filter() 메소드와 비슷하지만 … Read more

Array.reverse 자바스크립트 배열 뒤집기

원본: 자바스크립트 배열 거꾸로 뒤집기: reverse() 메소드 이 포스트에서는 자바스크립트의 배열을 거꾸로 뒤집는 두 가지 방법에 대해 알아보겠습니다. Array 객체의 reverse() 메소드는 마지막 항목을 첫 번째 항목으로 만들고, 첫 번째 항목을 마지막 항목으로 만들어 배열을 반대로 바꿉니다. 그 사이에 있는 다른 항목들도 역시 각각 반전됩니다. reverse() 메소드 사용 방법을 알아보기 전에 메소드를 사용하지 않고 자바스크립트 … Read more

String.indexOf 자바스크립트 특정 문자 위치 찾기

원본: JavaScript indexOf Polyfill 자바스크립트의 indexOf() 메소드는 배열이나 문자열 내 요소의 위치를 찾는 편리한 도구입니다. 이 메소드는 빌트인 메소드지만 상황에 따라 구현을 커스터마이징해야 할 때도 있습니다. 이렇게 polyfill을 만드는 것은 교육적이면서도 실용적일 수 있습니다. 이 포스트에서는 indexOf의 개념을 알아보고, polyfill 생성이 왜 중요한지 설명하고 실제로 구현해 보겠습니다. indexOf() 메소드의 이해 polyfill 생성에 대해 알아보기 전에 … Read more

Array.includes 자바스크립트 배열 특정 값 포함 확인

원본: 자바스크립트 배열에 항목이 있는지 확인 – Array.includes() 자바스크립트의 메소드를 사용하면 특정 요소가 배열에 있는지 확인할 수 있습니다. 또한 이를 이용해 문자열 내에 하위 문자열이 있는지 확인할 수도 있습니다. 찾고자 하는 항목이 배열이나 문자열에 있으면 true를 리턴하고 항목이 없으면 false를 리턴합니다. 이번 포스트에서는 자바스크립트의 includes() 메소드를 사용하여 특정 항목이 배열 내에 있는지, 문자열 내의 하위 … Read more

toLowerCase, toUpperCase 자바스크립트 대소문자 변환

원본: JavaScript toLowerCase() – How to Convert a String to Lowercase and Uppercase 이 포스트에서는 자바스크립트 문자열을 소문자 및 대문자로 변환하는 방법을 설명합니다. 또한 단어의 첫 글자만 대문자로 만드는 방법과 문장의 모든 단어의 첫 글자를 대문자로 만드는 방법도 알아보겠습니다. toLowerCase 사용 방법 이 메소드는 문자열을 소문자로 변환합니다. 사용 구문은 다음과 같습니다: 위의 구문에서 보이는 바와 … Read more

Array.sort 자바스크립트 배열 정렬 (오름차순, 내림차순)

원본: JavaScript Sort Array – How to Sort an Array Accurately 개발을 하다보면 데이터를 정렬해야 하는 경우가 있습니다. 데이터 정렬 결과가 정확하지 않으면 전체 코드 오작동이나 버그가 발생할 수 있으므로 항상 정확히 정렬해야 합니다. 이번 포스트에서는 자바스크립트에서 배열을 정렬하는 방법을 알아보고, sort() 메소드와 관련된 몇 가지 단점과 보다 정확한 결과를 얻을 수 있는 방법을 살펴보겠습니다. … Read more

자바스크립트 문자열 공백 제거 (trim, replaceAll)

자바스크립트에서 공백 제거 목적으로 문자열의 내용을 치환하는 작업은 그리 쉽지 않습니다. 하지만 String 객체의 빌트인 메소드를 사용하면 간단히 원하는 내용을 다른 내용으로 변경할 수 있습니다. 이 포스트에서는 다양한 빌트인 메소드를 사용하여 문자열 내의 공백 문자를 제거하는 방법을 알아보겠습니다. trim() 메소드로 공백 제거 자바스크립트 문자열의 공백을 제거하기 위해 trim() 메소드를 사용할 수 있습니다. 이는 문자열의 시작 … Read more

String.trim 자바스크립트 앞뒤 공백 제거

원본: How to Trim Strings in JavaScript form 필드에서 문자열을 다룰 때 문자열의 시작과 끝에 있는 공백은 제거하는 것이 좋습니다. 이번 포스팅에서는 자바스크립트의 공백(whitespace)과 개행 문자(LF: line feed, CR: carriage return)에 대해 설명하고, 문자열의 시작/끝에 존재하는 공백과 개행 문자를 제거하는 방법을 알아보겠습니다. 공백과 개행 문자 실제 trim() 메소드에 대해 알아보기 전에 이 기능이 어떤 특수 … Read more

String.replace 자바스크립트 문자열 치환

원본: Replace All String Occurrences in JavaScript 자바스크립트에서는 특정 문자열을 모두 다른 문자열로 바꾸는 간단한 방법이 없습니다. 이 포스트에서는 문자열 치환을 위해 문자열을 분할한 후 결합하는 방법과 String.replace() 메소드에 정규식을 사용하는 방법으로 모든 문자를 치환하는 방법을 알아보겠습니다. 또한 한번에 문자열의 모든 문자를 바꿀 수 있는 새로운 replaceAll() 메소드도 알아보겠습니다. replaceAll() 메소드는 사용하기 가장 편리한 방법이지만 … Read more