조각모음 조각모음

자바스크립트 이벤트 루프 정리 자바스크립트 내부는 아래와 같이 구성되어 있다. Memory Heap: 변수나 함수 등이 저장(할당)되는 공간. 구조화 되지 않은 넓은 메모리 영역. Call Stack: 실행될 코드가 한 줄 단위로 저장되고 실행되는 공간. (LIFO) Web API: 비동기 처리를 담당. Callback Queue: 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당되는 곳. Microtask Queue(Job Queue): Promise 처리. 실행 순위 1순위. Animation Frames: 애니메이션 함수. 실행 순위 2순위. Task Queue(Event Queue): setTimeout, setInterval 처리. 실행 순위 3순위. Event Loop: 콜 스택이..

eslint 특정 라인 혹은 특정 파일에만 ignore하기 참고: https://worker-k.tistory.com/entry/%EC%97%84%EA%B2%A9%ED%95%9C-eslint-ignore-%ED%95%98%EB%8A%94-%EC%97%AC%EB%9F%AC%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-eslintignore eslint를 쓰다보면 전역적으로 무시하고 싶은 에러들도 있지만, 특정 라인 혹은 파일에서만 ignore를 사용하고 싶을 때가 있다. 나 같은 경우는 회사에서 작업할 때 kakao SDK 등을 사용할 때다. SDK에서 제공하는 변수나 함수를 사용하면 eslint는 해당 변수나 함수가 정의되지 않았다면서 경고를 띄우는데, 이 빨간 줄이 너무나 거슬린다..

자바스크립트 디바운스와 쓰로틀링 참고: https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa 내용 디바운스, 쓰로틀링 둘 모두 웹에서 연속적으로 발생되는 이벤트를 제어하여 성능을 향상시키는 기법이다. 차이점으로는 디바운스는 마지막으로 실행된 이벤트에 딱 한 번만 반응하고 쓰로틀링은 정해놓은 주기마다 실행이 된다는 점이다. 디바운스는 주로 API 호출 등에 사용되고, 쓰로틀링은 resize나 scroll 이벤트 등에 많이 사용된다. 디바운스 타이머가 있는지 없는지 판별할 변수를 하나 생성한다. (timer) 코드를 실행할 대기 시간을 정한다. (예시에서는 200ms) input 이벤트가 발생하면 타이머가 설정된다. 타이머가 이미..

자바스크립트 현재 날짜와 시간 항상 한국 기준으로 구하기 참고: https://hianna.tistory.com/451 업무 중 현재 시간을 기준으로 이런저런 값을 계산할 일이 있었다. 근데 동료가 만약 우리나라가 아니라 다른 국가에서 접속하는 유저는 어떻게 처리하겠냐는 질문을 했다. 그래서 어디서 접속하든 언제나 한국 시간을 기준으로 잡아야 할 필요를 느꼈다. 필요한 것들 Date.prototype.getTime() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime 1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜까지의 시간을 밀리세컨드로 반환한다. Date.prototype...

자바스크립트 클립보드 복사 기능 만들기 참고: https://zetawiki.com/wiki/JavaScript_%ED%81%B4%EB%A6%BD%EB%B3%B4%EB%93%9C%EB%A1%9C_%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0 내용 클립보드 복사 기능을 만들 일이 있어 좀 찾아보았다. 바닐라 스크립트로 임시 textarea를 만들어서 구현하는 게 크로스 브라우징 문제 등에서 자유롭고 간단해 보였다. 구현 const textarea = document.createElement("textarea"); // teatarea 요소 생성 document.body.appendChild(textarea); // body에 요소 추가 textarea.value = '복사할 텍스..

자바스크립트 Date 객체 깊은 복사하기 참고: https://stackoverflow.com/questions/1090815/how-to-clone-a-date-object 업무 중에 날짜 객체를 이용해서 시간 차이에 따른 상태변화를 할 일이 있었다. 그때 날짜 객체의 깊은 복사를 하지 않아 버그가 발생했었는데, 스택 오버 플로에서 해답을 찾았다. const targetDate = new Date(); const aliasDate = new Date(targetDate); 위와 같이 하면 깊은 복사가 완료된다. 매우 간단하다.

iOS, Safari(사파리) 자바스크립트 new Date() 크로스브라우징 이슈 특정 시간이 되면 어떤 요소가 사라지도록 처리하는 업무와 타이머를 생성할 필요가 있었는데 iOS와 Safari에서는 제대로 작동하지 않거나 타이머의 숫자가 NaN으로 나타나는 이슈가 있었다. 서핑을 좀 해보니 크로스 브라우징 문제였고, iOS와 safari가 아래와 같은 표기법을 지원하지 않아서였다. new Date('2021-06-27 18:23:24'); // invalid Data로 확인 구글링 결과 해결법은 크게 두 가지였다. 1. Moment.js 사용하기 https://momentjs.com/ 2. 표준표기법 사용하기 위 코드를 아래와 같이 사용하면 된다. new Date(2021, 5, 27, 1..

자바스크립트 Array.from() 활용하기 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from 코딩테스트 강의를 듣다가 매우 흥미로운 활용법을 보게 되어 정리한다. 특정 값을 원소로 갖는 특정 길이의 배열 초기화 길이 5에 모든 인덱스에 1을 원소로 갖고 있는 배열을 만들고자 할 때 아래와 같이 만들었다. const arr = new Array(5).fill(1); 근데 Array.from을 조금만 활용하면 굉장히 쉽게 만들 수 있다. const arr = Array.from({length: 5}, () => 1); 아래와 같이 콜백함수를 지정해주지 않으면 모든 원소가 undefined고 길이가 ..