IT 성장일기

객체 접근법 파헤쳐보기, 점 표기법 vs 대괄호 표기법자바스크립트에서 객체에 접근하는 방법은 크게 두 가지로 나뉩니다.각각 어떤 차이와 장단점이 있는지, 또 실전에서의 활용법은 어떻게 나뉘는지 정리해 보겠습니다.객체혹시 객체를 잘 모르는 분이 계실까 봐 간단히 짚고 넘어가고자 합니다. 자바스크립트에서 객체란 여러 개의 키(key)와 값(value) 쌍으로 이루어진 데이터 집합체를 의미합니다.객체는 보통 아래와 같은 구조로 이루어집니다.const obj = { no : 1 key1 : 'value1', key2 : 'value2',}각각의 키-값 쌍은 속성(property)라고도 하며 값에는 문자열, 숫자뿐 아니라 배열과 다른 객체도 할당될 수 있습니다.심지어는 이모지도 키와 값에 포함..

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

자바스크립트에서 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..

키-값 매핑 객체 패턴으로 분기문 깔끔하게 사용하기 (Key-Value 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() 메서드는 어떤 이유로 복사..