TIL 05-26

1. 리액트 심화반 수업듣고 복습 및 정리
   블로그에 올려놨음

2. 프로그래머스 코드카타
   5초컷내서 기분좋았는데 1단계라 살짝 안좋아짐
   아마 내일은 하루종일 프로그래머스만 풀듯 함.

3. 개인 프로젝트 피드백 수용 및 적용
   모두 납득할만한 아니 당연한 피드백을 받아서 적극 수용 후 적용했음.

4. 심화반 과제
   피카츄가 키보드에 따라 움직이도록 + 점프까지 만들어서 레포에 올리라하셔서 올려놨음.

점프 할 때 계속 위치가 0,0부분에서 점프하길레 아니 왜이러지 하면서 방법을 찾다보니 css에서도 변수를 할당해 줄 수 있더라.
그걸 이용해서 아래와 같이 코드를 수정했더니 되었음.

  <div id="Grass">
      <div
        id="Pikachu"
        className={isJumping ? "jumping" : ""}
        style={{
          "--x": `${locationX}px`,
          "--y": `${locationY}px`,
          transform: `translate(${locationX}px, ${locationY}px)`,
        }}
      ></div>
    </div>

--x라는 변수에 locationX값px을 할당해줘서 css에서 아래와 같이 사용하였음

@keyframes jump {
  0% {
    transform: translate(var(--x), var(--y)) translateY(0);
  }
  50% {
    transform: translate(var(--x), var(--y)) translateY(-30px); /* 점프 높이 */
  }
  100% {
    transform: translate(var(--x), var(--y)) translateY(0);
  }
}