최연탄 원본: 자바스크립트의 템플릿 리터럴 사용 방법 템플릿 리터럴은 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
원본: Understanding and Utilizing the JavaScript Set Object 자바스크립트의 Set 객체(집합)는 고유한 값의 모음이며, 각 값은 객체 내에서 한 번만 나타날 수 있습니다. 이 포스트에서는 Set 객체를 사용하는 목적, 사용 방법, 다른 자료구조와의 차이점을 알아보겠습니다. 스크립트를 작성하다 보면 종종 고유한 값의 컬렉션을 관리해야하는 시나리오를 마주하게 됩니다. Array나 Object로 이러한 상황을 처리할 수도 있지만 Set 객체는 … Read more
원본: 4 가지 자바스크립트 배열 검색 방법 자바스크립트에는 배열에서 항목을 검색하는 다양한 방법이 있습니다. 이 중 적합한 방법을 선택하는 것은 사용 사례에 따라 다릅니다. 예를 들면, 특정 조건을 충족하는 배열의 모든 항목을 가져오고 싶을 때, 조건을 충족하는 항목이 있는지 확인하고 싶을 때, 특정 값이 배열에 있는지 확인하고 싶을 때, 아니면 배열에 있는 값의 인덱스를 찾고 … Read more
원본: Exploring Array Find in JavaScript Array.find() 메소드는 ECMAScript 2015(ES6)에 도입되어 모든 최신 브라우저에서 지원되는 메소드입니다. 이 메소드는 배열내의 모든 요소를 검색하여 일치하는 첫 번째 요소를 리턴하거나 찾지 못한 경우 undefined를 리턴합니다. 리턴 값은 동적으로 array, string, number, object 등의 모든 자바스크립트 타입이 될 수 있습니다. 배열 내의 항목을 찾는 기능 면에서는 Array.filter() 메소드와 비슷하지만 … Read more
원본: 자바스크립트 배열 거꾸로 뒤집기: reverse() 메소드 이 포스트에서는 자바스크립트의 배열을 거꾸로 뒤집는 두 가지 방법에 대해 알아보겠습니다. Array 객체의 reverse() 메소드는 마지막 항목을 첫 번째 항목으로 만들고, 첫 번째 항목을 마지막 항목으로 만들어 배열을 반대로 바꿉니다. 그 사이에 있는 다른 항목들도 역시 각각 반전됩니다. reverse() 메소드 사용 방법을 알아보기 전에 메소드를 사용하지 않고 자바스크립트 … Read more
원본: JavaScript indexOf Polyfill 자바스크립트의 indexOf() 메소드는 배열이나 문자열 내 요소의 위치를 찾는 편리한 도구입니다. 이 메소드는 빌트인 메소드지만 상황에 따라 구현을 커스터마이징해야 할 때도 있습니다. 이렇게 polyfill을 만드는 것은 교육적이면서도 실용적일 수 있습니다. 이 포스트에서는 indexOf의 개념을 알아보고, polyfill 생성이 왜 중요한지 설명하고 실제로 구현해 보겠습니다. indexOf() 메소드의 이해 polyfill 생성에 대해 알아보기 전에 … Read more
원본: 자바스크립트 배열에 항목이 있는지 확인 – Array.includes() 자바스크립트의 메소드를 사용하면 특정 요소가 배열에 있는지 확인할 수 있습니다. 또한 이를 이용해 문자열 내에 하위 문자열이 있는지 확인할 수도 있습니다. 찾고자 하는 항목이 배열이나 문자열에 있으면 true를 리턴하고 항목이 없으면 false를 리턴합니다. 이번 포스트에서는 자바스크립트의 includes() 메소드를 사용하여 특정 항목이 배열 내에 있는지, 문자열 내의 하위 … Read more