HOME
자바스크립트 디바운스 Debounce, 스로틀 Throttle 구현하기
자바스크립트 디바운스 Debounce, 스로틀 Throttle 구현하기
2024.04.29디바운스는 input 이벤트에(리액트에선 onChange), 스로틀은 scroll 이벤트에 자주 사용된다. 디바운스는 아무리 많은 이벤트가 발생해도 마지막 이벤트만 실행하는 반면, 스로틀은 적어도 `n` 밀리초 마다 정기적으로 기능 실행을 보장하는 점이 가장 큰 차이점. 참고로 Lodash 라이브러리에 디바운스와 스로틀 메서드가 포함되어 있다._.debounce(func, wait, [options])_.throttle(func, wait, [options]) 디바운스 | Debounce이벤트가 연속적으로 발생해도 항상 마지막 이벤트만 처리이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술 디바운스 예시 코드 ▼function debounce(callback, ms) { ..
Github 마크다운에 각주 달기
Github 마크다운에 각주 달기
2024.04.29각주 사용법21년 10월부터 Github서도 Markdown 각주를 지원한다. 사용 방법도 간단하다. 각주를 달고 싶은 문장에 대괄호를 열고 [^번호|제목] 형태로 입력하면 된다. ex) [^1] [^memo] 각주 제목은 영어만 지원하는 듯 하다. 프리뷰 화면에선 제목으로 입력했어도 항상 번호로 나온다. 아쉽게도 각주에 마우스를 올리면 각주 설명이 보이는 툴팁 기능은 지원하지 않는다. 각주에 대한 설명은 [^번호|제목]: 설명 형태로 입력하면 된다. 각주 설명은 어디에 입력하든 상관없이 항상 하단에 위치하게 된다. 마크다운 프리뷰 화면에서 [^1] 각주를 클릭하면 하단에 있는 각주 설명으로 이동한다. 각주 설명에서 ↵ 아이콘을 누르면 다시 해당 각주가 달려있는 문장으로 이동한다.JavaScript는 클..
리액트 요소 드래그앤드롭 구현
리액트 요소 드래그앤드롭 구현
2024.04.28TL;DR드래그할 수 있는 요소로 변경 — draggable={true}드래그 시작 — onDragStart 이벤트 트리거드래그하고 있는 요소의 인덱스 정보 저장 — state.draggedFrom드래그 상태 true로 변경 — state.isDragging이벤트 트리거 시점의 엘리먼트 리스트 저장 — state.originalOrder마우스 커서가 드롭 가능한 영역에 있을 때 — onDragOver 이벤트 트리거drop 이벤트를 사용할 수 있도록 dragOver 기본 이벤트 방지 — e.preventDefault()마우스 포인터 위치에 있는 요소의 인덱스 저장 — state.draggedTo엘리먼트 순서 변경 — state.updatedOrder 드래그중인 아이템을 마우스 포인터 위치(draggedTo..
특정 수 까지의 합 구하기 / 등차수열 (가우스 공식)
특정 수 까지의 합 구하기 / 등차수열 (가우스 공식)
2024.04.28프로그래머스 문제프로그래머스의 "부족한 금액 계산하기" 문제다. 아래 3개 파라미터를 받는다. price : 놀이기구의 이용료money : 고객이 가지고 있는 금액count : 고객이 해당 놀이기구를 이용한 횟수 놀이기구를 이용한 횟수가 늘어날 때마다 횟수 만큼의 이용료를 더 받는다. 놀이기구의 이용료 price 가 100원이라면 1번 이용할 땐 100원, 2번 이용할 땐 200원, 3번 이용할 땐 300원이 된다. 놀이기구를 count 번 탔을 때 money 금액에서 얼마나 모자라는지를 반환해야 된다. 금액이 모자라지 않으면 0을 반환한다. 반복문을 이용하면 아래처럼 쉽게 풀 수 있다.function solution(price, money, count) { let sum = 0; for (let i..
진법 계산 방법 — 10진수 ⇆ 2진수 변환
진법 계산 방법 — 10진수 ⇆ 2진수 변환
2024.04.282진법을 사용하는 이유2진법은 0~1로 숫자를 표현하는 방법이다. 전기 신호로 작동하는 기계인 컴퓨터는 2진법을 기반으로 설계됐다. 전기적 신호로 의미를 전달할 수 있는 최소 단위는 ON, OFF이다. 전기 신호가 있는 상태를 1, 없는 상태를 0으로 설정한다. 이렇게 단 2가지 상태만 2진수로 표현하는 것이 가장 간단하고 정확하기 때문이다. 2진수를 사용하면 0과 1로 단순하게 처리할 수 있어 속도가 빠르지만 작은 숫자도 매우 길어지는 단점이 있다. 더 많은 신호를 사용할 수도 있지만, 2개 이상의 신호를 사용하면 정확한 신호를 측정하는데 비용이 많이 들기 때문에 현재까지도 2진수를 사용하는 것. 각 진법의 특징2진수 : Binary Number | 二进制 (0~1로 숫자를 표현하는 방법)3진수 : T..
리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티
리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티
2024.04.27자식 요소의 콘텐츠가 부모 요소보다 크다면, 부모 요소에 스크롤이 생기고, 마우스 휠로 스크롤할 수 있다. 마우스 휠 외에도 click / move 이벤트를 이용해 마우스 드래그로 스크롤하도록 만들 수 있다. TL;DR❶ 마우스를 클릭했을 때`clientX`, `clientY` (뷰포트 기준)좌표와, 요소의 스크롤 위치 `scrollLeft`, `scrollTop` 저장클릭 상태 `true`로 변경(CSS) `cursor: grabbing user-select: none` ❷ 클릭한 상태에서 마우스를 이동(드래그)했을 때①이동을 멈춘 지점(clientX/Y)과 ②마우스를 클릭한 지점**(clientX/Y)**을 뺀 값 계산 — 스크롤한 범위(요소의 현재 스크롤 위치)와 (스크롤한 값)을 뺀 위치로 스크..
자바스크립트 URL 객체 / searchParams
자바스크립트 URL 객체 / searchParams
2024.04.27URL 객체 현재 페이지의 URL이 아래와 같다고 가정했을 때... 참고로 %20 은 빈칸(space) 1개https://example.com/?name=Jonathan%20Smith&age=18 url 객체의 search 속성을 이용해 모든 쿼리 스트링 내용을 가져올 수 있다const url = new URL(window.location.href); // 현재 urlurl.search; // '?name=Jonathan%20Smith&age=18' name age 같은 특정 쿼리 스트링만 가져오고 싶다면 URLSearchParams 메서드를 이용하면 된다. get으로 값을 조회하고 append(기존 값에 이어붙이기) 혹은 set(기존값 교체)으로 새로운 값을 추가할 수도 있다.url.searchPara..
자바스크립트 Map / Set 자료구조
자바스크립트 Map / Set 자료구조
2024.04.27MapMap은 항상 `map` 전용 메서드(`set`, `get` 등)를 사용한다. `map[key] = 2` 형태로 사용하면 `map`을 일반 객체로 취급하므로 많은 제약이 생긴다. TL;DR❶ key-value로 이루어진 순서가 있는 컬렉션(집합) ⭐️ ❷ 삽입 순서 기억 ❸ 중복 key 불가 — 이미 존재하는 key에 대한 value를 추가하면 해당 key의 value를 덮어씀let map = new Map([['one', 1]]);map.get('one'); // 1map.set('one', 111);map.get('one'); // 111 ❹ Map 내장 메서드 forEach 지원(배열 forEach 메서드와 유사) / for of 순회 가능map.forEach((value, key, map) ..
세션 vs 쿠키 vs 토큰
세션 vs 쿠키 vs 토큰
2024.04.27TL;DR💡 Authentication은 인증(서버의 유저인지), Authorization은 권한부여(특정한 행동 허용) 쿠키 : HTTP 프로토콜의 무상태성(Stateless)을 보완해주는 도구다. 쿠키 자체는 인증수단이 아니다.세션 : 서버가(세션 DB) 인증정보를 가진다. 클라이언트는 서버가 쿠키에 담아 보내주는 세션 ID만 가진다.토큰 : 클라이언트가 인증정보를 가진다. 서버는 토큰이 유효한지만 확인한다.Authentication과 Authorization 차이점Authentication(인증 / 신원확인) : 현재 사용자가 누구인지 확인하는 과정. 회사 건물을 예로들면 1층 안내 데스크에서 방문자가 해당 건물에 출입할 수 있는지 여부를 확인하는 과정.Authorization(허가 / 권한부여)..
모바일 기기를 판별하는 6가지 방법
모바일 기기를 판별하는 6가지 방법
2024.04.27navigator.userAgent브라우저 API에서 제공하는 userAgent 문자열을 확인하는 방법. userAgent는 유저 디바이스의 정보를 담고 있다. 자바스크립트에선 navigator.userAgent 속성으로 접근할 수 있다. userAgent 문자열이 mobi, android iphone 등 키워드를 담고 있다면 모바일 기기로 접속했다고 볼 수 있다. 가장 간단한 방법이지만 사용자가 직접 userAgent 값을 수정할 수 있기 때문에 100% 신뢰할 순 없다.// 방법 1// 정규식은 기본적으로 대소문자를 구분한다. i 플래그로 대소문자를 구분하지 않도록 할 수 있다if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 현재 장치는 모바..
ES Modules 모듈 (Import / Export 시스템)
ES Modules 모듈 (Import / Export 시스템)
2024.04.26Intro1개 파일에 모든 코드가 들어간 것 보다 코드들이 잘개 쪼개져 있는게 더 좋다.모듈은 변수와 함수를 구성하는 더 좋은 방법을 제공한다.모듈을 잘 알아두면 코드를 깔끔하게 정리할 수 있다.모듈 덕분에 코드들을 작은 파일로 나눌 수 있고, import / export 할 수 있다.모듈은 함수와 변수를 모듈 스코프에 넣고, 모듈 스코프를 통해 모듈 함수 사이에서 변수를 공유할 수 있다.다이나믹 모듈을 이용하면 어플리케이션 로딩을 더 빠르게 할 수 있다. Named Exportimport { name } from "file"; 파일 혹은 모듈이 원하는 만큼의 named exports를 가질 수 있다import 하려는 이름은 export 했던 함수(변수) 이름과 같아야 한다 // math.jsexport..
Git SSH 공개키 만들기 / Credential 인증 시스템
Git SSH 공개키 만들기 / Credential 인증 시스템
2024.04.26Credential 저장소 / HTTPS 프로토콜Git 리모트 저장소와 통신할 때 사용하는 프로토콜은 Git(기본 프로토콜), SSH, HTTPS 방식이 있다. Git 기본 프로토콜은 인증 기능이 미약하여 거의 사용하지 않고, 주로 SSH나 HTTPS를 사용한다. HTTPS 프로토콜을 사용하면 매번 사용자 이름과 암호를 입력해야하는 번거로움이 있는데 Git은 이를 위해 인증 정보를 저장해두고 자동으로 입력해주는 Credential 시스템을 제공한다. Credential 기능에서 제공하는 옵션은 아래 3가지가 있다. cache 모드 : 인증정보를 메모리에 임시 저장(기본 15분)store 모드 : 인증 정보를 텍스트 파일로 Disk에 저장. 사용자 홈 디렉토리에 일반 텍스트 파일로 저장되므로 인증 정보 노..