나의 IT Note

JavaScript] 개인정보 마스킹(이름, 전화번호 등등 숨기기)

MaCoder — Thu, 7 Mar 2024 15:35:59 +0900

개인정보 마스킹

보안이 중요시 되기 때문에 이름, 계좌번호, 전화번호 등등의 개인정보에 마스킹은 필수가 되어가고 있다.

성명 마스킹

성명의 맨 앞과 맨 뒤 1자리씩 제외하고 나머지는 *로 치환된다.
이름이 외자인 경우에 성은 노출이 되고 이름은 *로 치환된다.
성이 2자인 경우에는 성과 이름 구분없이 성명의 맨 앞과 맨 뒤를 제외한 나머지가 *로 치환된다.
예시) 선우길동 → 선**동
성만 입력 또는 이름이 외자인데 이름만 입력하여 이름값이 1자리수라면 해당 이름이 그대로 노출된다.

function maskName(name) {
    if (name.length === 1) {
        return name;
    } else if (name.length === 2) {
        return name.slice(0, 1) + '*';
    } else {
        return name.slice(0, 1) + '*'.repeat(name.length - 2) + name.slice(-1)
    }
}

maskName('홍') // 홍
maskName('홍길') // 홍*
maskName('홍길동') // 홍*동
maskName('선우길동') // 선**동

전화번호 마스킹

전화번호는 11자리의 숫자로만 존재해야 한다.
가운데 4자리를 *로 치환한다.

function maskCellPhone(phoneNumber) {
    // 휴대폰 번호가 11자리인지 확인
    if (phoneNumber.length !== 11) {
        console.error("휴대폰 번호는 11자리여야 합니다.");
        return phoneNumber;
    }

    // 가운데 4자리를 '*'로 대체
    var maskedNumber = phoneNumber.substring(0, 3) + '****' + phoneNumber.substring(7);
    return maskedNumber;
}

maskCellPhone('01012345678') // 010****5678
// 전화번호에 하이픈이 있는경우 아래 함수를 이용하여 하이픈 제거 후 마스킹 적용
maskCellPhone(convertToNumer('010-1234-5678')) // 010****5678

전화번호 하이픈 제거

만약 전화번호에 하이픈('-')이 있다면 아래 함수를 통해 하이픈을 제거하여 사용 할 수 있다.

function convertToNumer(phoneNumber) {
    // '-' 제거
    var numericNumber = phoneNumber.replace(/-/g, '');
    return numericNumber;
}

convertToNumer('010-1234-5678') // 01012345678

계좌번호 마스킹

계좌번호 앞 3자리와 뒤 3자리를 제외한 나머지 숫자를 '*'로 치환된다.

function maskAccountNumber(accountNumber) {
    const maskedNumber = accountNumber.slice(0, 3) + '*'.repeat(accountNumber.length - 6) + accountNumber.slice(-3);
    return maskedNumber;
}
maskAccountNumber('234567040975542') // 234*********542

[JavaScript] 숫자 3자리(천단위)마다 콤마(,) 추가(정규식, toLocaleString)

MaCoder — Tue, 27 Feb 2024 17:35:56 +0900

숫자 3자리마다 콤마(,) 찍기

숫자 3자리마다(천단위) 콤마(,)를 찍는 2가지 방법

정규식(Regular Expression) 사용

