npm install @reduxjs/toolkit react-redux
yarn add redux react-redux @reduxjs/toolkit

사용

스토어에 등록하는것은 이렇게!!!!!!

index.js

import { Provider } from "react-redux";
import store from "./store";

  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>

Provider 로 감싸주고 store.js 파일 생성해서 넘겨준다!

store.js

import { configureStore } from '@reduxjs/toolkit'
import cart from "./store/cartSlice";

export default configureStore({
  reducer: { 
    cart: cart.reducer,
  }
}) 

cartSlice.js

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

let cart = createSlice({
  name: "cart",
  initialState: [
    { id: 0, name: "White and Black", count: 2 },
    { id: 2, name: "Grey Yordan", count: 1 },
  ],
  reducers: {
    minusCount(state, action) {
      let idx = state.findIndex((x) => x.id == action.payload);
      if (state[idx].count > 1) {
        state[idx].count--;
      } else {
        alert("최소 수량입니다.");
      }
    },
    addCount(state, action) {
      let idx = state.findIndex((x) => x.id == action.payload);
      state[idx].count++;
    },
  },
});

export let { minusCount, addCount } = cart.actions;

export default cart;

스토어를 사용할때엔!!!

cart.js

import { useDispatch, useSelector } from "react-redux";
import { minusCount, addCount } from "../../store/cartSlice";

let state = useSelector((state) => state.cart);
let dispatch = useDispatch(); // store.js 로 요청 보내주는 함수

<button onClick={()=>{ dispatch(minusCount(item.id)); }}>-</button>

npm install react-router-dom@6

yarn add react-router-dom@6

사용

index.js

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>

app.js

import { Routes, Route } from "react-router-dom";

<BrowerRouter>
  <Routes>
      <Route path="/" element={<Home />} />
    /* nested routers */
    <Route path="/about" element={<About />}>
      <Route path="member" element={<div>member info</div>} />
      <Route path="location" element={<div>location info</div>} />
    </Route>
    <Route path="/detail/:id" element={<Detail />} />
    <Route path="/*" element={<NotFound />} />
  </Routes>
</BrowerRouter>

about.js

import { Outlet } from "react-router-dom";

<div>
  <h4>회사정보 페이지</h4>
  <Outlet></Outlet>
</div>

/about/member 로 들어올 시, About 화면도 보여지고 Outlet 부분에 member info 부분도 보여진다! /about/location 도 마찬가지..

++

• useHistory 대신 useNavigate

  import { useNavigate } from 'react-router-dom';
  
  const navigate = useNavigate();
  navigate("/", state: { id: userId });
  

받을 때엔,

import { useLocation } from 'react-router-dom';

const location = useLocation(); const { id } = location.state; ```

!youtube[aoQSOZfz3vQ]

promise 는 자바스크립트 비동기 처리에 사용되는 객체!

• State: 대기(pending)->이행(fulfilled) or 실패(rejected)
• Producer vs Consumer

1. Producer 새로운 promise 가 만들어질 때는 우리가 전달한 executor 라는 콜백함수가 자동적으로 실행된다..! 꼭 염두하기..!!!

const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  // resolve();
  // reject();
});

2. Consumers: then, catch, finally 성공했을때 then, 실패했을때 catch, 성공/실패와 상관없이 실행 finally

++ then 은 값을 바로 전달해도 되고, 다른 promise를 전달해도 됨다

promise
  .then(value => {
      console.log(value);
  })
  .catch(error => {
      console.log(error);
  })
  . finally(() > {
      console.log('finally');
  });

3. Promise.all promise 배열을 전달하면 모든 promise 들이 병렬적으로 다 받을때까지 모아준다!

function pickAllFruits() {
    return Promise.all([getApple(), getBanana()]).then(fruits => fruits.join(' + '));
}

pickAllFruits().then(console.log);

4.Promise.race 배열에 전달된 promise 들 중에서 가장 먼저 값이 리턴 된 것만 전달되어진다

function pickOnlyOne() {
    return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);

1. join 배열을 문자열로 반환. 구분자 넣을 수 있다.

2. split 문자열을 배열로 만듦. 구분자를 넣어야 하고, limit 을 넣을 수 있다. 구분자는 문자열이나 정규식 가능.

3. reverse 배열의 순서를 거꾸로 만듦.

4. slice 배열의 특정한 부분을 잘라 반환. 시작 인덱스와 종료 인덱스를 넣을 수 있다. 종료 인덱스 값은 배제되어진다. (splice는 기존 배열에서 삭제되고, 삭제된 요소들이 반환됨!!!!!)

5. find 검색된 결과 첫번째로 찾아진 하나만 반환. 배열이 아니다.

const result  = students.find((student) => student.score === 90);

6. filter 검색된 결과 모두 반환. 배열!

const result  = students.filter((student) => student.enrolled);

7. map 배열을 이용해서 새로운 원소들을 가진 새로운 배열을 만듦.

8. some, every 배열안의 원소를 검사해서 boolean 반환. some 배열 중에 하나라도 조건을 만족하면 true. every 배열의 모든 요소들이 조건을 만족해야 true.

9. reduce 배열을 돌며 값을 누적. 누산기! 리턴값을 넣어줘야 함. 초기값 세팅할 수도 있다. (초기값부터 시작해서 리턴한 값이 prev로 들어가고 또 리턴한 값이 prev로 들어가고 해서 누적..)

const result  = students.reduce((prev, curr) => {
  return prev + curr.score;
},0); // 0 이 초기값

10. sort 배열 정렬.

++ 같이 활용하기!!!!!!(함수형 프로그래밍)

const result = students
 .map((student) => student.score)
 .filter((score) => score >= 50)
 .join();

const array = ['a', 'b', 'c'];

array.forEach(element => console.log(element)); // a, b, c

2. array.map
배열을 돌면서 주어진 콜백함수를 실행해 새로운 배열을 반환한다.
기존의 배열이 변경되지 않는다.

const array = [1, 2, 3, 4];

const newAraay = array.map(x => x * 2);

console.log(newAraay); // [2, 4, 6, 8]

```

