ji-frontdev

AI는 매년 상상 이상의 속도로 발전하고 있습니다.2024년이 ‘AI 대중화의 시작’을 알린 해였다면, 2025년은 ‘초개인화 & 실질적 가치 창출’의 시대로 자리 잡고 있습니다.이번 포스팅에서는 2024년과 2025년 AI 트렌드를 비교하고, 각 산업별 활용 현황을 정리해보겠습니다.🌟 2024년 AI 트렌드: 대중화의 시작1. AI의 대중화기업들이 AI를 속속 도입하며 업무 효율 & 고객 경험 개선에 집중특히 Generative AI가 디자인, 마케팅, 콘텐츠 제작에서 혁신 주도 ✨2. Generative AI 확산텍스트, 이미지, 음악 생성까지 가능한 창조형 AI맞춤형 콘텐츠 제작 & 마케팅 강화에 활용3. 산업별 AI 활용 확대금융 : 사기 탐지 & 리스크 평가의료 : 영상 분석 & 신약 개발 지..

정육각, 초록마을 인수 후 자본잠식… 무엇이 잘못되었나?기술 관점에서 본 기업 분석📊 유니콘 후보에서 회생 절차까지2016년 설립된 정육각은 "도축 후 4일 이내 배송"을 핵심 가치로 내세운 푸드테크 스타트업입니다. 2019~2021년 동안 누적 투자금 약 1,200억 원을 유치했고,2022년에는 기업가치 4,000억 원을 인정받아 유니콘 후보로 주목받았습니다.같은 해, 정육각은 유기농·친환경 식품 유통업체 초록마을을 약 900억 원에 인수했습니다.하지만 3년도 채 되지 않아 양사 모두 자본잠식과 회생 절차에 들어갔습니다.💭 [내 분석] "온라인 신선식품 기술 + 전국 오프라인 유통망"의 시너지를 노린 전략으로 보이지만, 결과적으로는 기술과 사업모델의 부조화가 주요 실패 원인이었다고 판단됩니다.🛠️..

삽질의 시작 😱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 설정 추가하기 (가장 ..