파트 2가 끝났습니다. 오늘은 사설 없이 그냥 시작해봅시다~
가장 먼저 꺼낼 건 setTimeout과 setInterval입니다. 두 함수는 모두 콜백함수와 ms단위의 시간을 인자로 받는데요,
setTimeout의 경우 인자로 전달한 0000ms 이후 콜백함수를 실행시켜주고 setInerval의 경우 0000ms 마다 콜백함수를 실행합니다.
setTimeout은 한 번 실행되고 나면 끝인 반면
setInerval은 매 0000ms 마다 끊임 없이 콜백함수가 실행되기 때문에 필요하다면 중단하는 경우도 있는데요,
그럴 땐 clearInterval이라는 메소드가 쓰입니다.
대략적인 과정은 setInterval을 변수 a에 저장한 뒤 멈출 땐 clearInterval(a)를 해주는 건데요,
여기서 일단 자바스크립트의 동작원리에 의문을 품게 됐달까요,,,
예시로
이렇게 생긴 코드가 있을 땐 저는 이후에 변수 a를 또 호출해야 그 안에 저장된 함수가 실행될 거라고 생각했는데
자바스크립트에선 변수에 함수를 할당하면 그 때도 함수가 실행이 되더라구요,,
그 점이 하나 신기했구요 또 setInterval을 정지하기 위해서 clearInterval을 사용하는데 clearInterval을 setInterval 안에 콜백함수로
넣을 수 있다는 게 정말 신기했습니다. 막말로 재귀함수보다 기이한 형태의 함수 모형이 아닌가 하는 생각,,,
이게 좀 찾아보니까 setInterval을 정지할 때 함수 내부에서 정지시키는 방법과 외부에서 정지시키는 방법이 있다고 하는데
우연치 않게 함수 내부에서 정지하는 방법을 사용하게 된 것 같습니다. 일단 작동하면 장땡이다 라는 마인드가 있기 때문에
크게 문제 삼진 않았구요, 나중에 내부 외부 정지 방법에 대해 공부할 예정이라는 거~(언제 할 지 모름)
그 다음으로 배운 건 정규식입니다(사람 이름 아님, 맞기도 함)
나무위키에 따르면 '프로그래밍에서 문자열을 다룰 때, 문자열의 일정한 패턴을 표현하는 일종의 형식 언어'라고 합니다.
이전에 알고리즘 공부하면서 문자열 판별 문제들 때문에 마주한 적은 꽤 있는데 영 복잡하기도 하고 꼭 정규식이 아니어도
풀리는 문제들이어서 그냥 강의만 몇 번 보다가 넘어간 적이 있습니다.
자바스크립트에선 input 태그에 입력돼서 넘어오는 데이터를 검증하기 위해 많이 쓰는 것 같구요, 제가 배운 맥락 역시 그렇습니다.
정규식이 쓰인 코드를 보자면,,,
이렇게 생겼습니다. 밑줄 친 부분이 정규식이 쓰인 부분들이구요. 정규식은 우선 // 안에 쓰이게 됩니다. 그리고 뒤에 .test(판별대상)을 붙이면
판별대상 안에 입력한 정규식의 문자가 있는지 여부를 불린형으로 반환해줍니다. 정규식은 쓰임이 다양한 만큼 그 내용 역시 그런데요,
제가 배운 것만 간단히 적어보자면
[a-z] =>소문자 알파벳 전부
[A-Z] =>대문자 알파벳 전부
[a-zA-Z] =>대 소문자 관계없이 알파벳 전부 ([ ]는 범위에 따라 정규식을 입력할 때 사용됨)
|S => 특수문자를 포함한 모든 기호
^a => a로 문자가 시작하는가
a$ => a로 문자가 끝나는가
a| => a혹은 b
따라서 aaa@bbb.ccc 형식의 이메일을 검증하기 위해선 /|S+@|S+.|S+/.test(aaa@bbb.ccc)를 사용하면 됩니다.
여기서 쓰인 +기호는 기호 앞 문자를 반복 검색해준다는 거~
물론 조금 더 엄격한 검증을 위해선 저것보다 정교한 정규식이 쓰여야 하지만 그건 구글이 나중에 다 해결해줄 거라고 생각합니다.
스크롤 이벤트도 배웠답니다. 근데 스크롤은 보통 html 한 요소에 갖다대고 하는 게 아니라 브라우저 창을 대상으로 일어난단 말이죠
그래서 document.query어쩌구로 요소를 특정하는 것말고 브라우저 전체를 대상으로 하는 객체가 필요한데 여기서 쓰이는 게
window입니다. window.addEventListener 로 이벤트리스너를 달면 의도한 대로 스크롤 이벤트를 발생시킬 수 있는데요,
window가 어떤 느낌이라고 보면 좋냐면
대충 이런 느낌,,,?? window를 브라우저 전체로 인식해도 문제 없다고 생각합니다,,
그래서 이제 스크롤을 하게 되면 얼마나 스크롤을 하게 됐는지에 따라서 alert 창을 띄운다거나
여타 다른 동작을 예약해놓을 수 있는 느낌인데요, 여기서 얼마나 스크롤을 했는지 알려주는 메소드가 또 따로 있습니다.
바로 .scrollY 구요, 이걸 활용한 코드를 일단 보는 걸로 합시다.
이런 식으로 쓰였답니다. scrollY가 100정도면 어느 정도냐 라고 물으신다면 직접 콘솔창에 띄워서 보시면 좋겠네요 하하
그리고 스크롤은 꼭 window 객체를 대상으로 하는 것만은 아닙니다 overflow: scroll; 속성을 가진 html 요소도 스크롤 대상이 되는데요
여기에 쓰이는 메소드도 여러가지 있습니다. 코드로 보면
.scollTop .scrollHeight .clientHeight 등이 있습니다.
아마 .scrollTop은 실제 스크롤 되는 양, scrollHeight는 총 스크롤 양, .clientHeight는 스크롤이 보이는 영역의 높이 정도로 정리가 되는 것 같은데 사실 정확한 건 기억나지 않습니다. 이런 게 있구나 감만 잡아놓고 가도 언제든 쓸 수 있을 것 같으니 넘어가도로 합시다.
스크롤 이벤트를 사용할 때 몇가지 팁이 있는데 하나는 쿼리셀렉터로 가져온 <html> 태그의 scrollHeight는 브라우저 마다 차이가 있어서 테스트를 해보고 넘어가는 게 좋다는 점, 그리고 scrollHeight를 구하는 코드는 페이지 로드가 완료되고 나서 실행돼야 정확하니 <body> 끝자락에 적는 게 좋은 점 정도 입니다.
이벤트 버블링에 대해서도 배웠습니다. 어떤 hmtl 요소에서 이벤트를 발생시켰을 때 그게 상위 html 요소로 퍼져서 의도한대로 동작하지 않는 현상을 말하는데요, 예를 들면
위와 같은 구조에서 my-3이나 white-bg를 클릭했을 때 각 클래스에 걸려있는 함수는 동작하지 않고 black-bg에 걸려있는 함수가 동작하는 경우입니다. 왜냐면 my-3이나 white-bg를 클릭한 건 사실 black-bg를 선택한 걸로도 볼 수 있기 때문이죠
그래서 이벤트 버블링을 방지하고자 이벤트 객체 e를 배우게 되는데요, 이벤트 객체 e는 이벤트 리스너의 콜백함수에 전달되는 인자입니다.
그동안 이벤트 리스너의 콜백함수에는 function(){} 과 같은 인자 없는 함수를 적었는데 여기에 function(e){}를 적는 것이지요,
그럼 저 e는 대체 무엇이냐,, '이벤트가 발생했을 때 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 담고 있는 객체' 정도라고 알아두면 좋을 것 같습니다.
저 e를 활용한 여러가지 메소드가 있는데요
.target은 이벤트가 발생한 곳을 의미함(유저가 실제로 누른 곳)
.currentTarget은 이벤트 리스너가 달려있는 곳을 알려줌(this 라고도 함)
.preventDefault는 이벤트의 기본 동작을 막아줌
.stopPropagation은 상위요소로 이벤트 버블링 되는 걸 막아줌
정도라고 합니다. 이걸 활용한 코드는
이렇습니다.
앞서 본 html 코드와 같이 보면 이제 위 화면에서 white-bg를 선택하거나 전송, 닫기 등의 버튼을 눌렀을 땐 e.target 에 black-bg가 전달되지 않아 이벤트 버블링을 막을 수 있게됩니다.
for문을 이용한 여러 이벤트 처리도 배웠는데 for 문에 중점을 둔 내용이라 굳이 그건 적지 않구요, 아 html 속성으로 dataset이란 걸 줄 수 있다고 합니다.
이런 식으로 data-아무이름 = "어떤 값"을 html 속성으로 넣어두면, 이후에 e.target.dataset.아무이름으로 "어떤 값"을 가져올 수 있다는 거,, 물론 쿼리 셀렉터.dataset.아무이름도 가능합니다. 그래서 아래와 같은 코드가 쓰이게 되는데,,,
dataset을 사용하기 전에는 위에 저 리스트 요소마다 이벤트 리스너를 달아서 정말 길고 긴 코드였는데 for 문으로 한 번 줄이고 또 dataset으로 한 번 더 줄여서 단 3줄로 줄일 수 있게 되었습니다.
끝으론 쓸만한 자바스크립트 라이브러리들을 알려주던데요 이건 혹시 모르니 기록용으로 남겨놓겠습니다.
1. Swiper 캐러셀 (이미지슬라이드되는거)
2. Chart.js 웹페이지에 차트만들고 싶으면
3. Animate On Scroll스크롤 내리면 요소가 서서히 등장하는 애니메이션을 만들고 싶을 때
4. EmailJS 원래 이메일 전송은 서버가 해야하지만 Gmail 이런거 서버를 잠깐 빌리면 자바스크립트만으로 이메일 전송이 가능
아 그리고 문자열에 변수 넣으려면 백틱기호 써서 `아무 문자열 가운데에 ${변수} 넣는 법` 이렇게 하는 게 간편하다는 것 그리고 소수점 반올림 할 땐 .toFixed(몇자리)를 쓰는데 문자열 반환이니까 parseInt(문자열) 혹은 parseFloat(문자열)까지 같이 쓴다는 것으로 이상 파트 2 복습 마치죠,,,, ㅃ2,,
'JavaScript' 카테고리의 다른 글
| ES6의 한 가운데서 (0) | 2023.08.03 |
|---|---|
| 교실에서 침 뱉으면 안되는 이유) class를 한글 타자로 치면 침ㄴㄴ라서 (0) | 2023.07.27 |
| ESC 아닙니다. ES6입니다. (1) | 2023.07.26 |
| 자바스크립트 기초 강의가 끝났습니다. (1) | 2023.07.23 |
| 너, 웹 개발의 꽃이 누군지 아니? (1) | 2023.07.10 |
