🌟 220705.TIL

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

'abc'.includes('a')
= true
'abc'.includes('d')
= false

어떤 문자가 포함되어 있는지 검사
들어있다면 true / 들어있지 않다면 false
한계점 : 한글이 들어있냐, 영어가 들어있냐 이런건 못함 / 숫자가 1회 출현하냐, 어떤 문자로 끝나냐

그래서 나온 개념이 정규식

/a/.test('abcde')
문자.테스트(검사당할문자)
= true

/[a-z]/.test('abcde')
= true // 영어 소문자가 들어있는지

/[A-Z]/.test('Abcde')
= true / 영어 대문자가 들어있는지

/[a-zA-z]/.test('dsflkajdlk')
= true / 영어 문자가 들어있는지

/[ㄱ-ㅎ가-힣]/.test('ㅋㅋㅋㅋㅋ')
= true / 한글이 들어갔는지

/[0-9]/.test('0000')
= true / 숫자가 들어갔는지

/\s/.test('ddds')
= true / 특수문자를 포함한 문자 1개가 들어있는지

/^a/.test('adslfkj')
= true / a로 시작하는지

/a$/.test('dsfsda')
= true / a로 끝나는지

/a|b/.test('aaaa')
= true / a 또는 b가 들어가는지

/\s+@\s+\.\s+/.test('aaa@bbb.ccc')
= true / 이메일 형식 검사

영어로는 regular expression 라고 한다

정규표현식에 대한 자세한 내용

정규표현식 참고자료

To do

• 정규표현식을 이용한 ID, PW 인증 구현

오늘 추가한 코드

 		// id가 입력되지 않았거나 pw가 입력되지 않았거나 6글자 이하일경우 로그인할 수 없도록 구현
        // 추가기능 : id입력이 이메일 정규식을 따르는지, pw입력이 비밀번호 정규식을 따르는지

        const $loginSubmit = document.querySelector('#loginSubmit');
        const $usernameInput = document.querySelector('#usernameInput');
        const $passwordInput = document.querySelector('#passwordInput');
        const emailRegularex = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; // 이메일 정규식
        const passwordRegularex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/; // 비밀번호 정규식

        $loginSubmit.addEventListener('click', function(e){
            //if($usernameInput.value == ''){
            //     alert('Please enter the correct E-mail address');
            //     e.preventDefault();
            //     return;
            // } else if (($passwordInput.value == '') || ($passwordInput.value.length < 6)){
            //     alert('Please enter the correct PassWord');
            //     e.preventDefault();
            //     return;
            // } else {
                // 정규식 검사만으로 이메일 공백검사, 패스워드 유효성 검사가 가능하니까 if를 두번 쓸 필요가 없다
                // return; 구문을 추가하여 첫번째 조건을 만족하지 않으면 넘어가지 않도록 설정
                if (emailRegularex.test($usernameInput.value) === false) {
                    alert('Invalid email format');
                    e.preventDefault();
                    return;
                } if (passwordRegularex.test($passwordInput.value) === false) {
                    alert('Invalid Password format');
                    e.preventDefault();
                    return;
                }
            }
        // });
        );

캐러셀 만들기

UI 만드는 기본법칙

1. 시작화면 만들기
2. 최종화면 만들기
3. 원할 때 최종화면으로 변하게
4. transition : all 1s;

새로 배운 문법

transform: translateX(-100vw);
// x축으로 요소 이동

To do

• 캐러샐로 1,2,3 버튼 누르면 사진이동
• 사진 뒤로가기, 앞으로 가기

추가한 코드

// 캐러샐 버튼이동 구현
// 1,2,3 에 이미지 넘버를 달아줘서 다음, 이전버튼을 클릭해도 수월하게 넘어갈 수 있게 구현
const $slideContainer = document.querySelector('.slide-container').style;
let imgNumber = 0;
	function imgHandler(e){
	  $slideContainer.transform = 'translateX(-' + e + '00vw)';
	  }
	  document.querySelector('.slide-1').addEventListener('click', function(){
	    imgHandler(0);
	    imgNumber = 0;
        });
	  document.querySelector('.slide-2').addEventListener('click', function(){
	    imgHandler(1);
	    imgNumber = 1;
        });
      document.querySelector('.slide-3').addEventListener('click', function(){
        imgHandler(2);
        imgNumber = 2;
        });
	  document.querySelector('.slide-4').addEventListener('click', function() {
        if(imgNumber < 2){
          imgNumber++;
          imgHandler(imgNumber);
          }
        })
document.querySelector('.slide-5').addEventListener('click', function() {
        if(imgNumber > 0){
          imgNumber--;
          imgHandler(imgNumber);
        }
    })

Function 과 addEventListener

이거때문에 하루종일 고생했는데

function imgHandler(e){
  $slideContainer.transform = 'translateX(-' + e + '00vw)';
}

// 이거를

document.querySelector('.slide-2').addEventListener('click', imgHandler(100))

// 이렇게 넣으려고 하니 기능실행이 되지 않음
// 함수 자리니까 함수가 들어가면 얼추 맞겠거니 했는데 안됨
// 이벤트 리스너에 함수 파라미터를 전달하려면 익명함수를 사용해야 된다고 함

// 결국엔

document.querySelector('.slide-2').addEventListener('click', function(){
  imgHandler(1);
});
// 이런식으로 고쳐서 해결했다

오늘은 정말 느낀게 많다

이제 부족하게나마 검색하면 사소한 기능정도는 추가할 수 있다고 뿌듯해했는데,
공부를 하면 할수록 모르는게 더 많아지는
심지어 내가 모르는부분을 어떤식으로 해결해야 할지 도저히 모르겠다고 느꼈다
그래도 확실히 재밌다
정말로 머리를 계속 굴리니까 살아있다는 걸 느낀다
하나하나 해결이 될때마다, 궁금증을 해결할 때 마다 너무 기쁘다
🥳