상품 조회 25% 향상시킨 온스타일 상세페이지 개편 비하인드
온스타일 상품 상세페이지를 정보 구조와 개발 프레임워크까지 함께 개편했습니다. 그 결과 고객당 조회 페이지 수가 25% 늘고 클릭과 주문 지표도 개선했습니다.
#Vue.js#backbone.js
3900
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
더 가치 있는 공통 컴포넌트 만들기
React·TypeScript 공통 컴포넌트의 책임 경계와 확장 인터페이스 설계를 다뤘습니다. 네이티브 요소와 접근성을 활용해 재사용성·완성도를 높이는 방법을 소개합니다.
#React#TypeScript
000
deFign : 네이버 페이의 디자인 시스템을 정의하다
네이버페이는 공통 UI와 디자인 토큰을 기반으로 디자인 시스템 deFign을 구축했습니다.\n컴포넌트 표준화와 스토리북, 인터페이스 조율로 일관성과 개발 효율을 높였습니다.
#디자인 시스템#Figma
11400
Vibrant Design System 과 함께하는 크로스 플랫폼 개발기
웹과 앱이 각자 다르게 만들던 UI를 크로스 플랫폼 디자인 시스템으로 통합한 과정을 소개했습니다. 기존 Box 중심 구조의 한계를 해결하기 위해 역할 분리와 플랫폼별 구현 방식을 도입했습니다.
#React Native#디자인 시스템
2800
섬세한 ISFP의 코드 가독성 개선 경험 / if(kakao)2022
정확한 명명과 시각적 코드 구조화를 통해 유지보수성과 협업 가독성을 높인 사례를 소개했습니다. 표·목차·용어·각주 형태의 비유로 조건문과 로그 처리 코드를 개선했습니다.
#JavaScript#CSS
000
React 컴포넌트와 추상화
React 컴포넌트의 책임을 범용 UI와 도메인 로직으로 나누는 추상화 방법을 설명했습니다. 합성·커스텀 훅·상태 설계로 결합도를 낮추는 트레이드오프를 다뤘습니다.
#React#컴포넌트
000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
React 컴포넌트와 추상화
React 컴포넌트와 추상화
React 컴포넌트를 책임과 도메인 의존성 기준으로 어떻게 추상화할지 설명한 글입니다. 범용 컴포넌트 분리와 합성, 훅 활용을 통해 유연한 구조를 제안했습니다.
#React#컴포넌트
5000
스토리북 작성을 통해 얻게 되는 리팩토링 효과
스토리북의 독립 렌더링 과정에서 컴포넌트의 책임 과다와 환경 의존성을 발견했습니다. 표현·데이터·레이아웃을 분리해 재사용성과 검증 가능성을 높였습니다.
#Storybook#React
000
스토리북 작성을 통해 얻게 되는 리팩토링 효과
스토리북 작성을 통해 얻게 되는 리팩토링 효과
스토리북의 독립 렌더링은 컴포넌트의 과도한 책임과 환경 의존성을 드러내 리팩토링을 유도합니다. 렌더링·데이터·레이아웃을 분리하고 입력 범위를 제한하는 방식을 소개합니다.
#storybook#React
3400
![[Figma]컴포넌트에 적용된 값들이 사라지지 않게 대체하기](https://miro.medium.com/v2/resize:fit:1200/1*86gP6fN0tq1PEmx5JnX8LA.png)
[Figma]컴포넌트에 적용된 값들이 사라지지 않게 대체하기
Figma 마스터 컴포넌트 교체 시 텍스트 값이 사라지지 않도록 기존·신규 컴포넌트를 함께 두고 이관했습니다.\n텍스트 출력 오류는 Resizing을 Fill container로 변경해 해결했습니다.
#Figma#컴포넌트
2600
Bootstrap-vue를 활용해서 새로운 컴포넌트 제작하기
Bootstrap-vue 기반 어드민에서 반복되는 UI·입력 로직을 공통 컴포넌트로 분리한 과정을 공유했습니다. 과도한 범용화 대신 숫자 입력 목적에 집중한 컴포넌트 설계를 선택했습니다.
#Vue.js#Bootstrap-vue
1100
React Children 과 친해지기
React.Children.toArray()의 평탄화와 key 할당 방식을 설명했습니다. Fragment 내부를 평탄화하지 않는 제약과 대안을 소개합니다.
#React#children
000
신입 디자이너는 아무것도 몰라요
Figma Constraints와 Auto Layout으로 프레임 변화에 대응하는 카드 UI를 비교했습니다. 컴포넌트 내부는 Auto Layout, 페이지 배치는 Constraints 활용을 제안합니다.
#Figma#UI/UX
2600
2021년 3월 회고 _ 2탄
리뷰 정보를 쉽게 확인·작성하는 3페이지 웹 앱 리리뷰 프로젝트 경험을 공유했습니다. React의 컴포넌트화와 단방향 데이터 바인딩 특성을 학습했습니다.
#React#컴포넌트
1700