본문 바로가기

분류 전체보기

 (998)
styled-components와 flexbox를 이용한 2D 레이아웃 디자인 styled-components의 기본 빌딩 블록인 Box 컴포넌트를 잘 활용하는 방법을 알아봅니다. Flexbox 플렉스박스는 하나의 레이아웃 모드입니다. 플렉스 레이아웃의 기본 아이디어는 사용 가능한 공간을 가장 잘 채울 수 있도록 플렉스 아이템의 너비/높이(및 순서)를 변경할 수 있는 기능을 컨테이너에 제공하는 것입니다 플렉스 컨테이너는 플렉스 아이템을을 확장하여 사용 가능한 여유 공간을 채우거나 항목을 축소하여 오버플로를 방지합니다. 기억해야할 것은, 플렉스 컨테이너는 일반적인 플로우 레이아웃의 인라인, 블록 모드에 따라 렌더링 되지만, 컨테이너 내부에서는 플로우 레이아웃과 다른 배치 알고리즘을 사용한다는 것입니다. 이는 블록 내에 아이템을 채우고 남은 공간을 어떻게 적합하게 채울지에 관한 내용으..
styled-components best practices(모범 사례) styled-components(emotion 등)을 잘 사용하는 방법을 정리해 봅니다. 1. variant와 as를 사용해 스타일 재사용 styled-component에서 스타일을 재사용 하는 방법은 보통 합성입니다. 이 경우 해당 컴포넌트의 특수화에는 좋지만, 아래와 같이 여러 컴포넌트가 있다는 것을 사용자가 알아야 합니다. 이는 객체지향 프로그래밍의 합성과 유사한 사용 사럐입니다. const ButtonStyle = styled.button` color: ${(props) => props.theme.primary}; `; const ButtonStyleFlashy = styled(ButtonStyle)` color: fuchsia; `; const ButtonDisabled = styled(Butt..
styled-components의 동작 원리와 주의사항 styled-component의 동작 원리와 주의사항을 알아봅니다. 본문에선 언급하지 않았으나, 실제로 styled-components는 useMemo, useCallback과 같은 도구를 이용하여 자체적인 최적화를 많이 수행하고 있습니다. 따라서 불필요한 css 재평가 부하에 대해선 걱정할 필요가 없습니다. 1. styled-components가 CSS를 생성 및 주입하는 방법 styled-components는 css를 lazy 하게 생성 및 삽입함 컴포넌트 렌더링 전까지 탬플릿 리터럴, 혹은 객체로 전달된 css 규칙을 평가하지도 않고, cssom에 반영하지 않음 렌더링하는 css에 대해서만 css 평가 비용을 지불 (비교 - 사전 컴파일 tailwind) js는 defer를 사용하여 다운로드, 처리..
빅테크 프론트엔드 기술 인터뷰 : JS 편 Front End Interview Handbook의 JS 파트를 번역 및 정리한 글입니다 Meta, Amazon., Google과 같은 미국 빅테크 프론트엔드 면접의 기출 문제라 합니다. 2019년 기준으로 작성된 것들이 꽤 있어서, 몇가지 경험 기반 답변들은 스스로 생각해 보시는 것도 좋은 듯 합니다. 원문 링크 JavaScript trivia questions in front end interviews | Front End Interview Handbook Answers to Front-end Job Interview Questions - JS Questions. Pull requests for suggestions and corrections are welcome! www.frontendinter..
React의 cloneElement API, 기존 엘리먼트를 기반으로 새로운 엘리먼트 생성하는 방법 알아보기 React Beta 공식문서를 통해 학습한 cloneElement API에 대해 정리합니다. cloneElement cloneElement를 사용하면 다른 엘리먼트를 기반으로 새로운 React 엘리먼트를 만들 수 있습니다. const clonedElement = cloneElement(element, props, ...children) 특정 엘리먼트를 기반으로, 전혀 다른 prop과 children을 이용해 새로운 엘리먼트를 만듭니다. import { cloneElement } from 'react'; // ... const clonedElement = cloneElement( Hello , { isHighlighted: true }, 'Goodbye' ); console.log(clonedElement..
리액트 디자인 패턴(React design pattern) : Compound Component Pattern(컴파운드 컴포넌트패턴)과 Uncontrolled Component Pattern(유상태 컴포넌트 패턴) radix-ui와 같은 라이브러리는 컴파운드 컴포넌트 패턴을 uncontrolled component 패턴과 조합한 구현을 채택하고 있습니다. HTML 삽입 미리보기할 수 없는 소스 위 다이얼로그 컴포넌트의 재미있는 점은, children으로 전달받은 컴포넌트에 dialog를 열기 위한 핸들러를 전달할 필요가 없다는 점입니다. Edit profile 컴파운드 컴포넌트는 내부적으로 context를 활용하니, Dialog 컨텍스트를 활용해 해당 버튼이 클릭되는 것을 어떻게든 감지한다는 것을 알 수 있습니다. 그런데 일반 와 버블링을 활용하면 span을 div로 감싸다보니 css(스타일) 관점에서 원하지 않는 동작이 발생할 수 있습니다. 따라서 가장 보수적인 방법은 button으로 open, close 이벤트..
[React] 리액트 Children, React Children API의 모든 것 Children API를 사용하면 children prop으로 받은 JSX를 조작하고 변형할 수 있습니다. const mappedChildren = Children.map(children, child => {child} ); Children API의 명세 Children.count(children) Children.count(children)를 호출하여 children 데이터 구조의 자식 수를 계산합니다. import { Children } from 'react'; function RowList({ children }) { return ( Total rows: {Children.count(children)} ... ); } 파라미터 children: 컴포넌트가 받은 children prop의 값. 리턴값..
Stitches와 Radix를 이용해 디자인 시스템 만들기 Radix(Radix)라이브러리의 메인테이너가 디자인 시스템 컴포넌트를 만드는 방법에 관해 작성한 글이 있어서 요약 정리해 봤습니다. 원문 링크 Pedro Duarte Why I Build Design Systems with Stitches and Radix ped.ro 저는 Scss, CSS ,Sass, Stylus, css-modules, styled-components와 같은 기술을 사용하여 디자인 시스템을 구축해본 경험이 있습니다. BEM, scoped CSS, atomic CSS, 커스텀 컨벤션 등의 스타일 규칙도 사용해 보았습니다. 하지만 제가 사용한 기술들이 좋다고 생각한 적이 별로 없었습니다. 어떤 것들은 너무 생산성이 떨어지고 오류가 많았으며, 어떤 것들은 성능이 별로거나 독단적이서 커스..

티스토리툴바