npm install styled-components 후 사용하려고 했는데 다음과 같은 에러가 떴습니다. 해결방법 npm install --save styled-components 공식문서에 따라 다음과 같이 install 하면 해결됩니다. --save가 무슨 의미인지 다음에 시간 날 때 찾아서 추가 수정하겠습니다.
style component는 CSS를 더욱 손쉽게 사용하는 방법입니다. npm install --save styled-components React에 styled-compoents를 설치합니다. import styled from "styled-components"; const Circle = styled.div` width: 100px; height: 100px; background: papayawhip; border-radius: 50%; `; function App() { return ( ); } export default App; App 상단에 Circle 이라는 style component를 생성해 줍니다. Circle은 div tag에 CSS style을 입힌 컴포넌트입니다. 사진과 같이 웹페..
리액트는 자바스크립트 라이브러리 중 프론트엔드 개발자들에게 가장 인기있는 라이브러리입니다. Facebook에서 2013년에 공개하였고, 현재에도 여러 사람들에 의해 유지·보수 되고 있습니다. 많은 회사들이 프론트엔드 기술스택으로 리액트를 요구하고 있기 때문에 프론트엔드 웹 개발자가 되고 싶다면 리액트를 배우길 추천합니다! 장점 빠른 스피드: 가상 DOM을 사용하여 웹사이트의 변경사항이 생길 때 변경된 부분만 업데이트하기 때문에 속도가 빠릅니다. 자료의 양: 리액트 사용자가 많기 때문에 커뮤니티가 크고, 자료를 찾기 수월합니다. Vue.js와 다른 점 Vue는 프레임워크이고, React는 라이브러리입니다. React가 Vue보다 유연하고, 커스텀이 쉽습니다. state가 변경됐을 때 다르게 작동합니다. R..
CSS Box Model에는 왜 쓸데없이 박스가 네 개나 있는걸까? 처음에 제대로 개념을 정립하지 않으면 HTML 태그에 CSS 입힐 때마다 계속 드는 의문입니다. 오늘은 margin, border, padding, content에 대해 배워 보겠습니다. One Two One과 Two에 padding과 margin을 없앤 상태입니다. div의 속성 상 heigh은 div 안에 든 자식의 높이만큼, width는 100%만큼 차지하기 때문에 웹페이지의 가로를 모두 차지하고 있는 모습입니다. 만약 여기서 box-one에 padding을 준다면 어떻게 될까요? .box-one { background-color: red; padding: 20px; } padding을 주었더니 One이라는 content를 감싸는 ..
