Portfolio

🔥 문제

넥스트에서 이미지를 불러오려는 순간, src가 불러와지지 않았다. 이유가 무엇일까?

현재 코드는 다음과 같다.


import React, { ReactNode } from 'react';
import styled from '@emotion/styled';
import Text from '@components/atoms/Text';
import { css } from '@emotion/react';
import prevArrow from '../../../public/icons/prevArrow.svg';
import logo from '../../../public/logo.svg';
import menu from '../../../public/icons/menu.svg';

export interface HeaderProps {
  children?: ReactNode;
  size?: string | number;
  width?: string | number;
  height?: string | number;
  display?: 'none' | 'flex';
  isLogo?: boolean;
  isVisibleMenu?: boolean;
  isVisiblePrev?: boolean;
  src?: string;
  justifyContent?: 'none' | 'space-between';
}

const HeaderContainer = styled.div`
  padding: 0;
  margin: 0;
`;

const HeaderSection = styled.div`
  ${({ width, height, justifyContent }: Partial<HeaderProps>) => css`
    display: flex;
    align-items: center;
    justify-content: ${justifyContent || 'none'};
    width: ${typeof width === 'string' ? width : `${width}px`};
    height: ${typeof height === 'string' ? height : `${height}px`};
  `}
`;

const Image: React.FC<HeaderProps> = styled.img`
  ${({ size, isLogo }: Partial<HeaderProps>) => css`
    width: ${isLogo ? '108px' : typeof size === 'string' ? size : `${size}px`};
    height: ${typeof size === 'string' ? size : `${size}px`};
  `}
`;

const Header: React.FC<HeaderProps> = ({
  children,
  width = 'auto',
  height = 40,
  justifyContent = 'none',
  isVisiblePrev = true,
  ...props
}) => {
  console.log(logo, menu, prevArrow);
  return (
    <HeaderContainer {...props}>
      <HeaderSection
        width={width}
        height={height}
        justifyContent="space-between"
      >
        <Image src={logo} width={logo} height={logo} isLogo />
        <Image src={menu} width={menu} height={menu} />
      </HeaderSection>
      {isVisiblePrev && (
        <HeaderSection
          width={width}
          height={height}
          justifyContent={justifyContent}
        >
          <Image
            src={prevArrow}
            width={prevArrow}
            height={prevArrow}
          />
          <Text size="small">뒤로</Text>
        </HeaderSection>
      )}
    </HeaderContainer>
  );
};

export default Header;

⭐ 해결 방법

Next.js는 참 유용한 프레임워크인데, 제공하는 강력한 기능 중 하나가, 이미지에 대한 최적화이다.

따라서 단순히 이미지를 불러오는 게 아니라, 특정 정보들을 가져온다. (src + width, height)

따라서 이를 콘솔로 찍으면 다음과 같다.

따라서, 이를 객체에서 꺼내 쓰면 된다!


import React, { ReactNode } from 'react';
import styled from '@emotion/styled';
import Text from '@components/atoms/Text';
import { css } from '@emotion/react';
import prevArrow from '../../../public/icons/prevArrow.svg';
import logo from '../../../public/logo.svg';
import menu from '../../../public/icons/menu.svg';

export interface HeaderProps {
  children?: ReactNode;
  size?: string | number;
  width?: string | number;
  height?: string | number;
  display?: 'none' | 'flex';
  isLogo?: boolean;
  isVisibleMenu?: boolean;
  isVisiblePrev?: boolean;
  src?: string;
  justifyContent?: 'none' | 'space-between';
}

const HeaderContainer = styled.div`
  padding: 0;
  margin: 0;
`;

const HeaderSection = styled.div`
  ${({ width, height, justifyContent }: Partial<HeaderProps>) => css`
    display: flex;
    align-items: center;
    justify-content: ${justifyContent || 'none'};
    width: ${typeof width === 'string' ? width : `${width}px`};
    height: ${typeof height === 'string' ? height : `${height}px`};
  `}
`;

const Image: React.FC<HeaderProps> = styled.img`
  ${({ size, isLogo }: Partial<HeaderProps>) => css`
    width: ${isLogo ? '108px' : typeof size === 'string' ? size : `${size}px`};
    height: ${typeof size === 'string' ? size : `${size}px`};
  `}
`;

const Header: React.FC<HeaderProps> = ({
  children,
  width = 'auto',
  height = 40,
  justifyContent = 'none',
  isVisiblePrev = true,
  ...props
}) => {
  return (
    <HeaderContainer {...props}>
      <HeaderSection
        width={width}
        height={height}
        justifyContent="space-between"
      >
        <Image src={logo.src} width={logo.width} height={logo.height} isLogo />
        <Image src={menu.src} width={menu.width} height={menu.height} />
      </HeaderSection>
      {isVisiblePrev && (
        <HeaderSection
          width={width}
          height={height}
          justifyContent={justifyContent}
        >
          <Image
            src={prevArrow.src}
            width={prevArrow.width}
            height={prevArrow.height}
          />
          <Text size="small">뒤로</Text>
        </HeaderSection>
      )}
    </HeaderContainer>
  );
};

export default Header;

잘 반영이 됐다!

Next Image File import

🔥 문제

⭐ 해결 방법

👏🏻 참고자료