본문 바로가기

전체 글

(207)
styled-components로 Spinner 만들기 (feat. keyframes helper) 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 🔗 참고 styled-components documentation에서 Animation부분 https://styled-..
번외) react-router-dom의 Link를 styled-components로 꾸미기(feat.useLocation) (하지만 난 NavLink가 좋다) 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 📝 시작점 styled-componets가 아닌 일반적인 React의 컴포넌트 (react-router-dom의 Lin..
번외) react-router-dom 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com import LogIn from "components/pages/LogIn"; import Home from "comp..
'css' helper와 props를 이용한 스타일링 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 📝 목표 styled-component의 'css' 헬퍼를 이용해서 props의 조건에 따른 스타일링을 속성을 좀더 보..
props를 이용한 conditional styles 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 🌞 목표 이번 시간에는 styled-components에 props를 넣어서 props 값에 따라 (조건적으로) 다른 ..
'createGlobalStyle' helper를 이용해서 global style 적용하기 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 🌞 components > App.js import { Button } from "components/common"; ..
Button 만들어보기 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 🌞 현재 폴더 구조 src 폴더의 components 폴더 아래 App.js 파일, common 폴더, pages 폴더..
왜 styled-components-v5인가 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com - styled-components는 원래 속도가 빠른 CSS-in-JS 라이브러리 중 하나였지만 v5가 릴리즈 되면서..