2022/07 (37) 썸네일형 리스트형 [짤막글] styled-components는 어떻게 스타일을 적용하는가 TL:DR; className을 사용한다 공식 예제에 가보면 이런 예시가 있다. // This could be react-router-dom's Link for example const Link = ({ className, children }) => ( {children} ); const StyledLink = styled(Link)` color: palevioletred; font-weight: bold; `; render( Unstyled, boring Link Styled, exciting Link ); 리액트 라우터 돔의 Link처럼 생각할 수 있다고 한다. 실제로 아래와 같이 동작한다. 위의 코드를 codeSandbox에 붙여넣고 className만 삭제하면 동작하지 않는다. 즉, styled-.. 디자인 시스템 컴포넌트를 만들 때 고려할 사항들 원문 : building-a-design-system-from-scratch/ Building a Design System from scratch - Maxime Heckel's Blog A deep dive into my experience building my own design system that documents my process of defining tokens, creating efficient components, and shipping them as a package. blog.maximeheckel.com 지속 가능한 UI를 구축하기 위한 헥심은 열쇠는 색상과 타이포그래피에 대한 명확한 표준을 설정하고 재사용 가능한 컴포넌트를 구축하는 것입니다. 전체 코드 보기 : @maximehec.. CSS Variables를 이용하여 컬러 팔레트 구성하기 원문 : https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/ The Power of Composition with CSS Variables - Maxime Heckel's Blog How leveraging CSS variable composition and HSLA colors helped me build a more efficient way to theme my apps and rely less on CSS-in-JS. blog.maximeheckel.com CSS 변수와 HSLA 색상을 사용한 좋은 CSS 습관 테마와 색상을 관리하기 위해 ThemeProviders에 지나치게 의존하지 마세요 JS기반 테마를.. [Next.js 튜토리얼] JS에서 리액트로 해당 문서 정리 https://nextjs.org/learn/foundations/from-javascript-to-react Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 참고 : 페이스북에서 리액트 도큐먼트를 새로 교체할 계획입니다. 상당히 내용이 괜찮네요 https://beta.reactjs.org/ 시작 : 사용자가 웹 페이지를 방문하면 서버는 다음과 같은 HTML 파일을 브라우저에 반환합니다. 브라우저는 H.. 웹 애플리케이션을 구성하는 요소들 해당 문서를 요약한 내용입니다 : https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org User Interface (사용자 인터페이스) - 사용자가 애플리케이션을 소비하고 상호 작용하는 방법입니다. Routing (라우팅) - 사용자가 애플리케이션의 다른 부분 사이를 탐색하는 방법입니다. Data Fetchi.. 이전 1 2 3 4 5 다음