var number = 100000;
var number2 = 100000.123;
function addCommas(amount) {
    return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(addCommas(number)) //100,000
console.log(addCommas(number2)) //100,000.123

toLocaleString() 함수 사용

number.toLocaleString(locales, options)

toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 변경해 줍니다.
매개변수를 전달하지 않으면 Default locale이 사용됩니다.

var number = 100000;
var number2 = 100000.123456;
console.log(number.toLocaleString()); //100,000
console.log(number2.toLocaleString()); //100,000.123

toLocaleString() 함수를 통해서 나온 결과는 소수점 3자리까지만 표현하기에 변수 number2의 소수점이 6자리인데 3자리로 출력이 되는걸 확인하실 수 있습니다.

var option = {
    maximumFractionDigits: 6 // 소수점을 6자리까지 표시
};
console.log(number2.toLocaleString('ko-KR', option)); //100,000.123456

두번째 매개변수인 option 객체 안에는 maximumFractionDigits 값을 변경하여 소수점 자리수를 지정할 수 있습니다.

사용자 PC환경의 locale 확인 방법

console.log(navigator.language) // 'ko-KR'

[JavaScript] 카운트 증가 / 숫자 증가 시키기(requestAnimationFrame)

MaCoder — Tue, 27 Feb 2024 09:39:42 +0900

카운트 증가 / 숫자 증가

requestAnimationFrame을 사용하여 카운트를 증가시키는 스크립트로 duration을 통해 애니메이션의 시간을 조절할 수 있다.

<div class="counter" data-count="125000000">0</div>

// 모든 counter 요소를 가져옵니다.
var counterElements = document.querySelectorAll('.counter');

// 각각의 counter 요소에 대해 애니메이션을 적용합니다.
counterElements.forEach(function(counterElement) {
    var countLimit = parseInt(counterElement.getAttribute('data-count'), 10);
    var duration = 1000; // 애니메이션 시간 (ms)
    var start = null;

    function step(timestamp) {
        if (!start) start = timestamp;
        var progress = timestamp - start;
        var percentage = Math.min(progress / duration, 1); // 진행률은 최대 1까지

        // data-count에 따라 최종 값 계산
        var currentValue = Math.floor(countLimit * percentage).toLocaleString(); // 쉼표 추가
        counterElement.textContent = currentValue;

        // 애니메이션 종료 조건
        if (progress < duration) {
            requestAnimationFrame(step);
        }
    }

    // 애니메이션 시작
    requestAnimationFrame(step);
});

결과물

[JavaScript] 디지털 시계 구현하기

MaCoder — Tue, 23 Jan 2024 10:54:15 +0900

디지털 시계 구현

<div id="clock">Loading...</div>

24시간으로 구현

function updateClock() {
    var now = new Date();
    var hours = now.getHours().toString().padStart(2, '0');
    var minutes = now.getMinutes().toString().padStart(2, '0');
    var seconds = now.getSeconds().toString().padStart(2, '0');

    var timeString = `${hours}:${minutes}:${seconds}`;
    document.getElementById('clock').textContent = timeString;
}

// 매 초마다 시계 업데이트
setInterval(updateClock, 1000);

// 페이지 로드 시에도 시계 업데이트
updateClock();

결과물

AM/PM(12시간)으로 구현

function updateClock() {
    const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const hours = now.getHours();
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    
    const dateString = `${year}-${month}-${day}`;
    const timeString = `${hours}:${minutes}:${seconds}`;
    const fullString = `${dateString} ${timeString}`;
    document.getElementById('clock').textContent = fullString;
}

// 매 초마다 시계 업데이트
setInterval(updateClock, 1000);

// 페이지 로드 시에도 시계 업데이트
updateClock();

결과물

년도 + 24시로 구현

function updateClock() {
    const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const hours = now.getHours();
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    
    const dateString = `${year}-${month}-${day}`;
    const timeString = `${hours}:${minutes}:${seconds}`;
    const fullString = `${dateString} ${timeString}`;
    document.getElementById('clock').textContent = fullString;
}

// 매 초마다 시계 업데이트
setInterval(updateClock, 1000);

// 페이지 로드 시에도 시계 업데이트
updateClock();

결과물

년도 + AM PM으 구현

function updateClock() {
    const now = new Date();
    const daysOfWeek = ["일", "월", "화", "수", "목", "금", "토"];
    const dayOfWeek = daysOfWeek[now.getDay()];
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const hours = now.getHours();
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    
    let ampm = 'AM';
    let displayHours = hours;
    
    if (hours >= 12) {
        ampm = 'PM';
        displayHours = hours % 12;
        if (displayHours === 0) {
        displayHours = 12;
        }
    }
    
    const timeString = `${year}-${month}-${day} (${dayOfWeek}) ${displayHours}:${minutes}:${seconds} ${ampm}`;
    document.getElementById('clock').textContent = timeString;
}

// 매 초마다 시계 업데이트
setInterval(updateClock, 1000);

// 페이지 로드 시에도 시계 업데이트
updateClock();

결과물

[JavaScript] 페이지 자동으로 이동하기[location.href / location.replace()]

MaCoder — Thu, 18 Jan 2024 16:08:31 +0900

페이지 자동으로 이동하기

현재 페이지에서 다른 페이지로 별도 액션없이 자동으로 이동시키는 방법

메타태그

대기시간은 숫자로 입력을 해야 하며 0이면 바로 이동하며, 5를 입력 시 5초후 이동합니다.

<meta http-equiv="refresh" content="대기시간; url=http://이동할 주소">

스크립트

// location.href 사용
location.href="http://이동할 주소";

// location.replace 사용
location.replace('http://이동할 주소');

location.href와 replace 차이점

	location.href	location.replace
기능	새로운 페이지로 이동	기존 페이지를 새로운 페이지로 변경
뒤로가기	가능	불가능
형태	속성	메서드
히스토리	저장됨	저장안됨
용도	일반적인 URL이동	뒤로가기가 안되므로 보안이 필요한 페이지나 히스토리 기록이 남지 않아야 하는 경우

[MAC]맥 단축키 모음(전체화면 스크린샷 캡쳐 바탕화면 보기 닫기)

MaCoder — Fri, 29 Dec 2023 13:59:33 +0900

스크린샷 캡쳐

전체화면 캡쳐

command

shift

command키와 shift키를 동시에 누른 상태로 숫자 3번 키를 누른다.
모니터 우측 하단에 생성된 캡쳐 축소판을 클릭하여 편집하거나 자동저장(4~5초)이 될 때까지 기다린다.

일부 화면 캡쳐

command

shift

command키와 shift키를 동시에 누른 상태로 숫자 4번키를 누른다.
십자선을 마우스로 클릭 후 드래그 하여 캡쳐할 영역을 지정 후 축소판을 클릭하여 편집하거나 자동 저장(4~5초)이 될 때까지 기다린다.

윈도우 또는 메뉴 캡쳐

command

shift

space

캡쳐할 윈도우 또는 메뉴를 화면상에 보이게 해놓는다.
command키와 shift키를 동시에 누른 상태로 숫자 4번 키를 누르고 space키를 누른다.
마우스 포인터가 카메라 아이콘으로 변경된다.
스크린샷을 찍을 윈도우 또는 메뉴를 선택한 후 축소판을 클릭하여 편집하거나 자동 저장(4~5초)이 될 때까지 기다린다.

전체화면 시작 및 종료

control

command

fn키를 누른 상태로 f 키를 누른다.
또는 control키와 command키를 누른 상태로 f 키를 누른다.
전체화면 상태라면 종료가 되고 전체화면이 아니라면 전체화면으로 전환된다.

바탕화면 보기

command

command키를 누른 상태로 F3 키를 누른다.
다시 작업 화면으로 돌아가려면 동일하게 누르면 된다.

css 말풍선 그리기

MaCoder — Wed, 20 Dec 2023 13:58:15 +0900

말풍선 그리기

이미지를 사용하여 말풍선을 적용할 수 있지만 말풍선의 데이터에 따라 디자인이 깨지지 않으면서 반영이 되어야 하기에 css를 통해 말풍선을 그리는 게 효과적이다.

보더 컬러를 수정하여 말풍선 색상을 변경할 수 있다.
보더 값을 적절하게 변경하면 여러모양의 말풍선 꼭지점을 만들 수 있다.
position 속성의 top left를 사용하여 말풍선의 꼭지점을 원하는 위치로 옮길 수 있다.

말풍선

.speech-bubble {
    position:relative;
    width:200px;
    padding:20px;
    background-color:#666;
    border-radius:4px;
    color:#fff;
}

.speech-bubble.left:after {
    content:'';
    position:absolute;
    top:50%;
    left:-16px;
    border-right:16px solid #666;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    transform:translateY(-50%);
}

.speech-bubble.right:after {
    content:'';
    position:absolute;
    top:50%;
    right:-16px;
    border-left:16px solid #666;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    transform:translateY(-50%);
}

.speech-bubble.top:after {
    content:'';
    position:absolute;
    top:-8px;
    left:50%;
    border-bottom:8px solid #666;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    transform:translateX(-50%);
}

.speech-bubble.bottom:after {
    content:'';
    position:absolute;
    left:30px;
    bottom:-8px;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    border-top:8px solid #666;
}

결과물

왼쪽 말풍선

오른쪽 말풍선

위 말풍선

아래 말풍선

css로 삼각형 그리기

MaCoder — Tue, 19 Dec 2023 17:05:20 +0900

삼각형 그리기

이미지를 사용하여 삼격형을 적용할 수 있지만 컬러나 모양이 변경되는 경우 이미지를 수정해야 하는 번거로움이 있기 때문에 css를 통해 삼격형을 그리는 게 효과적이다.

보더 컬러를 수정하여 삼격형의 색상을 변경할 수 있다.
보더 값을 적절하게 변경하면 여러모양의 삼각형을 만들 수 있다.
transform 속성의 rotate를 사용하면 회전 시킬 수 있다.

정삼각형

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: calc( 90px * 1.732 ) solid #666666;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

결과물

직각삼각형

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 180px solid #666666;
    border-left: 0px solid transparent;
    border-right: 180px solid transparent;
}

결과물

이등변삼각형

/* 위 */
.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 180px solid #666666;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

/* 오른쪽 */
.triangle {
    width: 0px;
    height: 0px;
    border-left: 180px solid #666666;
    border-top: 90px solid transparent;
    border-bottom: 90px solid transparent;
}

/* 아래 */
.triangle {
    width: 0px;
    height: 0px;
    border-top: 180px solid #666666;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

/* 왼쪽 */
.triangle {
    width: 0px;
    height: 0px;
    border-right: 180px solid #666666;
    border-top: 90px solid transparent;
    border-bottom: 90px solid transparent;
}

결과물

변형 삼각형

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 180px solid #666666;
    border-left: 240px solid transparent;
    border-right: 90px solid transparent;
}

결과물

회전

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: calc( 90px * 1.732 ) solid #666666;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    transform: rotate( 45deg );
}

결과물

[JavaScript] 제이쿼리(jQuery) 다음요소 찾기(next) 자바스크립트로 구현

MaCoder — Fri, 1 Dec 2023 10:34:22 +0900

다음요소 찾기

JavaScript에서 기본적으로 제공하는 nextElementSibling 기능은 단순히 선택된 요소의 다음 요소만 찾아주기에 jQuery와 동일한 기능을 JavaScript로 만들어봤다.

next()

jQuery의 next()와 동일한 기능을 JavaScript로 구현
매개변수 selector가 제공되는 경우에는 다음 요소가 selector와 일치하는 경우에만 반환을 하며 일치하지 않는 경우에는 null 을 반환한다.

