- [1차 프로젝트] 초기 세팅 과 일부 동일
createGlobalStyle
과ThemeProvider
를 사용하면 전역으로 사용할 요소들을 쉽게 정의 가능// 컴포넌트 단위로 스타일 적용 npm install --save styled-components
npm install --save styled-components styled-reset
// 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")
);
// 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}
`;
// 사용 예시
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);
`;
- 로컬에서 폴더만 생성하고 빈 폴더로 두고 PR을 올릴 경우, 폴더가 github에 올라가지 않음
- 반드시 폴더 안에 아무 파일이나 하나 생성하여 올리기.(ex: 빈
.js 파일
또는.md 파일
)
mock data
관리이미지 파일
관리components 폴더 : 모든 페이지에서 공통으로 사용되는 컴포넌트 관리
pages 폴더 : 페이지 단위의 컴포넌트 폴더로 구성
Login.js
Main.js
styles 폴더
Global Styles.js
- css 초기화theme.js
- 공통으로 사용하는 css 속성 정의 (ex. border color, font color, theme color)config.js - fetch()에 들어가는 API 주소 관리
index.js
Routes.js
- VSCode의 Extention으로 설치
- styled-component 적용한 백틱 안에 스타일들이 색 구분이 되어 보기 편해짐
- vscode titleBar 색 표기 방법
<출처> wecode(코딩 부트캠프) 세션