2024 네이버 통합검색의 웹 성능 리뷰
2024 네이버 통합검색의 웹 성능 리뷰
네이버 통합검색의 2024년 웹 성능 지표와 개선 사례를 정리한 글입니다. LCP와 INP를 관리하고, 서치 피드에는 FUPP와 FILT를 도입해 무한 스크롤 성능을 측정했습니다.
#웹 성능#LCP
131005분
필터 1
Vite를 이용한 FrontEnd프로젝트
Vite는 React뿐 아니라 여러 프레임워크를 지원하며 빠른 프로젝트 생성과 실행을 강점으로 소개했습니다. CRA보다 가볍고 구조가 익숙해 프런트엔드 개발에 효율적으로 활용할 수 있다고 설명했습니다.
#Vite#React
77005분
2024 선물카드 제목 짓기 대회가 탄생하기까지: 운영, PM, 개발 이야기
배민선물하기 2024 참여형 캠페인을 제목 짓기 대회로 바꾸고, 협업과 제약 속에서 구현한 과정을 소개했습니다. 반응형 웹, 비로그인 참여, OTP, 영상 최적화 같은 실무 포인트도 함께 다뤘습니다.
#Next.js#SSR
23005분
해외파트너센터 개발 오픈기 — 2. 이메일 인증 공통 서비스 개발 이야기
해외 파트너센터에서 국내 휴대폰 인증 한계를 해결하기 위해 이메일 인증 공통 서비스를 도입했습니다. 별도 도메인과 인증 흐름을 분리해 계정 관리 절차를 연결했습니다.
#React#Next.js
29005분
기술 한 스푼으로 웹앱 사용자 경험 개선하기
웹앱 UX 개선을 위해 스켈레톤 UI, Vue Transition, Tanstack-Query를 적용한 사례를 소개했습니다. 상황에 따라 스피너와 페이드 효과를 병행하며 전환과 상태 관리를 단순화했습니다.
#UI/UX#Vue.js
26005분
로딩 스피너는 이제 그만! UPTN Station UX 개선 사례
로딩 스피너는 이제 그만! UPTN Station UX 개선 사례
스피너 대신 스켈레톤, Transition, Tanstack-Query를 활용해 웹앱 UX를 개선한 사례를 소개했습니다. 상황에 따라 로딩 UI를 다르게 적용해 체감 속도와 개발 생산성을 함께 높였습니다.
#Vue.js#SSR
30005분
웹앱 사용자 경험을 개선하는 기술 한 스푼
웹앱 사용자 경험을 개선하는 기술 한 스푼
웹앱의 로딩 경험을 개선하기 위해 스피너, 스켈레톤, 전환 애니메이션, Tanstack-Query를 도입한 사례를 소개했습니다. 화면 특성과 지연 시간에 따라 로딩 방식을 나누고 공통 컴포넌트로 구현 비용을 줄인 점이 핵심입니다.
#UI/UX#스켈레톤 UI
50005분
리액트 19 신규 기능 및 개선 사항
리액트 19 신규 기능 및 개선 사항
리액트 19의 신규 기능과 개선 사항을 Actions, use API, 서버 컴포넌트 중심으로 정리했습니다. 또한 메타데이터, 스타일시트, 스크립트, 자원 preloading 등 운영상 개선점도 함께 소개했습니다.
#React#SSR
0005분
Next, d3로 서버 사이드 지도 렌더링하기
Next, d3로 서버 사이드 지도 렌더링하기
Next.js와 d3로 부동산 데이터 시각화 지도를 만들며 구조를 개선한 과정을 정리했습니다. 지도와 시각화 레이어를 분리하고 d3 의존을 줄여 서버 사이드 렌더링도 가능하게 했습니다.
#Next.js#d3
0005분
Zum Portal Core JS 소개
Zum Portal Core JS 소개
줌인터넷 프론트엔드 파트의 표준화 코어 패키지 도입과 분리 과정을 소개했습니다.\nSSR, 캐시, 설정 표준화로 유지보수와 배포 시간을 개선한 내용을 정리했습니다.
#Vue.js#node.js
0005분
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
SSR의 개념부터 Vanilla JS와 Vue를 이용한 적용 흐름까지 단계적으로 설명했습니다. 또한 Hydration, state 동기화, 선택적 SSR과 실패 시 CSR 대체 방법까지 정리했습니다.
#Vue#SSR
0005분
INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)
INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)
Vue.js SSR과 Canvas API로 INVESTING.COM 클론 코딩 파일럿 프로젝트를 진행한 경험을 정리했습니다. 실시간 시세, 차트, 검색, 댓글 기능과 함께 협업 방식과 기술적 고민을 공유했습니다.
#Vue.js#TypeScript
0005분