NPM Library 를 직접 배포하여 오픈소스 개발자가 되어보는 경험
오픈소스에 기여하는 방법으로 직접 NPM 라이브러리를 만들어 배포하는 과정을 소개했습니다. React 컴포넌트 예시와 함께 npm publish, 버전 관리, 재배포 절차를 설명했습니다.
#NPM#React
140005분
필터 1
왜 왓챠 웹은 Remix로 마이그레이션했을까?
왓챠 웹이 기존 react + express 구조에서 Remix로 마이그레이션한 이유와 과정을 정리했습니다. 점진적 전환, 라우팅 분기, 컴포넌트 분리와 같은 운영 전략도 함께 공유했습니다.
#Remix#React
327005분
EKS에서 단일 애플리케이션을 n개의 POD으로 다중 배포하기(1)
AWS EKS에서 단일 애플리케이션을 환경변수만 바꿔 다중 배포하는 방법을 소개했습니다. React 샘플, CodeCommit 연동, Parameter Store와 CodeBuild 설정 흐름을 정리했습니다.
#EKS#AWS
28005분
구글처럼 복잡한 권한 쉽게 관리하기 feat. GraphQL
복잡한 권한을 RBAC 대신 ReBAC로 재구성해 선언적으로 관리하는 방법을 소개했습니다. graplix와 React Permission 컴포넌트로 권한 체크와 화면 제어를 단순화했습니다.
#GraphQL#ReBAC
430005분
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분
자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기
토스증권 PC의 그리드 레이아웃을 이진 트리 자료구조로 직접 구현한 사례를 소개했습니다. 복잡한 요구사항을 데이터 구조와 컴포넌트 분리로 해결하고 저장·복구까지 구현했습니다.
#React#자료구조
355005분
[Syrup 디자인 시스템] 개발: UX에서 FE로의 효과적인 핸드오프
[Syrup 디자인 시스템] 개발: UX에서 FE로의 효과적인 핸드오프
디자인 시스템을 통해 UX와 FE 간 Hand-off를 표준화하고 협업 효율을 높인 사례를 설명했습니다. Figma, Token, Storybook, NPM을 연결해 일관성과 재사용성을 강화하는 과정도 다뤘습니다.
#Design System#Storybook
29005분
FE News 25년 3월 소식을 전해드립니다!
FE News 25년 3월 소식을 전해드립니다!
네이버 FE 엔지니어들이 2025년 3월 FE News에서 프론트엔드 주요 소식을 큐레이션해 소개했습니다. 웹 성능 최적화와 CRA 종료 등 생태계 변화를 함께 다뤘습니다.
#JavaScript#React
125005분
Next.js에서 Sentry로 프론트엔드 에러 모니터링하기
Next.js에서 Sentry를 도입해 프론트엔드 에러 모니터링을 강화한 사례를 정리했습니다. 수집 범위와 알림 기준을 조정해 중요한 오류만 선별하고 디버깅 정보를 보완했습니다.
#Next.js#Sentry
76005분
무엇이든 물어보세요 (feat. 테스트 코드, ESLint Rule) | EP.10 캠프파이어 특집 하편
시청자 질문을 바탕으로 테스트 코드, ESLint Rule, useEffect dependency 배열에 대한 프론트엔드 실무 인사이트를 공유했습니다. 토스 개발자들의 코드 리뷰와 내부 패키지 활용 사례도 함께 소개했습니다.
#test#ESLint
71005분
"딸깍"이면 끝! 피그마에서 바로 리액트 컴포넌트로 변환하기
피그마 디자인을 React 컴포넌트로 바로 변환하는 플러그인 구현 과정을 소개했습니다. 사내 규칙을 반영한 자동화로 수작업을 줄이고 생산성을 높인 사례입니다.
#Figma#React
16005분