function next(ele, selector) {
    var nextEl = ele.nextElementSibling;
    if (!selector || (nextEl && nextEl.matches(selector))) {
        return nextEl;
    }
    return null;
}

nextAll()

jQuery의 nextAll()와 동일한 기능을 JavaScript로 구현
다음 요소가 없거나 매개변수 selector와 일치하는 다음 요소를 찾을 수 없는 경우에는 빈 배열을 반환한다.

function nextAll(ele, selector) {
    var nextAllElements = [];
    var currentElement = ele.nextElementSibling;
    while (currentElement) {
        if (!selector || currentElement.matches(selector)) {
            nextAllElements.push(currentElement);
        }
        currentElement = currentElement.nextElementSibling;
    }
    return nextAllElements;
}

예시

<ul>
    <li class="apple">사과</li>
    <li class="banana">바나나</li>
    <li class="pineapple">파인애플</li>
    <li class="strawberry">딸기</li>
</ul>

var bananaEle = document.querySelector('.banana'); // 바나나
var appleEle = document.querySelector('.sample .apple'); // 사과
var strawberryEle = document.querySelector('.strawberry'); // 딸기

// 바나나의 다음요소
next(bananaEle).style.color = 'red'

// 사과 다음요소가 바나나과 일치하는 경우
next(appleEle, '.banana').style.color = 'red'

// 바나나의 다음요소 모두
var nextAllElement = nextAll(bananaEle);
nextAllElement.forEach(function(item) {
    item.style.color = 'red'
})

// 바나나의 다음요소 중 딸기와 일치하는 경우
var nextAllElement = nextAll(bananaEle, '.strawberry');
nextAllElement.forEach(function(item) {
    item.style.color = 'red'
})

결과물

사과
바나나
파인애플
딸기

VoiceOver 자막 패널 설정하기

MaCoder — Thu, 30 Nov 2023 14:42:19 +0900

VoiceOver 자막 패널

iOS 13에서는 VoiceOver의 음성정보를 시각적으로 볼 수 있는 '자막 패널' 이 추가되었다.
자막 패널은 화면의 하단에서 확인이 가능하며 '손쉬운 사용' 에서 설정이 가능하다.

설정 → 손쉬운 사용

손쉬운 사용 → VoiceOver

VoiceOver → 하단에 있는 '자막 패널' On

자막이 하단에 노출

[JavaScript] 제이쿼리(jQuery) 이전요소 찾기(prev) 자바스크립트로 구현

MaCoder — Thu, 30 Nov 2023 14:10:16 +0900

이전요소 찾기

JavaScript에서 기본적으로 제공하는 previousElementSibling 기능은 단순히 선택된 요소의 이전 요소만 찾아주기에 jQuery와 동일한 기능을 JavaScript로 만들어봤다.

prev()

jQuery의 prev()와 동일한 기능을 JavaScript로 구현
매개변수 selector가 제공되는 경우에는 이전 요소가 selector와 일치하는 경우에만 반환을 하며 일치하지 않는 경우에는 null 을 반환한다.

function prev(ele, selector) {
    var prevEle = ele.previousElementSibling;
    if (!selector || (prevEle && prevEle.matches(selector))) {
        return prevEle;
    }
    return null;
}

prevAll()

jQuery의 prevAll()와 동일한 기능을 JavaScript로 구현
이전 요소가 없거나 매개변수 selector와 일치하는 이전 요소를 찾을 수 없는 경우에는 빈 배열을 반환한다.

function prevAll(ele, selector) {
    var prevAllEle = [];
    var currentEle = ele.previousElementSibling;
    while (currentEle) {
        if (!selector || currentEle.matches(selector)) {
            prevAllEle.push(currentEle);
        }
        currentEle = currentEle.previousElementSibling;
    }
    return prevAllEle;
}

예시

<ul>
    <li class="apple">사과</li>
    <li class="banana">바나나</li>
    <li class="pineapple">파인애플</li>
    <li class="strawberry">딸기</li>
</ul>

var bananaEle = document.querySelector('.banana'); // 바나나
var strawberryEle = document.querySelector('.strawberry'); // 딸기

// 바나나의 이전요소
prev(bananaEle).style.color = 'red'

// 딸기의 이전요소가 파인애플과 일치하는 경우
prev(strawberryEle, '.pineapple').style.color = 'red'

// 딸기의 이전요소 모두
var prevAllEle = prevAll(strawberryEle);
prevAllEle.forEach(function(item) {
    item.style.color = 'red'
})

// 딸기의 이전요소 중 바나나와 일치하는 경우
var prevAllEle = prevAll(strawberryEle, '.banana');
prevAllEle.forEach(function(item) {
    item.style.color = 'red'
})

결과물

사과
바나나
파인애플
딸기

[CSS] :not() 가상 클래스(의사 클래스)

MaCoder — Mon, 6 Sep 2021 15:40:17 +0900

:not()

특정 selector을 제외하고 스타일을 적용하고 싶은 경우 사용

CSS

.parents p:not(.fisrt) {
  background-color: green;
  color: #fff;
}
.parents span:not(.fourth) {
  background-color: gray;
  color: #fff;
}
.parents .fifth :not(p) {
  font-style: italic; text-decoration: underline;
}

p:not(.fisrt)

p 요소 중에 first 클래스를 가지고 있지 않는 요소 선택

span:not(.fourth)

span 요소 중에 fourth를 가지고 있지 않는 요소 선택

.fifth :not(p)

fifth 클래스를 가진 요소의 자식들 중에 p요소를 가지고 있지 않은 요소 선택

HTML

<div class="parents">
  <p class="first">1. first를 가지고 있는 p요소</p>
  <span class="second">2. fourth를 가지고 있지 않은 span요소</span>
  <p class="third">3. first를 가지고 있지 않은 p요소</p>
  <span class="fourth">4. fourth를 가지고 있는 span요소</span>
  <div class="fifth">
    <p>5-1. first를 가지고 있지 않은 p요소/fifth의 자식요소 중 p요소</p>
    <div>5-2. fifth의 자식요소 중 p요소를 가지고 있지 않은 div요소</div>
  </div>
</div>

결과

1. first를 가지고 있는 p요소

2. fourth를 가지고 있지 않은 span요소

3. first를 가지고 있지 않은 p요소

4. fourth를 가지고 있는 span요소

5-1. first를 가지고 있지 않은 p요소/fifth의 자식요소 중 p요소

5-2. fifth의 자식요소 중 p요소를 가지고 있지 않은 div요소

[JavaScrit] checkbox / radio readonly 설정하기

MaCoder — Mon, 30 Aug 2021 22:11:50 +0900

readonly 설정

input의 경우 아래와 같이 readonly를 간단하게 처리할 수 있다.

<input type="text" name="" readonly>

그러나 checkbox나 radio버튼은 readonly속성이 적용되지 않는다.

그래서 onclick을 직접 적용하여 readonly을 설정하거나 스크립트로 설정을 해주어야 한다.

예시 1

input에 return false를 적용

// checkbox
<input type="checkbox" onclick="return false;" checked>
// radio
<input type="radio" onclick="return false;" checked>

예시 2

input에 return false를 스크립트로 일괄 적용

// checkbox
<input type="checkbox" class="readonly" checked>
// radio
<input type="radio" class="readonly" checked>

let ipt = document.querySelectorAll('input.readonly');
for(let i = 0; i < ipt.length; i++) {
  ipt[i].setAttribute('onclick', 'return false');
}

결과물

체크박스가 해제되지 않는다.

체크박스가 해제 된다.

라디오 버튼이 변경되지 않는다.

[CSS] :first-child() :first-of-type 가상 클래스(의사 클래스)

