본문 바로가기

Javascript

 (37)
[Javascript] 참조형과 원시형의 차이(reference vs primitive values) 해당 글은 리덕스의 리듀서 안에서 왜 state의 값을 mutate하면 안되는지에 대한 내용을 공부하면서 알게 된 글입니다. 번역된 글임으로, 어색한 부분이 있다면 양해부탁드립니다. 원본 : https://academind.com/tutorials/reference-vs-primitive-values/ 먼저 원시형에 대한 이야기로부터 시작하겠습니다. 원시형은 무엇일까요? 여기에 예시가 있습니다. var age= 28 여기서 age변수는 숫자 값으로 저장됩니다. 28이라는 숫자가 저장되지요. 이런 숫자 값을 우리는 원시형 값(primitive values)라고 부릅니다. 왜냐하면 이 녀석들은 자바스크립트앱의 매우 기본적인 building block이기 때문입니다. building block이 이해가 안된다..
[javascript] 문서 위치 변경하는 법 (assign메서드) 클릭 한번으로 문서의 위치를 이동할 수 있는 메서드가 있다. 문서 위치 변경 구글로 이동 google-btn이라는 id값을 가진 버튼에 이벤트 리스터를 등록했다. 이 요소를 클릭할 경우 ,assign메서드로 인해서 구글 페이지로 이동할 수 있다.
[javascript] 현재 요소의 URL,도메인명, 경로명, 프로토콜을 알아내는 법 현재 요소의 URL,도메인명, 경로명, 프로토콜을 알아내는 메서드가 있다. location이라는 id를 가진 요소를 가져와, 해당 요소의 URL,도메인명, 경로명, 프로토콜을 html문서 내에 적어주는 코드이다. 출처 : 자바스크립트 200제
[javascript] 브라우저 스크롤 움직임을 감지하기 윈도우 객체의 pageYOffset을 사용하면 현재화면이 브라우저의 상단으로부터 얼마나 멀어졌는지를 확인 할 수 있다. 마찬가지로 pageXOffset을 사용하면 현재 페이지가 브라우저의 왼편으로부터 얼마나 멀어졌는지를 확인할 수 있다. 아래는 사용 예시이다. window.addEventListener("scroll", (e) => { if (window.pageYOffset >= navTopOffset) { nav.style.position = "fixed"; nav.style.top = 0; nav.style.left = 0; nav.style.right = 0; } else { nav.style.position = ""; nav.style.top = ""; } }); 이벤트리스너를 통해 화면의 스크..
[javascript] 요소의 이벤트 전파를 막는 2가지 방법 해당 요소의 이벤트를 상위로 전파하는 것을 막는 방법이 있다. 1)stopPropagation() 2)preventDefault() stopPropagation()은 이 메서드가 선언된 요소의 이벤트가 발생되지 않도로 한다. preventDefault()은 해당 요소가 가지고 있는 기본적인 이벤트가 발생되지 않도로 한다. 아래는 예시다. eventPreventedE1.addEventListener("contextmenu", function (event) { console.log("이벤트 막은 글 클릭"); event.stopPropagation(); event.preventDefault(); }); 요소를 마우스 우클릭을 했을 때, 이벤트가 발생하지 않도록 막아주는 역할을 하고 있다.
[Javascript] 특정한 범위 안에서 랜덤한 숫자를 추출하는 방법 랜덤한 수를 추출하는 방법은 Math.random()을 이용하는 것입니다. 그런데, 특정한 범위 안에서 랜덤한 수를 추출하려면, 어떻게 할 수 있을까요? const randomInt = (min, max) => Math.trunc(Math.random() * (max - min) + 1) + min; 이렇게 코드를 작성해줍니다. 어떻게 된 원리인지 설명하겠습니다. 1.본래 Math.random()은 0부터 1까지의 랜덤한 수(소수)를 추출합니다. -> Math.random() : 0...1(소수) 2.여기서 특정 정수를 곱하면, 0부터 그 정수-1 까지의 수를 추출합니다. ->Math.random() * 5 : 0...4(소수) 3.(2)번에서 추출된 수는 소수 이므로 정수(Math.trunc())로 바..
[자바스크립트] 숫자 오름차순으로 정렬하기 자바스크립트에서 숫자를 오름차순으로 정렬하려고 할 때, 안되는 경우가 있다. mdn을 읽어보면, 문자열의 유니코드 코드 포인트에 따라서 달라질 수 있음을 알 수 있다. 아래와 같은 상황이 발생할 수도 있는 것이다. const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expected output: Array [1, 100000, 21, 30, 4] 때문에 숫자를 오름차순으로 정렬하기 원한다면 sort에 다음과 같은 코드를 넣어줘야 한다. Array.sort((a,b)=> a-b); 그렇게 되는 이유에 대한 설명은 여기 mdn공식 문서에 소개되어 있다. https://developer.mozilla.org/ko/docs/..
[자바스크립트] 문자열에 특정 길이만큼 원하는 문자로 채우는 방법 const message = 'Go to gate 25!'; console.log(message.padStart(25, '+').padEnd(35, '+')); console.log('chans'.padStart(25, '+').padEnd(35, '+')); //+++++++++++Go to gate 25!++++++++++ //++++++++++++++++++++chans++++++++++ padStart(25,'+')는 시작부터 25번째까지 해당 문자열을 제외하고서 '+'로 채운다. padEnd(35,'+')는 해당문자열부터 35번째자리까지 '+'로 채운다.

티스토리툴바