Skip to content

Commit

Permalink
Develop frontend (#680)
Browse files Browse the repository at this point in the history
* refactor: webpack 캐시를 활용한 빌드 속도 개선 (#672)

* chore: dev환경 webpack 설정 구현

* chore: common환경 webpack 설정 구현

* chore: prod환경 webpack 설정 구현

* chore: 기존 웹팩 환경 파일 제거

* chore: 불필요한 babelrc 파일 제거

* chore: 빌드 명령어 변경 및 사용하지 않는 라이브러리 제거

* chore: 타입체킹에 실패하면 빌드가 되지 않도록 설정

* fix: 모달 열기 이벤트 동작 안하는 에러 (#675)

* chore: dev환경 webpack 설정 구현

* chore: common환경 webpack 설정 구현

* chore: prod환경 webpack 설정 구현

* chore: 기존 웹팩 환경 파일 제거

* chore: 불필요한 babelrc 파일 제거

* chore: 빌드 명령어 변경 및 사용하지 않는 라이브러리 제거

* chore: 타입체킹에 실패하면 빌드가 되지 않도록 설정

* fix: 페이지 code 스플리팅으로 인한 suspense 오류 해결

* fix: axios 401 에러로 인한 주석 처리

* fix: 간헐적 에러 발생 오류 해결 #674

* refactor: 변경된 모달 컴포넌트 적용

* fix: 모달 content 내용 넘어가는 버그 해결

* fix: modal 버전 업그레이드 및 필요없는 파일 제거
  • Loading branch information
turtle601 authored Mar 17, 2024
1 parent 6c286bf commit 40bbf6a
Show file tree
Hide file tree
Showing 26 changed files with 1,021 additions and 1,163 deletions.
36 changes: 0 additions & 36 deletions frontend/.babelrc

This file was deleted.

53 changes: 44 additions & 9 deletions frontend/.webpack/webpack.common.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,57 @@
const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: ['./src/index.tsx'],
entry: './src/index.tsx',

output: {
path: path.resolve(__dirname, '../dist/'),
publicPath: '/',
filename: '[name].[chunkhash:8].js',
path: path.join(__dirname, '../dist'),
filename: '[name].[chunkhash].js',
clean: true,
},

resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},

module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
sideEffects: true,
},
{
test: /\.(jpg|jpeg|gif|png|ico)?$/,
type: 'asset',
generator: {
filename: 'images/[name][ext]',
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)?$/,
type: 'asset',
generator: {
filename: 'fonts/[name][ext]',
},
},
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
],
},

plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
}),
new MiniCssExtractPlugin(),
],

devServer: {
static: {
directory: path.resolve(__dirname, '../public'),
Expand All @@ -23,10 +62,6 @@ module.exports = {
allowedHosts: 'all',
},

optimization: {
minimizer: ['...', new CssMinimizerPlugin()],
},

performance: {
hints: false,
maxEntrypointSize: 512000,
Expand Down
74 changes: 0 additions & 74 deletions frontend/.webpack/webpack.config.js

This file was deleted.

42 changes: 42 additions & 0 deletions frontend/.webpack/webpack.dev.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
const path = require('path');
const Dotenv = require('dotenv-webpack');
const { merge } = require('webpack-merge');

const common = require('./webpack.common');

module.exports = merge(common, {
mode: 'development',
devtool: 'eval-cheap-module-source-map',
cache: {
type: 'filesystem',
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/i,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheCompression: false,
cacheDirectory: true,
presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], '@babel/preset-typescript'],
plugins: [
['babel-plugin-styled-components'],
[
'babel-plugin-root-import',
{
rootPathPrefix: '~',
rootPathSuffix: 'src',
},
],
],
},
},
],
},
plugins: [
new Dotenv({
path: path.resolve(__dirname, `../.msw.env`),
}),
],
});
65 changes: 65 additions & 0 deletions frontend/.webpack/webpack.prod.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const path = require('path');
const Dotenv = require('dotenv-webpack');
const { merge } = require('webpack-merge');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const common = require('./webpack.common');

