ji-frontdev

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

🌀 팔린드롬(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: 배열을 이용한 직관적인 방법💡 아이디어..

[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` ..

프론트엔드 개발자로서 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 개발 방식의 문제점)기존 방식에서는 반복되는 로직이 있을 경우, 여러 컴포넌..