Unity를 모르는 프론트엔드 개발자가 AI로 Unity 서비스를 React로 옮긴 방법
서론 Unity + WebGL로 운영 중인 한컴타자 ‘필사’ 서비스를 React/Next로 마이그레이션하는 일을 맡았습니다. 문제는 제가 C#/Unity 경험이 없는 프론트엔드 개발자라는 점이었습니다. 옮겨야 할 코드를 온전히 이해할 수 없는 상태에서 시작한 것입니다. 이 글은 그 문제를 AI로 어떻게 풀었는지의 기록입니다. 단순히 AI로 코드를 생성한 이야기가 아니라, 온전히 이해하지 못하는 코드의 ‘번역’을 AI에게 맡기고, 그 결과를 개발
Next.js에서 QueryClient를 전역변수로 사용해도 될까요?
Next.js 프로젝트의 정적 파일 배포 환경 구성
안녕하세요! 오늘은 Next.js 프로젝트에서 정적 파일(이미지, CSS 등)을 효율적으로 관리하고 배포하는 방법에 대해 공유해보려고 합니다. 특히 개발 환경과 운영 환경을 분리하여 관리하는 방법과 CDN 캐시 관리에 대해 살펴보겠습니다. 들어가기 전에 현재 사람인은 대부분의 서비스를 온프레미스 환경에 배포하고 있습니다. 그렇다보니 소개해드리는 내용은 AWS나 VERCEL에 배포하는 것과는 차이가 있습니다. 이점 참고 부탁드립니다. 현재 상황과
Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
버즈빌 프론트엔드 변천사
버즈빌 Supply 그룹의 Product Growth 팀의 Luke입니다. 저희 버즈빌에서 지난 몇 년간 겪어온 프론트엔드 아키텍처 변화를 공유하려 합니다. AngularJS에서 시작해 Vue, React를 거쳐 Next.js까지, 각 전환점에서의 고민과 선택 과정을 솔직하게 담았습니다. AngularJS에서 Vue로: 통합 어드민의 시작 초기 버즈빌은 광…
React Server Component와 Streaming으로 웹 성능 극대화하기: Next.js 실전 가이드
Next.js에서 Sentry로 프론트엔드 에러 모니터링하기
안녕하세요. 포스타입 프론트엔드 개발자 이준근입니다. 오류, 결함, 버그, 장애는 소프트웨어 개발과 밀접하게 연관된 용어입니다. 오류는 종종 결함으로 이어지며 결함이 해결되지 않으면 장애로 확산될 수 있습니다. 각각의 용어는 무엇을 의미할까요? 오류는 개발자가 코드 작성 중 잘못된 로직을 구현하거나 요구 사항을 오해하여 발생하는 상황입니다. 결함은 제품의 예상 동작과 실제 동작이 일치하지 않는 상황입니다. 테스터나 최종 사용자가 이를 발견하는
Next.js 캐싱으로 웹 서버 성능 최적화
올해 초 저희 팀에서는 신규 커머스 서비스를 오픈했습니다. 아무래도 커머스에서는 SEO가 중요하다보니 의 App Router를 사용해서 SSR(Server Side Rendering…
Syrup 모바일 웹 속도 개선기: WebFlux, SSE, 그리고 Next.js
Syrup은 재미있게 포인트 모으기, 모은 포인트 투자, 쿠폰 활용, 할인 혜택, 멤버십과 자산 내역 등을 한 곳에서 관리하는 SK플래닛의 대표 서비스입니다. SK플래닛은 고객에게 더 좋은 경험을 제공하기 위해서 응답 속도 위주로 Syrup 서비스를 개선했습니다. 본 내용은 Syrup…
Next, d3로 서버 사이드 지도 렌더링하기
안녕하세요! 프론트엔드개발팀 신입 개발자 백도훈입니다. 줌인터넷 입사 이후에 약 5주동안 진행한 파일럿 프로젝트 진행 과정에 생긴 고민들과 해결 과정을 공유하려고 합니다. 목차 1. 개요 2. 기술 스택 3. 디자인 4. 기능 5. 프로젝트 설계 6. 기술적 고민 7. 마치며 1. 개요 주제 이번에 진행한 파일럿 프로젝트의 주제는 부동산 데이터 시각화입니다. Next.js, 차트, 시각화 라이브러리 등 실무에 필요한 기술 역량을 강화하는것이 이
코어 웹 바이탈 LCP 개선을 통한 검색 엔진 최적화(SEO) Part 1: Google Search Console, Next.js
월간 20만명 이상의 자연 유입 사용자 모으고 유지하기
Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.
three.js in Next.js
Brand Stickers | Next Gen’s Ad
cypress를 이용하여 components test 작성하기
Component Test를 작성하여 훨씬 더 간단하고 유지 관리하기 쉽고 다른 구성 요소와 함께 사용하고 재사용하기 쉬운 UI 구성 요소를 만들 수 있습니다. 이 과정에서 테스트를 작성하고, 테스트를 통과하는 코드를 작성하고, 작성한 코드를 리팩토링하는 과정을 반복하게 됩니다. 이번 글에서는 todo list 코드를 일부 작성해보겠습니다. 1. Setup Next.js 11.0.1을 사용하고 있습니다. npm install --save-dev