밤토리
728x90
article thumbnail
[JS] 스크롤시 맨 위로 가기 버튼 만들기
Frontend/Javascript 2024. 3. 16. 23:49

안녕하세요. 현생을 사느라 포스팅이 조금 늦었습니다. 요즘 앱이나 웹에서 아래의 이미지와 같이 스크롤을 내리고나서 "위로가기" 버튼 많이 이용하시나요? (혹은 맨 아래로) 오늘은 간단하게 자바스크립트로 "위로가기" 버튼을 만들고자 아래의 코드를 공유합니다. const element = document.documentElement; // 스크롤 이벤트 리스너 window.addEventListener('scroll', () => { const btnStyle = document.getElementById('btn-scroll-to-top').style; // 스크롤을 했을때 100px을 초과하면 보이고 아니면 none 처리 btnStyle.display = element.scrollTop > 100 ? '..

[JS] Javascript Reduce로 배열의 합, 중복 갯수 구하기
Frontend/Javascript 2023. 2. 11. 23:56

오늘은 Javascript reduce에 대해서 포스팅 해봅니다. reduce 메소드는 현업에서도 종종 쓰이며, 알고리즘 꽤 많은 것을 구현할 수 있습니다. Reduce reduce에서 첫번째 인자인 누적값(accumulator)과 두번째 인자인 현재값(currentValue)을 가지고 있습니다. 보통 배열의 합을 구하거나, 특정 배열의 중복 제거, 같은 값을 찾을 때 사용할 수 있습니다. // 1. 배열의 합 const arr = [1, 7, -8, 5, 2]; //sum = 7 const result = arr.reduce((accu, curr) => { //accu : 누산값, curr 현재 누산할 값 // console.log('[accu] : ', accu, ', [curr] : ', curr,..

[JS] Array.from 배열 변환 및 연산, 1~N까지 채우기
Frontend/Javascript 2023. 2. 10. 22:48

오늘의 포스팅은 배열에 관한 예제입니다. String을 배열로 변경하고싶거나, 배열내 연산이 필요할때 Array.from을 사용해봅니다. 사실 이 외에도 Array.from으로 할 수 있는건 생각보다 많습니다. Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. Array.from(arrayLike[, mapFn[, thisArg]]) * arrayLike : 배열로 변환하고자 하는 객체 * mapFn (Optional) : map * thisArg (Optional) : map 실행시 this로 사용할 값 String → 배열, 배열 내 연산 (덧셈, 곱셈 등) // Stri..

article thumbnail
[Node JS] readline 모듈로 입출력 방법
Frontend/Node 2023. 2. 1. 21:42

코딩공부를 하려고보니 막상 입출력 관련 모듈을 제대로 사용해본적 없었다. Javascript 입출력 관련은 여러가지 모듈들이 있지만.. 내장 모듈을 사용하고자 "readline"을 소개하려고 한다. 1) readline을 본격적으로 사용하기 앞서 기본적으로 필수적인 작성을 해야한다. //readline 모듈 IMPORT const readline = require('readline'); // 입출력을 위한 인터페이스 객체 생성 const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); 2) "on" 메서드를 통해 작성할 수 있으며, rl (=realine)은 line 한줄 한줄을 작성하기 위한 이벤트, clo..

728x90