들어가며
모멘텀 함수를 복습중이다.
복잡한 리액트 프로젝틀르 하다가 바닐라 자바스크립트를 하니 이렇게 단순해 보일 수가 없다.
하지만 코딩테스트를 한다면 역시 바닐라 자바스트립트에서 다뤄질 것이기 때문에...
복습하는 겸사 아직 제대로 이게 뭔지? 면접관에게 훅이 들어올 때 ~이다! 라고 제대로 받아칠 수 있을 만큼 설명이 안되는 훅들은 정리를 해보려고 한다. 나중에 면접 전에 한 번 더 읽어볼 자료로 도움이 되지 않을까 싶어서.
질문 준비
-
setInterval( fn, 1000 ) 은 무엇인가?
반복 실행 매서드로, 해당 함수를 일정 시간 간격으로 반복적으로 실행할 때 사용한다.
단위가 밀리세컨즈 이므로, 여기서 1000은 1초를 의미한다.
즉, 1초에 한 번씩 해당 함수를 실행시키라는 의미입니다. -
padStart ( length, str )
padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다.
채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.
padEnd 는 마찬가지의 기능으로 대상 문자열의 끝(우측)부터 적용됩니다. -
Date
1970 년 1월 1일 자정부터 현재의 시간차를 밀리세컨즈 단위로 나타내는 정수값을 담은 객체입니다. -
Math.random()
0 에서 1 미만의 소수점 난수(랜덤한 수)를 반환한다. -
document.createElement("tagname")
createElemnet 는 html 에 동적으로 요소를 추가하는 매서드이다.
tagname.attr =`` 등으로 필수 속성을 지정해주고 (필요시)
document.body.appendChild(tagname) 로 생성된 요소를 html에 추가해준다. -
navigator.geolocation.getCurrentPosition( success, error )
navigator.geolocation 은 읽기 전용 속성으로써, 웹의 장치의 현재 위치인 Geolocation 객체를 반환한다.
getCurrentPosition 은 이 객체의 key 들 중 하나로, 장치의 현재 위치를 불러오는 함수를 실행한다. 값이 존재할 때 실행할 함수와 에러시 수행할 함수 두 가지를 다 넣어줘야 한다. -
event.target vs. event.currentTarget vs. event.target.parentElement ?
<li >
<button onClick={onLogin}>
<span>Google</span>
</button>
</li>event.currentTarget : 해당 이벤트(click)가 발생한 요소(button), 즉, vanila javascript 기준으로는 이벤트 핸들러(addEventLister)가 부착된 요소.
event.target: 해당 이벤트가 발생한 요소의 자식 요소(span).
이벤트가 부착된 요소에 자식 요소가 없는 경우:
<li >
<button >
<span onClick={onLogin}>Google</span>
</button>
</li>event.target은 이벤트가 발생한 요소 그 자체(span)이 된다.(자식요소가 아니라)
event.currentTarget 은 null
event.target.parentElement: 이벤트가 발생한 요소의 부모 요소(button)
*참조 👉
-
https://developer.mozilla.org/en-US/docs/Web/API/Event/target
-
JSON 이란:
JavaScript Of Notation 의 약자.
경량의 데이터 교환 형식이다. 통신 방법이나 프로그래밍 언어가 아닌 단순히 데이터를 표시하는 표현 방법일 뿐.
JavaScript 의 객체 형식을 기반으로 해서 생김새가 매우 유사하다.
JSON 형식)
{
"employees": [
{
"name": "Surim",
"lastName": "Son"
},
{
"name": "Someone",
"lastName": "Huh"
},
{
"name": "Someone else",
"lastName": "Kim"
}
]
}- JSON.parse() 란:
이렇게 JSON 문자열로 전송된 데이터를 분석하고, 그 결과 값을 자바스크립트나 객체를 생성한다.
예제)
JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null
*참조 👉
-
https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
-
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
-
Array.prototype.filter( fn ) ?
fn이 필터링을 하는 조건이다. 해당 조건을 통과한 아이템들로만 구성된 새로운 어레이를 반환한다. -
parseInt() :
string -> Integer 로 변환.
