[코딩애플] JavaScript 강의 정리 (Level2 3강 ~ 4강)

이언덕·2024년 4월 11일

코딩애플

목록 보기

9/37

3강 / 정규식으로 이메일형식 검증해보기

문자 검사하는 가장 쉬운 방법

'문자'.includes('찾을단어')

아무 문자나 뒤에 .includes() 붙일 수 있다.
그럼 문자에 찾을 단어가 들어있는지 검사해주고 있으면 true / 없으면 false 남겨준다.
진짜인지 콘솔창에 출력해보든 해서 확인해보자.

예시

'이언덕'.includes('이')

하지만

한글이 들어있냐
영어가 들어있냐
A로 끝나냐
마침표 다음에 영어가 있냐

이런건 includes() 만으로 검사하기 어렵다.

정규표현식 (regular expression)

줄여서 정규식은 문자를 검사하고 싶을 때 사용하는 식이다.
"어떤 문자에 'abc'라는 단어가 들어가있냐?" 라고 물어보고 싶을 때 쓰면 된다.
자바스크립트로 정규식을 어떻게 표현하냐면

/abc/

이게 끝이다.
그러면 이제 abc라는 단어가 있냐~? 라고 물어볼 준비가 된 것이다.

그럼 abcdef라는 문자에 abc라는 단어가 있는지 검사해보도록 해보자.

/abc/.test('abcdef')

/정규식/.test(정규식으로 검사해볼문자) 쓰면 된다.
진짜 들어있으면 true를 남기고 없으면 false를 남겨줍니다.

밑에서도 설명하겠지만 잘 이해가 가지 않는다면 아래 사이트를 참고해 이해해보자!
avaScript 정규 표현식 문법 총정리 + 응용 예제

몇개만 배워보는 정규식 문법

정규식 문법은 너무 많아서 필요할 때 찾아쓰면 좋다.
자주 쓰는 몇개만 알아보자!

/a/.test('abcde')  //true

영어나 한글의 경우 그냥 쓰면 글자가 있는지 없는지 물어볼 수 있다.

/[a-d]/.test('aefg')  //true
/[가-다]/.test('다라마바')  //true

[ ] 기호를 이용해서 문자 범위를 지정할 수 있다.
[a-z] 는 a부터 z까지 아무문자 하나를 의미한다.

/[a-d]/.test('aefg')
▲ 그래서 이건 a부터 d까지의 아무 문자하나가 저기 있냐라고 검사하는 것이다.

/[a-zA-Z]/.test('반가워요')  //false
/[a-zA-Z]/.test('반가워요a') //true
/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('반가워요')  //true

[a-zA-Z] 이건 아무 알파벳 하나라는 뜻이다.
[ㄱ-ㅎ가-힣ㅏ-ㅣ] 이건 아무 한글 하나라는 뜻이다.

/\S/.test('abcde')   //true

백슬래시S 는 특수문자 포함 아무문자 1개라는 뜻이다.
자판의 원화기호가 백슬래시이다.

/^a/.test('abcde')   //true
/e$/.test('abcde') //true

^a 라고 적으면 a로 시작하는지 검사할 수 있다.
e$ 라고 적으면 e로 끝나는지 검사할 수 있다.

/(e|f)/.test('abcde')   //true

| 이건 or 기호입니다.
그래서 위 코드는 e 또는 f중 아무거나 한 문자가 있나 검사가능하다.
정규식에선 괄호맘대로 칠 수 있다.

/a+/

기호를 붙여주시면 뒤에 오는 글자들도 a와 일치하면 반복해서 쭉 찾아달라는 뜻이다.
왜냐면 /a/는 a를 다 찾으라는게 아니라 a 한개를 찾으라는 뜻이다.
aaaaa 이런걸 찾고 싶으면 /a+/ 쓰면 된다.

/\S+t/

이건 그럼 뭘까?
-> 모든 문자 여러개 다음에 t라는 글자가 있냐를 검사해주는 정규식이다.
aaaaat
bbt
이런 것들을 잘 찾아줄 것 같다!

간단히 작성해보는 이메일 정규식

이메일은 ??@??.?? 이렇게 되어야한다.
모든 문자 사이에 @ 그리고 .이라는 특수문자가 와야한다.

/\S+@\S+\.\S+/

이렇게 쓰면 될 것같다.
\. 이라는 기호는 왜 이렇게 썼냐면 마침표는 정규식에서 특수한 문법이기 때문에
마침표 문법을 쓰는게 아니라 진짜 마침표를 찾아달라라는 의미로 쓰려면 백슬래시를 앞에 붙여야한다.

그럼 폼전송시 이메일 형식 검증은 어떻게 할까요

공백검사랑 별 차이가 없다.
저번 강좌(level1 10강)에서 공백검사 부분을 작성했는데 공백검사 부분 대신에
이메일 정규식과 부합하는지 검사를 히면 될 것 같다.

