https://kingheedo.tistory.com/101 [1차] 비밀지도(2018 KAKAO BLIND RECRUITMENT) - JS 문제 설명 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. kingheedo.tistory.com parseInt와 toString은 여태까지 문자열로 변경하기 위해서 사용했던 적이 많았다. 위의 문제를 풀면서 다른 목적으로 사용 가능함을 알 수 있었다. parseInt() 1. 정수로 변환 2. 특정 진수를 10 진수로 변환 const val = '1000' console.log(parseInt(val)); //1000(val을 정수로 변환)..
문자열에서 원하는 자릿수에 맞도록 특정 문자를 채워주고 싶다면은 padStart method 를 사용하면 된다. padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. padStart(자리수, 채울 값) 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. const val = 1234; console.log(String(val).padStart(5,"0")); //01234 padStart(자리수, 채울 값) 채워넣기는 대상 문자열의 시작(우측)부터 적용됩니다. const val = 1234; console.log(String(val).padEnd(5,"0")); //12340 https://developer.mozilla.org/ko/..
insertBefore로 참조된 노드 앞에 해당 부모 노드의 자식노드를 삽입하기 const [draggingItem, setDraggingItem] = useState(null); /** 처음 드래그를 시작할때 * 1. 드래그 시작시의 요소를 state에 저장 */ const onDragStart = (e) => { setDraggingItem(e.currentTarget); }; /** 드래그가 끝날시 드래그하던 객체를 놓는 장소에서 이벤트 발생 */ const onDrop = (e) => { e.preventDefault(); const rect = e.currentTarget.getBoundingClientRect(); //드래그가 끝난 요소의 뷰포트 기준 위치 //현재 마우스 위치가 버튼의 위에 ..
리스트를 드래그 앤 드롭으로 순서를 변경해야하는 프로젝트를 진행하였다. 이에 drag 이벤트를 간단히 정리하였다. 이벤트 핸들러 설명 drag ondrag 요소를 드래그하면 항상 발생 dragstart ondragstart 드래그가 시작되면 발생 dragend ondragend 드래그가 끝날때 발생(마우스버튼 놓을시) dragenter ondragenter 이벤트가 달린 요소에 드래그한 아이템이 들어가면 발생 dragleave ondragleave 이벤트가 달린 요소에 드래그한 아이템이 떠날시 발생 dragover ondragover 이벤트가 달린 요소에 드래그가 이루어지면 발생 drop ondrop 이벤트가 달린 요소에 드래그가 끝나면(마우스 버튼을 놓으면) 발생 드래그 이벤트를 발생시키기 위해서는 d..
일반적으로 자바스크립트 함수는 실행하면 함수 내부의 로직들이 순차적으로 작동하게 된다. 제너레이터 함수는 기본 함수에서 일시정지 같은 기능을 탑재하고 있다. function* generator(i) { yield i; yield i + 10; } const gen = generator(10); console.log(gen.next()); // expected output: 10 console.log(gen.next()); // expected output: 20 gen 이라는 상수는 generator 함수에 10이라는 인자 값을 전달해서 함수를 실행한다. 일반적인 함수의 관점에서 내부가 10 과 20이 된다는 것을 유추 할 수가 있다. 그렇지만 내부에서 한번에 10과 20이 나오지 않는다. gen.nex..
![]()
default parameter const f = function (x, y, z) { x = x ? x : 4 y = y || 5 if (!z) { z = 6 } console.log(x, y, z) } f(1) f(0, null) const f = function (x, y, z) { x = x !== undefined ? x : 3 y = typeof x !== "undefined" ? y : 4 console.log(x, y) } f(0, null) 위 코드를 해석하면 x에 undefined가 아니면 x를 할당하고 x가 undefined라면은 3을 할당하라, y는 x가 문자열 undefined가 아니면 y가 undefined라면은 4를 할당하라. const f = function (x, y, z)..
