자바스크립트
[JS] 자바스크립트 6줄로 이미지 비교 슬라이더 만들기
[JS] 자바스크립트 6줄로 이미지 비교 슬라이더 만들기
2025.04.17이미지 비교 슬라이더는 핸들을 좌우로 움직여서 두 이미지를 비교할 수 있는 UI 패턴으로 쇼핑몰이나 제품 소개 페이지 등에서 자주 볼 수 있다. 이러한 이미지 비교 슬라이더는 range 타입의 input 태그와 6줄 정도의 자바스크립트 코드만으로 구현할 수 있다. range 타입의 input은 슬라이드바를 조정하여 범위 내 숫자 값을 선택할 수 있는 입력 필드다. 기본적으로 브라우저에서 제공하는 스타일이 적용되어 있다. 이 기본 스타일을 모두 제거하고 이미지의 너비/높이만큼 크기를 확장하면, 슬라이더 영역을 클릭 혹은 드래그할 때마다 (스타일을 제거해서 화면에 보이지 않는) 핸들이 해당 위치로 이동해서 값이 변경된다. 기본적인 구현 방법은 다음과 같다.이미지 1, 이미지 2를 감싸는 마스크 요소, ran..
[JS] 자바스크립트 랜덤 색상(Random Color) 생성하기
[JS] 자바스크립트 랜덤 색상(Random Color) 생성하기
2025.03.04HEX 색상 코드는 RGB 색상을 RRGGBB 형식의 16진수로 표현한다. HEX 코드의 최소 값은 #000000(검은색, 10진수 0), 최댓값은 #FFFFFF(흰색, 10진수 16777215)이기 때문에 0~16777215 사이의 랜덤 숫자를 16진수로 변환하고 #를 붙이면 랜덤한 HEX 색상 코드가 된다.export const getRandomColor = ({ transparent = false, transProbability = 0.2,} = {}) => { // transProbability 확률로(기본값 20%) 투명값 반환 if (transparent && Math.random() Math.random() 메서드는 0 이상 1 미만(0 ≤ x approximately uniform..
[React] 리액트의 올바른 useEffect 사용팁
[React] 리액트의 올바른 useEffect 사용팁
2025.01.21리액트의 useEffect는 데이터 가져오기, 구독 관리, DOM 업데이트, 사이드 이펙트 처리 등 다양한 작업에 사용된다. 그러나 useEffect를 과도하게 사용하면 성능 저하, 불필요한 렌더링, 디버깅의 복잡성 같은 문제가 발생할 수 있다. "Leave useEffect Alone!" 라는 가이드 글을 참고하여 올바른 useEffect 사용법에 대한 추가 설명을 덧붙여서 정리해 봤다. 경쟁 상태(Race Condition) ⭐경쟁 상태는 여러 비동기 작업이 동시에 실행될 때, 실행 순서나 결과가 예측하지 않은 방식으로 작동하는 현상을 가리킨다. 아래 코드에서 버튼을 여러 번 클릭하면 counter 값이 증가하고, 각 요청은 랜덤한 시간만큼 대기한 후 response 상태를 업데이트한다. 하지만 이..
[JS] 자바스크립트 코드 최적화 기법 모음
[JS] 자바스크립트 코드 최적화 기법 모음
2024.12.07"Optimizing Javascript for fun and for profit"라는 자바스크립트 최적화 관련 글의 영어 원문과 번역본을 바탕으로, 부가적인 설명을 추가하고 이해하기 쉬운 언어로 정리해 봤다. 예시 코드도 조금 더 다듬어서 개선했다. 문자열 비교 피하기 Avoid string comparisons문자열 비교는 각 문자를 순차적으로 비교해야 하므로 O(n) 시간복잡도를 갖는다. 특히 문자열 enum을 사용하는 것은 성능 최적화 관점에서 피해야 할 패턴 중 하나다. 자바스크립트 엔진에서 정수(Integer)는 일반적으로 값으로 전달되며, 비교 연산 시 바로 값을 확인할 수 있어 빠르게 처리할 수 있다. 반면 문자열은 메모리에 저장된 위치(포인터)를 참조해 값을 가져온 후 비교하기 때문에 ..
[Algorithm] 슬라이딩 윈도우 Sliding Window 알고리즘 톺아보기
[Algorithm] 슬라이딩 윈도우 Sliding Window 알고리즘 톺아보기
2024.11.11슬라이딩 윈도우 알고리즘 개념슬라이딩 윈도우 알고리즘(Sliding Window Algorithm)은 배열과 같은 선형 자료구조에서 연속된 구간 내의 데이터를 효율적으로 처리하기 위해 사용하는 기법이다. 특히 배열 내 연속된 요소의 합, 최댓값, 최솟값 등을 계산할 때 유용하다. 슬라이딩 윈도우는 이름 그대로 고정/가변 크기의 범위(윈도우)를 이동(슬라이드) 시키면서 필요한 계산을 반복하는 방식이다. 이때 전체 배열을 한 번만 순회하면 되기 때문에 중복 연산을 피하고 시간 복잡도를 개선할 수 있다. 일반적으로 슬라이딩 윈도우 기법을 사용하면 O(n)의 시간 복잡도로 문제를 해결할 수 있다.// 주어진 배열에서 연속된 k개 요소의 최대 합을 찾는 함수function maxSumSubarray(arr, k)..
[React] 리액트 코드를 개선할 수 있는 4가지 팁
[React] 리액트 코드를 개선할 수 있는 4가지 팁
2024.10.28TLDR이벤트 핸들러에 커링 활용컴포넌트 책임 분리조건문 대신 객체 map 사용React 라이프사이클 외부에 독립적인 변수 배치 4 React Tips1. 커링 활용user 상태는 name, surname, address 3개 속성을 가지며, 이에 대응하는 3개의 input 필드가 필요하다. 아래 코드에선 각 필드를 처리하기 위해 별도의 핸들러를 각각 만들어서 사용하고 있지만, 이 핸들러들은 value가 할달될 속성 이름만 다를 뿐 나머지 로직이 동일하기 때문에 코드 중복이 발생하고 있다.export default function App() { const [user, setUser] = useState({ name: "", surname: "", address: "", }); co..
[Dart] 자바스크립트 개발자의 다트 학습 - Part 2
[Dart] 자바스크립트 개발자의 다트 학습 - Part 2
2024.08.21Dart와 JavaScript는 많은 개념을 공유한다. Dart 역시 이벤트 루프에서 실행되고, 비동기 프로그래밍을 위한 Future라는 개념이 존재한다. Future는 자바스크립트의 Promise와 비슷하다. Dart는 정적 타입 언어이기 때문에 타입스크립트를 사용한 경험이 있다면 Dart를 더 쉽게 배울 수 있다. Dart와 JavaScript의 다른 점과 비슷한 점을 Learning Dart as a JavaScript developer 페이지에 자세히 설명돼 있어서 정리해봤다. 💡 아래는 Part 1에서 이어지는 Part 2 내용. Asynchrony자바스크립트와 마찬가지로 Dart 가상머신(VM)은 단일 이벤트 루프를 사용하여 코드를 실행한다. 모든 코드는 동기적으로 실행되지만, 비동기 도구..
[Dart] 자바스크립트 개발자의 다트 학습 - Part 1
[Dart] 자바스크립트 개발자의 다트 학습 - Part 1
2024.08.21Dart와 JavaScript는 많은 개념을 공유한다. Dart 역시 이벤트 루프에서 실행되고, 비동기 프로그래밍을 위한 Future라는 개념이 존재한다. Future는 자바스크립트의 Promise와 비슷하다. Dart는 정적 타입 언어이기 때문에 타입스크립트를 사용한 경험이 있다면 Dart를 더 쉽게 배울 수 있다. Dart와 JavaScript의 다른 점과 비슷한 점을 Learning Dart as a JavaScript developer 페이지에 자세히 설명돼 있어서 정리해봤다. Conventions and lintingDart 팀에서 공식적으로 코드 스타일 가이드와 Lint 도구를 제공한다.dart fix를 통해 코드 이슈를 발견하고 수정할 수 있다.dart format을 통해 코드를 포매팅할 ..
[Algorithm] 프로그래머스 - 피로도 / 백트래킹으로 모든 부분집합 찾기
[Algorithm] 프로그래머스 - 피로도 / 백트래킹으로 모든 부분집합 찾기
2024.07.29프로그래머스 레벨 2 피로도 문제는 던전 목록과 HP가 주어졌을 때 방문할 수 있는 최대 던전의 수를 반환해야 한다. 각 던전은 최소 피로도와 소모 피로도를 가진다. 최소 피로도는 해당 던전을 방문하기 위해 필요한 최소 HP를 의미하고, 소모 피로도는 말 그대로 해당 던전을 방문했을 때 소모되는 HP를 나타낸다. 문제에서 주어지는 매개변수는 아래와 같다. k : 시작 HP. e.g., 80dungeons : [최소 피로도, 소모 피로도]로 이루어진 던전 목록. e.g., [[80,20],[50,40],[30,10]] 최소 피로도와 소모 피로도가 각각 다르기 때문에 방문 순서에 따라 방문할 수 있는 던전의 수가 달라진다. 예를 들어 [[80,20],[50,40],[30,10]] 던전 목록에서 2~3번(i1..
[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색)
[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색)
2024.07.18큰 숫자를 읽기 쉽게 만들기 위해 일반적으로 천 단위마다 콤마(,)같은 구분자를 추가한다. 천 단위 구분은 한국을 포함한 많은 국가에서 표준으로 사용하는 숫자 표기법이다. 자바스크립트에선 Number.toLocaleString() 혹은 Intl.NumberFormat 메서드를 이용하면 구분자를 추가할 수 있다. 참고로 이 메서드들은 기본적으로 실행 환경의 로케일 설정을 따르기 때문에 로케일에 따라 결과가 달라질 수도 있다. 예를 들어 독일 로케일(de-DE)은 천 단위 구분자로 온점(.)을 사용하고, 소수점 구분자로 콤마(,)를 사용한다. — 참고 포스팅const number = 123456.789;// 로케일을 지정하지 않으면 기본 로케일(navigator.language)을 따른다Intl.Number..
[JS] 자바스크립트 reduce() 메서드 활용 예시 모음
[JS] 자바스크립트 reduce() 메서드 활용 예시 모음
2024.07.07Array.reduce() 메서드는 배열에 있는 각 요소에 콜백 함수를 실행하여 누적된 계산 결과를 하나의 값으로 반환한다. 자바스크립트에서 제공하는 filter(), map() 등의 배열 메서드는 모두 reduce()로 구현할 수 있고, 이 외에도 다양한 활용 방법이 있기 때문에 개인적으로 가장 자주 사용하는 배열 메서드다. reduce() 메서드의 구문은 아래와 같다.reduce(callbackFn, initialValue?) callbackFn 콜백 파라미터accumulator : 이전 callbackFn 반환값초기값 지정 시 콜백을 처음 호출했을 때 값 : initialValue초기값 미지정시 콜백을 처음 호출했을 때 값 : array[0]currentValue : 현재 순회하고 있는 값초기값 지..
[JS] 자바스크립트 Set 객체의 집합 연산 메서드 (교집합, 합집합 등)
[JS] 자바스크립트 Set 객체의 집합 연산 메서드 (교집합, 합집합 등)
2024.07.04TL;DR💡 ES6에 도입된 Set 객체는 중복을 허용하지 않는 고유한 값들을 저장하는 데이터 구조다. Set은 동일한 값을 두 번 저장할 수 없기 때문에 중복된 값을 추가하면 자동으로 무시한다. 또한 삽입 순서를 기억하고, 원시형과 참조형 값을 모두 지원한다 — 참고 포스팅 Firefox 127 버전부터 별도의 폴리필 없이 크롬(Chrome)을 포함한 대부분의 주요 브라우저 엔진에서 교집합, 합집합, 차집합 등 집합 연산을 수행하는 새로운 Set 메서드를 지원한다. 크로스 브라우저에서 지원하는 메서드는 다음과 같다. A.intersection(B) : 두 Set이 공통으로 가지는 요소를 포함한 새로운 Set 반환 — 교집합A.union(B) : 두 Set이 가진 모든 요소를 포함한 새로운 Set 반환..