MaCoder — Mon, 30 Aug 2021 15:37:11 +0900

:first-child

지정 요소가 형제 요소 중 제일 첫 요소인 경우
다른 말로 부모의 자식 요소 중 첫 번째 자식을 선택

CSS

.parents p:first-child {
  background-color: green;
  color: #fff;
}
.parents > p:first-child {
  text-decoration: underline;
  font-style: italic;
}

아래의 예시에서 부모는 .parents가 된다.

p:first-child

부모의 자식 요소(=형제 요소) 중 첫 번째 요소가 p(지정 요소)인 경우에 스타일을 적용한다.

HTML

<div class="parents">
  <p>1. 첫번째 p요소</p>
  <p>2. 두번째 p요소</p>
  <div>
    3. 첫번째 div 요소
    <p>3-1. div 내부의 첫번째 p요소</p>
  </div>
</div>

결과

1. 첫번째 p요소

2. 두번째 p요소

3. 첫번째 div 요소

3-1. div 내부의 첫번째 p요소

:first-of-type

지정 요소가 동일 타입의 형제 요소 중 제일 첫 요소인 경우
다른 말로 부모의 자식 요소 중 각 타입별로 첫번째로 노출되는 요소
선택자를 지정하지 않으면 전체 선택자(*)로 지정된다.

CSS

.parents p:first-of-type {
  background-color: green;
  color: #fff;
}
.parents > div :first-of-type {
  background-color: gray;
  color: #fff;
}

p:first-of-type

부모의 자식요소(=형제요소)중 p(지정 요소)의 동일 타입들 중에서 첫 번째 p요소만 선택

div :first-of-type

:first-of-type의 선택자를 지정하지 않는 경우 전체 선택자(*)로 반영되어 첫 번째로 오는 타입의 모든 요소가 선택된다.

HTML

<div class="parents">
  <p>1. 첫번째 p요소</p>
  <p>2. 두번째 p요소</p>
  <div>
    3. 첫번째 div 요소
    <div>3-1. div 내부의 div 중에서 첫번째 p요소</div>
    <p>3-1. div 내부의 p 중에서 첫번째 p요소</p>
  </div>
</div>

<div class="parents">
  <div>
    <div>4-1. div 내부의 첫번째 div 요소</div>
    <p>4-2. div 내부의 첫번째 p 요소</p>
    <div>4-3. div 내부의 첫번째 p 요소</div>
    <span>4-4. div 내부의 첫번째 p 요소</span>
    <p>4-5. div 내부의 첫번째 p 요소</p>
    <em>4-6. div 내부의 첫번째 p 요소</em>
  </div>
</div>

결과

1. 첫번째 p요소

2. 두번째 p요소

3. 첫번째 div 요소

3-1. div 내부의 div 중에서 첫번째 p요소

3-1. div 내부의 p 중에서 첫번째 p요소

4-1. div 내부의 첫번째 div 요소

4-2. div 내부의 첫번째 p 요소

4-3. div 내부의 첫번째 p 요소

4-4. div 내부의 첫번째 p 요소

4-5. div 내부의 첫번째 p 요소

4-6. div 내부의 첫번째 p 요소

first-child와는 반대로 마지막 요소를 선택하는 last-child도 있다.

[CSS] Youtube 반응형 적용하기(유튜브 100%)

MaCoder — Thu, 26 Aug 2021 18:17:56 +0900

반응형 사이트나 모바일에서 유튜브 등의 동영상을 iframe으로 삽입할 경우 제공되는 소스를 그대로 넣으면 사이트가 어긋난다.

유튜브에서는 반응형을 지원하지 않기에 css로 처리를 해야한다.

동영상의 width는 100%, height는 0으로 설정하여 화면에서 보여지지 않게 한 후에 padding값을 조절하여 모바일 어느 기기에서도 width, height 둘 다 100%로 보여지게 한다.

HTML

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/cOA2yaGY0GU" frameborder="0" allowfullscreen=""></iframe>
</div>

CSS

화면의 비율에 따라 padding값을 다르게 줘야한다.

대부분이 56.25%이다.

화면 비율

21:9 일경우 9/21 = 0.42857140.4285714285714286‬%
16:9 일경우 9/16 = 0.5625%
4:3 일경우 3/4 = 0.75%

.video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
}

.video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

결과물

[JavaScript] resize 이벤트 최적화 시키기

MaCoder — Sun, 22 Aug 2021 09:25:18 +0900

resize 이벤트는 브라우저가 resize가 되는 동안 계속 실행이 되기 때문에 성능면에서 좋지 않다.

그래서 setTimeout과 clearTime을 사용으로 resize가 완료된 이후 한번만 실행을 하게 할 수 있다.

let resizeTimer = null;
function resizeComplete() {
  // 리사이즈 함수 사용
  console.log('resize Complete');
}

window.addEventListener('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(resizeComplete, 400);
}, false);

[아이폰] 전화번호 스팸 등록 및 스팸 해제 방법

MaCoder — Fri, 20 Aug 2021 11:50:16 +0900

전화번호 스팸 등록 및 복구

지겹게 오는 스팸문자들…

매번 스팸 등록을 해도 또 다른 번호로 오지만 난 끝까지 전부 스팸 등록을 진행한다.

아래는 스팸등록하는 방법이다.

스팸 등록하기

사진에 있는 노란색 네모 부분만 확인해가며 그대로 따라 하면 스팸 등록이 완료된다.

스팸문자 화면에서 디바이스 상단 중앙에 있는 사람 모양 아이콘 터치

정보 터치

이 발신자 차단

하단에서 올라오는 화면의 연락처 차단

이 발신자 차단 해제가 나오면 스팸등록이 완료

스팸 등록된 전화번호 복구

스팸을 잘못 등록하거나 해지를 해야 하는 경우 아래와 같이 진행을 하면 된다.

설정 화면에서 아래로 스크롤 하여 메시지 터치

아래로 스크롤 하여 차단된 연락처 터치

차단된 연락처에서 차단 해제할 연락처를 찾아서 터치

새로운 연락처 등록 또는 기존의 연락처에 추가를 하여 차단 해제 및 신규 등록

[CSS] :only-child :only-of-type 가상 클래스(의사 클래스)

MaCoder — Fri, 13 Aug 2021 17:49:40 +0900

:only-child

지정 요소가 부모의 유일한 자식 요소인 경우
다르게 말해서 부모의 자식 요소가 지정 요소 하나만 있는 경우에 적용이 된다.

:only-of-type

지정 요소가 부모의 자식 요소중 동일한 타입이 없는 경우
부모의 자식 요소 중 다른 타입의 형제 요소들은 있어도 상관없다.

CSS

.parents div:only-child {
  background-color: green;
  color: #fff;
}

.parents p:only-child {
  background-color: gray;
  color: #fff;
}

.parents p:only-of-type {
  text-decoration: underline;
  font-style: italic;
}

HTML

<div class="parents">
  <div>1. parents의 자식이 오직 <div> 하나이므로 only-child 적용</div>
</div>

<div class="parents">
  <p>2. parents의 자식요소중 유일한 <p>태그이므로 only-child, only-of-type 적용</p>
</div>

<div class="parents">
  <div>3. parents의 자식이 <div>와 <p>가 있으므로 only-child 무시</div>
  <p>3. parents의 자식요소중 유일한 <p>태그이므로 only-of-type 적용</p>
</div>

<div class="parents">
  <div>4. parents의 자식이 <div> 2개 이므로 only-child 무시</div>
  <div>4. parents의 자식이 <div> 2개 이므로 only-child 무시</div>
