[Week1] 프로젝트 초기 세팅
11056 단어 FinalProjectFinalProject
⭐️ 프로젝트 초기 세팅
1. README.md 작성
코드스테이츠에서 레퍼런스로 준 다른 프로젝트의 README.md를
참고삼아 작성한 우리팀의 README.md!
프로젝트 마무리 단계에서, 해야할 일들!
- Donorticon Hompage 링크를 실제 홈페이지 링크로 변경
- Feature 내용 추가
- TEAM K2H2 아바타 사진 변경
- Wiki로 갈 수 있는 링크 추가
2. styled-component GlobalStyle 설정
이 부분은 지난 semi-final 때도 내가 맡아서 했기에, 후딱후딱 설정을 마칠 수 있었다.
간단하게 코드를 보자면 아래와 같다.
(App.js)
import { ThemeProvider } from 'styled-components';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';
import Theme from './styles/Theme';
const App = () => {
return (
<ThemeProvider theme={Theme}>
<GlobalStyle />
<Router />
</ThemeProvider>
);
};
export default App;
(./styles/GlobalStyle)
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
const GlobalStyle = createGlobalStyle`
${reset}
* {
box-sizing: border-box;
}
html,body {
font-size: 15px;
font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a {
text-decoration:none;
color:inherit;
cursor: pointer;
}
button {
all:unset;
}
`;
export default GlobalStyle;
styled-reset
을 이용해서 모든 스타일들을 reset 시켜주는 건데,
왜 버튼이나 인풋 스타일은 그대로일까? 🌚
버튼에 먹혀 있는 스타일을 너모너모너모너모 싫어하기에 무조건all:unset
필수 ‼️
(./styles/Theme)
// 전역으로 사용할 색상
const color = {
main: '#FFCE44',
mainDark: '#E5B93D',
error: '#B71C1C',
};
// 반응형 대응하기 위한 화면 크기
const deviceSize = {
mobile: '414px',
tablet: '768px',
laptop: '1240px',
big: '2560px',
};
const device = {
mobile: `screen and (max-width: ${deviceSize.mobile})`,
tablet: `screen and (max-width: ${deviceSize.tablet})`,
laptop: `screen and (max-width: ${deviceSize.laptop})`,
big: `screen and (max-width: ${deviceSize.big})`,
};
const theme = { color, device };
export default theme;
theme을 사용할때에는, 아래와 같이 두가지 방법으로 사용 가능!
const Container = styled.div`
color: ${(props) => props.theme.color.main}
`
const Container = styled.div`
color: ${({theme}) => theme.color.main}
`
3. Redux 환경설정
- redux-toolkit 사용! 자세한 내용은 아래 링크로 고고
리덕스 툴킷 설명 참고 블로그 - 새로고침을 하면, 로그인한 상태값이 초기값(로그아웃 상태)으로 되돌아 가는 불미스러운 일을 방지하고자 redux-persist 사용!
Author And Source
이 문제에 관하여([Week1] 프로젝트 초기 세팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tiatiahwang/Week-1-프로젝트-초기-세팅저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)