elice) project1: initial setting/ git revert

🌱 initial setting

✅ 작성할 사항들

• reset.css
  • box-sizing 도 추가해서 같이 작성해두면 좋을 거 같다.
• GlobalStyle
• theme

코드 작업에 들어가기 전에 초기 셋팅에서 하나씩 빼먹어서 조금씩 추가하는 일이 있었다.
다음 프로젝트에는 빼먹지 않고 한번에 작업하기 위해서 이번에 작성했던 것들과 관련 내용들을 정리해 두려 한다.

✔️ App

import { ThemeProvider } from 'styled-components';
import AppRouter from './routes/AppRouter';
import theme from './styles/theme/theme';
import GlobalStyle from './styles/global/GlobalStyle';

function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <AppRouter />
      </ThemeProvider>
    </>
  );
}

export default App;

theme를 사용하기 위해 전체를 ThemeProvider로 감싸준다.
GlobalStyle을 작성해 router를 감싸주어 사용한다.

---

✔️ global

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    body {
        font-family: "Noto Sans KR", sans-serif;;
    }
`;

export default GlobalStyle;

우리는 reset.css를 따로 작성하고 여기에 우리 프로젝트가 적용하는 글로벌 스타일만 작성했는데, reset 관련 코드도 여기에 작성하는 경우도 있는 것 같다.

✔️ theme

import { DefaultTheme } from 'styled-components';

const theme: DefaultTheme = {
  color: {
    paleGreen: '#DBF7D2',
    green: '#2DB400',
    lightGreen: '#90E572',
    darkGreen: '#2C910A',
    deepGreen: '#134303',
    paleCoral: '#FFD4C6',
    coral: '#FF7043',
    paleNavy: '#C0C9D5',
    navy: '#2D4B73',
    paleGray: '#D9D9D9',
    gray: '#A9A9A9',
  },
};

export default theme;

프로젝트 전반에서 사용할 색상들을 매번 코드를 기억하기보다는 theme으로 작성해서 효율적으로 관리할 수 있게 했다. 폰트 사이즈나 로고 src 등도 함께 관리할 수 있을 것 같다 !

TypeScript와 함께 사용하려면 theme도 type을 전달해주어야 한다 !

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    color: {
      paleGreen: string;
      green: string;
      lightGreen: string;
      darkGreen: string;
      deepGreen: string;
      paleCoral: string;
      coral: string;
      paleNavy: string;
      navy: string;
      paleGray: string;
      gray: string;
    };
  }
}

---

😭 git revert

이제까지는 github만 써봤는데 이번에 처음으로 gitlab을 써보게 되었다.
merge를 하는데 어느 브랜치와 병합할 것인지 설정하는 것을 잘못해서
dev 브랜치와 병합하려던 것이 master로 병합 되어 버렸다....
local에서 revert 해서 올리려니 --force를 하지 못하도록 보호되어 있어서 불가능했다...

거의 울기 직전으로 구글링하다 보니 웹에서 revert하는 방법을 찾을 수 있었다.

참고링크:
gitlab web revert
git revert/reset