</div>

<div class="grandparents">
  <div class="parents">
    5. 일반 텍스트
    <div>5. grandparents 자식의 parents의 자식이 <div> 하나이므로 only-child 적용</div>
  </div>
</div>

결과

1. parents의 자식이 오직 <div> 하나이므로 only-child 적용

2. parents의 자식요소중 유일한 태그이므로 only-child, only-of-type 적용

3. parents의 자식이 <div>와 가 있으므로 only-child 무시

3. parents의 자식요소중 유일한 태그이므로 only-of-type 적용

4. parents의 자식이 <div> 2개 이므로 only-child 무시

5. 일반 텍스트

5. grandparents 자식의 parents의 자식이 <div> 하나이므로 only-child 적용

[CSS] :nth-child :nth-of-type 가상 클래스(의사 클래스)

MaCoder — Wed, 11 Aug 2021 11:16:39 +0900

:nth-child()

형제 요소 중에서 순서에 따라 n번째를 선택하여 스타일을 적용한다.

문법(Syntax)

:nth-child(n)

nth-of-type()

같은 타입의 형제 요소 중에서 순서에 따라 n번째를 선택하여 스타일을 적용한다.

문법(Syntax)

:nth-of-type(n)

키워드(n)

odd

형제 요소중에 홀수번째인 요소 선택(1, 3, 5, 7, …)

even

형제 요소중에 짝수번째인 요소 선택(2, 4, 6, 8, …)

An + B

A와 B는 정수의 입력값(B는 선택), n은 0부터 시작하는 양의 정수가 적용되어 A x n + B로 계산한 값이 대입된다.

예시(A에 3, B에 1을 대입한 3n + 1)

A	3
x(곱하기)
n	0	1	2	3	4	...
+(더하기)
B	1
결과	1	4	7	10	13	...

위 예시 테이블을 풀어보면 아래와 같다.

3 x 0 + 1 = 1
3 x 1 + 1 = 4
3 x 2 + 1 = 7
3 x 3 + 1 = 10
3 x 4 + 1 = 13

:nth-child 예시

CSS

.parents p:nth-child(odd) {
  background-color: green;
  color:#fff;
}
.parents p:nth-child(even) {
  background-color: gray;
  color:#fff;
}
.parents p:nth-child(3n) {
  font-style: italic;
}
.parents p:nth-child(3n + 1) {
  text-decoration:unlerline;
}

HTML

<div class="parents">
  <p>1. 형제요소 p odd 3n+1</p>
  <span>2. 형제요소 (even 이지만 span이라 적용안됨)</span>
  <p>3. 형제요소 p odd 3n</p>
  <span>4. 형제요소 (even 3n+1 이지만 span이라 적용안됨)</span>
  <p>5. 형제요소 p odd</p>
  <span>6. 형제요소 (even 3n 이지만 span이라 적용안됨)</span>
  <p>7. 형제요소 p odd 3n+1</p>
  <p>8. 형제요소 p even</p>
  <span>9. 형제요소 (odd 3n 이지만 span이라 적용안됨)</span>
  <p>10. 형제요소 p even 3n+1</p>
</div>

결과

span 태그를 제외한 p태그 중에서

odd인 1, 3, 5, 7는 green
even인 8, 10은 gray
3n인 3는 italic
3n + 1인 1, 7, 10은 underline 적용

1. 형제요소 odd 3n+1

2. 형제요소 (even 이지만 이라 적용안됨)

3. 형제요소 odd 3n

4. 형제요소 (even 3n+1 이지만 이라 적용안됨)

5. 형제요소 odd

6. 형제요소 (even 3n 이지만 이라 적용안됨)

7. 형제요소 odd 3n+1

8. 형제요소 even

9. 형제요소 (odd 3n 이지만 이라 적용안됨)

10. 형제요소 even 3n + 1

:nth-of-type 예시

CSS

.parents p:nth-of-type(odd) {
  background-color: green;
  color:#fff;
}
.parents p:nth-of-type(even) {
  background-color: gray;
  color:#fff;
}
.parents p:nth-of-type(3n) {
  font-style: italic;
}
.parents p:nth-of-type(3n + 1) {
  text-decoration:unlerline;
}

HTML

<div class="parents">
  <p>1. 동일 타입의 형제요소 p odd</p>
  <span>span 요소</span>
  <p>2. 동일 타입의 형제요소 p even</p>
  <span>span 요소</span>
  <p>3. 동일 타입의 형제요소 p odd 3n</p>
  <span>span 요소</span>
  <p>4. 동일 타입의 형제요소 p even 3n</p>
  <p>5. 동일 타입의 형제요소 p odd</p>
  <span>span 요소</span>
  <p>6. 동일 타입의 형제요소 p even 3n</p>
</div>

결과

span 태그는 제외하고 동일 타입인 p태그만 순서를 정하여

odd인 1, 3, 5는 green
even인 2, 4, 6은 gray
3n인 3, 6은 italic
3n + 1인 1, 4는 underline 적용

1. 동일 타입의 형제요소 odd

요소

2. 동일 타입의 형제요소 even

요소

3. 동일 타입의 형제요소 odd 3n

요소

4. 동일 타입의 형제요소 even 3n

5. 동일 타입의 형제요소 odd

요소

6. 동일 타입의 형제요소 even 3n

[JavaScript] length 문자열 길이 - 자바스크립트

MaCoder — Mon, 9 Aug 2021 17:23:17 +0900

String.length

문자열의 길이를 반환하는 속성(property)이다.

문법(Syntax)

String.length

숫자 타입의 경우 undefined를 반환한다.
공백도 길이에 포함된다.

let str = 'hello world';
let blank = '   '; // 공백 3칸
let num = 123;
str.length; // 11
blank.length; // 3
num.length; // undedined

[JavaScript] Number() 문자열을 숫자로 타입 변환 - 자바스크립트

MaCoder — Sun, 8 Aug 2021 17:21:17 +0900

Number()

문자열을 숫자로 변환해주는 함수

문법(Syntax)

Number(value)

매개변수(parameter)

1. value

문자열 또는 문자열을 값으로 하는 변수

let str = '123'
let num = Number(str); // 123
typeof(num); // 'number'
Number('123'); // 123

숫자를 문자열로 변경할 때는 String() 사용

[JavaScript] String() 숫자를 문자열로 타입 변환 - 자바스크립트

String() 숫자를 문자열로 변환해주는 함수 문법(Syntax) String(thing) 매개변수(parameter) 1. thing 문자열로 변환할 값 숫자 또는 숫자를 값으로 하는 변수 let num = 123; let str = String(num); // '123' t..

ak-coding.tistory.com

[JavaScript] String() 숫자를 문자열로 타입 변환 - 자바스크립트

MaCoder — Fri, 6 Aug 2021 16:19:29 +0900

String()

숫자를 문자열로 변환해주는 함수

문법(Syntax)

String(thing)

매개변수(parameter)

1. thing

문자열로 변환할 값
숫자 또는 숫자를 값으로 하는 변수

let num = 123;
let str = String(num); // '123'
typeof(str); // 'string'
String(123); // '123'

문자열을 숫자로 변경할 때는 Number() 사용

[JavaScript] Number() 문자열을 숫자로 타입 변환 - 자바스크립트

Number() 문자열을 숫자로 변환해주는 함수 문법(Syntax) Number(value) 매개변수(parameter) 1. value 문자열 또는 문자열을 값으로 하는 변수 let str = '123' let num = Number(str); // 123 typeof(num); // '..

