ji-frontdev

삽질의 시작 😱React 프로젝트를 진행하던 중, 서버에서 Base64로 인코딩된 한글 데이터를 받아서클라이언트에서 디코딩해야 하는 상황이 생겼습니다."Base64 디코딩이야 간단하지!" 하며 당연히 atob()를 사용했는데... // 서버에서 받은 Base64 인코딩된 한글const base64Data = "7JWI64WV7ZWY7IS47JqU"; // "안녕하세요"를 base64로 인코딩한 값// 단순한 접근const decoded = atob(base64Data);console.log(decoded); // ì???íì¸ì! (깨진 한글...) 결과는 참담한 한글 깨짐 현상이었습니다. 분명 서버에서는 제대로 인코딩했는데 왜 깨질까요?이 문제를 해결하기 위해 escape와 decodeURICompo..

2025년 6월 25일, 제129회 Ecma 총회에서 ECMAScript 2025 언어 사양이 공식 승인되었습니다.이번 업데이트는 JavaScript의 실용성과 생산성을 높이는 핵심 기능들이 대거 포함되어 있어, 개발자 경험을 한 단계 끌어올리는 중요한 전환점이 될 것으로 기대됩니다.🔍 주요 기능 요약🌀 Iterator Helpers: 함수형 프로그래밍 패턴을 반복자에 적용 가능🟦 Set Methods: 교집합, 합집합 등 집합 연산의 표준화📦 JSON Modules: JSON 파일을 import로 직접 불러오기💥 Promise.try(): 동기/비동기 오류 처리의 간결화🔢 Float16Array: 메모리 효율적인 16비트 부동소수점 지원🧼 정규표현식 개선: 유니코드, 이모지, 캡처 그룹 개..

📱 앱 스킴(URL Scheme)이란?– Android와 iOS의 앱 연결 방식과 차이를 이해하기✨ 목차앱 스킴이란 무엇인가?앱 스킴과 딥링크는 어떤 관계인가?Android와 iOS의 앱 스킴 처리 방식앱 스킴 충돌 시 어떻게 동작할까?앱 미설치 시 처리 방식앱 선택 UI 제공 여부실제 서비스 적용 시 팁마무리 요약1. ✅ 앱 스킴이란 무엇인가?**앱 스킴(URL Scheme)**은 웹 브라우저나 다른 앱에서 특정 앱을 직접 실행하기 위한 일종의 주소 규칙입니다.예:kakaotalk://inappbrowser → 카카오톡 실행mobileid://requestVP → 모바일 신분증 앱 실행앱이 설치되어 있다면 해당 스킴을 통해 앱을 직접 호출할 수 있고,파라미터를 함께 전달해 앱 내 특정 기능까지 바로 ..

1. HOC란 무엇인가?**Higher-Order Component(HOC)**는 “컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수” 즉, 하나의 컴포넌트를 감싸 공통된 로직이나 기능을 주입하는 패턴이다. function withFeature(WrappedComponent: React.ComponentType) { return function EnhancedComponent(props: P) { // 공통 로직 return ; };}​ 2. HOC 패턴의 역사와 등장 배경🕰️ 언제 등장했나?**React Hooks가 등장하기 전 (React 16.8 이전)**에 유일한 로직 재사용 방식이었다.React 공식 문서에서도 권장되던 방식.🤔 왜 등장했나?공통 기능 (로딩, 인증, 로..

프론트엔드 개발자로서 트렌드, 기술, 도구 변화가 빠르기 때문에 꾸준히 정보 얻는 게 중요해요. 아래는 프론트엔드 개발자가 구독하거나 즐겨찾기 해두면 좋은 뉴스레터, 사이트 등을 정리해봤어요.📬 뉴스레터 (이메일로 받아보기 좋은 소스)Frontend Focushttps://frontendfoc.us매주 발행되는 프론트엔드 뉴스 요약 (HTML, CSS, JS 중심)JavaScript Weeklyhttps://javascriptweekly.comJS 중심으로 유용한 라이브러리, 아티클, 도구 등을 매주 소개React Statushttps://react.statuscode.comReact 생태계 관련 소식 요약 (라이브러리, 아티클, 릴리즈 등)CSS Weeklyhttps://css-weekly.com최신..

Next.js의 App Router 기반 프로젝트에서 탭 UI를 구성하고, 각 탭에 컴포넌트를 연결하는 작업까지는 무리 없이 진행되었다.버튼을 클릭하면 탭이 바뀌고, 화면도 전환되는 인터랙션은 제대로 작동했다.하지만 치명적인 문제가 있었다.🧨 화면은 떴지만, 정작 중요한 데이터는 비어 있었다탭을 눌러도 아무런 정보가 표시되지 않았다.버튼은 잘 보였고, 레이아웃도 정상이라 “정상 동작”처럼 보였지만, 실제로는 데이터가 끝내 표시되지 않았다.원인은 클라이언트 사이드에서 데이터를 요청하는 구조 때문이었다.useQuery를 사용해 데이터를 가져오도록 했지만, 이 방식은 브라우저가 로드된 뒤 실행된다.그래서 브라우저에서 API 요청이 이루어지고, 거기서 데이터를 받아야만 실제 콘텐츠가 보여지는 구조였던 것이다...

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

📌 에러 원인: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 등) 지원.서버 측에서 압축 파일을 동적으로 생성 가..

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