src 디렉토리 구조
Root(/)
├── public/ : 파비콘이나 이미지(정적 이미지. 로고같은)
├── src/ : 소스코드
│ ├── assets/ : 동적 이미지(최적화하거나 코드에서 직접 참조해야하는 경우), 폰트, 스타일
│ ├── components/ : 컴포넌트
│ ├── hooks/ : 커스텀 훅
│ ├── libs/ : 주로 외부와 통신해야하는 API 관련 함수가 있을 자리
│ ├── pages/ : 페이지 (리액트 라우터로 꽂아버릴!)
│ ├── store/ : 전역 상태관리
│ ├── styles/ : 글로벌 스타일, 컬러 등 스타일
│ └── types/ : 타입 선언
├── App.tsx
└── main.tsx
Bash
복사
App.tsx 내용 설명
export const App = () => {
const naverClientId = import.meta.env.VITE_NAVER_MAP_CLIENT_ID;
return (
<NavermapsProvider ncpClientId={naverClientId}>
<ThemeProvider theme={defaultTheme}>
<GlobalStyles />
<DefaultLayout>
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
</Routes>
<NavBar />
</BrowserRouter>
</DefaultLayout>
</ThemeProvider>
</NavermapsProvider>
);
};
export default App;
TypeScript
복사
NavermapsProvider : 네이버 지도에 대한 API를 돌리기 위해서 필요한 데이터를 제공
ThemeProvider : styles 디렉토리의 theme, colors에 있는 변수, CSS 내용을 전체 적용시켜줌 (styles 디렉토리는 styles에서 다시 설명)
<GlobalStyles /> : 웹 폰트 적용, 짜치는 CSS를 다 지우는 resetCSS 적용해서 스타일 시트로 뿌리는 컴포넌트 (styles 디렉토리는 styles에서 다시 설명)
DefaultLayout : max-width값을 400px로 맞춰서 좌우 너비 조절하고, 배경색 조절을 하는 컴포넌트
BrowserRouter, Routes, Route : 리액트 라우터 강의 보기
styles
colors.tsx
아직 색상에 대한 코드가 더 많아질 수 있지만. 이렇게 변수명으로 꽂아놓으면
const colors = {
orange: '#FC6B02',
green: '#3FBA3B',
white: '#FFFFFF',
whitegray: '#F0F0F3',
gray: '#60646C',
black: '#303030',
};
export default colors;
TypeScript
복사
theme.tsx
import colors from './colors';
const defaultTheme = {
colors,
size: {
maxWidth: '400px',
},
};
export default defaultTheme;
TypeScript
복사
theme이 들어간 themeProvider를 사용해보기
theme이 themeProvider로 적용되어 있다면 따로 import 없이 끌어다가 사용할 수 있어요. 이유는 모릅니다. 원리는 같이 공부해봐요.
const Nav = styled.nav`
...
background-color: ${({ theme }) => theme.colors.white};
`;
TypeScript
복사
GlobalStyles.tsx
resetCss : html 자체로 꾸미면 안됩니다. 예를 들면 h1 태그가 h2 태그보다 크게 보이지만 이건 기본 css값이 그렇게 들어가서 그렇습니다. 내가 원하는 크기를 만들기 위해서는 이런 기본 css를 초기화시켜줘야합니다. 이 때 사용하는게 resetcss인데. 구글에 검색하면 바로나오는 곳에서 긁어왔어요.
createGlobalStyle : styled-components에서 전역 CSS를 먹이는 컴포넌트를 만들 때 사용하는 것 같아요.
•
이 컴포넌트에서 resetCss, 나눔스퀘어 라운드 폰트, 기본적인 배경색(그레이) 등을 설정합니다.