Velopers 홈

오늘 새 글

0개

오늘 조회수

78회

필터 1

2022년 12월 29일

프론트엔드

!프론트엔드 개발자의 next.js 개발기

Next.js와 MUI로 프론트엔드를 개발한 경험과 시행착오를 정리한 글입니다. SSR, API Routes 활용과 컴포넌트 분리의 중요성을 함께 소개했습니다.

비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.

웹 프론트엔드 팀이 Lighthouse와 Web Vitals로 성능 관리를 문화로 도입한 과정을 소개했습니다. 이미지 로딩, 코드 분할, 스크립트 전략으로 개선하고 측정 변동성까지 다뤘습니다.

이제부터 이 컴포넌트는 제 겁니다

리액트에서 렌더링과 상태 제어를 외부로 넘기는 IoC 패턴들을 정리했습니다. Render Props, 합성 컴포넌트, Controlled Props의 특징과 장단점을 비교했습니다.

React의 Error Boundary를 이용하여 효과적으로 에러 처리하기

React Error Boundary로 렌더링 에러와 API 에러를 선언적으로 처리하는 구조를 소개했습니다. 제한된 범위의 ApiErrorBoundary와 전역 GlobalErrorBoundary로 재시도 UX까지 구성했습니다.

#React#error boundary

4400

2022년 10월 26일

기타

KURLY 현직자가 직접 뽑은 직무별 핵심 키워드를 소개합니다!

컬리 LIVE 직무 토크쇼에서 현직자들이 뽑은 직무별 핵심 키워드를 정리했습니다. 프로덕트, 디자인, 개발, 데이터, 컬리페이 직무의 중요 역량을 간단히 소개했습니다.

React 컴포넌트와 추상화

React 컴포넌트를 책임과 도메인 의존성 기준으로 어떻게 추상화할지 설명한 글입니다. 범용 컴포넌트 분리와 합성, 훅 활용을 통해 유연한 구조를 제안했습니다.

GitHub Actions workflow를 수동으로 trigger하기(feat. inquirer.js)

GitHub Actions의 `workflow_dispatch`와 GitHub CLI를 이용해 수동 배포를 실행하는 방법을 소개했습니다. 또한 inquirer.js로 브랜치, region, env를 입력받아 배포를 자동화하는 구성을 설명했습니다.

#GitHub Actions#GitHub CLI

3500

Velopers 추천광고

쿠팡 파트너스

개발자를 위한 인기 상품을 확인해 보세요

이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

#개발자#노트북#컴퓨터

2022년 9월 22일

프론트엔드

자바스크립트로 만든 유한 상태 기계 XState

XState로 유한 상태 기계의 개념과 사용법을 장바구니 예제로 설명했습니다. React에서 상태, 컨텍스트, 액션, 가드를 어떻게 연결하는지 정리했습니다.

Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.

Next.js v9 기반 레거시 프로젝트를 v12로 마이그레이션하고, SWC와 import 최적화로 성능을 개선했습니다. 또한 Moment.js를 Day.js로 교체하며 번들 크기를 줄이고 리팩터링 안정성을 높였습니다.

React 이벤트와 브라우저 이벤트

React 합성 이벤트와 브라우저 DOM 이벤트의 전파 차이로 Swiper 내부 버튼 클릭이 의도와 다르게 동작하는 사례를 다뤘습니다. 해결책으로 이벤트 부착 위치를 조정해 상위 래퍼에 클릭을 맡기는 방식을 제안했습니다.

새로운 컬리몰 NX를 소개합니다.

컬리몰 웹프론트팀의 NX 전환 과정을 소개한 글입니다. 레거시를 걷어내며 성능 개선, URL 통합, 코드 품질 강화를 이뤘습니다.

바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)

캔버스와 React, TypeScript로 바나나를 먹는 미니언 게임을 만드는 과정을 정리한 글입니다. 이미지 로드, 이동 제어, 충돌 판정, 바나나 생성과 삭제 로직을 단계별로 설명했습니다.

MSW를 활용하는 Front-End 통합테스트

MSW를 통해 FE 통합테스트에서 API 모킹과 응답 제어를 쉽게 하는 방법을 소개했습니다. 검색 페이지 예시로 정상 응답, 엣지 케이스, 에러 처리까지 검증하는 흐름을 설명했습니다.

#MSW#통합테스트

3200