복습용연습장

이벤트를 실행할때 어떤 요소의 스크롤 높이에 맞춰서 실행하려고 하는데 반응형으로 그 요소의 scrollTop의 위치가 계속 바뀌어서 절대 좌표를 사용하여 해결하였다. 절대 좌표 window.pageYOffset + element.getBoundingClientRect().top; 뷰포트 기준 ( 상대 좌표 ) getBoundingClientRect().top;

JAVA SCRIPT 2023. 1. 18. 03:12

특수문자 체크 정규식 const regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/g; 모든 공백 체크 정규식 const regExp = /\s/g; 숫자만 체크 정규식 const regExp = /[0-9]/g; 이메일 체크 정규식 const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 핸드폰번호 정규식 const regExp = /^\d{3}-\d{3,4}-\d{4}$/; 일반 전화번호 정규식 const regExp = /^\d{2,3}-\d{3,4}-\d{4}$/; 아이디나 비밀번호 정규식 const regExp = /^[a..

JAVA SCRIPT 2022. 8. 25. 23:42

async, await는 promise처럼 비동기 처리를 하는 방법중 하나다. async, await을 사용하면 promise보다 가독성이 좋고 비동기 실행을 동기적인것 처럼 실행할 수 있다. async async function a(){ return 'result' } a().then( b => console.log(b) ) // result 일반적인 함수 앞에 async을 붙이면 된다. 리턴값이 자동으로 promise를 반환한다. 그렇기 때문에 then을 사용할 수 있다. async에서 리턴한 값은 then에서 인자로 받을 수 있다. await function time() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("..

JAVA SCRIPT 2022. 6. 24. 23:53

promise chaining const a = (num1) => { return new Promise((resolve, reject) => { setTimeout(() => resolve("1초후"), 1000); }); }; const b = (num2) => { console.log(num2); return new Promise((resolve, reject) => { setTimeout(() => resolve("2초후"), 1000); }); }; const c = (num3) => { console.log(num3); return new Promise((resolve, reject) => { setTimeout(() => resolve("3초후"), 1000); }); }; a() .then(..

JAVA SCRIPT 2022. 6. 20. 01:30

promise는 비동기 처리하는 방법중 하나다. promise의 장점으로는 콜백함수는 가독성이 매우 떨어지는 반면 promise를 사용하면 가독성을 높일 수 있다. resolve, reject를 매개변수로 받아서 성공할때와 실패할때를 나눌 수 있다. const count = 1; const a = new Promise( (resolve, reject) =>{ if( count == 1 ){ resolve() // 성공 했을때 ( then ) } else if( count != 1 ){ reject() // 실패 했을때 ( catch ) } }) then, catch안에는 콜백 함수가 들어간다. resolve()는 성공했을때 then안의 콜백 함수를 실행한다 reject()는 실패했을때그 catch안의 콜..

JAVA SCRIPT 2022. 6. 19. 12:04

Class // 1. 생성자 함수로 비슷한 객체 만들기 function Info() { this.name = 'hong' this.age = '10' } Info.prototype.names = function(){ console.log('생성자 함수') //prototype에 저장 } const info2 = new Info(); // 2. class로 비슷한 객체 만들기 class info3{ constructor(){ this.name = 'hong' this.age = '10' } //constructor에 작성하지 않은 코드는 prototype에 저장 names(){ console.log('클래스') } } const info4 = new info3(); console.log(info2) con..

JAVA SCRIPT 2022. 6. 17. 00:04

같은 값을 가지는 객체를 여러개 생성할때 생성자 함수를 만들어서 new로 값을 저장한다. 이때 생성자 함수의 시작은 대문자로 시작한다. function Info() { this.age = 20; this.color = 'red' } const info2 = new Info(); const info3 = new Info(); Info라는 생성자 함수의 값을 info2, info3 객체들에게 값을 저장했다. 생성자 함수가 만들어낸 객체를 instance 라고부른다. 생성자를 통해서 만들어진 인스턴스들은 각자 값을 가지고 있다. 위에서 Info의 값이 info2, info3에 저장된것을 확인할 수 있다. 그런데 이렇게 객체들에게 똑같이 값을 주는것은 메모리 낭비다. prototype 같은 생성자를 통해서 만들..

JAVA SCRIPT 2022. 6. 15. 20:12

call( this에 바인딩할 객체, 매개변수, 매개변수, ~~~) call의 인자는 순서대로 첫번째는 this에 바인딩할 객체 그 후로는 그 함수의 매개변수를 뜻한다. 위에 changeThis라는 함수는 2개의 매개변수를 받는 함수다. this.age, this.color는 당연히 undefined가 출력된다 call은 매개변수를 배열형태로 받지 않기때문에 어레이라는 배열을 스프레이드 연산자 ...를 사용해서 대입했다. call를 이용해서 매개변수로 ex라는 변수를 받고 this의 값은 ex로 된다. 그래서 this.age, this.color는 ex를 가리키는것을 알 수 있다. apply( this에 바인딩할 객체 , [ array로 받는 매개변수 ]) call과 apply동일하게 동작한다 차이점은 ..

JAVA SCRIPT 2022. 6. 14. 13:33