ji-frontdev

[Vite defineConfig 설정 기본편] root, base, plugins, resolve, build, 상황별 예시

1. 🧱 defineConfig()와 설정 구조 개요Vite는 ESM 기반의 번들러로, vite.config.ts 또는 .js 파일을 통해 설정을 제공합니다.이 설정 파일에서 defineConfig()는 타입 지원과 자동 완성을 위한 래퍼입니다.// 기본 구조import { defineConfig } from 'vite';export default defineConfig({ root: '.', // 프로젝트 루트 (index.html 기준) plugins: [], // 플러그인 배열 resolve: {}, // 경로 해석 관련 설정 build: {}, // 빌드 설정 (rollup 옵션 포함)}); 2. 🔍 주요 설정 속성 복기 ..

tsconfig.json 설정 오류 해결: allowImportingTsExtensions는 왜 에러가 날까?

📌 에러 원인:allowImportingTsExtensions 옵션은 TypeScript가 .ts 또는 .tsx 확장자를 명시적으로 import하는 것을 허용하는 기능입니다. import { something } from './utils.ts'; 이런 식의 import를 허용하려면 TypeScript가 실제로 JavaScript 파일을 emit하지 않는 설정이어야 합니다. 그렇지 않으면 문제가 발생할 수 있기 때문이에요.그래서 이 옵션을 사용하려면 아래 중 하나를 설정해야 합니다:"noEmit": true👉 TypeScript가 아무 파일도 출력하지 않음"emitDeclarationOnly": true👉 타입 정의 파일(.d.ts)만 출력함✅ 해결 방법:방법 1. noEmit 설정 추가하기 (가장 ..

여러 파일 압축 및 다운로드 라이브러리들이 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 개발 방식의 문제점)기존 방식에서는 반복되는 로직이 있을 경우, 여러 컴포넌..

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