ak-coding.tistory.com

[JavaScript] concat() 문자열 합치기 - 자바스크립트

MaCoder — Wed, 4 Aug 2021 13:56:07 +0900

String.contact()

여러 개의 문자열을 하나의 문자열로 합쳐 반환한다.

배열에 사용하는 경우에도 동일하게 여러 개의 배열을 합쳐 하나의 배열로 반환한다.

원본 문자열은 변경되지 않는다.

문법(Syntax)

str.concat(string2, string3[, ..., stringN])

매개변수(parameter)

1. string2...stringN

합칠 문자열
string2는 필수이다.
인자 값이 문자열이 아닌 경우 문자열로 변환 후 결과값을 반환한다.
처음이 문자열이 아닌 경우 에러 메시지를 호출한다.

let str1 = 'hello';
let str2 = ' world';
let num = 7;
str1.concat(str2); // hello world
str1.concat(str2, num): // hello world7
str1.concat(typeof(str2, num)); // string
num.concat(str1, str2); // num.concat is not a function

성능면에서 concat() 메서드보다 할당연산자(+, +=)를 사용하는 게 좋다.

concat vs + vs join · jsPerf

Test runner Warning! For accurate results, please disable Firebug before running the tests. (Why?) Java applet disabled. To run the tests, please enable JavaScript and reload the page. Testing in ArchiveTeam ArchiveBot 20170106.02.0 / Windows 7 0.0.0 Test

web.archive.org

