연습문제

이상한 문자 만들기

출처)https://school.programmers.co.kr/learn/courses/30/lessons/12930

• 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요.

<내 풀이>

function solution(s) {
    let arr = s.split(' ');

    let arr2 = arr.map(word => {
        let eachWordArr = word.split('');
        return eachWordArr.map((val, idx) => (idx % 2 == 0) ? val.toUpperCase() : val.toLowerCase()).join('');
    });

    return arr2.join(' ');
}

1. 먼저 주어진 문장을 단어 단위로 잘라서 배열에 담고 arr 에 할당한다.
2. arr에서 map을 이용해 각 단어를 다시 알파벳 하나씩 쪼개서 배열에 담고 eachWordArr에 할당한다.
3. eachWordArr에서 map을 이용하여 index가 짝수인 것들은 대문자로, 홀수인 것들은 소문자로 바꾼뒤 join으로 다시 한 단어로 합쳐준다.
4. 위에서 만들어진 단어들이 arr2 에 담기고 나면 그 단어들을 join으로 합쳐서 한 문장으로 만들어 내보낸다.

• map 안에서 map을 돌려본 것은 처음인것 같은데 잘 작동하는 것을 확인할 수 있었다.

<다른 사람 풀이>

function toWeirdCase(s){
  //함수를 완성해주세요
  return s.toUpperCase().replace(/(\w)(\w)/g, function(a){return a[0].toUpperCase()+a[1].toLowerCase();})

}

정규식을 이용한 풀이. /(\w)(\w)/g로 연속된 두 문자를 각각 그룹으로 할당하고 첫번째를 대문자로 두번째를 소문자로 변환하는 로직을 사용하고 있다. 생각지도 못했던 풀이인데 정말 잘 풀어낸것 같아서 감탄이 나온다.

SweetAlert2

모달을 쉽게 구현할 수 있게 해주는 서드파티 라이브러리.
직접 커스텀 모달을 만드는 시간을 절약할 수 있다.

사용법

1. yarn add sweetalert2
2. 사용할 컴포넌트에서 import Swal from "sweetalert2";
3. 그리고 사용할 때는 Swal.fire()로 호출할 수 있다.

사용예시

const deleteBtnHndlr = () => {
    Swal.fire({
      title: "삭제하시겠습니까?",
      icon: "warning",
      showDenyButton: true,
      confirmButtonText: "삭제",
      denyButtonText: `취소`,
    }).then((result) => {
      if (result.isConfirmed) {
        dispatch(deleteTodo(todoId));
        navigate("/");
      } else if (result.isDenied) {
        return;
      }
    });
  };

삭제 버튼 눌림을 핸들링 하는 함수 내에서 사용해 보았다.
Swal.fire() 안에 객체를 전달하고 그 객체 안에서 각종 설정을 할 수 있게 되어있다.
그 이후 then 블럭으로 이동하는데 if/else if 문을 이용해서 서로 다른 버튼이 눌렸을 때의 분기 처리를 할 수 있다.

Swal.fire({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success"
});

보다 간단한 예시. 버튼이나 모달창 이후 동작하는 별도의 코드는 없고 정보를 사용자에게 전달하는 용도로 사용할 수 있다.

실제로 가능한 설정의 종류나 사용방법이 무척 방대한데 공식문서가 친절하게 나와있는 편이니 사용할때마다 들어가서 확인하고 용도에 맞게 사용하면 좋을 것 같다.

https://sweetalert2.github.io/