Javascript 를 사용하여 화면 내 scroll 을 이동 해야해서 찾아봤다. 브라우저 창 너비와 높이브라우저 창 화면에 보이는 너비와 높이를 알려면 document.documentElement 의clientWidth 와 clientHeight 를 사용한다.  사용방법document.documentElement.clientWidthdocument.documentElement.clientHeight 또 다른 확인 방법은 관리자도구(F12) 를 키고 모바일로 봤을 때 확인 가능하다.   window.innerWidth 와 document.documentElement.clientWidth 의 차이점너비와 높이를 구하는 방법중에 window.innerWidth 와 window.innerHeight 도 있다...

Javascript 에서 물음표(?), 느낌표(!)  등 다양한 연산자를 통해 코드의 간결하고 가독성 있게 바꿔준다. 물음표 1개(?)물음표 한개 연산자는 "삼항연산자", "옵셔널 체이닝 연산자" 에서 사용된다. 삼항연산자// 조건식 ? 참값 : 거짓값let a = 11;a > 10 ? 'a가 10보다 큽니다.' : 'a가 10보다 작습니다.' 삼항연산자는 조건식이 참과 거짓일 때 콜론(:)을 기준으로 각각 다른 값을 반환한다.  옵셔널 체이닝 연산자(?.)// 사용법 = (?.)let card = {};// undefined, 객체의 존재하지 않는 요소에 접근해 정보를 가져오려고 할 경우 에러가 발생한다.console.log(card && card.name && card.name.number);// u..

e.preventDefault() 와 e.stopPropagation() 는 이벤트 관련 동작에서 많이 사용되는 코드이다.  e.preventDefault() e.preventDefault() 는 a 태그나 submit 처럼 페이지를 이동시키거나 form 태그의 submit 하는 동작을중지시킨다. // javascript$("a").click(function(e){ e.preventDefault(); alert('prevnetDefault 로 인해 이벤트 중지');});// html네이버 페이지 이동 위처럼 "네이버 페이지 이동" 이라는 a 태그의 링크를 클릭하면 click 이벤트 함수가 발생하고 e.preventDefault() 로인해 이벤트가 중지된다. e.stopPropagation()e.st..

화살표 함수란? 보통 함수를 선언할 때 function 키워드를 사용하지만 ES6 에서 함수를 선언하는 새로운 문법이 등장했다. 바로 화살표 함수이다. 사용하는 방법은 단어 뜻과 같이 " => " 표시를 사용해서 함수를 선언하는 방법이다. // 기존 함수 const obo = function() { console.log('function 을 사용한 기존 함수'); }; // 화살표 함수 const obo = () => { console.log('function 이 제거된 화살표 함수'); }; 위와 같이 function 이라는 키워드를 사용하지 않고 " () => {} " 형식으로 심플한 형태로 사용된다. 하지만 이러한 심플함뿐만 아니라 사용하는 이유와 제약사항도 존재한다. 화살표 함수 제약 사항 무조건..

input type="text" 형식으로 된 input 태그에 전화번호 입력 시 앞자리 숫자에 따른 자동 하이픈 삽입이필요하여 구현하였다. Javascriptconst cellNumHyphen = (target) => { let value = target.value; if (!target.value) { return ""; } value = value.replace(/[^0-9]/g, ""); const result = []; let restNumber = ""; // 시작번호 02 if (value.startsWith("02")) { result.push(value.substr(0, 2)); restNumber = va..

실행 컨텍스트란? Javascript 실행 컨텍스트란 우리가 작성한 자바스크립트 코드가 실행되는 환경을 의미한다. 여기서 실행 컨텍스트를 보기전에 자바스크립트 동작 원리에 대해 간단하게 봐보자. 자바스크립트는 한번에 한 코드밖에 실행시키지 못한다. 그래서 싱글 쓰레드라고 부른다. 아래의 예시를 보자. 결과를 보기전 우리가 예상할 수 있는 결과는 2, 4, 6 이지만 실제 결과 값은 2, 6, 4 이다. 이유는 setTimeout, 비동기통신 등 바로 실행시킬수 없는 코드는 대기실로 보내어 실행될 수 있는 코드가 될 때까지 대기하고 바로 실행될 수 있는 코드는 "스택" 이라는 공간에서 코드를 실행 시킨다. 바로 실행될 수 없는 코드들이 실행될 수 있는 코드가 되면 큐라는 공간으로 들어와 스택 공간이 완전히..