allWAIs-Link 회고(22.11.16)

📌 미션

• Link 역할로써 span태그, img태그 확인
• tabindex=”0”를 포함
• img태그는 alt 속성으로 접근 가능한 이름 정의

🐒 문제

🤿 컴포넌트 props “as”를 img로 주면, img 태그로 렌더링 해주기

import styled from "styled-components";
import { goToLink } from "../../utils";

export function Link({ as = ComponentName, href, children }) {
  const StyledLink = styled(`${as}`)`
       ... styles
     `;
  return (
    <>
      <StyledLink
        tabIndex="0"
        role="link"
        onClick={(e) => goToLink(e, href)}
        onKeyDown={(e) => goToLink(e, href)}
      >
        {children}
      </StyledLink>
    </>
  );
}

Link.defaultProps = {
  as: "span",
};

• Link 컴포넌트 안에다가 styled-component를 생성하고 as props를 전달해주었다.

• 위와 같이 할 경우, as props에 img 태그가 들어오게 된다면 컴포넌트 명명 규칙에 어긋난다고 나온다.

  이를 해결하기 위해 조건부 렌더링을 해주었다.

  import styled from "styled-components";
  import { goToLink } from "../../utils";
  
  export function Link({ as = ComponentName, href, children }) {
    const StyledLink = styled(`${as}`)`
      ... styles
    `;
    return (
      <>
        {as === "img" ? (
          <img
            tabIndex="0"
            role="link"
            onClick={(e) => goToLink(e, href)}
            onKeyDown={(e) => goToLink(e, href)}
            src="./gitprofile.jpeg"
            alt="W3C Website"
          />
        ) : (
          <StyledLink
            tabIndex="0"
            role="link"
            onClick={(e) => goToLink(e, href)}
            onKeyDown={(e) => goToLink(e, href)}
          >
            {children}
          </StyledLink>
        )}
      </>
    );
  }
  
  Link.defaultProps = {
    as: "span",
  };

  🐥 img가 업로드 되지 않는 문제

  • img 업로드 문제 해결

  문제의 원인은 npm 명령어로 webpack server만 실행시켰는데, webpack config.js 파일에 static 속성값을 [build]로 주었기 때문에 정적 이미지 파일을 불러오기 위해서는 build 폴더에서 assets을 찾는다.

  그러므로 npm run build 명령어로 build 폴더를 생성한 후 그 안에다가 img를 넣어주고 경로를 설정해주어 해결하였다.

  <Link
    as="img"
    alt="test이미지"
    src="./assets/img/gitprofile.jpeg"
    href="https://www.w3.org/WAI/ARIA/apg/example-index/link/link.html"
  />

  🐥 aria-label 속성 있을 때, 조건부로 css 추가 (삭제)

  이 속성을 삭제한 이유는 span 태그를 사용하여 Link 컴포넌트를 구현하였을 때, role="link"로 해주었기 때문에 aria-label 속성을 굳이 해주지 않아도 되므로 삭제하였다.

🏓 회고

• styled-component를 사용하면서 어떻게 props를 받아서 App에서 렌더링 시켜야할지 헷갈렸었는데 직접 해보니 이해가 잘되었다.
• 수업 시간에 배웠던 조건부 렌더링을 실제로 사용하면서 익히니 더욱 이해가 잘되었다. 역시 무언가를 만들어보면서 배우는 것이 힘들지만 더 도움되는 것 같다.