js와 ts의 간단 비교
- js의 변수, 함수의 매개변수, 함수의 리턴값에 타입이 붙어있다고 생각하기
ex) const config : webpack.Configuration ()
위의 경우 변수 config에 타입(webpack.Configuration)을 붙여준건데 저렇게 선언하면 config에 마우스를 올리거나하면 저게 무슨 타입인지 두고두고 나오게 된다.
1. 웹팩 설정
import path from 'path';
// import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack from 'webpack';
// import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
const isDevelopment = process.env.NODE_ENV !== 'production';
const config: webpack.Configuration = { //ts식 변수선언+타입부여
name: 'sleact', // 프로젝트명
mode: isDevelopment ? 'development' : 'production', //if의 단축형태의 삼항연산자 사용. 위의 isDevelopment 상태에 따라 다른값 부여
devtool: isDevelopment ? 'hidden-source-map' : 'inline-source-map', //mode랑 마찬가지. 뒤의 값은 eval도 가능
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], // 바벨이 처리할 확장자 목록
alias: { //tsconfig.json에서 경로설정 간편하게 하기 위해 설정한 것과 같은 맥락. 웹팩에서도 경로 간단하게 하려면 해줘야함.
'@hooks': path.resolve(__dirname, 'hooks'),
'@components': path.resolve(__dirname, 'components'),
'@layouts': path.resolve(__dirname, 'layouts'),
'@pages': path.resolve(__dirname, 'pages'),
'@utils': path.resolve(__dirname, 'utils'),
'@typings': path.resolve(__dirname, 'typings'),
},
},
entry: { //메인 파일
app: './client',
},
module: {
rules: [
{
test: /\.tsx?$/, //ts파일 또는 tsx파일
loader: 'babel-loader', //바벨로더가 jsx로 바꿔줌
options: {
presets: [
[
'@babel/preset-env', //바벨을 이용해 예전 버전을 지원할 때-
{
targets: { browsers: ['last 2 chrome versions'] }, // -가장 최신 크롬버전 2개까지만 지원하겠다.
debug: isDevelopment,
},
],
'@babel/preset-react', //리액트 코드 바꾸려면 작성
'@babel/preset-typescript', //타입스크립트 코드도 바꾸려면 작성
],
},
exclude: path.join(__dirname, 'node_modules'),
},
{
test: /\.css?$/, //css파일도-
use: ['style-loader', 'css-loader'], //-바벨로더를 이용해 ts파일로 만들어버리겠다.
},
],
},
plugins: [
// new ForkTsCheckerWebpackPlugin({ //타입스크립트 쓰는 사람은 체크용 플러그인 추가
// async: false,
// // eslint: {
// // files: "./src/**/*",
// // },
// }),
new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }), //백엔드용 변수인 process_env, node_env를 프론트에서도 접근할 수 있게 해줌.
],
output: { //entry파일이 module의 loader를 타고 처리된 뒤 결과물로 나올때의 정보
path: path.join(__dirname, 'dist'), //현재 dir은 alecture2. alecture2에 dist폴더를 만들고 그안에 결과물인-
filename: '[name].js', //name.js파일을 제작. entry파일이 app2, app3등 여러개가 있으면 결과물도 app2.js, app3.js등 여러개로 나옴.
publicPath: '/dist/',
},
// devServer: {
// historyApiFallback: true,
// port: 3090,
// publicPath: '/dist/',
// },
};
if (isDevelopment && config.plugins) { //개발환경일때 쓸 플러그인
config.plugins.push(new webpack.HotModuleReplacementPlugin());
// config.plugins.push(new ReactRefreshWebpackPlugin());
}
if (!isDevelopment && config.plugins) { //개발환경이 아닐때 쓸 플러그인
}
export default config;- 에러처리되는 코드는 임시 주석처리함.
2. webpack 설치
npm i -D webpack webpack-cli @babel/core babel-loader @babel/preset-env @babel/preset-react잠깐 알아두기
- 브라우저는 html,css,js만 인식한다. jsx, ts, sass, less, styled component등은 기존 html, css, js의 한계를 극복하기 위해 만들어진 언어임. 결국에 브라우저에서 표시하기 위해서는 마크업 언어로 바뀌어야 함.
3. webpack, node에 타입스크립트, css 추가
npm i -D @types/webpack @types/node @babel/preset-typescript
npm i style-loader css-loader
-
오타냈을때는 컨트롤 C로 취소하고 다시 쓰기
-
쓴거 또쓰려면 방향키 위아래로 눌러서 띄워서 쓰기
4. index.html만들기
-
본격적인 소스는 client.tsx에 작성될 것임.
-
이렇게 작성된 ts파일은 스스로 js파일로 변환됨.
-
다음 webpack이 js파일을 받은 뒤 babel을 통해 좀 더 호환성이 좋은 js파일로 처리하여 js를 처리함.
-
css는 style-loader와 css-loader를 이용해 js파일로 변환함.
-
그러면 js와 css는 처리되었는데 html은 어떻게 처리하나?
-
babel이 html을 만들어주지는 않기 때문에 직접 index.html을 만들어줘야함.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sleact</title>
<style>
/*슬랙 개발자도구에서 가져온 내용.*/
html,
body {
margin: 0;
padding: 0;
overflow: initial !important;
}
body {
font-size: 15px;
line-height: 1.46668;
font-weight: 400;
font-variant-ligatures: common-ligatures;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./dist/app.js"></script>
</body>
</html>잠깐 알아두기 2
-
index.html의 중요성을 간과하기 쉬운데, index.html도 중요하다.
-
jsx 내에서 css도 처리하고 js도 처리하고 콘텐츠도 처리하기 때문에 중요성을 잊기 쉬우나 SPA 개발에서도 index.html은 중요함.
-
검색엔진 등에서 우리 사이트로 들어왔을때 제일 먼저 접하게 되는게 index.html임. 스타일도 html내에서 지정한 스타일이 제일 먼저 적용됨.
-
js는 body 맨 아래에서나 실행되기 때문에 index.html도 잘 작성해주어야 함.
-
성능 개선, 검색 최적화를 위해서는 index.html도 잘 작성하자.
-
중요한 스타일은 html에서 우선 적용하고 사용자 편의 등 차후 적용 내용은 jsx에서 적용하는게 좋다(구글 권장사항)
5. client.tsx, app.tsx
//client.tsx
import React from 'react';
import { render } from 'react-dom';
import App from './layouts/app';
render(<App />, document.querySelector('#app'));
//app.tsx
import React from 'react';
const App = () => {
return <div>슬랙트 고고</div>;
}
export default App;6. 테스트 구동
-
아직 설치안한 패키지가 있어서 실행이 안될 것임.
-
그냥 주석처리하고 webpack 실행하면 dist도 생성될 것임.
-
터미널 명령어는 npx webpack
-
또는 npm i webpack -g(전역설치)
-
하지만 전역설치는 비추천~
-
npx webpack을 해보니 webpack cli를 설치해야함. 설치 ㄱㄱ
-
근데도 에러가 뜸. webpack이 ts파일을 인식 못하는것 같다.
7. webpack이 ts 인식하게 만들기
- tsconfig-for-webpack-config.json 생성
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "Node",
"target": "es5",
"esModuleInterop": true
}
}- 공식문서에서 webpack에서 ts인식하게 하는 방법 보고 알수있음.
8. 마무리 build
- tsconfig를 새로 작성한 후에는 실행 명령어를 바꿔야함.
TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
이건데.. 길기도 하고 이걸 매번 외워서 칠 수 없으니 package.json에서 새로운 명령어로 등록해야함.
- scripts에 build 명령어로 등록.
"scripts": {
"build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},-
이후 npm run build 실행
-
그래도 안될거임 그러면 build 명령어 앞에 cross-env를 넣어주고 npm에서 설치 필요(npm i cross-env)
-
패키지 설치할때 오타 조심하자. npm i crossenv로 하이픈만 빼먹어도 단체로 해킹당하던 시절이 있었다고 함.
-
그래도 안됨 에러메시지 잘보자
-
아마 ts-node가 설치가 안되었을 것임.
-
npm i ts-node까지 하고 npm run build하면 될 것임..
-
세팅만 했는데 진이 다빠지는 기분...
