ji-frontdev

[npm trends] 파일 압축 및 다운로드 관련 주요 라이브러리 비교(archiver,filesaver,jszip,pako,zipjs-browserify)

여러 파일 압축 및 다운로드 라이브러리들이 npm에서 사용되고 있습니다. 각각의 라이브러리는 사용 목적이나 성능 면에서 차별화된 특성을 가지고 있기 때문에, 어떤 작업에 어떤 라이브러리가 적합할지 잘 알고 선택하는 것이 중요합니다. 이번 글에서는 **archiver, file-saver, jszip, pako, zipjs-browserify**의 주요 특성과 용도를 비교해보겠습니다.1. Archiver설명: archiver는 주로 서버 측에서 압축 파일을 생성하는 데 사용되는 라이브러리입니다. 다양한 형식(zip, tar, 7z 등)을 지원하며, 서버에서 파일을 생성하여 클라이언트로 전송할 때 매우 유용합니다.주요 기능:여러 압축 형식(zip, tar 등) 지원.서버 측에서 압축 파일을 동적으로 생성 가..

[leetcode] Palindrome Number/ 팔린드롬 수, 배열 풀이 vs 공간 최적화 풀이

🌀 팔린드롬(Palindrome) 수란?팔린드롬(Palindrome)은 앞에서 읽든 뒤에서 읽든 똑같은 수를 말합니다.예를 들어:121 → 팔린드롬 ✅12321 → 팔린드롬 ✅123 → 팔린드롬 ❌-121 → 음수는 회문이 아님 ❌📌 문제 설명 (LeetCode 9. Palindrome Number)주어진 정수 x가 팔린드롬인지 확인하는 함수를 작성하시오.단, 음수는 팔린드롬이 아니며, 숫자를 문자열로 바꾸지 않고 해결하길 권장합니다. // Example 1:Input: x = 121Output: true// Example 2:Input: x = -121Output: false// Example 3:Input: x = 10Output: false ✅ 풀이 1: 배열을 이용한 직관적인 방법💡 아이디어..

[tailwindcss v4] PostCSS 플러그인 호환 문제 해결

