[졸업프로젝트] 작업 일지: 20.12.27

1. 이미지 로드

현재 우리 프로젝트는 리액트를 웹팩 빌드 후, 장고에서 서비스하기 때문에 구조가 복잡하다. 그래서 평범한 방법으로는 이미지를 불러올 수 없다.

webpack 빌드 시에, 이미지를 캐치하여 처리할 수 있다.

webpack.config.js

위에서와 같이 test 키워드를 통해 원하는 확장자를 캐치할 수 있고, 해당 확장자를 어떤 패키지로 처리할 지 결정할 수 있다.

위의 설정은 .js 파일은 바벨 로더(babel-loader)로, .jpg와 .png 파일은 파일 로더(file-loader)로 처리한다.

이후, 리액트 파일에서 원하는 이미지 파일을 로드하면 된다.

import work from "../images/work.jpg"

하지만 이런 식으로 하나씩 불러오면 귀찮기 때문에, 이미지들을 담은 폴더에 index.js를 만들었다.

참고로 아래와 같이 폴더를 import하면, 해당 폴더 안에 있는 index.js 파일이 로드된다.

즉, "../images"와 "../images/index"가 같다.

# images/index.js
import workImg from "./work.jpg"
import gameImg from "./game.jpg"
import designImg from "./design.jpg"

export { workImg, gameImg, designImg }

import { workImg, designImg, gameImg } from "../images"
# or
import { workImg, designImg, gameImg } from "../images/index"

import했다면, src에 해당 이미지를 넣는다

<Avatar src={workImg} />

나는 반복문을 이용한 코드를 작성했기 때문에 다음과 같이 작업했다.

const temp_data = [
  { src: workImg, content: "사무용" },
  { src: gameImg, content: "게임용" },
  { src: designImg, content: "그래픽/방송용" },
];

return (
	<>
    	{temp_data.map(data => (
          <Button key={`choice-button-${data.content}`}>
            <Avatar src={data.src} />
            {data.content}
          </Button>
        ))}
    </>
)

 

 

2. 커스텀 버튼 만들기

버튼 색이 원래대로라면 "default", "primary", "secondary" 중에 선택해야 한다. 하지만 우리 페이지의 이미지는 푸른색이기 때문에 색을 바꾸어야 한다.

다음과 같이 기존의 버튼에 스타일을 적용한 컴포넌트를 작성하였다.

import {Button} from "@material-ui/core";

const ChoiceButton = withStyles((theme) => ({
  root: {
    color: blueGrey[500],
    borderRadius: 30,
    width: "50%",
    height: 60,
    border: "3px solid",
  },
}))(Button);

적용은 일반 컴포넌트와 같다

<ChoiceButton variant="outlined">
  <Avatar src={data.src} />
  {data.content}
</ChoiceButton>

 

3. 왼쪽 끝에 이미지를 넣은 버튼 만들기

결과 화면

위와 같은 디자인을 적용하기 위해 다음과 같은 과정을 밟았다.

우선, 버튼 안에 Avatar를 넣는다. 버튼 컴포넌트의 props로 startIcon이 있지만, 개별적인 위치 적용이 어려워서 child로 넣었다.

const classes = useStyles();
  
return (
  <Button>
    <Avatar className={classes.buttonIcon} />
    버튼에 들어갈 내용
  </Button>
)

그리고, 다음과 같은 스타일 클래스를 생성했다.

const useStyles = makeStyles((theme) => createStyles({
  buttonIcon: {
    position: "absolute",
    left: 5,
    width: 50,
    height: 50,
  },
  something: {
    ...
  },
  ...
}));

postion을 absolute로 주면, 다른 child와 별개의 위치로 이동시킬 수 있다.

단, absolute 상태에서는 margin은 적용되지 않고, left, right, top, bottom으로만 위치를 지정할 수 있다.

 

---

 

velog.io/@rohkorea86/LoadersTutorial-%EC%9B%B9%ED%8C%A9%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80img-%EC%B2%98%EB%A6%AC

github.com/webpack-contrib/sass-loader/issues/522