2022/09/14 - TIL

페어프로그래밍에서 알게 된 것

1. 한글 regex 사용방법

---

한글 regex

/[ㄱ-ㅎㅏ-ㅣ가-힣]/

자음, 모음, 자모음을 모두 모은 조합이다. 중간에 자음 모음만 따로 고르는 방법은

/[ㄱ-ㅎ]/

/[ㅏ-ㅣ]/

/[가-힣]/

과 같이 끊어서 사용할 수 있다.

2. dialog tag

---

자바스크립트로 더보기와 같은 기능을 사용할 떄는 일반적으로, display none이나, hidden과 같은 것을 이용하여 무언가를 숨기고 다시 show를 반복한다. 하지만, 이 기능은 자체적으로 HTML에 기능을 가지고 있기 때문에 이 기능을 사용하면, 간단한 css만 터치하면 숨기기 기능을 아주 쉽게 사용할 수 있다

바로 details와 summary이다.

<details>
	<summary>
	</summary>
</details>

사실 내가 오늘 다루고 싶은것은 detail와 summary가 아닌 dialog이다.

dialog는 modal을 대신하여 사용하기에 유리하며, 간단한 기능 몇개만 집어넣으면 모달기능 대신 사용할 수 있다.

<dialog class="modalContainer">
      <form method="dialog">
        <input type="text" class="modalInput" />
        <button value="cancel">취소</button>
        <button class="msgReturn">확인</button>
      </form>
    </dialog>
    <button class="modalOpen">팝업</button>
    <p class="msg"></p>

var updateButton = document.querySelector(".modalOpen");
    var modalContainer = document.querySelector(".modalContainer");
    updateButton.addEventListener("click", function onOpen() {
      modalContainer.showModal();
    });
    modalContainer.addEventListener("close", function onClose() {
      document.querySelector(".msg").innerText =
        document.querySelector(".modalInput").value;
    });

다음과 같이 작성하면 아주 간단히, modal을 html에 구현할 수 있다.

3.Regex활용

---

1. 변수와 사용방법

string.replace(new RegExp("" + variable + "", "gi")

2. replace 본인을 지정하는 방법

string.replace(/[0-9]/g, "본인 : $&")

변수를 사용하기 위해서 검색을 이전에 했었는데 하도 안나와서 포기하다가 오늘 드디어 발견하고 사용하였다. 또, 글자 강조를 하기위에 앞 뒤에 발견한 문자를 본인이 본인으로 찾는 과정이 필요했는데 이때 $&를 입력하면된다는 것도 알게 되었다.