일반 게시물 CRUD는 익숙해졌지만 로그인 구현 + 백엔드와 데이터 주고받기는
아직 너무나 서툴러서 돌려돌려 이력서돌림판 하면서 포폴도 한 줄 추가할 겸
미니프로젝트를 시작하기로했다.
짭슬랙 만들어보기 !
소켓쓰는법도 배울겸, 타입스크립트도 익힐겸, 백이랑 데이터 주고받기 연습도할겸
겸 사 겸 사
그래서 오늘은 웹팩, 바벨 셋팅만 주구장창 했는데 드디어 끝났다..
대충 폴더 셋팅은 이렇고
셋팅안에 와장창 다 넣어줬다 (드러운거 싫어..)
보고싶었다 successfully!
성공의 영광은 함께해야 제맛
import path from 'path';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack, { Configuration as WebpackConfiguration } from 'webpack';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
// import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}
const isDevelopment = process.env.NODE_ENV !== 'production';
const config: Configuration = {
name: 'sleact',
mode: isDevelopment ? 'development' : 'production',
devtool: !isDevelopment ? 'hidden-source-map' : 'inline-source-map',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
'@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',
},
target: ['web', 'es5'],
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: { browsers: ['IE 10'] },
debug: isDevelopment,
},
],
'@babel/preset-react',
'@babel/preset-typescript',
],
env: {
development: {
plugins: [['@emotion/babel-plugin', { sourceMap: true }], require.resolve('react-refresh/babel')],
},
production: {
plugins: ['@emotion/babel-plugin'],
},
},
},
},
{
test: /\.css?$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new ForkTsCheckerWebpackPlugin({
async: false,
// eslint: {
// files: "./src/**/*",
// },
}),
new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/dist/',
},
devServer: {
historyApiFallback: true,
port: 3090,
devMiddleware: { publicPath: '/dist/' },
static: { directory: path.resolve(__dirname) },
proxy: {
'/api/': {
target: 'http://localhost:3095',
changeOrigin: true,
ws: true,
},
},
},
};
if (isDevelopment && config.plugins) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(
new ReactRefreshWebpackPlugin({
overlay: {
useURLPolyfill: true,
},
}),
);
// config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false }));
}
if (!isDevelopment && config.plugins) {
config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
// config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}
export default config;
설정을 잘해두는건 당연한건데... 역시나 지루하다 ㅋㅋㅋㅋ
그래도 하고보니 생각외로 크게 어려운건 없는듯 ?
이거 몰랐을땐 한없이 어렵게 느껴졌는데 말이야 아베마리아
나는 이해할 수 없는 세계를 공부중이시다 그래서 이게 뭔데요 ! 쒸익쒸익 ㅠㅠ
1타강사 ㅇㅈ
일단 기존의 프로젝트 에러는 싹 다 잡았고 기능도 이상없이 잘 작동하기 때문에
이번주는 공부의 시간을 가지기로...!
에러모음집 릭클릭클!
어렵다고 느끼는건 내가 공부안해서 그렇다.
공부해도 어렵다는건 내가 열심히 안해서 그렇다.
힘내자....
뚱이도 취업하는데... 나는..