이번 과제는 리엑트 복습 문제 풀기와 지난번 만든 자기소개 페이지 보충하기이다. 일단 별로 문제가 풀고 싶지 않아 먼저 자기소개 페이지를 꾸미려 한다. ㅎㅎ

자기소개 페이지 수정

1. 파비콘 변경

일단 축제 준비 하면서 넣었던 파비콘이 계속 남아있어서
이 파비콘을 먼저 교체하려 한다. 일단 사진을 찾아보자

여튼 사진을 골라왔고 ㅎㅎ 이 png 사진을 ico으로 바꾸는게 좋다고 해서 바꿔서 `public` 폴더에 넣어주었다. `index.html` 파일에 ` head ` 부분에 ` link rel="shortcut icon" href="f1 lego.ico" ` 를 넣어주면 된다.

결과물 ㅎㅎ

2. 애니메이션 추가

약간 내가 하고 싶은건 intro 화면으로 가면 f1차가 부웅하고 나오는 그런 효과를 하고 싶어서 하는 방법을 찾아보았다.
몇가지 방법이 있었는데 나는 keyframes 라는 도구를 사용하기로 했다.
우선 이 도구를 사용하려면 가장 먼저 이것을 불러와야한다. 그래서
import styled, {keyframes} from "styled-components" 라는 명령어를 쓰면 된다고 해서 넣었는데 에러가 나서 확인해보니 빌드가 안된다라고 했다. 왤까 하고 보니까 같은 styled-components를 두번 써서 에러가 났다. 이후 명령어를 확인해보니 원래 쓰는 import styled from "styled-components" 에 {keyframes} 만 추가된 형태였다.. 이게 어떤 명령언지 어떤 역할을 하는지 확인하는 습관을 들여야할 것 같다.. 아무생각없이 넣었다가 이 사태가 발생했다.. 앞으로는 잘 확인하고 넣어야겠다.. 여튼 그런 실수가 있었다....

다시 본래 이야기로 돌아오면 keyframes 이 도구를 불러왔고 이제 사용을 해주면 된다. 일단 설명할게 많아 우선 코드를 보고 이후 하나하나 설명을 해보겠다.

const dash = keyframes`
   0%{
       transform: translate(100%, -100%) scale(0.1);
       filter: blur(10px);
   }
   70%
	{

       scale: (0.6);
       filter: blur(0);
   }
   100%{
       transform: translate(-50%, -50%) scale(1) ;
   }
`;

export const F1Car = styled.span`
   position: absolute;
   top: 80%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;

   animation: ${dash} 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;

   & img {
       width: 600px;
       max-width: 80%;
       height: auto;
       filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.4));
       transition: transform 0.3s ease;
       cursor: pointer;
   }

   & img:hover {
       transform: translateY(-10px) scale(1.2);
   }
`;

이게 애니메이션을 넣기 위해 추가한 코드이다.
const dash = keyframes 는 내가 넣고 싶은 애니메이션의 대본을 만들어 주는 코드이다. dash는 그냥 내가 정한 이름이다. 선언을 해주고 이후 하고 싶은 것들을 명령어를 써주었다. 내가 하고 싶은 애니메이선은 아무래도 자동차가 있고 뒤에는 트랙 배경이라 f1차가 뒤에서 부웅 하고 나오는 그런 효과를 주고 싶었다. 그래서 그를 토대로 대본 역할을 하는 코드를 짜보았다. 0% 70% 100% 각각 나눠서 효과를 넣어주었다.

     transform: translate(100%, -100%) scale(0.1);
     filter: blur(10px);

0% 에는 시작지점이라 화면 오른쪽에 위치하도록 그리고 위쪽에 위치할 수 있도록 transform: translate(100%, -100%) 를 넣어줬고 멀리 있는 느낌을 주기 위해 크기를 0.1로 설정해 주었다. 약간 형태를 흐릿하게 하기 위해 filter: blur(10px); 를 넣어주었다 여기에 있는 (10px) 은 주변 10px 거리까지 블러 처리하겠다는 뜻이다.

70%
     scale: (0.6);
     filter: blur(0);