(MDN Web Docs - https://developer.mozilla.org)

[JavaScript] toUpperCase() 대문자로 변환 - 자바스크립트

MaCoder — Tue, 3 Aug 2021 14:08:08 +0900

String.toUpperCase()

문자열을 대문자로 변환 후 반환한다.

원본 문자열은 변경되지 않는다.

문법(Syntax)

str.toUpperCase()

예시

let str = 'Hello World';
str.toUpperCase(); // HELLO WORLD
str.toLowerCase(); // hello world

toLowerCase()는 소문자로 변환 후 반환한다.

[JavaScript] toLowerCase() 소문자로 변환 - 자바스크립트

MaCoder — Sun, 1 Aug 2021 14:04:26 +0900

String.toLowerCase()

문자열을 소문자로 변환 후 반환한다.

원본 문자열은 변경되지 않는다.

문법(Syntax)

str.toLowerCase()

예시

let str = 'Hello World';
str.toLowerCase(); // hello world
str.toUpperCase(); // HELLO WORLD

toUpperCase()는 대문자로 변환 후 반환한다.

[JavaScript] slice() 문자열 추출하기 - 자바스크립트

MaCoder — Sat, 31 Jul 2021 14:01:54 +0900

String.slice()

문자열에서 beginIndex부터 endIndex전까지의 문자들을 추출하여 반환하는 함수(endIndex가 없다면 문자열의 끝까지 추출 후 반환)

원본 문자열은 변경되지 않는다.

문법(Syntax)

str.slice(beginIndex[, endIndex])

매개변수(parameter)

1. beginIndex

문자열에서 추출을 시작하는 index 위치(beginIndex부터 추출을 시작)
str.length보다 크거나 같으면 빈 문자열 반환
음수인 경우 str.length + beginIndex로 계산하여 추출한다.(beginIndex가 -8이라면 11 + (-8) = 3)
str.length보다 크다면 빈 문자열 반환
0이면 전체 문자열 반환

let str = 'hello world';
str.slice(8); // rld
str.slice(-8); // lo wolrd ➡ slice(3)
str.slice(100); // ''
str.slice(0); // hello world

2. endIndex(optional)

문자열 추출 종료 index 위치(endIndex 전까지 추출)
endIndex가 없다면 문자열의 끝까지 추출 후 반환
endIndex가 beginIndex보다 작다면 빈 문자열 반환
음수라면 str.length + endIndex로 계산하여 추출한다.(endIndex가 -2라면 11 + (-2) = 9)
endIndex가 str.length보다 크다면 문자열의 끝까지 반환

let str = 'hello world';
str.slice(2, 7); // llo w
str.slice(8, 2); // ''
str.slice(-1, -2); // ''
str.slice(1, -2); // ello wor ➡ slice(1, 9)
str.slice(-10, -2); // ello wor ➡ slice(1, 9)
str.slice(1, 100): // ello world

slice/substr/substring 비교

문자열 hello world
	fn(3)	fn(-3)	fn(0, 3)	fn(3, 6)	fn(6, 3)	fn(-6, 3)	fn(8, 8)
slice()	lo world	rld	hel	lo	빈 문자열	빈 문자열	빈 문자열
substr()	lo world	rld	hel	lo wor	wor	wo	rld
substring()	lo world	hello world	hel	lo	lo	hel	빈 문자열

[JavaScript] substring() 문자열 추출하기 - 자바스크립트

MaCoder — Fri, 30 Jul 2021 12:52:54 +0900

String.substring()

문자열에서 indexStart부터 indexEnd전까지의 문자들을 추출하여 반환하는 함수(indexEnd가 없다면 문자열의 끝까지 추출 후 반환)

원본 문자열은 변경되지 않는다.

문법(Syntax)

str.substring(indexStart[, indexEnd])

매개변수(parameter)

1. indexStart

문자열에서 추출을 시작하는 index 위치
str.length보다 크거나 같으면 빈 문자열 반환
0 또는 음수인 경우 indexStart를 0으로 처리하여 전체 문자열을 반환

문자열: hello world
h	e	l	l	o	공백	w	o	r	l	d
0	1	2	3	4	5	6	7	8	9	10

let str = 'hello world';
str.substring(4); // o world
str.substring(10); // ''
str.substring(0); // hello world
str.substring(-5); // hello world

2. indexEnd(optional)

문자열 추출 종료 index 위치
indexEnd가 없다면 문자열의 끝까지 추출 후 반환
indexStart보다 indexEnd가 작다면 indexStart와 indexEnd의 값을 변경하여 처리한다.
0 또는 음수인 경우 indexStart와 indexEnd의 값을 변경하여 처리한다.

let str = 'hello world';
str.substring(2, 5); // llo
str.substring(5, 2); // llo ➡ substring(2, 5)
str.substring(-2, 5); // hello
str.substring(2, -1); // he ➡ substring(-1, 2)

length를 사용하여 마지막 문자열 추출 가능

let str = 'hello world';
str.substring(str.length - 3); // rld

slice/substr/substring 비교

문자열 hello world
	fn(3)	fn(-3)	fn(0, 3)	fn(3, 6)	fn(6, 3)	fn(-6, 3)	fn(8, 8)
slice()	lo world	rld	hel	lo	빈 문자열	빈 문자열	빈 문자열
substr()	lo world	rld	hel	lo wor	wor	wo	rld
substring()	lo world	hello world	hel	lo	lo	hel	빈 문자열

[JavaScript] substr() 문자열 추출하기 - 자바스크립트

MaCoder — Thu, 29 Jul 2021 14:41:38 +0900

String.substr()

문자열에서 start 다음부터 length 만큼의 문자들을 반환하는 함수(length가 없다면 문자열의 끝까지 추출 후 반환)

원본 문자열은 변경되지 않는다.

문법(Syntax)

str.substr(start[, length])

매개변수(parameter)

1. start

문자열에서 추출을 시작하는 위치
양수인 경우 start 다음부터 시작한다.
음수인 경우 문자열의 끝에서 start만큼 뺀 곳부터 시작하며, 만약 start값이 문자열보다 크다면 index 0부터 시작한다.

let str = 'hello world';
str.substr(3); // lo world
str.substr(11); // ''
str.substr(-4); // orld
str.substr(-100); // ''

2. length(optional)

추출할 문자들의 총 개수
생략된 경우 start부터 문자열의 끝까지 추출하여 반환한다.
0 혹은 음수인 경우 빈 문자열을 반환한다.

let str = 'hello world';
str.substr(6, 4); // orld
str.substr(5, -2); // ''
str.substr(-4, 2); // or
str.substr(-4, -4); ''

slice/substr/substring 비교

문자열 hello world
	fn(3)	fn(-3)	fn(0, 3)	fn(3, 6)	fn(6, 3)	fn(-6, 3)	fn(8, 8)
slice()	lo world	rld	hel	lo	빈 문자열	빈 문자열	빈 문자열
substr()	lo world	rld	hel	lo wor	wor	wo	rld
substring()	lo world	hello world	hel	lo	lo	hel	빈 문자열

[JavaScript] split() 문자열 분할하기 - 자바스크립트

MaCoder — Wed, 28 Jul 2021 10:10:24 +0900

String.split()

문자열을 지정한 구분자로 분할하여 여러개의 문자열을 배열에 저장한다.

문자열을 자르는 다른 방법으로는 substr(), substring()가 있다.

문법(Syntax)

str.split([separator[, limit]])

매개변수(parameter)

1. separator(optional)

문자열 또는 정규식으로 문자열을 잘라 줄 구분자
separator이 등장하면 해당 부분을 삭제하고 남은 문자열을 배열로 반환한다.

let str = 'dog cat cow lion';
str.split(); // ['dog cat cow lion']
str.split(' '); // ['dog', 'cat', 'cow', 'lion']
str.split(' ')[1]; // cat

값이 없으면 문자열 전체를 배열에 담아 반환한다.
공백(space)을 입력하면 띄어쓰기 별로 나눠서 배열로 반환한다.
문자열을 분할하여 배열의 값으로 가지고 올 수 있다.

2. limit(optional)

분할하는 최대 개수 지정

let str = 'dog,cat,cow,lion';
str.split(', ', 2); // ['dog', 'cat']

문자열을 쉼표(,)로 끊고 처음 2개의 문자열을 반환한다.

슬러시(/)로 되어 있는 구분자를 쉼표(,)로 변경하기

let str = 'dog/cat/cow/lion';
function changeSplit(str, searchSeparator, changeSeparator) {
  return str.split(searchSeparator).join(changeSeparator)
}
changeSplit(str, '/', ','); // dog,cat,cow,lion

[JavaScript] replace() 문자열 변환/치환하기 - 자바스크립트

MaCoder — Mon, 26 Jul 2021 01:54:37 +0900

String.replace()

문자열 내에서 특정 문자를 다른 문자로 치환할 때 사용한다.

문법(Syntax)

str.replace(regexp|substr, newSubstr|function)

매개변수(Parameter)

1. regexp|substr

정규식 객체 또는 문자열로 치환하기 위해 찾는 파라미터

2. newString|function

첫 번째 파라미터를 대신할 문자열 또는 함수

replace() 함수를 사용하여 첫 번째 매개변수(regexp|substr)를 찾아서 두 번째 매개변수(newString|function)로 치환한다.

let str = 'Hello Everyone';
let newStr = str.replace('e', '2');
console.log(str); // Hello Everyone
console.log(newStr); // He2llo Everyone

문자열 str의 첫 번째 'e'가 '2'로 변경된 것을 확인할 수 있다.
원래 문자열은 변경되지 않는다.

let str = 'Hello Everyone';
let newStr = str.replace(/e/g, '2');
console.log(newStr); // H2llo Ev2ryon2

let newStr2 = str.replace(/e/gi, '2');
console.log(newStr2); // H2llo 2v2ryon2

정규식을 사용해서 치환도 가능하다.
정규식으로 사용하려는 문자열을 / 로 감싸서 들어가는 파라미터가 정규표현식임을 선언한다.

정규식에서
g는 전체 문자열을 치환(global)
i는 영문 대소문자를 무시하고 일치하는 패턴 검색하여 치환(ignore)

함수로 한번에 모두 치환하기

let str = 'Hello Everyone';
function replaceAll(str, searchStr, replaceStr) {
  return str.split(searchStr).join(replaceStr);
}
let str2 = replaceAll(str, 'e', '2')
console.log(str2); // H2llo Ev2ryon2

IKEA VITTSJÖ 빗셰 / 이케아 빗셰 VITTSJO / 이케아 노트북 책상 / 자파현상 / 유리깨짐

MaCoder — Sat, 24 Jul 2021 16:42:39 +0900

이케아에서 산 노트북 책상 VITTSJÖ 빗셰가 자고 있는데 와장창 깨져버렸습니다...

실제로 강화유리가 깨진 사진

무슨 지진이 난 줄 알고 깜짝 놀라서 깨보니 저지경...
사용하면서 특별히 무거운 걸 올려놓은 것도 아니고, 쿵쿵 치면서 사용한 것도 아닌데
자기 스스로 깨져버렸습니다.

예전 TV에서 이케아 유리컵이 자파현상으로 깨진 다는 걸 보긴 봤지만

"이케아에서 산 '900원' 유리컵이 갑자기 폭발했어요"

세계적으로 유명한 가구업체 '이케아'의 강화 유리컵. 단돈 900원에 판매하고 있어 인기가 높습니다.... [더보기]

www.dispatch.co.kr

강화유리가 저렇게 깨질 줄은 상상도 못 했네요.

사용 기간도 1년 좀 넘게 사용했을 뿐이고, 원래는 노트북 책상이라 노트북을 놔두고 사용했으면 노트북까지 망가질 뻔했네요..

이렇게 갑자기 와장장 깨지니 이케아 제품을 사용하기가 좀 무섭네요.

진짜 소리도 소리지만 깨지고 나서 덜 깨진 부분들에서는 전기 합선된 것처럼 지지직 소리가 나면서 서서히 깨지고 있더라고요..

강화유리라고 안심하고 사용하면 안 될 듯합니다..

이케아에 문의 글을 올렸더니

간단한 사과문과 함께 2만원 기프티카드를 준다고 하네요....

앞으로는 이케아 제품을 사용하기가 무서워서 받을 생각이 없네요.

[JavaScript] lastIndexOf() 특정 문자 위치 찾기 - 자바스크립트

MaCoder — Sat, 24 Jul 2021 16:05:04 +0900

String.lastIndexOf()

indexOf()와 동일하게 문자열에서 원하는 문자의 위치를 찾거나 배열에서 배열값의 위치를 확인하는 방법으로 lastIndexOf() 함수가 사용된다.

indexOf()와 차이점

fromIndex로부터 역순(오른쪽에서 왼쪽)으로 탐색을 시작하여 searchValue가 처음 탐색되는 index를 반환한다.

하지만 탐색만 역순으로 할 뿐 반환값은 indexOf()와 동일하게 앞쪽부터의 index이다.

indexOf() 특정 문자 위치 찾기 - 자바스크립트[JavaScript]

String.indexOf() 문자열에서 원하는 문자의 위치를 찾거나 배열에서는 배열값의 존재 여부를 확인하는 방법으로 indexOf() 함수가 사용된다. 문법(Syntax) str.indexOf(searchValue[, fromIndex]) searchValue가..

ak-coding.tistory.com

문법(Syntax)

str.lastIndexOf(searchValue[, fromIndex])

fromIndex로부터 역순으로 탐색하여 최초의 index를 반환하고 존재하지 않으면 -1을 반환한다.
문자열을 탐색할 때 대소문자를 구분한다.
배열에서도 사용 가능하다.

매개변수(parameter)

1. searchValue

탐색할 문자열
빈 값인 경우 fromIndex(+Infinity) 반환한다.

let str = 'hello world';
str.lastIndexOf('l'); // 9
str.lastIndexOf('L'); // -1
str.lastIndexOf('a'); // -1

문자열과 index를 매칭 하면 아래와 같다.

문자열: hello world
h	e	l	l	o	공백	w	o	r	l	d
0	1	2	3	4	5	6	7	8	9	10

searchValue가 없으므로 문자열 전체를 기준으로 탐색하여 우측에서 첫번째로 존재하는 'l'의 index는 9이므로 9를 반환한다.

대문자 'L'과 'a'는 문자열에 존재하지 않으므로 -1을 반환한다.

2. fromIndex(optional)

기본값은 +Infinity이다.
fromIndex가 문자열보다 큰 경우 모든 문자열을 탐색한다.
fromIndex가 음수인 경우 0을 지정한 것과 동일하다.

let str = 'hello world';
str.lastIndexOf('l', 2); // 2
str.lastIndexOf('l', 3); // 3
str.lastIndexOf('l', 10); // 9

fromIndex가 2이므로 str의 index 2(hel)부터 역순으로 탐색한다.

탐색 결과에 문자열 'l'이 존재하고, 'l'의 index는 2이니 2를 반환한다.

마찬가지로 fromIndex가 3인경우 문자열 'hell'에서 'l'을 탐색하여 index 3을 반환한다.

배열의 경우 배열 index를 반환

let arr = ['apple', 'banana', 'orange', 'banana'];
arr.lasrIndexOf('banana', 2); // 1

[JavaScript] indexOf() 특정 문자 위치 찾기 - 자바스크립트

MaCoder — Sat, 24 Jul 2021 10:45:34 +0900

String.indexOf()

문자열에서 원하는 문자의 위치를 찾거나 배열에서는 배열 값의 존재 여부를 확인하는 방법으로 indexOf() 함수가 사용된다.

문법(Syntax)

str.indexOf(searchValue[, fromIndex])

searchValue가 처음으로 탐색되는 index를 반환하고 존재하지 않으면 -1을 반환한다.
문자열을 찾을 때는 대소문자를 구분한다.
배열에서도 사용 가능하다.

매개변수(Parameter)

1. searchValue

찾으려는 문자열
아무값도 주어지지 않으면 'undefined'를 찾으려는 문자열로 사용한다.

let str = 'hello world';
str.indexOf('e'); // 1
str.indexOf('E'); // -1
str.indexOf('a'); // -1

문자열과 index를 매칭 하면 아래와 같다.

문자열: hello world
h	e	l	l	o	공백	w	o	r	l	d
0	1	2	3	4	5	6	7	8	9	10

문자열에서 'e'가 존재하는 index는 1이므로 1을 반환

대문자 'E'와 'a'는 문자열에 존재하지 않으므로 -1을 반환

2. fromIndex(optional)

문자열에서 탐색하기 시작하는 위치로 기본값은 0이다.
fromIndex의 값이 양의 정수이면 해당 index부터 찾는다.
fromIndex의 값이 음의 정수이면 전체 문자열에서 찾는다.(기본값과 동일)

lex str = 'hello world';
str.indexOf('o', 4); // 4
str.indexOf('o', 5); // 7
str.indexOf('o', -10); // 4

fromIndex값이 4이므로 str의 index 4(o wolrd)부터 'o'를 탐색한다.

탐색한 'o'의 실제 index인 4를 반환한다.

마찬가지로 fromIndex 5는 (공백) world부터 탐색하여 hello에 있는 'o'는 무시하고 world에 있는 'o'를 탐색하여 7을 반환한다.

fromIndex값이 음수인 경우는 기본값인 0을 기준으로 문자열 전체를 탐색하여 4를 반환한다.

문자열 내의 특정 문자가 있는지 확인하는 방법

let str = 'hello world';
if(str.indexOf('h') !== -1) {
  console.log('true');
} else {
  console.log('false');
}
// true

문자열에 'h'가 있으면 'true'를 없으면 'false'를 표시한다.

요소를 찾을 수 없는 경우 반환하는 -1을 반환한다.

문자열 내의 특정 문자 개수 구하기

let str = 'hello world';
function getIndexOfNum(str, searchValue) {
  let count = 0;
  let pos = str.indexOf(searchValue);
  while(pos !== -1) {
    pos = str.indexOf(searchValue, pos + 1);
    count++;
  }
  return count;
}
getIndexOfNum(str, o); // 2
getIndexOfNum(str, l); // 3

두 번째 매개변수의 index를 찾아 변수 pos 대입한다.
while문에서 pos가 -1이 아니면 pos에 1을 더한 값을 fromIndex값에 대입하여 그다음 값을 반복적으로 찾는다.
count를 0에서부터 증가시킨다.
매개변수 searchValue가 더이상 문자열에 존재하지 않으면 while문을 종료시킨다.
count의 값을 반환한다.

해당 문자열에는 'o'가 2개 'l'은 3개가 존재한다.

문자열의 n번째 위치 index값 가져오기

let str = 'hello wolrd hello wolrd';
function getIndexOfPos(str, searchValue, nth) {
  let count = 0;
  let pos = 0;
  while(count < nth && pos !== 1) {
    if(str.indexOf(searchValue) === 0) {
      if(nth === 1) {
        pos = 1;
        break;
      }
      count = 1;
    }
    pos = str.indexOf(searchValue, pos + 1);
    count++;
  }
  return pos;
}
getIndexOfPos(str, 'h' 2); // 12
getIndexOfPos(str, 'h' 1); // 1

while문의 count가 nth(찾고자 하는 n번째 위치) 보다 작거나 없는 경우까지 실행
str.indexOf(searchValue)가 0인 경우 예외처리(뒤 구문에서 fromIndex에 pos + 1을 연산하여 fromIndex가 0인 경우는 제외가 되기 때문)
1. nth가 1이면 pos에 1을 대입 후 while문 종료 후 pos 값 반환
2. count 변수에 1을 대입하여 index가 0 다음부터 searchValue 검색 시작 후 pos 값을 반환
pos에 1을 더한 값을 fromIndex값에 대입하여 그 다음 값을 반복적으로 찾는다.
count가 nth보다 작아지거나 매개변수 searchValue가 더 이상 문자열에 존재하지 않으면 while문을 종료시킨다.
pos 값을 반환한다.

문자열에 있는 특정 문자 위치 모두 찾기

let str = 'hello world'(
function getIndexOfPosFind(str, searchValue) {
  let pos = 0;
  while(true) {
    let posFind = str.indexOf(searchValue, pos);
    if(posFind === -1) break;
    console.log(posFind);
    pos = posFind + 1;
  }
}
getOndexOfPosFind(str, 'l'); // 2, 3, 9

워와 같이도 사용할 수 있다.

배열의 경우 배열 index를 반환

let arr = ['apple', 'banana', 'orange'];
arr.indexOf('banana'); // 1

lastIndexOf() 특정 문자 위치 찾기 - 자바스크립트[JavaScript]

String.lastIndexOf() indexOf()와 동일하게 문자열에서 원하는 문자의 위치를 찾거나 배열에서 배열값의 위치를 확인하는 방법으로 lastIndexOf() 함수가 사용된다. indexOf()와 차이점 fromIndex로부터 역순(오.

ak-coding.tistory.com