125일차 - 프로젝트 6일차

프로젝트

드디어 Final Project 코딩을 시작했다.
Header를 제작하려고 했지만, 기본 작업들을 추가로 진행하느라고 컴포넌트 생성과 Logo만 넣어놨다.

styled-components를 통해서 globalStyle을 진행하는 법을 서칭해서 배웠다.
App.js에서 세팅을하는 방법과 다른 파일을 생성해서 import해오는 방식이 있는데 나는 후자를 택했다.

우선 GlobalStyle.js 파일을 생성했다.

// GlobalStyle.js

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  *{
    box-sizing: border-box;
    font-family: sans-serif;
  }
`;

export default GlobalStyle;

그 이후 App.js 에서 import 해서 아래와 같이 최상위에 넣어 주었다.

//App.js

import React from 'react';
import GlobalStyle from './GlobalStyle';

const App = () => {
  return (
    <>
      <GlobalStyle />
    </>
  );
};

export default App;

Dev Log

오늘은 어떻게 프로젝트에 기여했나요?

• Header제작을 시작했고 반응형을 처음으로 시도해 볼 예정이다.
• styled-components를 이용해서 global setting을 성공했다.
• npm test를 semistandard를 테스트 하는 명령어로 바꿨다.

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 반응형을 공부하면서 동시에 프로젝트를 진행하다 보니 부족함이 많이 느껴진다.

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• Header제작을 완료해볼 예정이다.
• Header제작을 하면서 반응형을 적용해볼 예정이다.