!youtube[tJieVCgGzhs]

1. head+async

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script async src="main.js"></script>
</head>

async 는 boolean 타입의 속성값. 선언하는 것만으로도 true. 브라우저가 html 을 파싱 하다가 병렬로 js를 다운로드 받자~! 라고 명령만 해놓고 다시 파싱. js가 다운로드 완료되면 파싱을 멈추고 js를 실행 후 다시 html을 파싱. 장점은 다운로드 받는 시간을 절약할 수 있다. 하지만 html이 전부 파싱되기도 전에 js가 실행 되기 때문에 위험! 그리고 js가 실행되는 동안 html 파싱을 멈추기 때문에 사용자가 페이지를 보는데 시간이 좀 더 걸릴 수도 있다.

2. head+defer

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="main.js"></script>
</head>

브라우저가 html 을 파싱 하다가 병렬로 js를 다운로드 받자~! 라고 명령만 해놓고 다시 파싱. 그리고 파싱이 끝나면 js가 실행! 아무래도 defer가 안전😊

!youtube[7Z3t1OWOpHo]

CSS Units 에는 절대적인 유닛과 상대적인 유닛이 있다! 절대적인 유닛은 대표적으로 px 이 있고~~ 오늘 정리해볼 것은 상대적인 유닛!!!!!!!! 백엔드로 일할 때 em이 뭐고 rem이 뭐고 vh가 뭐고..vw는 또 뭐야..? 이랬는데 앨리님 강의로 알게 되었다!!!!!! (이 짤 안쓸 수 없어..!)

ㅎㅎㅎ암튼 알아보자^^!

1. em (releative to parent element) em 은 부모의 폰트 사이즈에 상대적으로 크기가 계산되어진다! (특별히 html이나 body에 폰트사이즈를 지정하지 않는 이상 기본적으로 브라우저에서 html에 할당되는 폰트사이즈는 16px이다.) (++추가. 현재 요소에 폰트 사이즈가 있다면! 현재 요소의 폰트 사이즈 기준으로 계산한다. 예를 들어..

.contents {
  font-size: 1rem;
  padding: 0.5em;
}

이렇게 되어 있다면 1rem값 * 0.5 가 되는것..!!!!!!!! 중요하다 중요해!!! )

2. rem (releative to root element) rem 은 최상위 태그의 폰트 사이즈가 기준이 된다. rem의 r은 root!ㅎㅎ 위의 jsbin 캡쳐에서 em 을 rem 으로 바꾸면 parent 는 그대로 128px 이지만 child 는 16 * 0.5 = 8px 이 된다.ㅎㅎㅎ

3. vw (viewport width) 부모 요소와는 상관없이 브라우저 너비에 따라서 변경된다. 현재 브라우저 width 가 1000px 이라면 50vw 는 500px!

4. vh (viewport height) 부모 요소와는 상관없이 브라우저 높이에 따라서 변경된다. 현재 브라우저 height 가 800px 이라면 50vh 는 400px!

5. % 부모요소의 상대적으로 크기가 계산되어진다! em 대신 % 사용 가능ㅎㅎ

0. item 을 감싸고있는 container 는 역시 display: flex; 여야함!

1. order: 0; // 기본값 0 order 는 item 들의 순서를 지정할 수 있다. 현업에선 별로 사용하지않는다고ㅎㅎㅎ

.item1 {
 order: 0;
}

2. flex-grow: 0; // 기본값 0 flex-grow 는 item 이 container 안에서 할당 가능한 공간의 정도를 선언한다. 형제 요소가 모두 같은 값이라면 형제 모두 동일한 공간을 할당 받고 각각 다른 값이라면 각각 다른 공간을 할당받게 된다.

.item1 {
  flex-grow: 1;
}

3. flex-shrink: 0; // 기본값 0 flex-shrink 는 container가 작아졌을 때, 어떻게 행동하느냐를 지정한다. flex-grow 처럼 형제 요소가 모두 같은 값이라면 형제 모두 같은 크기로 작아지고 각각 다른 값이라면 각각 다른 크기로 작아진다. 값이 클수록 더 작게 작아진다!

