분류 전체보기 (989) 썸네일형 리스트형 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, 커스텀 컨벤션 등의 스타일 규칙도 사용해 보았습니다. 하지만 제가 사용한 기술들이 좋다고 생각한 적이 별로 없었습니다. 어떤 것들은 너무 생산성이 떨어지고 오류가 많았으며, 어떤 것들은 성능이 별로거나 독단적이서 커스.. 나만의 CSS Reset(리셋) 만들기 [번역] CSS Reset의 선언과 구조를 이해해 봅니다. 원문 링크 : https://www.joshwcomeau.com/css/custom-css-reset/ My Custom CSS Reset I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles! www.joshwcomeau.com 기존의 CSS Reset을 사용하지 않는 이유 가장 유명한 CSS Reset은 에릭 마이어의 작품(CSS Reset)입니다. 해당 설정.. 이전 1 ··· 49 50 51 52 53 54 55 ··· 124 다음
