IT 성장일기

자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법이전 글에서는 getElementsBy...와 같은 전통적인 방식으로 DOM 요소를 선택하는 방법에 대해 간단히 다뤄봤습니다.이번 글에서는 가장 범용적으로 쓰이는 querySelector 함수에 대해 예제 중심으로 정리해보겠습니다.🎯querySelector / querySelectorAllquertSelector 함수는 "CSS 선택자"를 인자로 받아서 조건에 맞는 DOM 요소하나를 반환합니다.querySelectorAll 함수는 조건에 맞는 모든 요소를 NodeList 형태로 반환합니다.const one = document.querySelector('.example'); // 가장 첫 번째 .example 요소const all = doc..

자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법자바스크립트를 이용해 특정 요소를(또는 요소들을) 가져오는 방법을 정리해 보겠습니다.다양한 예제를 적어두고 지능이 퇴행되기 시작하면 종종 꺼내 읽도록 하겠습니다.getElementById('id')매개변수로 받은 문자열을 id 속성으로 갖는 요소를 반환합니다.하나의 dom에서 id 속성은 유일해야 하기 때문에 당연하게도 반환되는 요소의 개수는 1개입니다. const fruitContainer = document.getElementById('fruits');const appleDiv = document.getElementById('apple');const pineapplePane = fruitContainer.getElementById('p..

요소에 이벤트 핸들러를 등록하는 여러 가지 방법브라우저는 사용자의 행동을 감지해 여러 가지 이벤트를 발생시킵니다. (버튼을 클릭한다던가 스크롤을 내리는 등)이 이벤트에 반응하기 위해 요소에 이벤트 핸들러를 등록하는 방법은 크게 세 가지 정도로 나누어집니다.뭐가 좀 달라?선언 방식이 다르다면 동작 방식에도 무언가 차이가 있을 것입니다. 없으면 이 글 안 썼지.각 방식의 차이와 장단점을 아래에 정리해 보겠습니다.핸들러 등록 방식의 차이와 장단점1. 인라인 어트리뷰트 방식HTML 요소의 속성으로 직접 이벤트 타입을 명시하는 방식입니다.선언과 사용이 편하지만 코드의 목적의 명확한 분리와 유지보수성이 중요한 프로젝트라면 사용을 지양하는 것이 좋습니다.인라인 방식 장점 : 간단한 선언 방식단점 : HTML과 JS..

한글 받침 유무 파악하기담당하고 있는 서비스에 사용자가 현재 열람하고 있는 컨텐츠와 유사한 컨텐츠를 추천해주는 큐레이션 영역이 있었습니다."현재 여행지 명와(과) 유사한 여행지"가 큐레이션의 타이틀인데, 조사를 와(과)로 표시하고 있는 부분이 조금 어색했습니다.컨텐츠명의 마지막 글자의 받침 유무를 판단해 조사를 결정지어서 표시하면 어떨까? 라는 생각으로 이어졌고,구글을 뒤져본 결과 어렵지 않게 다양한 예제코드를 발견할 수 있었습니다.예제 코드아래는 완성된 함수입니다.function hasJongseong(str) { if (!str || typeof str !== 'string') return false; const lastChar = str.charAt(str.length - 1); c..

매핑 객체 패턴으로 분기문 깔끔하게 사용하기 (Mapping Object Pattern)"키-값 매핑"(Key-Value Mapping)이라고도 부를 수 있는 매핑 객체 패턴은  if-else문이나 switch-case문과 같은 분기처리가 가능한 문법 패턴입니다.하지만 기존의 분기문 패턴에 비해 가독성이 뛰어나고 성능 면에서 효율이 더 좋아 요즘 애용하는 문법 패턴입니다.매핑 객체 패턴의 특징명확한 의도 : if-else문이나 switch-case문에 비해서 가독성이 좋습니다.유연성 : 새로운 분기가 추가될 경우 객체 내에 키-값 쌍만 추가해 주면 됩니다.성능적 효율성 : 조건의 비교 없이 키를 통해 값을 가져올 수 있어서 성능면에서 효율적입니다.재사용성 : 기존의 분기문에 비해 객체를 여러 곳에서 재사..

Set, map, filter로 배열의 차집합 구하기두 개의 배열을 비교해서 A와 B의 차집합을 구하는 방법을 간단하게 정리해 보겠습니다. 아래 함수는 existingList라는 객체 배열과 loadedList라는 객체 배열을 비교합니다.배열엔 id라는 키가 존재한다고 가정하고 이를 토대로 비교하겠습니다. 저는 loadedList에서 existingList를 제거한 나머지를 구하려고 합니다.const difference = removeMatchingItemsById(existingList, loadedList);//difference = loadedList - existingListconst existingList = [ { id : 1, name : 'choi' }, { id : 2, name : ..

템플릿 리터럴(Template literal) 응용하기지난 번에 ES6 템플릿 리터럴 문법의 간단한 사용법을 공부했습니다.이어서 오늘은 조금 더 실무나 프로젝트에서 활용 가능한 응용 방법을 조금 알아봤습니다.HTML 빌더데이터를 매개변수로 받아서 동적으로 HTML요소를 생성하고 반환하는 함수를 만들어볼 수 있습니다.버튼도 만들고 리스트도 만들고 테이블도 만들 수 있습니다.const buttons = ['Home', 'About', 'Contact'];const buttonHTML = buttons.map(btn => `${btn}`).join('');document.body.innerHTML += `${buttonHTML}`;const items = ['Item 1', 'Item 2', 'Item 3']..

템플릿 리터럴(Template literal) 사용하기템플릿 리터럴이란?템플릿 리터럴은 ES6에 도입된 자바스크립트 문법으로 문자열을 표현하는 데에 있어서 직관적이고 유연한 방법을 제공합니다.백틱(`)을 이용해 문자열을 감싸서 작성하며 변수와 문자열을 합치거나 표현식을 작성할 때 굉장히 유용합니다.문자열 작성문자열을 작성할 때 아래와 같이 사용할 수 있습니다.let literal = 'literal';let template_literal = `template_literal`;console.log(literal);console.log(template_literal);문자열 여러 줄 작성여러 줄의 문자열을 작성할 때 개행문자를 사용하지 않아도 됩니다.let literal = 'literal\n' + ..

replace 함수 3차원으로 활용하기(feat. 정규식)replace자바스크립트에서 제공하는 replace 함수는 문자열의 특정 키워드 한 개를 원하는 키워드로 치환시켜 주는 함수입니다.let text = 'black white'text.replace('black', 'white');정말 자주 사용하는 함수이지만 아쉽게도 한 번 사용할 때마다 한 개의 키워드만 치환할 수 있습니다.let text = 'black white black black white white black'text.replace('black', 'white');그래서 replace 함수를 1차원 함수라고 혼자 정의했습니다.replaceAll물론 큰 문제가 되지는 않습니다. replaceAll 함수는 문자열의 모든 특정 키워드를 치환해..

정규식으로 이름과 휴대전화 번호 유효성 검증하기어렵고 복잡하기로 절대 빼놓을 수 없는 정규식을 이용해서 이름과 휴대전화 번호의 유효성을 검증하는 함수를 구현해 보았습니다.이름 유효성 검증하기한글의 경우와 영문의 경우를 상정해 이름의 조건을 설정하겠습니다.공통적으로 공백은 허용하지 않습니다. 한글의 경우완성된 음절이어야 할 것 : 문자열에 ㄱ, ㅓ, ㄴ 등의 완성되지 않은 자음과 모음이 포함되면 안 됩니다.2글자와 5글자 사이여야 할 것영문의 경우영문의 경우 두 개 이상의 어절이어야 할 것각 어절이 2글자와 20글자 사이어야 할 것각 조건을 포함한 정규식과 코드입니다.function validateNameConvention(name) { let regular = /^[가-힣]{2,5}$|^[a-zA-..

Clipboard API와 execCommand를 이용해 텍스트 복사하기자바스크립트를 이용해서 사용자의 클립보드에 내용을 복사해 주는 여러가지 방법을 정리해 보겠습니다.대표적으로 컨텐츠 공유를 위한 URL 복사 기능을 예로 들 수 있습니다.복사 구현하기Javascript의 Clipboard API를 이용해 복사를 구현해 보겠습니다.Clipboard API는 보안상의 이유로 HTTPS 환경과 예외적으로 localhost 환경에서만 동작합니다.HTTP 환경에서의 복사기능은 execCommand API를 사용해 구현해 보겠습니다.구현부writeText() 메서드로 클립보드에 텍스트를 복사합니다.then() 메서드를 이용해 복사되었을 경우 콜백 함수를 정의할 수 있습니다.catch() 메서드는 어떤 이유로 복사..

자바스크립트를 이용해서 예쁜 토스트 메시지 만들기꼭 알러트를 띄워야만 할까?좋아요를 누르거나 클립보드에 무언가를 복사하는 등 사용자 이벤트가 발생할 때 알림을 보내기 위해 alert 함수를 이용한다면모달창을 닫지 않으면 다른 행동을 할 수 없기 때문에 사용자의 입장에서는 굉장히 불편합니다. 사용자에게 무언가를 요구하지 않고 화면 한 쪽에 스르륵 나타났다가 사라지는 알림을 토스트 메시지라고 하죠.HTML이나 CSS 코드 추가 없이 스크립트만으로 심플한 토스트 메시지를 띄우는 방법을 정리해 보겠습니다.Javascript코드는 어렵지 않습니다. 스크립트를 통해 스타일과 HTML 요소를 정의한 후 필요한 곳에서 함수를 호출하기만 하면 됩니다.선언부function toastOn(text){ //내용을 매개변수로..