자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기
토스증권 PC의 그리드 레이아웃을 이진 트리 자료구조로 직접 구현한 사례를 소개했습니다. 복잡한 요구사항을 데이터 구조와 컴포넌트 분리로 해결하고 저장·복구까지 구현했습니다.
#React#자료구조
36700
프론트엔드 기술 블로그 최신 글
필터 0
Serverless Postgres Neon으로 Next.js 환경에서 Short-URL 구현하기
Serverless Postgres Neon으로 Next.js 환경에서 Short-URL 구현하기
Next.js와 Prisma, Neon으로 원본 URL을 숨기는 커스텀 Short-URL 생성·조회 흐름을 구현했습니다. 가벼운 기능 검증에 적합한 Neon의 선택 근거와 운영상 제약도 함께 정리했습니다.
#Next.js#Neon
000
2024 Frontend Global Workshop 참석 후기
LY Corporation Front-end Global Workshop 2024 참석 후기를 공유했습니다. 기술 세션과 네트워킹을 함께 설계해 교류를 넓힌 점이 인상적이었습니다.
#프런트엔드#세미나
14400
2024 네이버 통합검색의 웹 성능 리뷰
2024 네이버 통합검색의 웹 성능 리뷰
네이버 통합검색의 2024년 웹 성능 지표와 개선 사례를 정리한 글입니다. LCP와 INP를 관리하고, 서치 피드에는 FUPP와 FILT를 도입해 무한 스크롤 성능을 측정했습니다.
#웹 성능#LCP
13900
Airpage CSR: 한달에 400억번 요청되는 페이지 크기 60% 줄이기
한달에 400억번 요청되는 광고링크 중계페이지를 2.1KB에서 0.9KB로 줄인 개발 경험을 공유했습니다. 초고빈도 페이지의 전송 크기 최적화에 초점을 둔 사례입니다.
#CSR#성능
10400
[Syrup 디자인 시스템] 개발: UX에서 FE로의 효과적인 핸드오프
[Syrup 디자인 시스템] 개발: UX에서 FE로의 효과적인 핸드오프
디자인 시스템을 통해 UX와 FE 간 Hand-off를 표준화하고 협업 효율을 높인 사례를 설명했습니다. Figma, Token, Storybook, NPM을 연결해 일관성과 재사용성을 강화하는 과정도 다뤘습니다.
#디자인 시스템#Storybook
3800
Syrup Design System 개발 : UX에서 Front-End로의 효과적인 Hand-off
Syrup Design System 개발 : UX에서 Front-End로의 효과적인 Hand-off
Syrup Design System은 UX와 프론트엔드를 하나의 기준으로 연결해 Hand-off 효율을 높였습니다. Storybook, Token, NPM 배포를 통해 일관성과 재사용성을 강화했습니다.
#디자인 시스템#UI/UX
5300
건강한 SEO로 성장하는 웹사이트 만들기
글로벌 웹사이트의 SEO와 사용자 경험을 함께 개선한 사례를 다뤘습니다. 필터, 지역 설정, 카테고리, 반응형 디자인으로 검색 노출과 방문 성과를 높였습니다.
#SEO#웹
11800
FE News 25년 3월 소식을 전해드립니다!
FE News 25년 3월 소식을 전해드립니다!
네이버 FE 엔지니어들이 2025년 3월 FE News에서 프론트엔드 주요 소식을 큐레이션해 소개했습니다. 웹 성능 최적화와 CRA 종료 등 생태계 변화를 함께 다뤘습니다.
#JavaScript#React
12700
Next.js에서 Sentry로 프론트엔드 에러 모니터링하기
Next.js에서 Sentry를 도입해 프론트엔드 에러 모니터링을 강화한 사례를 정리했습니다. 수집 범위와 알림 기준을 조정해 중요한 오류만 선별하고 디버깅 정보를 보완했습니다.
#Next.js#Sentry
9200
똑닥닷컴 SEO(a.k.a. 네이버 월 노출 수 1000만 달성기)
똑닥닷컴 커뮤니티 페이지의 검색 노출을 크게 늘린 SEO 개선 사례를 정리한 글입니다. 사이트맵, robots.txt, 메타데이터, 구조화된 데이터, Next.js SEO 트러블슈팅까지 함께 소개했습니다.
#SEO#sitemap.xml
200
똑닥닷컴 SEO(a.k.a. 네이버 월 노출 수 1000만 달성기)
똑닥닷컴 SEO(a.k.a. 네이버 월 노출 수 1000만 달성기)
네이버와 구글 검색 노출을 높이기 위한 SEO 실무 경험을 정리했습니다. Next.js에서의 동적 사이트맵, 메타데이터 설정과 함께 색인 수 확대 방법도 소개했습니다.
#SEO#sitemap.xml
3400
무엇이든 물어보세요 (feat. 테스트 코드, ESLint Rule) | EP.10 캠프파이어 특집 하편
시청자 질문을 바탕으로 테스트 코드, ESLint Rule, useEffect dependency 배열에 대한 프론트엔드 실무 인사이트를 공유했습니다. 토스 개발자들의 코드 리뷰와 내부 패키지 활용 사례도 함께 소개했습니다.
#test#ESLint
7500
iOS 개발을 위한 Cursor Rules
Cursor의 Rules 기능으로 iOS 개발용 AI 동작을 프로젝트 단위로 제어하는 방법을 소개했습니다. 규칙을 적용한 뒤 오류와 중복 작업이 줄어든 경험도 공유했습니다.
#iOS#Cursor
5700