TIL 221214 css 넘버링 / rtk 기본 작성 흐름

🎆 오늘 한 것

• 수업 들은 거 정리하고 복습
• 테일윈드 모각코(2시간)
• 리덕스
• 알고리즘

🙄 오늘 하려고 했는데 못한 것

• 프로토타입 읽기

✨ css js없이 순서대로 넘버링 붙이기

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

body {
  counter-reset: section;                       /* counter 이름을 'section'으로 지정합니다.
                                                   초깃값은 0입니다. */
}

h3::before {
  counter-increment: section;                   /* section의 카운터 값을 1씩 증가시킵니다. */
  content: "Section " counter(section) ": ";    /* section의 카운터 값을 표시합니다. */
}

✨ 리덕스 기본적인 작성 순서

🎇 설치

yarn add react-redux
yarn add @reduxjs/toolkit

🎇 slice 기본 틀

import { createSlice } from "@reduxjs/toolkit";

const uiSlice = createSlice({
  name: "ui",
  initialState: { cartIsVisible: false },
  reducers: {
    toggle(state) {
      state.cartIsVisible = !state.cartIsVisible;
    },
  },
});

export const uiAction = uiSlice.actions;
export default uiSlice;

🎇 기본 파일 index.js

import { configureStore } from "@reduxjs/toolkit";
import uiSlice from "./ui-slice";

const store = configureStore({
  reducer: {
    ui: uiSlice.reducer,
  },
});

export default store;

🎇 프로바이더를 넣을 index.jsx

import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";

import "./index.css";
import App from "./App";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

🎇 액션을 dispatch할 컴포넌트

import { useDispatch } from "react-redux";
import { uiAction } from "../../store/ui-slice";
import classes from "./CartButton.module.css";

const CartButton = (props) => {
  const dispatch = useDispatch();

  const toggleCartHandler = () => {
    dispatch(uiAction.toggle());
  };

  return (
    <button className={classes.button} onClick={toggleCartHandler}>
      <span>My Cart</span>
      <span className={classes.badge}>1</span>
    </button>
  );
};

export default CartButton;

🎇 실제 렌더링을 하는 App.jsx

import { useSelector } from "react-redux";
import Cart from "./components/Cart/Cart";
import Layout from "./components/Layout/Layout";
import Products from "./components/Shop/Products";

function App() {
  const showCart = useSelector((state) => state.ui.cartIsVisible);
  return (
    <Layout>
      {showCart && <Cart />}
      <Products />
    </Layout>
  );
}

export default App;

🎆 내일 할 것

• 수업 들은 거 정리하고 복습
• 테일윈드 모각코(2시간)
• 리덕스(FE/BE 코드까지)
• 알고리즘(해결 또는 단순화)

📌 킵해놓을 todo

• preload / modulepreload / prefetch 공부... 언제하지?
• deep dive 19장 프로토 타입

📚 이번 주 개인 목표

• 프로토타입
• 클로저 ✅
• 타입스크립트 책 보기
• 고급 리덕스 파트 강의 보기
• 알고리즘 문제 해결 접근법 파트 강의 보기(여유있으면 해결 패턴까지)
• 야무님 강의 플렉스/그리드, 반응형 파트

📝 오늘의 일기

헝 정신 없어