market-project's Introduction
market-project's People
market-project's Issues
admin ํ์ด์ง๋ฅผ ๋ฆฌํํ ๋ง ํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
- admin ํ์ด์ง ๋ ์ด์์ ์์ .
- tailwind css ์ ์ฉ.
์์ธ ์์ ๋ด์ฉ
- ๊ธฐ์กด ์ปดํฌ๋ํธ tailwind css ์ ์ฉ.
jwt์ refreshToken ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
jwt์ refreshToken ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค.
์์ธ ์์ ๋ด์ฉ
- jwt ์ธ์ฆ ๋ฐฉ์์ refreshToken์ ์ถ๊ฐ(redis ๊ธฐ๋ฐ).
- ํด๋ผ์ด์ธํธ์์ ๋ก๊ทธ์ธ ์ ์งํ๋ ๋ฐฉ๋ฒ ๋ฆฌํฉํ ๋ง.
ProductSlice ์ํ ๊ด๋ฆฌ ๋ฆฌํฉํ ๋งํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
productSlice๋ฅผ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ์ ์ํ ๊ด๋ฆฌ ๋ฆฌํฉํ ๋ง
์์ธ ์์ ๋ด์ฉ
- ๊ด๋ฆฌ์ ํ์ด์ง ์ํ ์ถ๊ฐ, ์ญ์ ๊ธฐ๋ฅ์์ ์๋ชป ์ฌ์ฉ๋๊ณ ์๋ redux ์ฝ๋ ์์ .
- ๋ณ์๋ช ์์ .
์นํฉ ์ค์ ์ ์์ ํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
์นํฉ ์ค์ ์ ์์ ํ๋ค.
์์ธ ์์ ๋ด์ฉ
- ์นํฉ์์ Polyfill ์ค์ ์
babel/plugin-transform-runtime
๋ก ๋ณ๊ฒฝ @types
๋ผ์ด๋ธ๋ฌ๋ฆฌ devDependencies๋ก ์ด๋- build๋ JS ํ์ผ๋ค js ํด๋๋ก ๋ฌถ๊ธฐ
- css loader ์ ์ฉ
- splitChunks ์ ์ฉ
useSelector ์ต์ ํ
useSelector ๋ฌด๋ถ๋ณํ ๊ตฌ์กฐ ๋ถํด ํ ๋น์ผ๋ก ์ธํด ๋ถํ์ํ ๋ ๋๋ง์ด ๋ฐ์ํจ.
์ํ๋ชฉ๋ก ํํฐ ๊ธฐ๋ฅ์ ๋ฆฌํฉํ ๋งํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
์ํ๋ชฉ๋ก ํํฐ ๊ธฐ๋ฅ์ ๋ฆฌํฉํ ๋งํ๋ค.
์์ธ ์์ ๋ด์ฉ
- ํํฐ๋ฅผ ํด๋ฆญํ๊ณ ์ ์ฉ๋ฒํผ์ ํด๋ฆญํด์ผ ํํฐ๊ฐ ์ ์ฉ๋๋๋ฐ, ์ด๋ฅผ ํํฐ๋ฅผ ํด๋ฆญํ๋ฉด ๋ฐ๋ก ํํฐ๊ฐ ์ ์ฉ๋ ์ ์๋๋ก ๋ณ๊ฒฝ.
- useSelector ์ต์ ํ.
Auth ๊ด๋ จ ๊ธฐ๋ฅ์ ๋ฆฌํฉํ ๋งํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
๋ก๊ทธ์ธ ์ ์ง ๊ด๋ จํ ๊ธฐ๋ฅ์ ๋ฆฌํฉํ ๋ง.
์์ธ ์์ ๋ด์ฉ
- ํ์ด์ง ์๋ก๊ณ ์นจ์, Protected routes์์ ์ ์ญ ์ํ ๊ฐ์ด ์ด๊ธฐํ๋๋ฉด์ ๋ฉ์ธํ์ด์ง๋ก ์ด๋๋๋ ์ค๋ฅ ์์ .
- storeUserInfo ํด๋ ์์น ๋ณ๊ฒฝ ๋ฐ ๊ธฐ๋ฅ ์์ . (hooks๊ฐ ์๋๋ฐ ์ปค์คํ ํ ์ฒ๋ผ ์ฌ์ฉํ๊ณ ์์.)
- ๊ฐ๋ ์ฑ์ ์ํด unwrapResult๋ฅผ unwrap()์ผ๋ก ๋ณ๊ฒฝ.
- ์ฌ์ฉ์ ์ ๋ณด ์ ๋ฐ์ดํธ ํ ์ฟ ํค ์ฌ๋ฐ๊ธ ๊ธฐ๋ฅ ์ถ๊ฐ.
- ๋ก๊ณ ํฐํธ ์ญ์ .
์ํ ๋ฆฌ๋ทฐ ๊ธฐ๋ฅ์ ์์ ํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
์ํ ๋ฆฌ๋ทฐ ๊ธฐ๋ฅ์ ์์ ํ๋ค.
์์ธ ์์ ๋ด์ฉ
- ์ํ ๋ฆฌ๋ทฐ component๊ฐ ์ํ ํ์ด์ง์ ์๋๋ฐ ์ฃผ๋ฌธ๋ชฉ๋ก์์ ์์ฑํ ์ ์๋๋ก ๋ณ๊ฒฝ.
- ํ์ฌ ๋ก๊ทธ์ธ๋ง ํ๋ฉด ๋ฆฌ๋ทฐ๋ฅผ ์์ฑํ ์ ์์ -> ์ํ์ ๊ตฌ๋งคํ ์ฌ์ฉ์๊ฐ ์์ฑํ ์ ์๋๋ก ๋ณ๊ฒฝ.
- ๋ฆฌ๋ทฐ๋ฅผ ์์ฑํ๋ค๋ฉด ๋ฆฌ๋ทฐ ๋ฑ๋ก ๋ฒํผ์ด display ๋์ง ์๋๋ก ๊ตฌํ.
webpack, babel ๋ฑ ๊ฐ๋ฐํ๊ฒฝ์ ์์ ํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
webpack, babel, eslint, prettier, typescript ์ค์ ์ ์์ ํ๋ค.
์์ธ ์์ ๋ด์ฉ
- eslint ๊ด๋ จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ถ๊ฐ ๋ฐ ์ค์ ํ์ผ ์์ (ํ์ฌ ์ ๋๋ก ์ค์น๋์ด ์์ง ์๊ณ ์ ์ฉ๋์ด ์์ง ์์)
- babel, typescript ์ค์ ํ์ผ ์์ (loader, preset ๊ด๋ จ ์ค์ ์ด ์ ํํ์ง ์์)
user ํ์ด์ง๋ฅผ ๋ฆฌํํ ๋ง ํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
- user ํ์ด์ง ๋ ์ด์์ ์์ .
- tailwind css ์ ์ฉ.
- ์ฃผ๋ฌธ ํ์ธ ํ์ด์ง ์์ .
- ์ฃผ๋ฌธ ํ์ธ ํ์ด์ง ์ํ preview ์์ .
์์ธ ์์ ๋ด์ฉ
- ์ฃผ๋ฌธ ํ์ธ ์์ธ ํ์ด์ง ๋ฆฌ๋ทฐ ์ปดํฌ๋ํธ ๋ชจ๋ฌ ์ ์ฉ.
- ๊ธฐ์กด ์ปดํฌ๋ํธ tailwind css ์ ์ฉ.
- user ํ์ด์ง ๋ ์ด์์ ์กฐ๊ฑด๋ถ๋ก ์ฌ์ฉํ๋๋ก ๋ณ๊ฒฝ.
์ํ ์์ธ ํ์ด์ง, ๊ฒฐ์ ํ์ด์ง๋ฅผ ๋ฆฌํฉํ ๋ง ํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
- ์ํ ์์ธ ํ์ด์ง, ๊ฒฐ์ ํ์ด์ง tailwind ์ ์ฉ.
- ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง tailwind ์ ์ฉ.
- ๋ฐ๋ก ๊ฒฐ์ ๊ธฐ๋ฅ ์ถ๊ฐ.
์์ธ ์์ ๋ด์ฉ
- ์ํ ์์ธ ํ์ด์ง, ๊ฒฐ์ ํ์ด์ง, ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง tailwind ์ ์ฉ.
- ํ์ฌ ์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ ๊ธฐ๋ฅ๋ง ๊ตฌํ๋์ด ์๋๋ฐ, ์ํํ์ด์ง์์ ๋ฐ๋ก ๊ฒฐ์ ํ์ด์ง๋ก ๋์ด๊ฐ ์ ์๋๋ก ๊ตฌํ.
- ์ํ ์๋์ input์ผ๋ก ์ ๋ ฅํ ์ ์๋๋ก ๋ณ๊ฒฝ.
webpack splitChunks ์ค์ ์ ์์ ํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
webpack์ splitChunks ์ค์ ์์ .
์์ธ ์์ ๋ด์ฉ
- splitChunks ์ค์ ์ ๋ชจ๋๋ณ๋ก chunk ์ด๋ฆ์ ์์ฑ.
- ๊ณตํต ์ปดํฌ๋ํธ chunk ๋ถ๋ฆฌ.
- ๋ฐฐํฌ๋ชจ๋(webpack.prod.js) devtool ๋ณ๊ฒฝ.
- package.json์ sideEffects ์ถ๊ฐ.
- ์นํ์ด์ง title ๋ณ๊ฒฝ.
webpack code splitting์ ์ ์ฉํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
๋น๋ ์๋ ํฅ์, ์ฉ๋ ์ถ์๋ฅผ ์ํด ์ต์ ํ ์์ ์ ์งํ
์์ธ ์์ ๋ด์ฉ
- webpack code splitting ์์
- dynamic import ๊ตฌ๋ฌธ ์์ (webpack ์ฃผ์ ์ถ๊ฐ)
- lodash ์ฉ๋ ์ค์ด๊ธฐ ์ํด tree shaking ์ค์ ๋ฐ ์
- webpack ์ฌ๋น๋ ์๋ ํฅ์์ ์ํด caching ์ ์ฉ
react-bootstrap์ tailwind-css๋ก ๋ณ๊ฒฝํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
๊ธฐ์กด react-bootstrap์ผ๋ก ๊ตฌํ๋์ด ์๋ css๋ฅผ tailwind-css๋ก ๋ณ๊ฒฝ.
์ ์ฒด์ ์ธ ์ฝ๋ ๋ฆฌํฉํ ๋ง์ ํ๋ค.
๊ตฌํํ ๊ธฐ๋ฅ
์ ์ฒด์ ์ธ ์ฝ๋ ๋ฆฌํฉํ ๋ง์ ํ๋ค.
์์ธ ์์ ๋ด์ฉ
- protected routes ์์
- ์ํ๊ด๋ฆฌ ํ์ด์ง ๋์ค๋ฉด ์นดํ ๊ณ ๋ฆฌ, ์์ฑ ์ด๊ธฐํ ๋๋ ๋ถ๋ถ ์์
- ์ํ ์ถ๊ฐ, ์์ ํ์ด์ง ์ปดํฌ๋ํธ ํฉ์น๊ธฐ(์ค๋ณต๋จ)
- ํํฐ๊ธฐ๋ฅ useSelector ์ต์ ํ(๋๋ฝ๋จ)
- ๊ฐ๊ฒฉ ํํฐ debounce ์ ์ฉ
- ๊ฒฐ์ ํ์ด์ง ์ฌ์ฉ์ ์ฃผ์ ์ ๋ณด ๋ถ๋ฌ์ค๊ธฐ ์ ์ ๋ก๋ฉ ์คํผ๋ ์ถ๊ฐ
- ๋ก๊ทธ์์ ํ๋ฉฐ ์ ์ ์ ๋ณด reset๋๋๋ก ์์
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.