자바스크립트
[React] 리액트 이미지 미리보기(업로드) 구현 / File API
[React] 리액트 이미지 미리보기(업로드) 구현 / File API
2024.05.02file 타입의 태그와 File API를 이용해 컴퓨터에 저장된 이미지를 업로드할 수 있다. 이미지 태그 자체를 “파일선택” 버튼으로 기능하도록 할 수 있고, 라벨의 스타일을 수정하는 방식으로 “파일 선택”(파일 필드) 스타일을 변경할 수도 있다. 기본 구조업로드한 이미지는 컴포넌트 내부 상태(image)로 관리하고, 업로드 하기 전엔 기본 프로필 사진(fallbackUrl)을 표시하도록 한다. 태그의 type을 file로 명시하면 “파일 선택” 버튼이 표시된다. accept 속성엔 허용할 파일 유형을 .확장자 형태로 입력한다. 확장자는 대소문자를 구분하지 않는다. 여러 값을 입력할 땐 콤마 , 로 구분한다. 특정 타입(MIME 유형)의 모든 확장자를 허용하고 싶으면 타입/* 을 입력한다. 허용하지..
[Algorithm] 자바스크립트 쌍(pairs)을 포함하는 배열에서 유니크 넘버 찾기
[Algorithm] 자바스크립트 쌍(pairs)을 포함하는 배열에서 유니크 넘버 찾기
2024.05.02아래 배열에서 단 한번만 나열되는 유니크 숫자는 17이다. 1과 3은 쌍을 이루고 있기 때문에 두번씩 나열되고 있다. 이런 배열에서 유니크 넘버(17)만 찾아내려면 어떻게 해야할까?[1, 3, 17, 3, 1] Naive Solution — O(n*n)2중 for문을 사용한 예시. 모든 숫자를 한번씩 돌아가면서 검사해야 되기 때문에 O(n*n)의 시간복잡도를 갖는다. 배열 길이가 5라면 정답을 찾을 때까지 최대 25번의 순회가 이뤄질 수도 있다.function singleNumber(nums) { for (let i = 0; i Linear Solution — O(n)💡 O(n)은 알고리즘 실행 시간이 선형이 되는 것을 뜻한다. 선형 시간(Linear time; 线性时间)이란 배열 길이(n)와 비례..
[JS] 자바스크립트 RORO 디자인 패턴 / 스택 트레이스 / 에러 전파
[JS] 자바스크립트 RORO 디자인 패턴 / 스택 트레이스 / 에러 전파
2024.05.01TL;DRRORO 패턴은 Receive an Object, Return and Object의 약자다. 함수의 파라미터와 리턴값 모두 객체인걸 말한다. ES6부터 지원하는 구조분해할당 덕분에 자바스크립트에서도 RORO 패턴을 사용할 수 있다. 파라미터 정의 방식(RORO 패턴)만 살짝 바꿨지만 가독성은 매우 좋아진다. RORO 패턴의 장점은 아래와 같다. 이름이 지정된 파라미터 (Named parameters)명시적인 파라미터 기본값 (Cleaner default parameters)더 많은 정보 반환 (Richer return values)함수 합성 용이 (Easy function composition) 이름이 지정된 파라미터파라미터에 {} 중괄호만 추가해주면 간단하게 RORO 패턴을 적용할 수 있다. ..
[Algorithm] 프로그래머스 비밀지도 문제 풀이
[Algorithm] 프로그래머스 비밀지도 문제 풀이
2024.04.30글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 2018년 카카오 블라인드 테스트 1차 비밀지도 문제(문제 번호 17681). 파라미터는 arr1 arr2 n 이렇게 3개를 받으며, n은 한 변의 길이를 나타낸다(배열 각 요소를 이진수로 변환한 후의 length). ❶ 2개의 배열을 받아[9, 20, 28, 18, 11]; // arr1[30, 1, 21, 17, 28]; // arr2 ❷ 배열의 각 요소를 2진수로 변환한 뒤 (10진수 → 2진수 변환은 노트 참고)['01001', '10100', '11100', '10010', '01011']; // arr1['11110', '00001', '10101', '10001', '11100']; // arr2 ❸ 0 → ' ' 공..
[JS] 정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)
[JS] 정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)
2024.04.30검색창에 입력한 키워드와 일치하는 단어를 하이라이트(강조) 하기 위해 split, join 등을 사용할 수 있지만 코드가 다소 복잡해진다. 정규식을 사용하면 깔끔하게 구현할 수 있다. 하이라이터 함수 정의 ▼const getHighlightedText = (text, query) => { const re = new RegExp(`(${query})`, 'gi'); if (query !== '' && text.match(re)) { const parts = text.split(re); return ( {parts.map((part) => part.toLowerCase() === query.toLowerCase() ? ( {part} ..
[JS] Lodash _.memoize 소스 코드 톺아보기
[JS] Lodash _.memoize 소스 코드 톺아보기
2024.04.30_.memoize 소스코드Lodash 라이브러리의 Memoize 메서드를 사용하면 이전에 진행했던 연산 결과를 재사용할 수 있다. 실시간 검색창을 구현할 때 입력한 키워드에 대한 API 호출을 시도하는데, 이미 검색했던 키워드는 결과를 캐싱해놓고 재사용하면 API 중복 호출을 방지할 수 있다. 이때 Lodash의 Memoize를 활용할 수 있다(물론 키워드에 대한 결과값이 자주 변한다면 캐싱 기능을 사용할 필요 없다) 실시간 검색창에 활용한 Memoizeimport _ from 'lodash';export const requestQuotes = _.memoize(async (title) => { const res = await fetch( `https://animechan.vercel.app/ap..
[JS] 자바스크립트 프록시 Proxy 객체 / Reflect
[JS] 자바스크립트 프록시 Proxy 객체 / Reflect
2024.04.29글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 Vue.js에서 Reactive로 반응성을 주입한 데이터를 콘솔로 찍어보면 아래처럼 Proxy `{ ... }` 형태로 출력한다. Proxy를 사용해서 입력한 데이터(상태)를 한 번 감싼 것이다. 이렇게 Proxy를 이용하면 객체 프로퍼티의 읽기 / 쓰기 같은 작업을 중간에 가로채서 원하는 작업을 수행하도록 할 수 있다. 사용 방법const proxy = new Proxy(target, handler); target : Proxy로 감쌀 원본 객체. 함수를 포함한 모든 객체 가능handler : get이나 set 같은 동작을 가로채는 메서드(트랩; trap)이 담긴 객체. 객체를 proxy로 감싼 후, handler에 상응하는 ..
[JS] 자바스크립트 객체 프로퍼티 설명자 / 플래그 / 옵서버 패턴
[JS] 자바스크립트 객체 프로퍼티 설명자 / 플래그 / 옵서버 패턴
2024.04.29글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 프로퍼티 플래그객체는 값(value) 외에도 플래그(flag)라는 특별상 속성이 있다. 플래그는 아래 3가지 종류가 있다. 일반적으로 객체를 선언하면(객체 리터럴 혹은 Object 생성자 함수 사용) 프로퍼티의 플래그는 `true`를 기본값으로 가진다. 프로퍼티 값 수정프로퍼티 삭제반복문 나열플래그 수정`writable: false`❌✅✅✅`enumerable: false`✅✅❌✅`configurable: false`✅❌✅❌ writable (수정)`true` : 프로퍼티 값 수정 가능`false` : 프로퍼티 값 수정 불가 (프로퍼티 삭제는 가능)enumerable (열거)`true` : 반복문으로 나열 가능`false` : 반..
[JS] 자바스크립트 디바운스 Debounce, 스로틀 Throttle 구현하기
[JS] 자바스크립트 디바운스 Debounce, 스로틀 Throttle 구현하기
2024.04.29디바운스는 input 이벤트에(리액트에선 onChange), 스로틀은 scroll 이벤트에 자주 사용된다. 디바운스는 아무리 많은 이벤트가 발생해도 마지막 이벤트만 실행하는 반면, 스로틀은 적어도 `n` 밀리초 마다 정기적으로 기능 실행을 보장하는 점이 가장 큰 차이점. 참고로 Lodash 라이브러리에 디바운스와 스로틀 메서드가 포함되어 있다._.debounce(func, wait, [options])_.throttle(func, wait, [options]) 디바운스 | Debounce이벤트가 연속적으로 발생해도 항상 마지막 이벤트만 처리이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술 디바운스 예시 코드 ▼function debounce(callback, ms) { ..
[React] 리액트 요소 드래그앤드롭 구현
[React] 리액트 요소 드래그앤드롭 구현
2024.04.28TL;DR드래그할 수 있는 요소로 변경 — draggable={true}드래그 시작 — onDragStart 이벤트 트리거드래그하고 있는 요소의 인덱스 정보 저장 — state.draggedFrom드래그 상태 true로 변경 — state.isDragging이벤트 트리거 시점의 엘리먼트 리스트 저장 — state.originalOrder마우스 커서가 드롭 가능한 영역에 있을 때 — onDragOver 이벤트 트리거drop 이벤트를 사용할 수 있도록 dragOver 기본 이벤트 방지 — e.preventDefault()마우스 포인터 위치에 있는 요소의 인덱스 저장 — state.draggedTo엘리먼트 순서 변경 — state.updatedOrder 드래그중인 아이템을 마우스 포인터 위치(draggedTo..
[CS] 진법 계산 방법 — 10진수 ⇆ 2진수 변환
[CS] 진법 계산 방법 — 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..
[React] 리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티
[React] 리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티
2024.04.27자식 요소의 콘텐츠가 부모 요소보다 크다면, 부모 요소에 스크롤이 생기고, 마우스 휠로 스크롤할 수 있다. 마우스 휠 외에도 click / move 이벤트를 이용해 마우스 드래그로 스크롤하도록 만들 수 있다. TL;DR❶ 마우스를 클릭했을 때`clientX`, `clientY` (뷰포트 기준)좌표와, 요소의 스크롤 위치 `scrollLeft`, `scrollTop` 저장클릭 상태 `true`로 변경(CSS) `cursor: grabbing user-select: none` ❷ 클릭한 상태에서 마우스를 이동(드래그)했을 때①이동을 멈춘 지점(clientX/Y)과 ②마우스를 클릭한 지점**(clientX/Y)**을 뺀 값 계산 — 스크롤한 범위(요소의 현재 스크롤 위치)와 (스크롤한 값)을 뺀 위치로 스크..