MY PORTFOLIO WEBSITE- Err Log) It seems you are interpolating a keyframe declaration (bZfjDs) into an untagged string.

에러내용

Error: It seems you are interpolating a keyframe declaration (entBgX) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css

해결

내용을 보자하니 css``라는 애를 사용하면 이 문제를 도와준다고 한다.

css``는 뭐하는 친구인지 찾아보았다 .

css
props에 따라 바꾸고 싶은 속성이 여러개일 경우 styled componenets에서 제공하는 css`` 함수를 사용하여 속성들을 묶어서 처리할 수 있다.

위와 같은 에러가 난 이유는
v4부터는

${({ skillName }) => {
    return skillName === 'Sub'
      ? `left: 42%; top: 2%; transform: scale(2); font-weight: 800;color: #488cc4; z-index: 20; :hover {
    cursor: pointer;
  }`
      : animation: ${showTextKeyframes} 2s linear;;
  }};

이러한 코드 작성이 먹히지가 않아서 이다

css``를 사용하여 고쳐보자 ~

해결 코드

  ${({ skillName }) => {
    return skillName === 'Sub'
      ? `left: 42%; top: 2%; transform: scale(2); font-weight: 800;color: #488cc4; z-index: 20; :hover {
    cursor: pointer;
  }`
      : null;
  }};
  animation: ${(props) =>
    props.skillName === 'Main'
      ? css`
          ${spin} .5s infinite
        `
      : ''};

느낀점(?)

항상 콘솔로그 에러를 잘 읽어보자 ...