프로젝트 시작

이제 제대로 프로젝트를 시작해보자.
페이지 이동이나 이런 기능은 딱히 필요없을 것 같아 그냥 App 컴포넌트에서 모든 것을 다 할라고 한다.
대충 페이지를 봤을 때 이런 구성을 짜려고 한다.

<네비바: 앱 이름과 제작자 써놓을라고 만든거>
<글씨가 적용된 이미지 예시 div>
<색깔 바꾸는 버튼 리스트?>
<입력창>
<썸네일 다운로드 버튼>

이정도만 해도 지금 내가 원하는 기능은 충분히 구현할 수 있을 것 같다.

사용할 라이브러리들

react

리액트가 아직 익숙하지 않아서, 본격적인 팀 프로젝트를 시작하기 전에 리액트를 좀 연습해볼라고 일부러 리액트 프로젝트를 시작했다.

styled-components

코드잇 스프린트 과정을 수강하면서 배운 스타일 라이브러리이다. 아직 제대로 써본적이 없어서 이 기회에 써보려고 한다.

html2canvas

1편에서 이미 다룬 라이브러리인데, 이를 활용해 썸네일 이미지를 만들 수 있다.

만들어 보자

일단 이번 2편에서의 목표는 styled-components를 이용해 디자인을 짜놓는 거다.
styled-components를 다운받자.

글로벌 스타일 적용

reset.css

reset.css를 글로벌 스타일로 적용할 것이다.

https://meyerweb.com/eric/tools/css/reset/
여기서 reset.css를 가져왔다.

추가로 전체 요소에 border-box를 적용 시켜주자.

Pretendard

https://github.com/orioncactus/pretendard
요즘 인기가 많다는 pretendard 폰트를 적용시킬 거다.
가변 다이나믹 서브셋 cdn을 받아와 index.html에 넣고, 전체에 반영시킨다.

이제 styled-components의 createGlobalStyle을 이용해 공통 스타일을 적용시켜 보자.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
/* reset.css에서 긁어온것들 */

*{
  box-sizing: border-box;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  
}
`;

GlobalStyle은 컴포넌트니까 따로 컴포넌트 폴더에 넣어놓겠다.

NavBar 만들기

https://www.w3schools.com/css/css_navbar.asp
이 사이트에서 적당해보이는 디자인을 가져왔다.
좌측에 앱 이름을, 우측에 내 이름을 넣어보자.

const StyledDiv = styled.div`
  color: #fafafa;
  font-size: 24px;
`;

const NavBar = styled.nav`
  width: 100%;
  height: 50px;
  background-color: #333333;
  padding: 10px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

function StyledNavBar({ className }) {
  return (
    <NavBar className={className}>
      <StyledDiv>블로그 썸네일 생성기</StyledDiv>
      <StyledDiv>by Codeit Sprint 2기 김광현</StyledDiv>
    </NavBar>
  );
}

NavBar 컴포넌트를 만들었다.

쓸만하다.

결과

이런 식으로 스타일드 컴포넌트를 게속 사용해보겠다.

인풋과 버튼은 인터넷에서 스타일을 긁어왔다.

제작 중 특이사항

스타일에 props 주기 연습

이번에 스타일드 컴포넌트를 사용해 prop를 주는 것을 연습해봤는데, 버튼의 크기를 props를 이용해 크고 작게 할 수 있도록 했다.

const Button = styled.button`

  font-size: ${({ large }) => (large ? '24px' : '12px')};
  
`;

컴포넌트의 props로 large가 존재한다면 폰트 사이즈를 24px로 하도록 했다.

썸네일의 비율

제일 중요한건, 썸네일의 가로 세로 비율이였다.
기껏 만들었는데 화면이 뭉개져 나오면 슬프지 않을까?

그래서 벨로그의 출간하기 버튼 클릭 시 썸네일 지정을 개발자 도구로 확인했다.

대략 7:4정도의 비율을 가졌다.

개발자 도구가 얼마나 소중한 지 다시금 깨닫게 되었다.

TODO

이제 대강 레이아웃을 만들었으니 실제 기능을 구현해보자!