module.exports = merge(common, {
mode: 'production',
devtool: false,
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/i,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: { browsers: ['last 2 versions', '>= 5% in KR'] },
useBuiltIns: 'usage',
corejs: {
version: 3,
},
},
],
['@babel/preset-react', { runtime: 'automatic' }],
'@babel/preset-typescript',
],
plugins: [
[
'babel-plugin-styled-components',
{
displayName: false,
minify: true,
transpileTemplateLiterals: true,
pure: true,
},
],
[
'babel-plugin-root-import',
{
rootPathPrefix: '~',
rootPathSuffix: 'src',
},
],
],
},
},
],
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
new ForkTsCheckerWebpackPlugin(),
new Dotenv({
path: path.resolve(__dirname, `../.prod.env`),
}),
],
});
17 changes: 6 additions & 11 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,10 @@
"license": "MIT",
"sideEffects": false,
"scripts": {
"start:msw": "webpack serve --port 3000 --env TARGET_ENV=msw --mode development",
"start:dev": "webpack serve --port 3000 --env TARGET_ENV=dev --mode production",
"start:prod": "webpack serve --port 3000 --env TARGET_ENV=prod --mode production",
"build:msw": "webpack --env TARGET_ENV=msw --mode development",
"build:dev": "webpack --env TARGET_ENV=dev --mode production",
"build:prod": "webpack --env TARGET_ENV=prod --mode production",
"start:dev": "webpack serve --port 3000 --config .webpack/webpack.dev.js",
"start:prod": "webpack serve --port 3000 --config .webpack/webpack.prod.js",
"build:dev": "webpack --config .webpack/webpack.dev.js",
"build:prod": "webpack --config .webpack/webpack.prod.js",
"lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
"lint:css": "stylelint './src/**/*.{tsx,ts,jsx,js}'",
"lint:css:fix": "stylelint './src/**/*.{tsx,ts,jsx,js}' --fix",
Expand All @@ -30,7 +28,7 @@
"@tanstack/react-query-devtools": "^4.36.1",
"axios": "^1.5.1",
"browser-image-compression": "^2.0.2",
"celuveat-ui-library": "^1.2.8",
"celuveat-ui-library": "^1.4.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
Expand All @@ -45,7 +43,6 @@
"@babel/preset-env": "^7.23.2",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.2",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
"@storybook/addon-essentials": "^7.4.6",
"@storybook/addon-interactions": "^7.4.6",
"@storybook/addon-links": "^7.4.6",
Expand All @@ -61,6 +58,7 @@
"@testing-library/react": "^14.0.0",
"@types/google.maps": "^3.53.5",
"@types/jest": "^29.5.3",
"@types/node": "^20.11.0",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@types/react-slick": "^0.23.11",
Expand All @@ -77,7 +75,6 @@
"css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^5.0.1",
"cypress": "^13.3.1",
"dotenv": "^16.3.1",
"dotenv-webpack": "^8.0.1",
"eslint": "^8.51.0",
"eslint-config-airbnb": "^19.0.4",
Expand All @@ -96,7 +93,6 @@
"msw": "^1.3.2",
"postcss-styled-syntax": "^0.5.0",
"prettier": "^3.0.3",
"react-refresh": "^0.14.0",
"storybook": "^7.0.25",
"style-loader": "^3.3.3",
"stylelint": "^15.10.3",
Expand All @@ -105,7 +101,6 @@
"stylelint-order": "^6.0.3",
"terser-webpack-plugin": "^5.3.9",
"ts-jest": "^29.1.1",
"ts-loader": "^9.5.0",
"webpack": "^5.89.0",
"webpack-bundle-analyzer": "^4.9.1",
"webpack-cli": "^5.1.4",
Expand Down
24 changes: 23 additions & 1 deletion frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
import { Suspense } from 'react';
import { styled } from 'styled-components';
import LoadingIndicator from '~/components/@common/LoadingIndicator';

import Router from './router/Router';

function App() {
return <Router />;
return (
<Suspense
fallback={
<StyledProcessing>
<LoadingIndicator size={64} />
</StyledProcessing>
}
>
<Router />
</Suspense>
);
}

export default App;

const StyledProcessing = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
`;
Loading

0 comments on commit 40bbf6a

Please sign in to comment.