Ming's develop story

keyframes 사용하기 keyframes는 styled-components안에 이미 들어있다! 웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다. transition은 단순한 엘리먼트 상태변화에 쓰기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋다! Keyframes은 animation에서 사용하는 속성 중 하나이다! App.js import styled, { keyframes } from "styled-components"; function App() { return ( ); } const boxAnimation = keyframes` 0% { border-radius: 0px; top: 20px; } 30%{ top: 300px;..

App.js import React from "react"; import "./App.css"; import { Route } from "react-router-dom"; import Start from "./Start"; import Quiz from "./Quiz"; import Score from "./Score"; function App() { const [name, setName] = React.useState("우민기"); return ( ); } export default App; Start.js import React from "react"; import img from "./Teemo.png"; import { useHistory } from "react-router-dom"; impor..

1. Detail.js 에서 삭제하기 버튼 만들어주기 {bucket_list[bucket_index]}의 상세 페이지입니다! { console.log("삭제하기 버튼을 누름"); }} > 삭제하기 로 감싸주고 버튼을 만든뒤 console.log로 잘 작동 되는지 확인! ! 데이터 삭제를 하면 그 페이지에 남아있는 데이터가 없기때문에 뒤로가기나 메인페이지로 이동하게 만들어 줘야한다 (이거슨 FE개발자의 센스!!) import { useHistory } from "react-router-dom"; 뒤로가기 버튼 만들때처럼 useHistory를 사용 import 먼저 해주자! const history = useHistory(); 지정해주고, { console.log("삭제하기 버튼을 누름"); history...

1. 리덕스 훅 리덕스도 훅이 있는데 상태, 즉, 데이터를 가져오는 것 하나, 상태를 업데이트할 수 있는 것 하나 이렇게 두 가지를 정말 많이 쓴다! 더 많은 (훅 보러가기→) // useDispatch는 데이터를 업데이트할 때, // useSelector는 데이터를 가져올 때 씁니다. import {useDispatch, useSelector} from "react-redux"; 2. BucketList.js에서 redux 데이터 가져오기 const data = useSelector((state) => state.bucket.list); //앞의 state는 스토어가 갖고있는 전체 데이터 뒤는 리턴하는 값 console.log(data); 이런식으로 콘솔로 확인해서 내가 가져오려는 state의 값중 리..

덕스 (ducks) 구조 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. (액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다) 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성한다. (버킷리스트를 예로 들자면, 버킷리스트의 action, actionCreator, reducer를 한 파일에 넣으면 된다) 덕스 구조로 리덕스 모듈을 만들어 보자! 덕스 구조를 잘 설명해 주는 사이트 헷갈릴 때 들어가서 읽어보자 모듈을 만들때 복사할 기본 코드(사이트와 동일) // widgets.js // Actions 타입을 정해준다 const LOAD = "my-app/widgets/LOAD"; //서버에서 데이터를 가져올때..