TIL 210925

오늘 한 일

프로젝트 작업

• 단어장 뷰 만들기
• ref 사용해서 input값 불러오기
• routing 페이지 이동
• 리덕스 사용하여 데이터 관리하기

리액트 학습

• keyframe
  • 애니메이션에서 사용하는 속성 / 규칙

import styled, { keyframes } from "styled-components";

function App() {
  return (
    <div className="App">
      <div>
        <Box></Box>
      </div>
    </div>
  );
}

// 실행되기 전에 선언되어야 함
const boxAnimation = keyframes`
// 진행상황에 따라 애니메이션 설정 가능
   0 {
     border-radius: 0px;
     top: 20px;
   }
   30%{
    top: 600px;
  }
   50% {
    border-radius: 50px;
    top: 400px
  }
  100% {
    border-radius: 0px;
    top: 20px;
  }
  `;

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 0px;
  position: absolute;
  top: 20px;
  left: 20px;
  // 상단에서 선언된 애니메이션 사용하기
  animation: ${boxAnimation} 2s 1s infinite linear alternate;
`;

export default App;

느낀 점

걱정했던 프로젝트 기능들을 무사히 구현해냈다 짝짝짝 성공하고 나니까 다른 기능들도 추가하고싶은 욕심이 생긴다. 내가 진짜 사용자라면 이런저런요런 기능들이 있으면 좋지 않을까? 라는 생각이 들면서 기획 또한 굉장히 중요하구나를 느낀 하루. 오늘 프로젝트 기능 구현하면서 뷰도 엄청나게 수정했다지.....끝이없다 끝이없어!!

내일 할 일

• 리액트 학습
• 프로젝트 수정
• 자바스크립트 스터디