Pseudo selectors import React from 'react'; import styled from 'styled-components'; import { keyframes } from 'styled-components'; const Father = styled.div` display: flex; `; const animation = keyframes` from { transform: rotate(0deg); } to{ transform: rotate(360deg); } `; // Box안에 있는 span태그를 // 아래와 같은식으로 부모 styled components를 통해 target 가능 const Box = styled.div` height: 200px; width: 200px; ba..

import { keyframes } from 'styled-components'; import React from 'react'; import styled from 'styled-components'; import { keyframes } from 'styled-components'; const Father = styled.div` display: flex; `; const animation = keyframes` from { transform: rotate(0deg); } to{ transform: rotate(360deg); } `; const animationTwo = keyframes` 0% { transform: rotate(0deg); border-radius: 0px; } 50% { tra..

import React from 'react'; import styled from 'styled-components'; const Father = styled.div` display: flex; `; // attrs({key: value, key:value, ...}) // 이런식으로 한번에 태그 속성을 줄수도 있음 const Input = styled.input.attrs({ required: true, minlength: "10" })` background-color: tomato; `; function App() { return ( ); } export default App;

import React from 'react'; import styled from 'styled-components'; const Father = styled.div` display: flex; `; const Btn = styled.button` color: white; background-color: tomato; border: 0; border-radius: 15px; `; // style 그대로 태그만 바꾸고싶을때 as = "태그이름"을 쓴다. function App() { return ( Log in Log in ); } export default App;

import React from 'react'; import styled from 'styled-components'; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; // 확장 // Box의 속성을 들고온 다음 새로운 속성을 추가해준다. const Circle = styled(Box)` border-radius: 50px; `; function App() { return ( ); } export default App;

포스트 목록 가져오기 우리는 목록을 가져오고 게시글을 추가하고, 수정도 하겠죠! 이런 기능을 만들 때는 데이터가 어떻게 변할 지 먼저 고민하고 만들기 시작하는 습관을 길러봐요! 🙂 예) - 추가를 하면, → post_list 배열에 포스트 게시글 딕셔너리가 하나 추가 - 수정을 하면, → post_list 안의 post 딕셔너리의 id로 게시글을 찾고, 게시글 내용하고 이미지 url을 수정 (다른 건 수정 못하게 하자!) - 삭제를 하면, → post_list 안의 post 딕셔너리의 id로 게시글을 찾고, 찾은 걸 배열에서 삭제 - 가져오기를 하면, → post_list를 전달 redux/modules/post.js 만들기 (리덕스 모듈 만들기) import 부터! 필요한 액션이 뭐가 있을 지 먼저 만..