Dust

function test(){
  return 1234;
  // return 밑에 있는 코드들은 실행되지 않음
}

let number = test();
// 값 확인해보고 싶으면 변수에 넣어서 확인 가능
console.log(number);
// 1234

정규식으로 해당 문자가 들어있는지 검사하고 싶을 때

/[a-z]/.test('abcde');
// a부터 z까지 글자가 들어있는지?
// 하나만 찾아줌!🙃

/a+/.test('aaaaaaaaaaaaa');
// a가 여러개 있는지?

/[A-Z]/.test('abcde');
// 대문자 A부터 Z까지 글자가 있는지?

/[ㄱ-ㅎ가-힣]/.test('abcdeA');
// 한국어가 들어있는지?

/\S/.test('abcde');
// 아무 문자 하나, 특수기호 포함

/^a/.test('abcd');
// a로 시작하는지

/a$/.test('abcd');
// a로 끝나는지

/a|b/.test('abcd');
// a또는b

// 이메일 정규식
/\S+@\S+\.\S+/.test('이메일주소');

// \S+ 는 문자 여러개(몇개인지는 상관없음)
// .은 정규식 안에서 특수한 문법이기 때문에 앞에 \를 추가해줌

setTimeout 기본 문법

setTimeout(function(){
    
}, 1000);
// 1000은 1초뒤에 실행하라는 뜻



// 이렇게도 사용 가능
setTimeout(text, 1000);
function text(){
	console.log('안녕하세요');
}

setInterval 기본 문법

setInterval(function(){
    
}, 5000);
// 5초 간격으로 계속 실행

let count = 0;

const timer = setInterval(function(){
	count++;
    if(count === 10){
    	clearInterval(timer);
        // count가 10이 됐을 때 clearInterval 메소드로 timer 멈춤
    }
}, 1000);

isNaN 함수 사용!

const number = 123;
const text = '123';
// isNaN 사용

isNaN(number) // false
isNaN(text) // true

number 값이 아닐 때 true출력

one-way 애니메이션(a상태에서 b상태로 이동하는 애니메이션)

one-way 애니메이션 만들 때 시작스타일과 최종스타일을 css로 만들어놓으면 됨

예를 들어 모달창을 부드럽게 띄우고 싶을 때

html 파일

<div class="modal-bg">
    <div class="modal">
        <div class="modal-title">modal Title
            <a href="#" id="modal-close">닫기</a>
        </div>
        <div class="modal-content">modal Content</div>
    </div>
</div>

css 파일

/* modal */
.modal-bg{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    transition: .5s;
}
.modal{
    position: absolute;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 500px;
    background: white;
    border-radius: 20px;
    z-index: 10;
}
.modal .modal-title{
    display: flex;
    height: 60px;
    border-bottom: 1px solid lightgray;
    align-items: center;
    padding: 0 10px;
}
.modal .modal-content{
    padding: 10px;
}
.modal-open{
    visibility: visible;
    opacity: 1;
}

*참고*

애니메이션 줄 때 display: none; 보다 visibility: hidden; 이 더 잘 먹음!기본 값에 transition 및 visibility 추가