70% 에는 크기를 조금 더 키워주고 블러 처리는 빼주는 코드를 넣었다.

100%
      transform: translate(-50%, -50%) scale(1) ;

100% 에는 위치를 원래 위치에 넣어주고 크기도 원래 크기로 돌아오도록 해주었다.

지금까지의 코드는 대본 역할을 하기 때문에 실제로 수행할 코드를 짜야한다. 전에 span 태그로 만들어둔 f1차 버튼을 스타일 컴포넌트를 만들어준다.

export const F1Car = styled.span`
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    animation: ${dash} 2.2s cubic-bezier(0.25, 1, 0.5, 1.2);

position: absolute; 는 배경에서 내가 원하는 곳에 자유롭게 배치하기 위해 넣어주었고
원래 위치를 정해주었고 z-index:10; 은 배경보다 앞에 오게 하기 위해 넣어주었다.
그 후 animation: ${dash} 2.2s cubic-bezier(0.25, 1, 0.5, 1.2); 애니메이션을 넣어주었다. animation: ${dash} 2.2s 아까 만들어둔 dash 대본을 2.2 초간 실행 한다는 의미이고 cubic-bezier(0.25, 1, 0.5, 1.2) 이거는 타이밍 함수로 애니메이션의 가속과 감속을 정교하게 제어할 수 있게 해준다. 숫자는 (x1, y1, x2, y2) 이런 의미인데 x가 시간이고 y가 진행도 즉 움직임이다. 나는 0.25일때 진행도를 1 만큼 진행하도록 설정을 했기에 몹시 빨라보이고 0.5일때 1.2 만큼 진행되도록 했기 때문에 내 의도보다 조금더 앞으로 간다. 여튼 그렇다.. https://cubic-bezier.com/#.17,.67,.83,.67 여기서 속도를 확인하고 움직여서 속도를 건들여볼 수 있다.
사실.. 숫자를 다르게 해서 영상을 넣고 싶은데.. 잘 안되서....

복습 문제 풀이

1번

바탕 화면에 새로운 리액트 프로젝트를 생성하고, 해당 폴더로 이동해 프로젝트를 실행하는 방법을 순서대로 쓰세요. 또 이미 열려있는 서버를 끄는 방법도 설명해보세요.

1. vsCode 열기
2. 터미널 열기 
3. npx create-react-app 폴더명 
4. cd 파일명
5. 터미널 종료 누르기 

2번

State를 이용해 빈칸을 채워보세요.

import { useState } from "react";

const Counter = () => {
  const [count,setCount] = useState(0);

  return <div>현재 수량: {count}</div>;
};

3번

틀린 부분을 찾고 올바르게 고쳐보세요. 또 export default가 무슨 뜻인지 설명해보세요.

export default const HelloBtn = () => {
  const sayHello = () => {
    alert("Hello!");
  };
  return (
    <button onClick={sayHello()}>인사하기</button> 
  );
}
`onClick={sayHello}` 이렇게 써야한다. 왜냐 소괄호가 있으면 클릭했을때 실행되는게 아니라 당장 실행이 된다. 
`export default` 한 파일당 한 번만 사용할 수 있다. 하나만 내보낼 수 있는 문법 

4번

App 컴포넌트에서 MenuBox 컴포넌트로 price 데이터를 넘겨주려고 합니다. 넘겨주는 쪽과 받는 쪽의 빈칸을 각각 채워주세요.

// 넘겨주는 쪽 (부모)
const App = () => {
  return (
    // MenuBox에 price라는 이름으로 숫자 15000을 넘기기
	<MenuBox price={15000}/>
  );
};
// 받는 쪽 (자식 : MenuBox.js)
// 부모가 넘겨준 데이터를 받아오기
const MenuBox = ( {price} ) => { 
  return <div>가격: { price}원</div>;
};

5번

삼항 연산자를 이용해 재고가 0개면 품절, 1개 이상이면 주문 가능이라고 띄우는 코드를 완성해보세요.

const App = () => {
  const stock = 0; // 재고 수량

  return (
    <div>
      {stock >0 ? "주문 가능" : "품절"}
    </div>
  );
};