function checkInput(event) {
  if (formIdInput.value == "") {
    event.preventDefault();
    alert("아이디를 입력하세요");
  } else if (/\S+@\S+\.\S+/.test(formIdInput.value) == false) {
    event.preventDefault();
    alert("이메일 형식이 아닙니다");
  } else if (formPassWordInput.value == "") {
    event.preventDefault();
    alert("비밀번호를 입력하세요");
  } else if (formPassWordInput.value.length <= 6) {
    event.preventDefault();
    alert("비밀번호 7자리 이상 입력하세요");
  }
}

예전 코드를 살짝 업그레이드했다.

form 전송시
유저가 <input>에 입력한걸 찾아서
정규식으로 이메일 테스트했을 때 false가 나오면
폼 전송을 막거나 alert() 를 띄우거나 맘대로 원하는거 하면 된다.

숙제

폼 전송시 유저가 입력한 비번에 영어 대문자가 적어도 1개 있는지 검사해봅시다.
없으면 alert() 띄우거나 맘대로 합시다.

간단하게 checkInput함수에 if문 1줄 추가하면 될 것 같다.

function checkInput(event) {
  if (formIdInput.value == "") {
    event.preventDefault();
    alert("아이디를 입력하세요");
  } else if (/\S+@\S+\.\S+/.test(formIdInput.value) == false) {
    event.preventDefault();
    alert("이메일 형식이 아닙니다");
  } else if (formPassWordInput.value == "") {
    event.preventDefault();
    alert("비밀번호를 입력하세요");
  } else if (formPassWordInput.value.length <= 6) {
    event.preventDefault();
    alert("비밀번호 7자리 이상 입력하세요");
  } else if (/[A-Z]/.test(formPassWordInput.value) == false) {
    event.preventDefault();
    alert("비밀번호에 영어 대문자를 넣으세요");
  }
}

4강 / 코드 3줄로 캐러셀 (이미지 슬라이드) 만들기

슬라이드되는 UI들을 캐러셀이라고 한다.
어딜가나 있는 UI 라서 한번 만들어보자.
버튼이 많아보이는데 다 한 번에 만들려고 하면 매우 어렵다.
가장 간단한 1개 기능만 먼저 개발하면 쉽다.
우린 쉽게 2번 사진 보여주는 버튼의 기능만 먼저 만들어보자.

one-way 애니메이션들어간 UI 만드는 법은

1. 애니메이션 시작 전 화면 만들기
1. 애니메이션 종료 후 화면 만들기
1. 언제 종료화면으로 변할지 JS 코드짜기
1. transition 추가하기
  이거 그대로 하면 된다고 했다.
  기억이 안난다면 Level 1 8강을 다시보고 오자!

1. 애니메이션 시작 전 화면 만들기

html css로 알아서 만들면 된다.
css 실력이 가장 중요할 것 같다.

▲ 사진이 이렇게 슬라이드되어서 보이려면
사진을 미리 어떻게 배치해놔야할까?

▲ 사진 3개를 가로로 길게 배치해놔야하지않을까?
그리고 나중에 이거 전체를 왼쪽으로 이동시키면 되니까!
그럼 html css로 저렇게 코드를 짜보자!

<div style="overflow: hidden">
    <div class="slide-container">
      <div class="slide-box">
        <img src="car1.png">
      </div>
      <div class="slide-box">
        <img src="car2.png">
      </div>
      <div class="slide-box">
        <img src="car3.png">
      </div>
    </div>
 </div>

.slide-container {
  width: 300vw;
  transition: all 1s;
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
}

이렇게 코드를 짰더니 이미지 3개가 가로로 배치된다.

vw 단위는 브라우저 폭에 비례한 단위이다. 100vw는 브라우저 폭의 100%이다.
이미지는 없으면 강의하단에 있는 이미지를 사용하자.
애니메이션 UI 만들기 step 4인 transition은 귀찮아서 미리 추가했다.

2. 애니메이션 종료 후 화면 만들기

2번버튼 누르면 2번사진이 슬라이드되어서 보일텐데
그 최종화면을 만들어보라는 소리이다.

어떤 html 요소를 왼쪽으로 이동시키는건 margin-left 아니면 transform 속성을 사용하면 된다.

.slide-container {
  width: 300vw;
  transition: all 1s;
  transform: translateX(-100vw);
}

아까 만든 css파일 중 가로로 긴 박스에
transform: translateX(-100vw); 이걸 추가하니까 2번사진이 슬라이드되어서 잘 보인다.
이걸 종료화면으로 하면 될듯싶다.
class로 만들어두고 부착하는 식으로 해도 되겠지만 귀찮으니까 자바스크립트로 직접 부여하자.

3. 언제 종료화면으로 변할지 JS 코드짜기

const carouselBtn2 = document.querySelector(".btn2");