[vite] Internal server error: [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration. Plugin: vite:cssPre-ransform error: [postcss] It looks like you're trying to use `tailwindcss` ..

[Container/Presentational 패턴] Container/Presentational 패턴이란?

프론트엔드 개발자로서 4~5년 전 React 프로젝트를 진행하면서 Container/Presentational 패턴을 사용했던 경험이 있다.당시에는 패턴에 대해 깊이 이해한 상태는 아니었지만, 로직과 UI 코드가 얽혀 유지보수가 어려워지자 자연스럽게 관심사를 분리해야겠다는 필요를 느꼈고, 이 패턴을 도입했다.돌아보면 그 선택은 꽤 합리적이었다. 그리고 최근 React의 패턴 흐름을 공부하면서,과거의 구조와 현재의 방식이 어떻게 변화해왔는지를 다시 되짚어보게 되었다.🧩 Container/Presentational 패턴이란?1. 왜 나왔는가?React가 등장한 초기에는 컴포넌트 안에서 로직, 상태, UI 모두를 처리하는 방식이 일반적이었다.하지만 점점 규모가 커지고 협업이 늘어나면서, 다음과 같은 문제가 ..

알고리즘 문제를 풀다 보면 다양한 데이터 타입을 마주하게 됩니다.특히 Array, Object, Map, Set은 자주 사용되며,타입마다 반복하는 방식과 형변환 방법이 다르기 때문에 정리해 두는 것이 중요합니다.이 글에서는 각 타입별 반복 방식과 타입 간 형변환 예제를 정리해봅니다.📌 1. Array (배열)✅ 반복문const arr = [1, 2, 3];// forfor (let i = 0; i { console.log(idx, val);}); 📌 2. Object (객체)✅ 반복문const obj = { a: 1, b: 2, c: 3 };// for...infor (const key in obj) { console.log(key, obj[key]);}// Object.keysObject.ke..

1️⃣ Custom Hook 기본 구조Custom Hook은 기본적으로 함수형 컴포넌트 내부에서 재사용할 로직을 분리하는 패턴.📌 구성 요소반드시 use 접두사를 붙여야 함 → 예: useFetch, useAuth내부에서 React Hook(useState, useEffect, useContext 등)을 사용할 수 있음UI와 독립적이어야 하며 JSX를 반환하지 않음const useCustomHook = () => { // 상태 관리 const [state, setState] = useState(null); // 부수 효과 실행 useEffect(() => { // 로직 실행 setState('Hello Custom Hook!'); }, []); return state;};​ 이제 ..

📌 Custom Hook 패턴 개요1️⃣ Custom Hook이란?Custom Hook은 React의 기존 Hooks(useState, useEffect, useContext 등) 을 조합하여반복되는 로직을 재사용 가능하도록 추출한 함수.컴포넌트 내부에서 자주 사용되는 로직을 별도의 함수로 분리함으로써 코드의 가독성과 유지보수성을 향상시킴.✅ 특징✔️ use 접두사를 반드시 붙여야 React가 Hook으로 인식함✔️ JSX를 반환하지 않음 (UI가 아닌 로직만 다룸)✔️ 다른 Hook(useState, useEffect, useMemo 등)을 내부에서 사용할 수 있음2️⃣ 왜 Custom Hook이 필요한가? (기존 React 개발 방식의 문제점)기존 방식에서는 반복되는 로직이 있을 경우, 여러 컴포넌..

코딩 테스트에서 자주 등장하는 문제 유형 중 하나가 2Sum과 3Sum 문제입니다. 이 문제들은 배열 내에서 특정 조건을 만족하는 숫자 조합을 찾는 문제로, 효율적인 접근 방식이 중요합니다.🔹 1. 2Sum 문제 접근 방식문제 개요:주어진 정수 배열 nums에서, 두 숫자의 합이 target이 되는 인덱스 쌍을 찾는 문제입니다.같은 요소를 두 번 사용할 수 없으며, 중복된 결과를 허용하지 않습니다.접근 방식 및 시간복잡도: 1️⃣ Brute Force (완전 탐색) → O(N²)모든 두 숫자의 조합을 확인하는 방법.❌ O(N²)으로 입력 크기가 커지면 비효율적코드 예시:function twoSum(nums: number[], target: number): number[] { for (let i =..

JavaScript에서 큰 숫자를 다뤄야 하는 경우가 종종 있습니다. 특히 팩토리얼 같은 연산을 할 때 Number 타입의 한계를 경험하게 됩니다. 이 글에서는 JavaScript에서 큰 숫자를 관리하는 방법과 BigInt의 필요성, 그리고 실무에서 BigInt가 사용되는 사례까지 살펴보겠습니다. 💡1. JavaScript number 타입의 한계 🚧 JavaScript의 기본 숫자 타입인 Number는 64비트 부동소수점(double-precision floating point) 으로 표현됩니다. JavaScript에서 오차 없이 안전하게 표현할 수 있는 정수의 범위는 다음과 같습니다.console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991console..

연속된 구간(부분 배열 또는 부분 문자열)을 다룰 때 사용되며, O(n)의 시간 복잡도로 효율적인 문제 해결이 가능합니다.🔹 슬라이딩 윈도우 알고리즘 개념💡 일반적인 접근법초기 윈도우를 설정 (길이 k의 첫 번째 부분 배열 또는 문자열)윈도우를 한 칸씩 이동하면서 이전 값은 제거하고 새로운 값을 추가필요한 계산을 업데이트 (예: 합, 평균, 최대값, 최소값 등)모든 윈도우에 대해 최적값을 찾음💡 시간 복잡도단순 O(n * k) 브루트포스 접근법을 O(n)으로 최적화할 수 있음모든 원소를 한 번씩만 처리하므로 O(n)🔹 슬라이딩 윈도우 알고리즘 유형1️⃣ 고정 크기(Fixed Size) 슬라이딩 윈도우📌 길이가 k인 고정된 윈도우를 이동시키며 계산하는 방식📌 대표 문제: 최대/최소 합, 평균, ..