개발자가 옛날 브라우저 환경을 신경안쓰고 개발해도되도록 js 최신버전을 호환버전으로 트랜스 파일링 해주는 역할
우리는 css, js같은 파일들은 프레임워크에서 제시해주는 색다른 파일구조로 만들것이고, 결국 이들을 Webpack이 최종 결과물 형식인 css, js로 바꿔주는 역할을 해줌.
검색엔진에서 참고하는부분은 결국 index.html이다. 즉 SEO를 위해서도, 정말 중요한 파일 또한 위에서부터 순서대로 읽어나가기때문에 script를 불러오기 전 코드들도 신경을 많이 써야함. 결국 성능까지 책임지는것이 이 index.html이다.
이는 구글의 추천
<body>
<div id="app"></div>
<script src="/dist/app.js"></script>
</body>
jsx로 만든 태그들이 app으로 설정되어있으니 저 dist/app.js의 내용은 id가 app인 div를 채워넣는다고 생각하면된다.
그래서 보통 NODE_ENV=production npx webpack명령어를 많이 쓰는데,
윈도우에선 저 명령어가 안된다
cross-env NODE_ENV=production npx webpack을 치면 되는데,
이걸위해선 cross-env, ts-node를 설치해야한다.
resolve에러는 --force를 붙여서 설치하면된다.
현재 이 레포에선 npm run build로 정적으로 명시해놓았다.
빌드한결과
단, 핫리로딩 서버가 필요하다 이게 바로 웹팩데브서버
npm i webpack-dev-server -D -D는 개발전용이란뜻
npm i -D @types/webpack-dev-server
npm i @pmmmwh/react-refresh-webpack-plugin
npm i react-refresh
이런거 귀찮으니 그냥 다음엔 **CRA(Create React App)**사용하자.
webpack.config.ts에도
if (isDevelopment && config.plugins) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new ReactRefreshWebpackPlugin());
}env: {
development: {
plugins: [require.resolve('react-refresh/babel')],
},
}, devServer: {
historyApiFallback: true, // react router
port: 3090,
devMiddleware: { publicPath: '/dist/' },
static: { directory: path.resolve(__dirname) },
},를 넣어야한다.
이제 dev서버를 여는 스크립트는
webpack serve --env development이다.
강사 Zerocho는 이렇게 구성한다
- pages - React는 SPA여도 페이지개념이 있다 그걸 저장
- components - React의 세부 컴포넌트
- layouts - 페이지들간의 공통컴포넌트
위 그림은 Pages에 Login 및 회원가입 컴포넌트를 폴더로 만들고 각각에 index.tsx(컴포넌트 메인), sytle.tsc(컴포넌트 css)로 만드는 편
또한 webpack.config.ts의 alias에 미리 정의를 해두는 것이 좋다.(위에선 @로 표현하는데 ~이나 아예 없이 쓰는 사람도 있다)
npm i -D @types/react-router @types/react-router-dom
//layouts/App.tsx
...
const App = ()=>{
return <Switch>
<Redirect exact path='/' to="/login" />
<Route path="/login" component={LogIn} />
<Route path="/signup" component={SignUp} />
</Switch>
};페이지 라우터를 Switch로 감싼 것 중 반드시 하나만 동작되도록 하는것 2개 이상이 동시에 될 수 없고, 저것들중 아무것도 안될순 없다.
path로 명령을 받으면 to옵션에 해당하는 곳으로 보내주는 것 따라서 저 위에선 ~/를 입력하면 /login을 불러내니 2번째 줄이 실행된다.
//client.tsx
...
render(
<BrowserRouter> // <-----
<App />
</BrowserRouter>, // <-----
document.querySelector('#app'),
);그런데 왜 이 프로젝트에선 새로고침해도 잘만 유지되는걸까?
webpack.config.ts의 devServer에 historyApiFallback: true를 해서 주소를 사기 칠수있다(서버상엔 실제 없는 주소인데 프론트입장에서 되도록 해주는것).
원랜 SPA에선 URL이란 개념이 없다. 오로지 index.html만 가능해서 local:3090/ 이라는 주소 하나만 존재하는게 맞는데,
위에 저 옵션이 true면 가짜주소를 만들어내준다.
주의! 단 이 행동들은 프론트에서만 일어나고, URL을 쳤을때 서버 입장에선 오로지 local:3090만 전해진다! 뒤에 /login or /signup을 치던 다 무시된다!