신세계백화점 PC 메인 React 전환기
신세계백화점 PC 메인 페이지를 Spring에서 React와 Next.js 기반으로 전환했습니다.\n초기 로딩, 인피니트 스크롤, SEO까지 함께 고려해 사용자 경험과 유지보수성을 개선했습니다.
#React#Next.js
241005분
필터 1
마이리얼트립 SSR 최적화
SSR 도입 후 발생한 중복 API 호출과 성능 저하의 원인을 분석하고 구조를 개선한 사례를 다뤘습니다. queryKey 통일, 캐시 설정, 메서드 선택으로 FCP와 LCP를 크게 개선했습니다.
#Next.js#React
65005분
LY Corporation의 프런트엔드 기술 동향을 알아보자! State of LY Frontend 2024 실시 보고서
LY Corporation 프런트엔드 조직의 2024년 기술 설문 결과를 정리했습니다. React, Next.js, Jest, Tailwind CSS와 함께 Vite, Vitest 전환 흐름도 확인했습니다.
#JavaScript#React
118005분
AI ＆ Event Driven 오디오 데이터 LinkedIn 글 자동 발행 (feat. Apache Flink)
오디오를 텍스트로 바꾸고 GPT로 LinkedIn 글을 자동 생성하는 이벤트 기반 워크플로를 소개했습니다. 프론트엔드와 AI 처리를 분리해 확장성과 유지보수성을 높인 점이 핵심입니다.
#Next.js#OpenAI API
49005분
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 내부 동작과 보안 주의점을 설명했습니다. 편의성 뒤에 있는 인증·인가, 입력 검증, 인젝션 방지 책임을 강조했습니다.
#Next.js#React
12005분
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 동작 방식과 기본 보안 메커니즘을 설명했습니다. 편의성 뒤에 숨은 인증·인가, 입력 검증, SSRF 등 보안 책임을 강조했습니다.
#Next.js#React
17005분
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 동작 방식과 보안 주의를 정리했습니다. 편의성만 믿지 말고 입력 검증, 인증/인가, 주입 공격 대응을 함께 챙겨야 합니다.
#Next.js#Server Action
81005분
Next.js에서 Sentry로 프론트엔드 에러 모니터링하기
Next.js에서 Sentry를 도입해 프론트엔드 에러 모니터링을 강화한 사례를 정리했습니다. 수집 범위와 알림 기준을 조정해 중요한 오류만 선별하고 디버깅 정보를 보완했습니다.
#Next.js#Sentry
76005분
똑닥닷컴 SEO(a.k.a. 네이버 월 노출 수 1000만 달성기)
똑닥닷컴 SEO(a.k.a. 네이버 월 노출 수 1000만 달성기)
네이버와 구글 검색 노출을 높이기 위한 SEO 실무 경험을 정리했습니다. Next.js에서의 동적 사이트맵, 메타데이터 설정과 함께 색인 수 확대 방법도 소개했습니다.
#SEO#sitemap.xml
30005분
사내 AI 챗봇 서비스 구축하기
사내 AI 챗봇 서비스를 Next.js 템플릿 기반으로 구축하고, Azure OpenAI와 GraphQL 도구 연동을 확장한 과정을 공유했습니다. 배포와 필터링, 컨텍스트 초과 같은 문제를 해결하며 내부 구성원용 서비스로 운영한 사례입니다.
#LLM#ChatGPT
33005분
2024 선물카드 제목 짓기 대회가 탄생하기까지: 운영, PM, 개발 이야기
배민선물하기 2024 참여형 캠페인을 제목 짓기 대회로 바꾸고, 협업과 제약 속에서 구현한 과정을 소개했습니다. 반응형 웹, 비로그인 참여, OTP, 영상 최적화 같은 실무 포인트도 함께 다뤘습니다.
#Next.js#SSR
23005분
프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! 모닥불 | EP.8
토스 개발자들이 프론트엔드 성능 최적화의 본질과 실무 노하우를 공유했습니다. 초기 로딩과 런타임, React 리렌더링 최적화 사례를 다뤘습니다.
#성능#최적화
29005분