어제의 나보다 성장한 오늘의 나

세종대학교 광개토관에서 열린 FECONF 2025를 다녀왔다. 일단 사람이 정말 많았다. 프론트엔드 개발자들만 모여있는데도 천 명은 족히 넘게 온 것 같았다. 에어컨이 빵빵해도 더워서 땀이 났다. 컨퍼런스를 다녀오면 항상 현장에서 발표를 들을 때는 이해가 잘 되는데, 막상 집에 돌아오면 머릿속에 키워드 몇 개만 남는 느낌이다. 그래서 까먹기 전에 핸드폰에 적어둔 메모를 기반으로 간단히 리서치를 하고 정리를 해봤다. 1. Svelte 1.1) fine-grained reactivity리액트는 상태가 변경되면 해당 컴포넌트와 자식 컴포넌트가 모두 리렌더링 된다.하지만 svelte는 변경한 특정 상태만을 렌더링 되도록 할 수 있다고 한다.1.2) Virtual DOM을 쓰지 않고 실제 DOM을 직접 조작..

최근 유네스코 유니트윈(UNITWIN) 사업의 일환으로 2025.7.28 ~ 2025.8.1 기간동안 르완다에 출장을 다녀오게 되었다. 출장 일정이번 출장의 주요 일정은 르완다 수도 키갈리에서 진행되었다.현지에서는 Rwanda Polytechnic과 University of Rwanda 두 학교가 참여했고, 우린 이들을 대상으로 기업가 정신 훈련과 AI 관련 비즈니스 워크숍을 진행했다.75분 동안의 AI 관련 강연나는 ‘Product Development in AI Company’ 라는 주제로 약 75분간 강연을 진행했다. 발표에서는 다음과 같은 내용들을 다루었다. 프로젝트 관리AI 서비스 개발의 과정제품 고도화 방식기술 스택과 인프라Cursor, ChatGPT 등 실용적인 AI 툴들학생들은 AI 툴들이..

Next.js를 활용 하면서 많이 하게 되는 고민은, 이걸 대체 어떻게 써야 우리 팀에 적합하게 활용할 수 있을까? 입니다. 서버 컴포넌트(Server Components), 서버 액션(Server Actions) 등 Next.js의 다양한 기능들을 접해보면 분명히 강력하고 놀라운 부분도 많지만, 때로는 다양한 옵션들과 제약들로 인해 개발이 더 복잡해져서 오히려 개발 생산성이 저하 된다고 느껴질 때도 있습니다. 결국 좋은 기술이 있더라도 팀에 맞게 쓰지 않으면 오히려 독이 될 수 있다는 것이죠.이번 글에서는 실제 프로젝트에서 경험한 기존 데이터 요청 방식에서의 개발 생산성 이슈와, 이를 Server Action 중심으로 통합함으로써 개선해 본 경험에 대해 공유드리고자 합니다.다양한 방식으로 이뤄졌던 ..

이전에 프로젝트에서 클라이언트 애플리케이션 내의 모든 전역 상태를 Recoil로 통합 관리하고 있었습니다.하지만 프로젝트의 구조가 점점 바뀌면서, Recoil의 역할이 줄어들게 되었습니다. 서버 상태는 React Query로 대체우선, React Query의 도입으로 서버 상태 관리 방식이 완전히 바뀌었습니다.데이터 fetching, 캐싱, 로딩 상태 관리 등을 React Query로 손 쉽게 처리하면서 Recoil은 더 이상 서버 상태를 다루지 않게 되었습니다. Recoil은 여전히 클라이언트 전역 상태(UI 상태, Role)를 관리하는 용도로 일부 사용되고 있었습니다.제한적인 역할만 수행하면서도 비교적 무거운 Recoil을 계속 유지하는 것은 부담스럽다고 판단했습니다. Context API는 ??co..

이미지는 웹 성능에 직접적인 영향을 줄 정도로 용량이 큰 리소스입니다.특히 우리 서비스는 사진 포함 콘텐츠가 중심이기 때문에, 웹에 사용할 이미지 포맷을 어떻게 선택하느냐가 성능에 직접적인 영향을 줍니다. 그래서 대표적인 이미지 포맷인 JPG, PNG, WebP, HEIC, AVIF의 기술적 특징과 브라우저 호환성을 비교 분석하고, 어떤 포맷이 우리 서비스에 적합한지를 판단해봤습니다. 가장 익숙한 포맷인 JPG와 PNG를 먼저 비교하기 전에 얘네한테 사용된 압축 기술에 대해서 먼저 알아봅시다. 압축(Compression) 방식 이미지에서 사용하는 압축 방식은 크게 두 가지입니다. 1) 손실 압축 (Lossy Compression)압축률이 높아 파일 크기를 크게 줄일 수 있습니다.다만 파일 압축 시 이미지..

기존 인증 로직 관리 문제프로젝트 내 인증 및 권한 검사 로직이 각 페이지와 API 핸들러에 흩어져 있었습니다.각 페이지마다 인증/인가 처리를 하고 있으며,API 보호를 위해 각 handler 내부에 반복적으로 인증 검사를 호출하고 있었습니다.이런 방식은 새 기능을 추가할 때마다 중복 로직이 추가되고, 또 로직이 흩어져 있어서 관리도 어렵습니다.그래서 요청이 들어오는 가장 앞단, 즉 middleware에서 인증을 일괄 처리해보기로 했습니다.이렇게 하면 인증에 대한 처리를 각 페이지나 API에서 따로 신경 쓰지 않아도 되는 장점이 있습니다.Middleware으로 기존 로직 마이그레이션우선 기존의 접근 제어 로직을 middleware.ts에 그대로 옮겨 적용해봤습니다. middleware.tsexport a..

현재 서비스에는 현재 생성 상태를 확인하기 위해 주기적인 polling을 하거나, 사용자의 상호작용에 따라 데이터를 요청해야 하는 경우가 종종 있습니다.이러한 경우, 클라이언트 컴포넌트에서 여러 번 fetch를 트리거해야 하며, 이를 효율적으로 관리하기 위해 useQuery를 적극 활용하고 있습니다. useQuery를 사용하는 이유는 다음과 같은 처리를 간단하게 해결할 수 있기 때문입니다 • 캐시 관리 • 폴링 처리 • 로딩 및 에러 상태 핸들링 이번 글에서는 이러한 요구사항을 가진 클라이언트 컴포넌트에서 데이터 fetch를 어떻게 최적화했는지에 대한 경험을 공유해보려고 합니다기존 구조 데이터 관리 페이지는 다음과 같은 두 개의 요청을 처리합니다.1. 데이터 목록 조회2. 선택된 항목의 상세 분석 결과..

Hydration failed because the server rendered HTML didn’t match the client. This can happen if a SSR-ed Client Component is used. 서버와 클라이언트 간의 HTML 불일치 때문에 해당 에러가 발생했습니다.어떤 상황에서 이 문제가 발생했는지, 그리고 어떻게 해결했는지를 공유합니다. 기존 날짜 처리 방식기존에는 다음 Util을 사용해서 날짜 데이터를 처리 합니다. utils/date-format.tsexport function getFormattedLocaleDateString(date: string | Date) { if (typeof date === "string") { return new Dat..