FE News 24년 12월 마지막 소식을 전해드립니다!
FE News 24년 12월 마지막 소식을 전해드립니다!
FE News 24년 12월 프런트엔드 소식을 정리한 큐레이션 글입니다. 설문 보고서, Web AI, Next.js self-hosting, 밋업 공개 소식을 담았습니다.
#Next.js#LLM
2900
프론트엔드 기술 블로그 최신 글
필터 0
개발 속도와 품질 높이는 테스트 코드 도입 후기
프론트엔드 어드민 프로젝트에 테스트 코드를 소규모로 도입한 과정을 공유했습니다. 리팩토링 안정성과 개발 속도, 품질 보증 측면의 효과도 함께 정리했습니다.
#test#Jest
5100
올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!
올리브영 서비스용 디자인 시스템을 Storybook과 Emotion으로 구축한 과정을 소개했습니다. 전역 스타일, 상태별 컴포넌트 문서화, 패키지 배포와 서비스 적용 방법을 다뤘습니다.
#React#TypeScript
4700
기술 한 스푼으로 웹앱 사용자 경험 개선하기
웹앱 UX 개선을 위해 스켈레톤 UI, Vue Transition, Tanstack-Query를 적용한 사례를 소개했습니다. 상황에 따라 스피너와 페이드 효과를 병행하며 전환과 상태 관리를 단순화했습니다.
#UI/UX#Vue.js
2900
웹 성능 측정 자동화 비법: Lighthouse CI와 CI/CD의 만남
Lighthouse CI를 CI/CD에 통합해 배포 후 웹 성능 측정을 자동화한 사례를 소개했습니다. 반복 측정, S3 저장, Slack 알림으로 성능 모니터링과 공유를 체계화했습니다.
#CI/CD#Lighthouse
3900
Next.js 그만 쓰세요! 면접관이 진짜 원하는 것!? | 모닥불 EP.8
토스 면접관이 채용에서 보는 기준과 실질적인 팁을 공유했습니다. 기술 사용 경험보다 왜 그 기술을 선택했는지 설명하는 점을 강조했습니다.
#Next.js#채용
4000
AI전화 watchOS 개발기 #1 (Custom Notification 만들기)
Apple Watch의 Notification 동작과 Long-look Interface 구현 과정을 정리했습니다. 알림 목적지 결정, Action 처리, 로그 수집 방법까지 살펴보았습니다.
#watchOS#SwiftUI
2400
검색 서비스에서 좋은 품질의 코드를 찾는 은하수 항해 기록
검색 서비스 프런트엔드에서 검색 결과 UI를 큐레이션하는 경험을 공유했습니다. PC와 모바일 코드 통합, 리스팅과 컬렉션 구조를 중심으로 좋은 코드의 기준을 고민했습니다.
#UI/UX#React
2700
선행을 정규 프로젝트로 성공시키는 방법
카테고리 홈의 지역 탐색 문제를 검색 기능과 모듈 개선으로 해결하고, UT와 A/B 테스트로 효과를 검증했습니다. 퍼소나와 유저 스토리, 프로토타입으로 근거를 쌓아 선행 프로젝트를 정규 프로젝트로 전환했습니다.
#UX/UX#AB 테스트
2200
안전한 로그인 토큰 관리, 프론트엔드의 필수 전략
프론트엔드 토큰 인증에서 localStorage 대신 쿠키 기반 관리와 보안 속성 설정을 권장했습니다. XSS·CSRF 위험을 줄이기 위해 토큰 로테이션과 Refresh Token도 함께 제안했습니다.
#JavaScript#Next.js
1700
QueryPie와 Figma, 딱 맞아떨어지는 협업의 정석
Figma를 중심으로 기획, 디자인, 개발, QA를 실시간으로 연결하는 협업 방식의 장점을 소개했습니다. 과거의 파일 공유와 버전 관리 문제를 줄이고 생산성과 일관성을 높이는 흐름을 설명했습니다.
#Figma#UI/UX
900
안전한 로그인 토큰 관리, 프론트엔드의 필수 전략
프론트엔드 토큰 인증에서 Web Storage와 직접 토큰 주입 방식의 위험성을 짚었습니다. 쿠키 기반 관리와 토큰 로테이션으로 보안을 높이는 방법을 소개했습니다.
#React#Next.js
3000
안전한 로그인 토큰 관리, 프론트엔드의 필수 전략
프론트엔드에서 토큰 기반 인증을 안전하게 관리하는 방법을 정리했습니다. Web Storage 대신 쿠키와 보안 설정, 토큰 로테이션으로 XSS와 CSRF 위험을 줄이는 전략을 소개했습니다.
#쿠키#XSS
4400
로딩 스피너는 이제 그만! UPTN Station UX 개선 사례
로딩 스피너는 이제 그만! UPTN Station UX 개선 사례
스피너 대신 스켈레톤, Transition, Tanstack-Query를 활용해 웹앱 UX를 개선한 사례를 소개했습니다. 상황에 따라 로딩 UI를 다르게 적용해 체감 속도와 개발 생산성을 함께 높였습니다.
#Vue.js#SSR
4300