Create Week9 Mission1,2,3 #109
Conversation
hyesngy
left a comment
hyesngy
left a comment
There was a problem hiding this comment.
์ ๋ง ๊ณ ์ ๋ง์ผ์ จ์ต๋๋ค! ๐๐ป๐๐ป๐๐ป
์ด๋ฒ ์ฃผ ์ํฌ๋ถ์ ํตํด Redux Toolkit๊ณผ Zustand ๋ ๊ฐ์ง ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ชจ๋ ๋ค๋ค๋ณด์์ต๋๋ค. ์์ผ๋ก ํ๋ก์ ํธ ๋ณต์ก๋๋ ๊ท๋ชจ์ ๋ฐ๋ผ ์ ์ ํ ์ํ๊ด๋ฆฌ ๋๊ตฌ๋ฅผ ์ ํํ ์ ์๋ ์๋ชฉ์ ๊ฐ์ถ๊ฒ ๋์
จ์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค! ๐๐ป๐๐ป๐๐ป
| increment: (state, action: PayloadAction<string>) => { | ||
| const item = state.items.find((i) => i.id === action.payload); | ||
| if (item) { | ||
| item.amount += 1; | ||
| } | ||
| }, | ||
| decrement: (state, action: PayloadAction<string>) => { | ||
| const item = state.items.find((i) => i.id === action.payload); | ||
| if (item) { | ||
| item.amount -= 1; | ||
| if (item.amount < 1) { | ||
| // 1๋ณด๋ค ์์ผ๋ฉด ์ ๊ฑฐ | ||
| state.items = state.items.filter((i) => i.id !== action.payload); | ||
| } | ||
| } | ||
| }, | ||
| removeItem: (state, action: PayloadAction<string>) => { | ||
| state.items = state.items.filter((i) => i.id !== action.payload); | ||
| }, | ||
| clearCart: (state) => { | ||
| state.items = []; | ||
| } |
There was a problem hiding this comment.
ํ์ฌ cartSlice์์ increment, decrement, removeItem, clearCart ์ก์
๋ค์ด ๊ตฌํ๋์ด ์๋๋ฐ, ์๊ตฌ์ฌํญ์ calculateTotals ์ก์
์ด ๋๋ฝ๋์ด ์์ต๋๋ค. ์๊ตฌ์ฌํญ๋๋ก ์ดํฉ ๊ณ์ฐ ๋ก์ง์ ๋ณ๋ ์ก์
์ผ๋ก ๋ถ๋ฆฌํ๋ฉด ์ํ ๊ด๋ฆฌ๊ฐ ๋ ๋ช
ํํด์ง ๊ฒ ๊ฐ์ต๋๋ค!
| export const store = configureStore({ | ||
| reducer: { | ||
| cart: cartReducer, | ||
| modal: modalRedcer | ||
| }, | ||
| }) |
There was a problem hiding this comment.
ํ์ฌ ์ฅ๋ฐ๊ตฌ๋ ๋ฐ์ดํฐ๊ฐ ์๋ก๊ณ ์นจ ์ ์ด๊ธฐํ๋๊ณ ์๋๋ฐ, Redux Toolkit์ redux-persist๋ Zustand์ persist ๋ฏธ๋ค์จ์ด๋ฅผ ์ ์ฉํ์ฌ, ์๋ก๊ณ ์นจ ํ์๋ ์ฅ๋ฐ๊ตฌ๋ ์ํ๊ฐ ์ ์ง๋๋๋ก ๐Challenge ๋ฏธ์
์ ๋์ ํด ๋ณด์๋ฉด ์ข๊ฒ ์ต๋๋ค!
|
|
||
|
|
||
| return ( | ||
| <nav className="fix top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> |
There was a problem hiding this comment.
ํ์ฌ Navbar์์ fix ํด๋์ค๊ฐ fixed ์ ์คํ๋ก ๋ณด์
๋๋ค! ๋ค๋น๊ฒ์ด์
๊ณ ์ ์ ์๋ํ ๊ฒ ๊ฐ์๋ฐ, ํ์ฌ๋ ๋ค๋น๊ฒ์ด์
์ด ๊ณ ์ ๋์ง ์๊ณ ์์ต๋๋ค. ์ด๋ฅผ ์์ ํ๋ฉด ์คํฌ๋กค ์์๋ ์ฅ๋ฐ๊ตฌ๋ ์ ๋ณด๊ฐ ํญ์ ๋ณด์ด๋๋ก ํ ์ ์์ด ์ฌ์ฉ์ฑ์ด ๊ฐ์ ๋ ๊ฒ ๊ฐ์์!
| <nav className="fix top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> | |
| <nav className="fixed top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> |
|
|
||
|
|
||
| return ( | ||
| <nav className="fix top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> |
There was a problem hiding this comment.
ํ์ฌ Navbar์์ fix ํด๋์ค๊ฐ fixed ์ ์คํ๋ก ๋ณด์
๋๋ค! ๋ค๋น๊ฒ์ด์
๊ณ ์ ์ ์๋ํ ๊ฒ ๊ฐ์๋ฐ, ํ์ฌ๋ ๋ค๋น๊ฒ์ด์
์ด ๊ณ ์ ๋์ง ์๊ณ ์์ต๋๋ค. ์ด๋ฅผ ์์ ํ๋ฉด ์คํฌ๋กค ์์๋ ์ฅ๋ฐ๊ตฌ๋ ์ ๋ณด๊ฐ ํญ์ ๋ณด์ด๋๋ก ํ ์ ์์ด ์ฌ์ฉ์ฑ์ด ๊ฐ์ ๋ ๊ฒ ๊ฐ์์!
| <nav className="fix top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> | |
| <nav className="fixed top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> |
| const container = document.getElementById('root') | ||
|
|
||
| if (container) { | ||
| const root = createRoot(container) | ||
|
|
||
| root.render( | ||
| <Provider store={store}> | ||
| <App /> | ||
| </Provider>, | ||
| ) | ||
| }else { | ||
| throw new Error( | ||
| "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.", | ||
| ) | ||
| } |
There was a problem hiding this comment.
ํ์ฌ ๋ฏธ์
3์ main.tsx ์์ Redux์ Provider๋ก ๊ฐ์ธ๊ณ ์๋๋ฐ, ๋ฏธ์
3์์๋ Zustand๋ก ์ํ ๊ด๋ฆฌ๋ฅผ ์ ํํ๊ธฐ ๋๋ฌธ์ ์ด ๋ถ๋ถ์ ์ ๊ฑฐํด์ผ ํฉ๋๋ค. ๋ํ, store ๋ฐ slice ๋ฑ Redux ๊ด๋ จ ํ์ผ๋ค๋ ์ฌ์ ํ ๋จ์์๋๋ฐ, ํ๋ก์ ํธ ๊ตฌ์กฐ๋ฅผ ๋ช
ํํ๊ฒ ํ๊ธฐ ์ํด ํด๋น ํ์ผ๋ค๋ ์ ๊ฑฐํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค!
๐ ๋ฏธ์ ๋ฒํธ
9์ฃผ์ฐจ Misson 1,2,3
๐ ๊ตฌํ ์ฌํญ
๐ ์คํฌ๋ฆฐ์ท
2025-05-26.174014.mp4
โ ์ฒดํฌ๋ฆฌ์คํธ
๐ค ์ง๋ฌธ ์ฌํญ