108일차 - 프로젝트 3일차

프로젝트 3일차이다. 어제 보다 고생이 많았다.

오늘은 Header만드는 작업을 했다.
제작을 완료하면 페이지 5 개에 모두 쓸 수 있기 때문에, 열심히 작업했다.
그런데 예상하지 못한 문제들에 많이 부딪혔다.

react에서 svg파일은 img와 사용방식이 달랐다.

img 태그로 아무리 받아올려고 해도 svg파일이 화면에 나타나지가 않았다.
여기서 많이 해맸다.

import { ReactComponent as 정할이름 } from "파일경로/파일이름.svg";

위와같은 식으로 import해서 사용하는 형식이었다.

styled-components 적응

오랜만에 styled-components를 사용해보니 헷깔리는 것이 많았다.
그래도 적응은 30분 이내로 짧게 걸렸다.

story book 제외

스토리북을 사용하면서 작업을 하다가, 일주일 이내로 완료해야하는 이번 프로젝트에 사용을 하려니 비효율적이라는 생각이 들어서 팀원들과 협의 하에 이번 프로젝트에서 제외시키기로 했다.

img 화면 중앙으로 보내기

img보다 상위에 HeaderContainer div태그를 만들어서 중앙정렬을 시키는 방식을 사용했다.

import styled from "styled-components";

const HeaderContainer = styled.div`
	display: block;
	text-align: center;
`;

위와같이 해결했다.