[2차 프로젝트] 초기 세팅

• [1차 프로젝트] 초기 세팅 과 일부 동일

💥 차이점 (추가/수정 사항)

(1) Sass 미설치, 대신 Styled-Components 설치

• createGlobalStyle 과 ThemeProvider 를 사용하면 전역으로 사용할 요소들을 쉽게 정의 가능

// 컴포넌트 단위로 스타일 적용
npm install --save styled-components

npm install --save styled-components styled-reset

가. Global Style

// GlobalStyle.js

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

const GlobalStyle = createGlobalStyle`
  ${reset}
	
	// 전역스타일
	
`;

export default GlobalStyle;

// index.js

import React from "react";
import ReactDOM from "react-dom";
import GlobalStyle from './styles/GlobalStyle';
import { ThemeProvider } from "styled-components";
import Routes from "./Routes";
import theme from "./styles/theme";

ReactDOM.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  </>,
  document.getElementById("root")
);

나.ThemeProvider

// theme.js

const theme = {
  background: "#FFFEFC",
  white: "#FFFFFF",
  vermilion: "#ff7425",
  orange: "#FF9900",
  opacityOrange: "rgba(242,153,74,0.5)",
  yellow: "#FFD66C",
  grey: "rgba(196,196,196,0.3)",
  middleGrey: "rgba(65,65,65,0.4)",
  deepGrey: "#828282",
  lightOrange: "rgba(255,195,170,0.3)",
  fontColor: "#2D2B2B",
  fontTitle: "'Alata', sans-serif;",
  fontContent: "'Noto Sans KR', sans-serif;",
};

export default theme;

// theme 사용 시,

const Container = styled.div`
  background-color: ${props => props.theme.background}
`;

다. Mixin

// 사용 예시

import { css } from "styled-components"

const Navigation = styled.nav`
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  ${Sticky}
`;

const Sticky = css`
  position: fixed !important;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.11);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.11);
  transition: all 0.6s ease-in-out;
  color: black;
`;

//

const RingVariant = (radius, stroke = "10") => css`
  position: absolute;
  border-radius: 50%;
  height: ${radius * 2}px;
  width: ${radius * 2}px;
  border: ${stroke}px solid rgba(0, 0, 0, 0.5);
`;

(2) CRA 폴더 및 파일 구성

• 로컬에서 폴더만 생성하고 빈 폴더로 두고 PR을 올릴 경우, 폴더가 github에 올라가지 않음
• 반드시 폴더 안에 아무 파일이나 하나 생성하여 올리기.(ex: 빈 .js 파일 또는 .md 파일)

가. public 폴더

• data 폴더 : mock data 관리
• images 폴더 : 이미지 파일 관리
• index.html

나. src 폴더

• components 폴더 : 모든 페이지에서 공통으로 사용되는 컴포넌트 관리

• pages 폴더 : 페이지 단위의 컴포넌트 폴더로 구성

  • Login 폴더 : Login.js
  • Main 폴더 : Main.js

• styles 폴더

  • Global Styles.js - css 초기화
  • theme.js - 공통으로 사용하는 css 속성 정의 (ex. border color, font color, theme color)
  • fonts 폴더 (font-family, fonts.js)
  • GlobalStyles.js
  • Variable.js - Mixin 정의
  • theme.js

• config.js - fetch()에 들어가는 API 주소 관리

• index.js

• Routes.js

(3) vscode-styled-components 설치

• VSCode의 Extention으로 설치
  • styled-component 적용한 백틱 안에 스타일들이 색 구분이 되어 보기 편해짐

(4) git merge 대신, git rebase 사용

• Git Rebase 진행 순서

< 참고 >

• vscode titleBar 색 표기 방법
  

<출처> wecode(코딩 부트캠프) 세션