버즈빌 프론트엔드 변천사
버즈빌이 AngularJS부터 Next.js까지 프론트엔드 아키텍처를 어떻게 바꿔왔는지 정리한 글입니다. 각 전환의 선택 이유와 운영상의 효과, 남은 과제까지 함께 공유했습니다.
#Vue#React
134005분
새로운 기술 블로그가 추가되었어요
필터 0
WebGL과 함께 배우는 컴퓨터 그래픽스 (2)
WebGL과 Three.js에서 라이팅과 머티리얼의 기본 개념을 정리했습니다. 각 조명과 재질의 차이, 계산 비용과 사실감의 균형을 예제로 설명했습니다.
#WebGL#Three.js
70005분
바닥부터 시작하는 웹앱 에디터 개발기
웹앱 환경에서 블록 에디터를 직접 개발한 과정을 소개했습니다. ProseMirror를 선택하고 삭제 방지와 스크롤 문제를 해결하며 확장성을 확보했습니다.
#웹앱#에디터
233005분
프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁
SPA 환경에서 스크롤 복구가 어려운 이유와 상황별 해결 방법을 정리했습니다. React Query, 무한 스크롤, 가상화 리스트에서의 실전 팁도 함께 소개했습니다.
#React#React Query
210005분
프론트엔드 테스트 비용과 효용 사이에서
프론트엔드 테스트의 비용과 효용을 배송 정보 렌더링 사례로 살펴본 글입니다. 테스트 기준 시각 고정, 공통화, 순서 검증으로 커버리지를 높인 과정을 정리했습니다.
#test#refactoring
178005분
윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기
윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기
윈도잉 기법을 React 표/목록 가상화에 적용하는 방법과 대표 라이브러리의 차이를 정리했습니다. 사내 로그 뷰 성능 개선을 위한 Big Table 개발 사례로 연결했습니다.
#React#윈도잉
126005분
ChatGPT 질문 내역 바로보기 (익스텐션 개발기)
ChatGPT 대화 기록을 찾기 어려운 문제를 크롬 익스텐션으로 해결한 개발기입니다. 질문 목록 UI와 바로가기 기능으로 탐색 편의성을 높이고 스토어 등록까지 진행했습니다.
#ChatGPT#Chrome Extension
133005분
피그마 플러그인을 통한 개발 생산성 끌어올리기
피그마 플러그인으로 디자인 토큰과 Tailwind 클래스를 자동 추출해 개발 생산성을 높인 사례를 소개했습니다. 디자인 시스템의 일관성과 지속적인 도구 개선의 중요성도 함께 강조했습니다.
#Figma#Tailwind CSS
101005분
주니어 클라이언트의 성장 노트
주니어 클라이언트 개발자가 현업에서 배운 시행착오와 대응 원칙을 정리했습니다. 요구사항 확인, 네트워크 예외 처리, 라이브 리소스 관리의 중요성을 강조했습니다.
#클라이언트#network
138005분
Jupyter 노트북의 한계를 극복하는 새로운 도구, marimo
Jupyter 노트북의 반복 실행, 숨겨진 상태, 버전 관리 문제를 해결하는 marimo를 소개했습니다. 셀 의존성 자동 관리와 Python 파일 저장으로 재현성과 협업성을 높였습니다.
#Python#Jupyter Notebook
84005분
[Figma MCP]를 활용한 효율적인 UI 컴포넌트 개발 및 실제 적용 경험을 공유합니다
[Figma MCP]를 활용한 효율적인 UI 컴포넌트 개발 및 실제 적용 경험을 공유합니다
Figma MCP를 Cursor와 연동해 디자인 시안을 React/Vue 컴포넌트로 옮긴 경험을 공유했습니다. 실제 업무에서 개발 시간을 줄이고 세부 튜닝에 집중한 사례를 소개했습니다.
#Figma#MCP
146005분
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 1. 마이크로프론트엔드 너 뭐야?
마이크로프론트엔드의 개념과 통합 방식, 장단점을 정리했습니다.팀 구조와 성능 요구를 함께 고려해 도입 여부를 판단해야 한다고 설명했습니다.
#마이크로프론트엔드#MSA
228005분