728x90
반응형
- [ 언어·프레임워크/JavaScript ][JavaScript] 클로저(Closure) 정리!2023-09-26 00:38:061. 클로저(Closure) 란? 클로저는 함수와 함수가 선언된 렉시컬 스코프(Lexical Scope) 사이의 특별한 관계를 나타내는 개념이다. 함수 내부에서 선언된 함수가 외부 함수의 변수에 접근할 수 있고, 그러한 함수를 클로저라고 한다. 클로저는 외부 함수의 변수에 대한 참조를 "닫아"(Capture)서 나중에 사용할 수 있도록 저장한다. 이로 인해 외부 함수가 종료된 이후에도 해당 변수에 접근할 수 있다. 2. 클로저와 관련한 몇 가지 개념 1) 렉시컬 스코프(Lexical Scope): JavaScript는 함수를 정의할 때 함수 내부에서 외부 스코프에 접근할 수 있도록 스코프를 정의한다. 이 스코프는 함수를 선언할 때 결정되며, 함수가 어떤 변수에 접근할 수 있는지 결정한다. 이러한 스코프 ..
- [ 언어·프레임워크/JavaScript ][Javascript] 즉시 실행 함수를 이용한 유튜브 동영상 재생 속도 제어2023-09-22 09:39:161. 유튜브 영상은 2배속까지만 재생이 가능할까? 유튜브 영상은 현재 재생 속도 제어를 0.25~2배속까지 지원한다. 하지만 웹은 더 빠른 속도로 영상을 재생할 수 있다. 2. 즉시 실행함수를 이용해 재생 속도 제어 웹의 동영상 속도를 제어하고 싶다면 크롬의 개발자 도구(단축키 F12)의 Console에서 다음의 즉시 실행함수를 입력하면 된다. 속도는 playbackRate에 원하는 값을 입력하여 제어한다. (function(){document.querySelector('video').playbackRate = 3.0}()) 아래는 위 코드를 화살표 함수로 작성한 코드이다. (() => {document.querySelector('video').playbackRate = 3.0})()
- [ 언어·프레임워크/JavaScript ][JavaScript] "라이트 모드-다크 모드" 전환 기능 구현 중 만난 문제, 'false'는 과연 false일까?2023-09-20 10:28:001. 반만 작동하는 "라이트 모드-다크 모드' 전환 기능!? Vue.js 프로젝트에 "라이트 모드-다크 모드" 전환 기능을 구현하고 있었다. 로컬 스토리지에 사용자가 설정한 값을 기억하도록 했고 애플리케이션이 실행되면 로컬 스토리지에 저장된 값을 불러와 그에 맞는 화면을 보여주고자 했다. 그래서 로컬스토리의 값이 false이면 "라이트 모드"를 렌더링 하고, true이면 "다크 모드"를 렌더링 하도록 구현하였다. 그런데 라이트 모드(false)에서 다크 모드(true)로의 전환은 잘 작동하였으나 그 반대는 원하는 대로 작동하지 않았다. 콘솔 로그를 찍어 확인했는데 값은 'false'로 잘 변경되어 있었다. 그런데 왜왜왜? 2. 'false'는 과연 false일까? 라이트 모드는 로컬 스토리지의 불리언 값..
- [ 언어·프레임워크/JavaScript ][JavaScript] 날짜 데이터를 yyyy-MM-dd 형식으로 만들기2023-05-25 15:54:32날짜 정보를 문자열로 변경하되 "yyyy-MM-dd"로 변경하고 싶었다. 파이썬에서 strftime이라는 메소드를 이용하면 간단했던 것이다. 참고로 파이썬 코드는 아래와 같다. import datetime now = datetime.datetime.now() formattedDate = now.strftime("%Y-%m-%d") # 2023-05-25 print(formattedDate) 자바스크립트는 toLocaleDateString 메소드와 정규식을 이용해 구현할 수 있었다. 작성한 코드는 아래와 같다. date // 날짜 정보를 담고 있는 변수 date ?.toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit'..
- [ 언어·프레임워크/JavaScript ][JavaScript] python range()와 유사한 JavaScript 코드 작성2023-05-20 22:57:431. lodash 라이브러리 python에 있는 range() 함수는 매개변수로 시작하는 정수 값과 끝나는 정수 값의 -1에 해당하는 이터러블한 정수 값을 생성해 준다. Javascript에는 유사한 문법이 없을까 고민한 적이 있다. node.js의 lodash 모듈을 이용하면 유사한 기능이 가능했다. lodash.range() 를 사용하기 위해서는 아래와 같이 모듈을 설치해야 한다. npm i lodash 아래 코드는 lodash.range()를 간단하게 사용해 본 것이다. const lodash = require("lodash"); let arr = lodash.range(0, 10); console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 2. 배열의 from ..
- [ 언어·프레임워크/JavaScript ][JavaScript] 0이 24개 있는 배열 생성2023-05-18 09:07:07원하는 요소가 원하는 개수만큼 있는 배열을 만드는 코드이다. 아래 예제는 0이 24개 있는 배열이다. const hourArr = Array.from({ length: 24 }, _ => 0);
- [ 언어·프레임워크/JavaScript ][Javascript] RSSI를 미터(m)로 환산하는 함수2023-05-08 09:51:401. RSSI를 이용한 거리 환산 [그림 1]과 같이 네이버 지도 API에 히트맵을 찍어야 하는 상황이다. 위경도 좌표 데이터는 없으며 rssi와 방향 정보를 이용해 좌표를 따야 한다. 이를 위해 rssi를 m로 환산할 필요성이 생겼다. 😘RSSI(Received Signal Strength Indicator): 수신된 신호의 강도를 지표로 나타내는 파라미터 2. RSSI to m 자바스크립트 코드 아래 코드는 와이파이 수신 감도(rssi)를 미터(m)로 환산하는 함수이다. function calculateDistance(rssi) { var txPower = +59; var n = 2; var distance = Math.pow(10, (txPower - rssi) / (10 * n)); return ..
- [ 언어·프레임워크/JavaScript ][JavaScript] 파이썬의 enumerate()를 자바스크립트에서?2023-05-07 09:56:30스터디에서 알고리즘 문제를 풀어가고 있다. 어제 가졌던 모임에서 파이썬의 enumerate()와 비슷한 역할을 하는 자바스크립트 문법은 무엇인가라는 질문이 나왔다. 함께 고민한 결과 Array.prototype.entries() 메서드라고 결론지었다. 예제 코드는 아래와 같다. for (const [i, v] of ["a", "b", "c"].entries()) { console.log(typeof i, typeof v); console.log(i, v); } // 출력 결과 // // number string // 0 a // number string // 1 b // number string // 2 c forEach() 배열 메서드로도 동일한 결과를 얻을 수 있었다. ["a", "b", "c"].f..
728x90
반응형