carouselBtn2.addEventListener("click", handleCarousel2);

function handleCarousel2() {
  nowPhoto = 1;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

밑에 자바스크립트로
버튼2 누르면 최종화면으로 변하라고 코드짜봤다.
jQuery로 찾은 요소에 .css() 주면 style 속성 변경이 가능합니다.
4. transition은 아까 했으니 캐러셀 완성이다.
나머지 버튼 기능은 숙제로 만들어보자.
예습을 하고 싶으면 다음/이전 버튼도 만들어서 기능만들어보자.

안배우고 알아서도 코드 잘 짜고 싶으면
ui 만드는 4-step / 배운 자바스크립트 문법을 어디다 쓰는지 / 한글로 코드짜라는거
맨날 강조하는 것들을 잘 외우자.

숙제

버튼1, 버튼3 기능도 알아서 만들어옵시다.
넘 쉬워서 예습을 원하면 다음사진보기 & 이전사진보기 버튼과 기능도 만들어보십시오.

버튼1, 버튼2, 버튼3, 이전버튼, 다음버튼 HTML만들기

<button class="btn1">1</button>
<button class="btn2">2</button>
<button class="btn3">3</button>
<button class="prev"><</button>
<button class="next">></button>

버튼1, 버튼2, 버튼3, 이전버튼, 다음버튼 요소 변수명으로 지정하기

const slideContainer = document.querySelector(".slide-container");
const carouselBtn1 = document.querySelector(".btn1");
const carouselBtn2 = document.querySelector(".btn2");
const carouselBtn3 = document.querySelector(".btn3");
const carouselNext = document.querySelector(".next");
const carouselPrev = document.querySelector(".prev");

버튼1, 버튼2, 버튼3, 이전버튼, 다음버튼에 이벤트리스너 달기

carouselBtn1.addEventListener("click", handleCarousel1);
carouselBtn2.addEventListener("click", handleCarousel2);
carouselBtn3.addEventListener("click", handleCarousel3);
carouselNext.addEventListener("click", handleCarouselNext);
carouselPrev.addEventListener("click", handleCarouselPrev);

버튼에 맞는 사진이 오는 기능 함수들 만들기

//캐러쉘 1번
let nowPhoto = 0;
function handleCarousel1() {
  nowPhoto = 0;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 2번
function handleCarousel2() {
  nowPhoto = 1;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 3번
function handleCarousel3() {
  nowPhoto = 2;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 Next버튼
function handleCarouselNext() {
  if (nowPhoto == 0) {
    nowPhoto += 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  } else if (nowPhoto == 1) {
    nowPhoto += 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  }
}

//캐러쉘 Prev버튼
function handleCarouselPrev() {
  if (nowPhoto == 2) {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  } else if (nowPhoto == 1) {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  }
}

전체코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./test.css" />
    <title>Coding Apple JavaScript</title>
  </head>
  <body>
    <div style="overflow: hidden">
      <div class="slide-container">
        <div class="slide-box">
          <img src="./assets/car1.png" />
        </div>
        <div class="slide-box">
          <img src="./assets/car2.png" />
        </div>
        <div class="slide-box">
          <img src="./assets/car3.png" />
        </div>
      </div>
    </div>
    <button class="btn1">1</button>
    <button class="btn2">2</button>
    <button class="btn3">3</button>
    <button class="prev"><</button>
    <button class="next">></button>

    <script src="./test.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"></script>
  </body>
</html>

index.css

.slide-container {
  width: 300vw;
  transition: all 1s;
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
}

index.js

const slideContainer = document.querySelector(".slide-container");
const carouselBtn1 = document.querySelector(".btn1");
const carouselBtn2 = document.querySelector(".btn2");
const carouselBtn3 = document.querySelector(".btn3");
const carouselNext = document.querySelector(".next");
const carouselPrev = document.querySelector(".prev");


carouselBtn1.addEventListener("click", handleCarousel1);
carouselBtn2.addEventListener("click", handleCarousel2);
carouselBtn3.addEventListener("click", handleCarousel3);
carouselNext.addEventListener("click", handleCarouselNext);
carouselPrev.addEventListener("click", handleCarouselPrev);


//캐러쉘 1번
let nowPhoto = 0;
function handleCarousel1() {
  nowPhoto = 0;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 2번
function handleCarousel2() {
  nowPhoto = 1;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 3번
function handleCarousel3() {
  nowPhoto = 2;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 Next버튼
function handleCarouselNext() {
  if (nowPhoto == 0) {
    nowPhoto += 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  } else if (nowPhoto == 1) {
    nowPhoto += 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  }
}

//캐러쉘 Prev버튼
function handleCarouselPrev() {
  if (nowPhoto == 2) {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  } else if (nowPhoto == 1) {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  }
}

이언덕

이전 포스트

[코딩애플] JavaScript 강의 정리 (Level2 1강 ~ 2강)

다음 포스트