.item1 {
  flex-grow: 1;
  flex-shrink: 1;
}

4. flex-basis: auto; // 기본값 auto flex-basis는 공간을 얼마나 차지해야하는지 좀 더 세부적으로 명시할 수 있게 한다. auto 로 하게되면 flex-grow 나 flex-shrink 에 지정된 값에 맞춰서 item 이 변형된다. auto 가 아닌 width 값을 지정할 수 있다. (ex. px, %, em, ...)

.item1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
}

5. flex: 1 1 50%; flex-grow, flex-shrink, flex-basis 를 묶어 flex 로 사용한다.

.item1 {
  flex: 1 1 50%;
}

6. align-self: auto; // 기본값 auto align-self 는 item 별로 정렬할 수 있다. cross axis 기준으로 정렬!

.item1 {
  flex: 1 1 50%;
  align-self: center;
}

!youtube[7neASrWEFEM]

1. display: flex; 일단 flexbox를 사용하기 위해선 item 을 감싸고 있는 container를 display: flex; 로 지정해줘야한다.

.container {
  display: flex;
}

2. flex-direction: row; // 기본값 row flex-direction은 container 내의 item 을 배치할 때 main axis 및 방향(정방향, 역방향)을 지정한다. row 는 왼쪽에서 오른쪽, row-reverse 는 오른쪽에서 왼쪽, column은 위에서 아래, column-reverse는 아래에서 위로!

.container {
  display: flex;
  flex-direction: row;
}

3. flex-wrap: nowrap; // 기본값 nowrap flex-wrap은 item 들이 한줄로 배치되게 할것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할것인지를 지정한다. nowrap 은 화면의 크기가 줄어들어도 item 들이 밑으로 떨어지지않고 한줄로 붙어있다. 이건 랩핑을 안하겠다고 지정이 되어있기 때문이다. wrap 은 화면의 크기가 줄어들때 자동으로 다음 라인으로 아이템이 떨어지게 되고, wrap-reverse 은 반대로 랩핑이 된다. (ex. 4 5 6 1 2 3)

.container {
  display: flex;
  flex-direction : row;
  flex-wrap : nowrap;
}

4. flex-flow: row nowrap; flex-derection, flex-wrap 을 한번에 묶어서 표현할 수 있다.

.container {
  display: flex;
  /* flex-direction: row;
  flex-wrap: nowrap; */
  flex-flow: row nowrap;
}

5.justify-content: flex-start; // 기본값 flex-start justify-content 는 main axis 에서 item 들을 어떻게 배치할껀지를 결정해준다. flex-start 는 main axis 가 수평축이라면 왼쪽에서 오른쪽으로, 수직축이라면 위쪽에서 아래쪽으로. flex-end 는 item의 순서는 유지하되, item들이 오른쪽/아래쪽 으로 배치된다. center 는 말그대로 가운데에 배치. 그 외 space-around, space-evenly, space-between 등은 item 사이에 간격을 띄워 배치한다. 차이가 있는데 말로 설명하기가 어렵다^^........ jsbin으로 코드쳐서 만들어온 이미지라도 첨부..😿 순서대로 space-around, space-evenly, space-between! around는 item 양쪽으로 간격이 일정하게 생기는거 같고, evenly는 item 처음과 끝을 포함하여 일정한 공백이 생기도록 하는거 같고, between은 item 처음과 끝은 공백없이 나머지 사이사이에만 일정한 공백이 생기도록 하는거같다!ㅎㅎㅎ^^...................

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* flex-flow: row nowrap; */
  justify-content: flex-start;
}

6. align-items: stretch; // 기본값 stretch align-items 는 cross axis 에서 item을 어떻게 배치할껀지를 결정해준다. 하나의 줄 내에 있는 요소들에 적용된다!!!!! center 는 말그대로 가운데에 배치된다. baseline 은 폰트를 기준으로 배치된다.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* flex-flow: row nowrap; */
  justify-content: flex-start;
  align-items: stretch;
}

7. align-content: stretch; // 기본값 stretch align-content 도 cross axis 에서 item 배치를 결정해준다. flex-wrap: wrap; 필수!!!!!!!!!!!!!!!!!!!! item 들이 여러 줄로 배치되어 있을 때 적용된다!!! justify-content 와 같은 속성값들을 사용할 수 있다.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; // 필수!
  /* flex-flow: row nowrap; */
  justify-content: flex-start;
  align-items: stretch;
  align-content: center;
}

🐥오늘의 사족🐥 어제 그냥 인강을 보기만 했을 때는 와 그렇구나 신기하다~ 이러고 이해한 줄 알았는데, 이렇게 블로그에 글을 쓰다보니 어 잘 모르겠는데..? 싶은것이다..? 그래서 구글링해서 조금 더 설명을 덧붙였다..ㅎㅎㅎ아마 이렇게 글을 쓰고도 완벽히 이해하진 못한거같아서 좀 더 공부해야할꺼같다!!!!!!!!!! 화이팅!!!!!!