이번 주 가벼운 마음으로 개인 프로젝트를 진행하다가 배포 업데이트를 하려고 build를 하고
build 된 어플을 실행시켜 보았다.
그런데 이게 뭔 일인지.... 스타일이 몽땅 사라져 있는 것이었다.
이전에 똑같은 방식으로 build 해서 배포할 때는 아무런 문제가 없었는데 갑자기 지금에 와서야 이러는 이유를 모르겠다.
거기다 로컬에서 돌렸을 때는 스타일이 모두 잘 적용되어서 돌아가고 있었다.
무엇이 문제인지 한참을 헤메다가 원인을 찾게 되었다.
원인은 styled-components의 GlobalStyles 컴포넌트 때문이었다.
지금까지 index.js에 <App /> 컴포넌트보다 상위의 위치에 <GlobalStyles /> 컴포넌트를 위치시켰는데,
문서를 살펴본 결과 <App /> 컴포넌트와 같은 위치 혹은 더 아래의 위치에 <GlobalStyles />를 위치시켜야 한다고 한다.
import { AppContainer, Header, Body } from './AppStyles';
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import SideMenu from './Components/SideMenu/SideMenu';
import TopMenu from './Components/TopMenu/TopMenu';
import Router from './router';
import GlobalStyles from './ui/GlobalStyles';
function App() {
return (
<AppContainer>
<GlobalStyles />
<BrowserRouter>
<Header>
<SideMenu />
</Header>
<Body>
<TopMenu />
<Router />
</Body>
</BrowserRouter>
</AppContainer>
);
}
export default App;따라서 위와 같이 코드를 변경하니 모든 게 잘 작동되었다.
하지만 두 가지 풀리지 않는 의문이 있다.
- 왜 로컬에서는 잘 작동하였는가?
- 왜 이전에는 문제가 없다가 갑자기 문제가 발생했는가?
이 부분에 대해서는 짐작되는바가 있지만, 가설일 뿐 아직은 공부가 부족해 정확한 원인을 알지는 못하겠다.
쓰읍...
'Front-End > React' 카테고리의 다른 글
| [React] 선언형과 리엑트 (0) | 2022.10.20 |
|---|---|
| [React] 커스텀 훅 이용하기 (0) | 2022.10.19 |
| [React] 리엑트 컴포넌트가 두 번 렌더링 되는 이유? (0) | 2022.07.29 |
| [React] 리엑트 디자인 패턴: Return Component From Hooks (0) | 2022.06.30 |
| [React] 2022 리엑트 컴포넌트 디자인 패턴 (0) | 2022.06.30 |
