Section 6. State, Event Object

1. 공유 handler 함수

• 여러 Input의 changeHandler 함수 생성 방법

import { useState } from "react";

export default function App() {
  const [values, setValues] = useState({ userName: "", id: "", age: "" });
  const handleChange = (e) => {
    const { value, name } = e.target;
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input type="text" name="userName" onChange={handleChange} />
        <input type="text" name="id" onChange={handleChange} />
        <input type="text" name="age" onChange={handleChange} />
        <button>Submit</button>
      </form>
    </div>
  );
}

import { useState } from "react";

export default function App() {
  const [values, setValues] = useState({ userName: "", id: "", age: "" });
  const handleChange = (value, name) => {
    setValues((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
  };

  return (
    <div className="App">
      <input type="text" onChange={(e) => handleChange(e.target.value, "userName")} />
      <input type="text" onChange={(e) => handleChange(e.target.value, "id")} />
      <input type="text" onChange={(e) => handleChange(e.target.value, "age")} />
      <button type="submit" onClick={handleSubmit}>
        Submit
      </button>
    </div>
  );
}

2. 자식-부모 컴포넌트 통신

• 부모에서 자식에게 state를 props로 전달.
• 부모 → 자식

// Parent Component
...
const saveDataHandler = (enteredData) => {
  const data = {
    ...enteredData,
    sequence: Math.random().toString()
  };
  console.log(data);
}

3. 파생/계산된 State

• 만약 selectValue라는 state가 바뀔 때 마다 description이 바뀌는 경우라면?
• description을 state로 관리하기보다는 일반 값으로 변경하고 할당(=) 해주자.
  • selectValue state가 변경 → 리렌더링 → description도 변경됨.
• 이와 같은 방법이 권장된다.

4. Component

• Stateful Component
  • 내부 state가 존재
• Stateless Component
  • 내부 state는 없음. (props는 존재할 수 있음)

5. Event Handler

• 리액트에서 수동으로 이벤트 리스너(addEventListener)을 추가할 경우,

  이는 명령형 코드이기에 React 컴포넌트 외부의 일부 함수를 트리거하므로, 컴포넌트의 state와 상호작용 X

• <중요> 리액트는 선언형 코드이다!

Firebase 연결

1. 파이어베이스 어플리케이션 생성
2. firebase.js 생성 후 SDK 등록

인증(Auth) 기능 구현

• Google, Facebook, Apple, Twitter, Github, MS 등 많은 로그인 방법이 존재.
• 이번에는 Password Authentication 을 사용.
  • createUserWithEmailAndPassword

회원가입

// SignUp.jsx
import { getAuth } from 'firebase/auth';

const SignUp = () => {
  const navigate = useNavigate();
  const [firebaseError, setFirebaseError] = useState("");

  const auth = getAuth();
  const handleSignupAndLogin = (email, password) => {
    createUserWithEmailAndPassword(auth, email, password)
    .then((user) => {
      // 리덕스 스토어에 저장

      navigate('/');
    })
    .catch(error => {
      return error && setFirebaseError("이메일 또는 패스워드가 일치하지 않습니다.");
    })
  }

  return (
    <Form
      title={"가입하기"}
      getDataForm={handleSignupAndLogin}
      firebaseError={firebaseError}
      />
  )

}  

// Form.jsx

const Form = ({title, getDataForm, firebaseError}) => {
  const { register, handleSubmit, formState:{ errors }, reset } = useForm({
    mode: 'onChange'
  });

  const onSubmit = ({email, password}) => {
    getDataForm(email, password);
    reset(); // input 비워줌
  }
}

...

{firebaseError && <span>{firebaseError}</span>}

로그인

const SignIn = () => {
  const navigate = useNavigate();
  const [firebaseError, setFirebaseError] = useState("");

  const auth = getAuth();
  const handleLogin = (email, password) => {
    signInWithEmailAndPassword(auth, email, password)
    .then(user => {
      navigate('/')
    })
    .catch(error => {
      return error && setFirebaseError("이메일 또는 패스워드가 일치하지 않습니다.");
    })
  }

    return (
    <Form
      title={"로그인"}
      getDataForm={handleLogin}
      firebaseError={firebaseError}
      />
  )
}

Redux Setting

1. store에 slice.js 파일 생성 /store/user/user.slice.js, /store/order/order.slice.js, /store/categories/categories.slice.js, /store/cart/cart.slice.js, /store/products/product.slice.js, /store/products/products.slice.js 파일 생성.

2. 메인 스토어 - index.js 생성

   // store/index.js
   export const store = configureStore({
   reducer: {
    userSlice,
    ... // 추후 추가
   }
   });

userSlice

• user.slice.js

// store/user/user.slice.js

const initialState = localStorage.getItem("user") 
? JSON.parse(localStorage.getItem("user") || "") 
: {
  email: "",
  token: "",
  id: ""
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.email = action.payload.email;
      state.token = action.payload.token;
      state.id = action.payload.id;

      localStorage.setItem("user", JSON.stringify(state));
    },
    removeUser: (state) => {
      state.email = "";
      state.token = "";
      state.id = "";

      localStorage.setItem("user", JSON.stringify(state));
    }
  }
});

// 액션 생성자 (slice.actions) -> dispatch(actionName)
export const { setUser, removeUser } = userSlice.actions;  
export default userSlice.reducer;

Store 등록

// main.jsx

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

... 

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

Dispatch

• SignIn, Login 할 때, (setUser) 액션 디스패치 하고 navigate 하도록

// SignUp.jsx

import { setUser } from '../../store/user/user.slice';
import { getAuth } from 'firebase/auth';

const SignUp = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [firebaseError, setFirebaseError] = useState("");

  const auth = getAuth();
  const handleSignupAndLogin = (email, password) => {
    createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // 리덕스 스토어에 저장
      dispatch(setUser({
        email: userCredential.user.email,
        token: userCredential.user.refreshToken,
        id: userCredential.user.uid
      }))
      navigate('/');
    })
    .catch(error => {
      return error && setFirebaseError("이메일 또는 패스워드가 일치하지 않습니다.");
    })
  }

  return (
    <Form
      title={"가입하기"}
      getDataForm={handleSignupAndLogin}
      firebaseError={firebaseError}
      />
  );
}  

폴더 구조

지금까지 나는 한 페이지를 구성하는 컴포넌트들은 Components 폴더에 넣었는데, 여기서는 pages/HomePage 폴더 안에 폴더를 추가해서 하는 방식이다.

추가로, 페이지 컴포넌트 자체도 폴더로 구분해서 index.jsx로 생성하는 것이 차이.

useSelector, useDispatch

const category = useSelector((state) => state.categoriesSlice); 
// state에는 여러 slice들이 다 들어있음. (userSlice, categoriesSlice, ...)

const dispatch = useDispatch();

const getActiveCategory = () => {
  dispatch(setActiveCategory(name)); // action.payload로 바로 전달함 
}

Custom Hook (Redux)

• 추후 TypeScript 적용 시 수정 예정

import { useDispatch } form 'react-redux';

const useAppDispatch = () = useDispatch();
const useAppSelector = useSelector;

Fake Store API

https://fakestoreapi.com/

• 상품 정보, 카테고리, 정렬 등
• 장바구니 등

• CardList Redux Action: fetchProducts (API 호출해서 정보 가져옴) -> ProductsSlice

extraReducers

• reducers 는 액션함수를 생성함과 동시에 해당 액션함수에 대응하는 역할을 함.
• extraReducers 는 사용자가 slice reducer 내에서 액션함수에 접근할 수 있게하지만,
• extraReducers 내에서 액션함수를 생성하지 않는다는 점이 reducers 프로퍼티와의 가장 큰 차이임.

• Promise의 진행 상태에 따라서 리듀서를 실행할 수 있음.

• 결론: slice reducer 에 맵핑된 내부 액션함수가 아닌, 외부의 액션을 참조하기 위해 사용.

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

export const fetchProducts = createAsyncThunk(
    "products/fetchProducts",
    async (category: string, thunkAPI) => {
        try {
            let response;
            if (category) {
                response = await axios.get<IProduct[]>(`https://fakestoreapi.com/products/category/${category}`);
            } else {
                response = await axios.get<IProduct[]>("https://fakestoreapi.com/products");
            }

            return response.data; //payload
        } catch (error) {
            return thunkAPI.rejectWithValue("Error loading products");
        }

    }
)

...

const initialState: ProductsType = {
    products: [],
    isLoading: false,
    error: "",
}

export const productsSlice = createSlice({
    name: 'products',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(fetchProducts.pending, (state) => {
                state.isLoading = true;
            })
            .addCase(fetchProducts.fulfilled, (state, action) => {
                state.isLoading = false;
                state.products = action.payload;
            })
            .addCase(fetchProducts.rejected, (state, action) => {
                state.isLoading = false;
                state.error = action.payload as string;
            })
    }
})


export default productsSlice.reducer;

• 상태에 따라 (pending, fulfulled, rejected) state를 업데이트 할 수 있음.
• 참고 문서

React Loading Skeleton

• react-loading-skeleton 라이브러리

import "react-loading-skeleton/dist/skeleton.css"; 
import Skeleton from 'react-loading-skeleton';

...

{ isLoading && <Skeleton height={350} /> }

• 쇼핑몰 사이트 프로젝트

주요 기능

1. Firebase 로그인
2. 장바구니
3. 마이페이지 (주문 히스토리)
4. 결제
5. 로그아웃

프로젝트 생성 (vite)

$ npm init vite

$ npm install

필요 패키지

• axios
• react-router-dom
• react-redux
• @reduxjs/toolkit
• sass
• react-icons
• react-loading-skeleton

폴더 구조

src
├─ assets
├─ components
├─ pages
├─ hooks
└─ store

Router 설정

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Layout from './components/layout/Layout';
import HomePage from './pages/HomePage';
import DetailPage from './pages/DetailPage';
import CartPage from './pages/CartPage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import OrderPage from './pages/OrderPage';
import NotFoundPage from './pages/NotFoundPage';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="product/:id" element={<DetailPage />} />
          <Route path="cart" element={<CartPage />} />
          <Route path="login" element={<LoginPage />} />
          <Route path="register" element={<RegisterPage />} />
          <Route path="order" element={<OrderPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

• 공통 레이아웃으로 사용되는 Layout 컴포넌트에는 반드시 Outlet을 넣어줘야 함. (children을 보여주기 위해)

SASS

• 스타일링 관리에 용이한 CSS 확장 언어.
• SASS -> (전처리) -> CSS -> 웹사이트

Layout

import styles from './Layout.module.scss';
import { Outlet } from 'react-router-dom';
import Header from '../header/Header';
import Footer from '../footer/Footer';

const Layout = () => {
  return (
    <div className={styles.layout}>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
};

export default Layout;

Header

import styles from './Header.module.scss';
import { Link } from 'react-router-dom';
import Nav from './nav/Nav';

const Header = () => {
  return (
    <div className={styles.header}>
      <div className="container">
        <div className={styles.header_wrapper}>
          <div className={styles.header_logo}>
            <Link to={'/'}>
              <h2>Shop</h2>
            </Link>
          </div>
          <Nav />
        </div>
      </div>
    </div>
  );
};

export default Header;

React Hook Form

• https://react-hook-form.com/

• 리렌더링 최소화
• 빠른 속도
• 최소한의 코드로 높은 효율

사용 예제

1. register = input에 이름 등록함. {...register("name", validCheckObject)}
2. handleSubmit = form onSubmit에 등록
3. formState.errors = 에러 (유효성 검사) -> errors.{name} 과 같이 나타남

const { register, handleSubmit, formState: {errors}, reset } = useForm();

const onSubmit = ({email, password}) => {
  console.log(email, password);
}

// 유효성 검사
const userEmail = {
  required: "필수 값입니다.",
  minLength: {
    value: 4,
    message: "최소 4자입니다."
  },
  pattern: {
    value: /^~~~~~~$/gm,
    message: '최소 8자, 영문 1자, 숫자 1자.'
  }
}

const userPassword = {
   // 동일
}

<form onSubmit={handleSubmit}>
  <input {...register("email", userEmail} />
  <span>{errors?.email && errors.email.message}</span>
  <input {...register("password", userPassword} />
  <span>{errors.password && errors.password.message}</span>
</form>

• 블러 이벤트 발생 시 유효성 검사 체크하기

  const { register, handleSubmit, formState: {errors}, reset } = useForm({
  mode: 'onBlur'
  });

• onBlur, onChange, onSubmit 3개가 있다. (기본값: onSubmit)

문제 설명

최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다.

제한사항

• 0 < array의 길이 < 100
• 0 ≤ array의 원소 < 1000

입출력 예

입출력 예 #1

[1, 2, 3, 3, 3, 4]에서 1은 1개 2는 1개 3은 3개 4는 1개로 최빈값은 3입니다.

입출력 예 #2

[1, 1, 2, 2]에서 1은 2개 2는 2개로 최빈값이 1, 2입니다. 최빈값이 여러 개이므로 -1을 return 합니다.

입출력 예 #3

[1]에는 1만 있으므로 최빈값은 1입니다.

내 코드

• 객체를 Map 처럼 사용하여 카운트
• forEach 함수를 활용하여 모든 Key값을 0으로 초기화
• Object.keys, values를 활용하여 배열로 구현

function solution(array) {   
  let mapObj = {};
  array.forEach(number => {
    mapObj[number] = 0
  });

  array.forEach(number => {
    mapObj[number]++
  });

  const keyArr = Object.keys(mapObj);
  const valueArr = Object.values(mapObj)
  const maxValue = Math.max(...valueArr); 

  const count = valueArr.reduce((cnt, el) => cnt + (maxValue === el), 0)

  if (count > 1) {
    return -1;
  } else {
    return parseInt(keyArr[valueArr.indexOf(maxValue)]);
  }
}

실행 결과

테스트 1 〉    통과 (0.10ms, 33.4MB)
테스트 2 〉    통과 (0.20ms, 33.5MB)
테스트 3 〉    통과 (0.21ms, 33.4MB)
테스트 4 〉    통과 (0.20ms, 33.5MB)
테스트 5 〉    통과 (0.19ms, 33.5MB)
테스트 6 〉    통과 (0.18ms, 33.4MB)
테스트 7 〉    통과 (0.11ms, 33.4MB)
테스트 8 〉    통과 (0.17ms, 33.3MB)
테스트 9 〉    통과 (0.11ms, 33.5MB)
테스트 10 〉    통과 (0.10ms, 33.5MB)
테스트 11 〉    통과 (0.16ms, 33.5MB)
테스트 12 〉    통과 (0.19ms, 33.5MB)
테스트 13 〉    통과 (0.19ms, 33.5MB)
테스트 14 〉    통과 (0.28ms, 33.4MB)
테스트 15 〉    통과 (0.26ms, 33.4MB)
테스트 16 〉    통과 (0.22ms, 33.6MB)

• JavaScript를 위한 상태관리 라이브러리.

Middleware 없이 카운터 제작

프로젝트 생성

$ npx create-react-app react-redux --template typescript

$ npm install redux --save

App.tsx 수정

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      Clicked: times
      <button>+</button>
      <button>-</button>
    </div>
  );
}

export default App;

리듀서 작성

src/reducers/index.tsx 생성

const counter = (state = 0, action: { type: string }) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        default:
            break;
    }
}

export default counter;

CreateStore

• 앱의 전체 상태 트리를 보유하는 Redux 스토어 생성
• 하나의 앱에는 하나의 스토어만 존재해야 함.

store.getState()

• 애플리케이션의 현재 상태 트리를 반환합니다. 스토어의 리듀서가 마지막으로 반환한 값과 동일합니다.

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import counter from './reducers';
import { createStore } from 'redux';

const store = createStore(counter);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App
      value={store.getState()}
      onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
      onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
    />
  </React.StrictMode>
);

App 컴포넌트의 props로 해당 값들을 보내줌.

// App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

type Props = {
  value: number;
  onIncrement: () => void;
  onDecrement: () => void;
};

function App({ value, onIncrement, onDecrement }: Props) {
  return (
    <div className="App">
      Clicked: {value} times
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
    </div>
  );
}

export default App;

• 버튼 클릭 시, 해당 액션이 디스패치됨.
• 액션이 디스패치 되면, 리듀서 함수에 의해 action.type 에 맞게 state를 리턴함.

Subscribe

• store.subscribe()
• render 함수를 선언하고, subscribe 함수의 params로 넣어줌.

// App.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import counter from './reducers';
import { createStore } from 'redux';

const store = createStore(counter);

const render = () => {
  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <App
        value={store.getState()}
        onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
        onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
      />
    </React.StrictMode>
  );
};

render();
store.subscribe(render);

combineReducer

• 하나의 리듀서(Root Reducer)을 생성해야 함.
• 여러개이 리듀서가 있는 경우, 하나의 리듀서로 합쳐주기 위해 combineReducer 메서드 사용.

• 리듀서 함수를 하나 더 생성해보자.
• Todo를 추가하는 todos 리듀서 함수.

  // reducers/todos.tsx
  enum ActionType {
  ADD_TODO = 'ADD_TODO',
  DELETE_TODO = 'DELETE_TODO',
  }
  

interface Action { type: ActionType; text: string; }

const todos = (state = [], action: Action) => { // Action.text 값을 받아옴 (Payload) switch (action.type) { case 'ADD_TODO': return [...state, action.text]; default: return state; } };

export default todos;

> [참고] TypeScript의 enum
- Union(|)을 이용해도 좋음.
- enum을 사용해 리터럴의 타입과 값에 이름을 붙여서 코드의 가독성을 크게 높일 수 있음.
- enum은 객체이다. (단, 객체와 달리 enum의 속성은 변경할 수 없음.)

``` tsx
// reducers/index.tsx
import { combineReducers } from 'redux';
import counter from './counter';
import todos from './todos';

const rootReducer = combineReducers({
  counter,
  todos,
});

export default rootReducer;

createStore에 루트 리듀서 대체

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

const render = () => {
  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <App
        value={store.getState()}
        onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
        onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
      />
    </React.StrictMode>
  );
};

render();
store.subscribe(render);

Redux Provider

• react-redux 라이브러리 설치 필요

1. index.tsx 수정

• 기존 store.subscribe(render)을 지우고
• Provider 컴포넌트로 감싸줌.

  // index.tsx
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  import { createStore } from 'redux';
  import rootReducer from './reducers';
  import { Provider } from 'react-redux';
  

const store = createStore(rootReducer);

const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <App onIncrement={() => store.dispatch({ type: 'INCREMENT' })} onDecrement={() => store.dispatch({ type: 'DECREMENT' })} /> </React.StrictMode> );

2. App.tsx 수정
- 폼 추가 (todos)
- handleChange, addTodo 함수 작성 

> 참고 - event 객체 
- `e: React.ChangeEvent<HTMLInputElement>`
- `e: FormEvent<HTMLFormElement>`

``` tsx
// App.tsx
import React, { ChangeEvent, FormEvent, useState } from 'react';
import logo from './logo.svg';
import './App.css';

type Props = {
  onIncrement: () => void;
  onDecrement: () => void;
};

function App({ onIncrement, onDecrement }: Props) {
  const [todoValue, setTodoValue] = useState('');

  const addTodo = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setTodoValue('');
  };

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setTodoValue(e.target.value);
  };

  return (
    <div className="App">
      Clicked: times
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
      <form onSubmit={addTodo}>
        <input type="text" value={todoValue} onChange={handleChange} />
        <input type="submit" />
      </form>
    </div>
  );
}

export default App;

useSelector / useDispatch

• useSelector = 스토어의 값 가져옴
• useDispatch = 디스패치 함수 가져옴 (액션 디스패치)

// App.tsx
const counter = useSelector((state) => state.counter);
// Error: 'state'은(는) 'unknown' 형식입니다.ts(18046)

• state가 unknown 타입임.

• rootReducer에서 타입을 생성해주면 해결됨.

• 즉, state:RootState와 같이 타입 지정을 해줘야 함.

[참고] ReturnType

• ReturnType<T>
• 함수 T의 반환 타입으로 정의한다. Parameters와 대칭되는 형태임.
• 참고 링크: https://typescript-kr.github.io/pages/utility-types.html#returntypet

// reducer/index.tsx

export type RootState = ReturnType<typeof rootReducer>;
// rootReducer가 반환하는 타입. (ReturnType)                         

// App.tsx
import { RootState } from './reducers';

const todos = useSelector((state: RootState) => state.todos);
const counter = useSelector((state: RootState) => state.counter);

Redux Middleware

로깅 미들웨어

const loggerMiddleware = (store) => (next) => (action) => {
  console.log(store, action);
  next(action)
}

const middleware = applyMiddleware(loggerMiddleware);

const store = createStore(rootReducer, middleware); // 수정

Redux Thunk

• thunk는 '일부 지연된 작업을 수행하는 코드 조각'을 의미.
• 즉, 비동기 작업을 해야하는 경우 사용함. (서버에 요청을 보내서 데이터를 가져올 때)

posts 리듀서 생성

enum ActionType {
  FETCH_POSTS = 'FETCH_POSTS',
  DELETE_POSTS = 'DELETE_POSTS',
}

interface Post {
  userId: number;
  id: number;
  title: string;
}

interface Action {
  type: ActionType;
  payload: Post[];
}

const posts = (state = [], action: Action) => {
  switch (action.type) {
    case 'FETCH_POSTS':
      return [...state, ...action.payload];
    default:
      return state;
  }
};

export default posts;

• App.tsx에 미들웨어 부분 추가

  // App.tsx
  

useEffect(() => { dispatch(fetchPosts()); }, [dispatch]);

const fetchPosts = (): any => { return async function fetchPostsThunk(dispatch: any, getState: any) { const response = await axios.get( 'https://jsonplaceholder.typicode.com/posts' ); dispatch({ type: 'FETCH_POSTS', text: todoValue }); }; };

### Redux-thunk 적용

- Action은 객체여야 하는데, dispatch() 안에 함수가 들어가는 경우 에러가 발생한다.
- 즉, 비동기 함수 등을 디스패치 하려면 redux-thunk 같은 미들웨어 사용이 필요하다.

``` tsx
// index.tsx
import thunk from 'redux-thunk';

const middleware = applayMiddleware(thunk, loggerMiddleware); // thunk를 추가

// App.tsx
const posts: Post[] = useSelector((state: RootState) => state.posts);
...

{posts.map((post, index) => <li key={index}>{post.title}</li>}

폴더 정리

• 실제로 Redux를 사용하는 경우, 한 곳에 코드를 모두 적지 않고
• actions 라는 폴더에 액션 파일을 저장함.

// actions/posts.tsx

import axios from 'axios';

const fetchPosts = (): any => {
  return async function fetchPostsThunk(dispatch: any, getState: any) {
    const response = await axios.get(
      'https://jsonplaceholder.typicode.com/posts'
    );
    dispatch({ type: 'FETCH_POSTS', text: response.data });
  };
};

export default fetchPosts;

리팩토링

import axios from 'axios';

export const fetchPosts = () => async (dispatch: any, getState: any) => {
  const response = await axios.get(
    'https://jsonplaceholder.typicode.com/posts'
  );
  dispatch({ type: 'FETCH_POSTS', text: response.data });
};

Redux Toolkit

프로젝트 생성

$ npx create-react-app my-app --template redux-typescript 

• 기본으로 @reduxjs/toolkit과 react-redux가 install 되어있음.

Redux Toolkit

1. React에 Redux 스토어 제공

• Provider 컴포넌트

• 2. Redux State Slice 생성*
• createSlice를 통해 슬라이스 생성
• Initial State가 무엇인지, Slice 이름이 무엇인지, 어떻게 변경되는지를 선언.
• Reducer 함수에서 변경 로직을 작성 가능함.

• immer 라이브러리를 쓰기 때문에 이전처럼 불변성때문에 머리아플 일 없다!

• 3. Store에 Slice Reducer 생성*
• 슬라이스에서 리듀서 함수를 가져와서 스토어에 추가 (configureStore)
• 리듀서 Params 내부에 필드 정의하여 스토어에 리듀서 함수를 사용하여 state를 업데이트하도록.

• 4. Redux State 및 Actions 사용*
• useSelector, useDispatch 사용

Redux Toolkit APIs

configureStore

• 기존 createStore을 대체함.
• 참고 문서 : https://redux-toolkit.js.org/api/configureStore

createAction

• 기존에는 액션을 생성할 때, 액션 타입과 생성자 함수를 분리하여 선언했었음.

  const INCREMENT = 'counter/increment';  // type
  

function increment(amount: number) { // 생성자 함수 return { type: INCREMENT, payload: amount } }

const action = increment(10); // action.payload로 10을 넘겨줌

- createAction을 사용하면 한 번에 처리 가능.
- type만 넣으면 자동으로 해당 type을 가진 action creater 함수를 생성함.
(생성된 함수를 호출 시 인수를 넣어준다면, payload로 들어가게 됨.)

``` tsx
import { createAction } from '@reduxjs/toolkit';

const increment = createAction<number>('counter/increment');  // type, 생성자 함수
const action = increment(10);

createReducer

• switch 문을 통해 구현했던 reducer 함수를 좀 더 간편하게 구현 가능.
• immer 라이브러리를 내장하여 불변성 유지됨.

const counterReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(increment, (state, action) => {
      state.value++
    })
    .addCase(decrement, (state, action) => {
      state.value--
    })
    .addCase(incrementByAmount, (state, action) => {
      state.value += action.payload
    })
})

[참고] builder은 무엇인가?

• createReducer에서 액션 객체를 처리하기 위해 case reducer을 정의하는 방법이 두가지가 있다.

1. 빌더 콜백 (Builder Callback)
2. 맵 객체 (Map Object) 표기법.

• 동일하지만, 빌더 콜백이 TypeScript와의 호환성 때문에 더 선호된다.
• builder.addCase(type, 생성자) - 액션 타입과 정확히 맵핑되는 케이스 리듀서 추가
• 그 외에도 addMatcher (주어진 패턴과 일치하는지 체크 후 처리), addDefaultCase 등이 있다.

Prepare 콜백 함수

• 액션 Contents 커스텀 가능.
• 예> payload에 사용자 정의 값 추가

import { createAction, nanoid } from '@reduxjs/toolkit'

const addTodo = createAction('todos/add', function prepate(text) {
  return {
    payload: {
      text,
      id: nanoid(),
      createdAt: new Date().toISOString()
    }
  }
})

console.log(addTodo('abc'));

// { type: 'todos/add', payload: {text: 'abc', id: '342413fgkskso', createdAt: '2019-10-03~..'}

createSlice

• Redux Logic 작성
• CreateAction + createReducer을 포함함.
• InitialState, Slice 이름을 받아 -> 액션 생성자와 타입을 자동으로 생성하는 함수.

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

const initialState = { value: 0 };

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {     // case reducer 함수들의 객체 
    increment(state) {   // type: counter/increment
      state.value++
    },
    decrement(state) {   // type: counter/decrement
      state.value--
    },
    incrementByAmount(state, action) {   // type: counter/incrementByAmount
      state.value += action.payload
    }
  }
})

extraReducers

• createSlice가 생성한 action type 외의 다른 액션 타입에 응답 가능
• 즉, 외부 액션을 참조하기 위한 것.

createAsyncThunk

• createAction의 비동기 버전.
• createAction 에서는 type, action을 인수로 넣어주었지만,
• createAsyncThunk 에서는 type, payloadCreator, options 순으로 넣어준다.

function createAsyncThunk(type, payloadCreator, options)

• 여기서 type은 user/requestStatus 타입 -> 액션 타입: pending, fulfilled, rejected
• payloadCreator은 Promise를 반환하는 콜백함수.

• 예> 비동기 요청을 보낸 후 response.data를 리턴

참고 문서

cancel

• useEffect return 부분에 (컴포넌트 언마운트 시) promise.abort()를 실행하여

• 비동기 요청 도중 취소되도록 구현 가능

• thunkName/rejected가 디스패치됨 (createAsyncThunk 참고)

• abort 되었을 때, request도 취소되도록 하려면?

• new AbortController()

abortController.signal

• mdn 문서

주문 사이트 Project

• 백엔드 서버 run 시켜주고, Type 컴포넌트를 보면 axios.get으로 백엔드 API를 호출하고 있음.
• orderType은 products, options 중 하나 (Orderpage/index.jsx 참고)
• 'products'이면 Products 컴포넌트를 보여주고, 'options'면 Options 컴포넌트를 보여줌.

import { useEffect, useState } from 'react';
import axios from 'axios';
import Products from './Products';
import Options from './Options';
import ErrorBanner from './ErrorBanner';

const Type = ({ orderType }) => {
  const [items, setItems] = useState([]);
  const [error, setError] = useState(false);

  useEffect(() => {
    loadItems(orderType);
  }, [orderType]);

  const loadItems = async (orderType) => {
    try {
      const response = await axios.get(`http://localhost:4000/${orderType}`);
      setItems(response.data);
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const ItemComponents = orderType === 'products' ? Products : Options;

  const optionItems = items.map((item) => (
    <ItemComponents
      key={item.name}
      name={item.name}
      imagePath={item.imagePath}
    />
  ));
  return (
    <>
      {optionItems}
      {error && <ErrorBanner message="에러가 발생하였습니다." />}
    </>
  );
};

export default Type;

• console.log(response.data)를 찍어보면 배열이 반환됨.
• 이제 Options 컴포넌트를 체크박스 + 라벨(name)로 수정해주면 됨.

const Options = ({ name }) => {
  return (
    <form>
      <input type="checkbox" id={`${name} option`} />
      <label htmlFor={`${name} option`}>{name}</label>
    </form>
  );
};

export default Options;

지금까지의 결과물

Context API 사용

• 여행 상품 수량을 올릴수록, 옵션을 추가할수록 priceState가 수정되어야 함.
• 변경된 priceState를 전달하기 위해서는 컴포넌트 여러개를 타고 불필요한 코드 반복이 됨.
• 이럴 때 Context API를 사용하자!

1. createContext 를 사용하여 컨텍스트 생성
2. 사용할 부분에 (App 컴포넌트)를 컨텍스트의 Provider로 감싸줌
3. useContext로 value 가져와서 사용

/src/context 폴더 생성 후, OrderContext.js 생성 (createContext)

import { createContext } from 'react';

const OrderContext = createContext();

index.js 수정 (Provider로 감싸줌)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Ordercontext from './context/OrderContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <OrderContext.Provider>
      <App />
    </OrderContext.Provider>
  </React.StrictMode>
);

• OrderContext.js에서 아예 Provider 컴포넌트를 생성해서 임포트하기.

  // OrderContext.js
  import { createContext } from 'react';
  

const OrderContext = createContext();

export function OrderContextProvider(props) { return <OrderContext.Provider value>{props.children}</OrderContext.Provider>; }

-> props를 spread 연산자로 간단하게 표현 가능
``` jsx
return <OrderContext.Provider value>{props.children}</OrderContext.Provider>;
// 같은 컴포넌트이다.
return <OrderContext.Provider value {...props} />;

• index.js에서는 OrderContextProvider를 불러와서 감싸주면 됨. (children으로 App이 들어감)

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  import { OrderContextProvider } from './context/OrderContext';
  

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

---

### Map 객체
- key - value 쌍으로 값을 저장.
- Map 객체에서 업데이트를 할 때는 `set` 메서드를 사용함.


- products, options에 대한 Map 객체를 생성하기.
- context의 값(value)을 설정할 때, Products, Options에 대한 값 모두를 가지고 있어야 함.
- 따라서 Map 객체를 이용하여 객체에 저장. (initialState)

``` js
// OrderContext.js
import { createContext, useMemo, useState } from 'react';

const OrderContext = createContext();

export function OrderContextProvider(props) {
  const [orderCounts, setOrderCounts] = useState({
    products: new Map(),
    options: new Map(),
  });

  const value = useMemo(() => {
    return [{ ...orderCounts }];
  }, [orderCounts]); // 리렌더링 최적화를 위해

  return <OrderContext.Provider value={value} {...props} />;
}

State 업데이트 함수 작성

• orderCount를 업데이트하는 함수.

  // OrderContext.js
  import { createContext, useMemo, useState } from 'react';
  

const OrderContext = createContext();

export function OrderContextProvider(props) { const [orderCounts, setOrderCounts] = useState({ products: new Map(), options: new Map(), });

const value = useMemo(() => { function updateItemCount(itemName, newItemCount, orderType) { const newOrderCounts = { ...orderCounts }; // 불변성을 위해 복사해둠 const orderCountsMap = orderCounts[orderType]; // products, options orderCountsMap.set(itemName, parseInt(newItemCount)); // Map set setOrderCounts(newOrderCounts); // }

return [{ ...orderCounts }, updateItemCount];

}, [orderCounts]);

return <OrderContext.Provider value={value} {...props} />; }

---

### 총 합계 업데이트 함수 작성

``` jsx
// OrderContext.js

const [totals, setTotals] = useState({
  products: 0,
  options: 0,
  total: 0
})

useEffect(() => {
  const productsTotal = calculateSubtotal("products", orderCounts);
  const optionsTotal = calculateSubtotal("options", orderCounts);
  const total = productsTotal + optionsTotal;
  setTotals({
    products: productsTotal,
    options: optionsTotal,
    total: total,
  });
}, [orderCounts]);

const pricePerItem = {
  products: 1000,
  options: 500,
};

function calculateSubtotal(orderType, orderCounts) {
  let optionCount = 0;
  for (const count of orderCounts[orderType].values()) {
    // Object.prototype.values()는 객체를 반환한다.
    optionCount += count;
  }
  return optionCount * pricePerItem[orderType];
}

[참고]

• for ... of 문
• 반복 가능 객체에 대해 반복 (개별 속성값에 대해 실행)

Context Value 가져오기

• 위에서 value 리턴을 배열로 하고있으므로 구조분해 할당으로 분리.

type.jsx

import { useEffect, useState } from 'react';
import axios from 'axios';
import Products from './Products';
import Options from './Options';
import ErrorBanner from './ErrorBanner';
import { useContext } from 'react';
import { OrderContext } from '../context/OrderContext';

const Type = ({ orderType }) => {
  const [items, setItems] = useState([]);
  const [error, setError] = useState(false);
  // useContext로 가져옴
  const [orderData, updateItemCount] = useContext(OrderContext);
  console.log(orderData, updateItemCount);

  useEffect(() => {
    loadItems(orderType);
  }, [orderType]);

  const loadItems = async (orderType) => {
    try {
      const response = await axios.get(`http://localhost:4000/${orderType}`);
      setItems(response.data);
      console.log(response.data);
    } catch (error) {
      console.error(error);
      setError(true);
    }
  };

  const ItemComponents = orderType === 'products' ? Products : Options;

  const optionItems = items.map((item) => (
    <ItemComponents
      key={item.name}
      name={item.name}
      imagePath={item.imagePath}
    />
  ));
  return (
    <>
      {optionItems}
      {error && <ErrorBanner message="에러가 발생하였습니다." />}
    </>
  );
};

export default Type;

총 가격(total) 보여주기

• 여행 가격이 변하는 경우

1. 상품의 개수가 변할 때
2. 옵션의 체크가 변할 때

-> OrderCounts가 변경됨

// Type.jsx
...

<ItemComponents
  key={item.name}
  name={item.name}
  imagePath={item.imagePath}
  updateItemCount={(itemName, newItemCount) => updateItemCount(itemName, newItemCount, orderType)}
  />

-> ItemComponents는 'Products' 또는 'Options' 이므로 각 컴포넌트에 props로 업데이트 함수를 넣어줌.

1. Products 수정

   // Products.jsx
   const Products = ({ name, imagePath, updateItemCount }) => {
   console.log('products : ', name, imagePath);
   
   // itemName은 name, newItemCount는 e.target.value
   const handleChange = (e) => {
    const currentValue = e.target.value;
    updateItemCount(name, currentValue);
   }
   
   return (
    <div style={{ textAlign: 'center' }}>
      <img
        src={`http://localhost:4000/${imagePath}`}
        alt={`${name} product`}
        style={{ width: '75%' }}
      />
      <form style={{ marginTop: '10px' }}>
        <label htmlFor="" style={{ textAlign: 'right' }}>
          {name}
        </label>
        <input
          type="number"
          name="quantity"
          min="0"
          defaultValue={0}
          style={{ marginLeft: '70x' }}
          onChange={handleChange}
        />
      </form>
    </div>
   );
   };
   

export default Products;

2. Options 수정
- 체크박스의 경우, e.target.checked가 true면 1이고, false면 0이다.
``` jsx
// Options.jsx
const Options = ({ name, updateItemCount }) => {
  return (
    <form>
      <input
        type="checkbox"
        id={`${name} option`}
        onChange={(e) => {
          updateItemCount(name, e.target.checked ? 1 : 0);
        }}
      />
      <label htmlFor={`${name} option`}>{name}</label>
    </form>
  );
};

export default Options;

총 합계 표시

// Type.jsx

return (
  <div>
    <h2>주문 종류</h2>
    <p>하나의 가격</p>
    <p>총 가격: {orderData.totals[orderType]}</p>
    {optionItems}
    {error && <ErrorBanner message="에러가 발생하였습니다." />}
  </div>
);

• 총 합계가 잘 변하는 것을 볼 수 있다.

step을 이용한 페이지 전환

• Order Page = step 0
• Summary Page = step 1
• Complete Page = step 2

// App.js
import OrderPage from './pages/OrderPage';
import SummaryPage from './pages/SummaryPage';
import CompletePage from './pages/CompletePage';
import { useState } from 'react';

function App() {
  const [step, setStep] = useState(0);
  return (
    <div style={{ padding: '4rem' }}>
      {step === 0 && <OrderPage setStep={setStep} />}
      {step === 1 && <SummaryPage setStep={setStep} />}
      {step === 2 && <CompletePage setStep={setStep} />}
    </div>
  );
}

export default App;

// OrderPage/index.js
import { useContext } from 'react';
import Type from '../../components/Type';
import { OrderContext } from '../../context/OrderContext';

const OrderPage = ({ setStep }) => {
  const [orderData] = useContext(OrderContext);

  return (
    <div>
      <h1>Travel Products</h1>
      <div style={{ display: 'flex' }}>
        <Type orderType="products" />
      </div>
      <div style={{ display: 'flex', marginTop: 20 }}>
        <div style={{ width: '50%' }}>
          <Type orderType="options" />
        </div>
        <div style={{ width: '50%' }}>
          <h2>Total Price: {orderData.totals.total}</h2> <br />
          <button onClick={() => setStep(1)}>주문</button>
        </div>
      </div>
    </div>
  );
};

export default OrderPage;

// SummaryPage/index.js
import { useState } from 'react';

const SummaryPage = ({ setStep }) => {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <form>
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => setChecked(e.target.checked)}
          id="confirm-checkbox"
        />
        <label htmlFor="confirm-checkbox">주문하려는 것을 확인하셨나요?</label>
        <br />
        <button disabled={!checked} type="submit" onClick={() => setStep(2)}>
          주문 확인
        </button>
      </form>
    </div>
  );
};

export default SummaryPage;

step이라는 state를 통해 페이지 전환이 가능하다!

Summary Page 구현

• 해당 페이지 UI 구현하기

Array.form

• Map 객체를 배열로 만들어주기
• 배열로 만들어준 후, Array.prototype.map 매서드로 보여줌

⚠️ 참고 - 배열 구조분해 할당 시

• 만약 첫 번째 인자만 가져오고 싶다면?

const [first] = someArray; //  이렇게 하면 됨.
const [first, _] = someArray;  // 이런식으로 안해도 됨.

// SummaryPage/index.js

import { useContext } from 'react';
import { useState } from 'react';
import { OrderContext } from '../../context/OrderContext';

const SummaryPage = ({ setStep }) => {
  const [checked, setChecked] = useState(false);
  const [orderDetails] = useContext(OrderContext);

  const productArray = Array.from(orderDetails.products);
  const productList = productArray.map(([key, value]) => (
    <li key={key}>
      {value} {key}
    </li>
  ));

  return (
    <div>
      <h1>주문 확인</h1>
      <h2>여행 상품: {orderDetails.totals.products}</h2>
      <ul>{productList}</ul>
      <form>
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => setChecked(e.target.checked)}
          id="confirm-checkbox"
        />
        <label htmlFor="confirm-checkbox">주문하려는 것을 확인하셨나요?</label>
        <br />
        <button disabled={!checked} type="submit" onClick={() => setStep(2)}>
          주문 확인
        </button>
      </form>
    </div>
  );
};

export default SummaryPage;

• Map 객체를 배열로 바꿔준 것.
• Array.from(mapObject) -> [[key, value], [key, value], [key, value]..] 로 변환

// Map
new Map([
    [
        "America",
        2
    ],
    [
        "England",
        1
    ],
    [
        "Germany",
        2
    ],
    [
        "Portland",
        1
    ]
])

// Array
[
    [
        "America",
        2
    ],
    [
        "England",
        1
    ],
    [
        "Germany",
        2
    ],
    [
        "Portland",
        1
    ]
]

옵션 상품

• 옵션 선택을 하지 않은 경우, 아예 해당 영역을 숨김 처리

  // SummatyPage/index.js
  import { useContext } from 'react';
  import { useState } from 'react';
  import { OrderContext } from '../../context/OrderContext';
  

const SummaryPage = ({ setStep }) => { const [checked, setChecked] = useState(false); const [orderDetails] = useContext(OrderContext);

// Map 객체는 length가 아닌 size const hasOptions = orderDetails.options.size > 0; console.log(hasOptions); let optionsDisplay = null;

if (hasOptions) { const optionsArray = Array.from(orderDetails.options.keys()); const optionList = optionsArray.map((key) =>

옵션: {orderDetails.totals.options}

{optionList}

const productArray = Array.from(orderDetails.products); const productList = productArray.map(([key, value]) => (

return (

export default SummaryPage;

---

## Complete Page 구현

- 주문 완료 페이지 (완료 확인)
- 해당 주문에 대한 POST 요청이 필요함.


- order Number을 랜덤으로 지정 (response로 보내줌)
``` jsx
import axios from 'axios';
import { useContext } from 'react';
import { useEffect } from 'react';
import { OrderContext } from '../../context/OrderContext';

const CompletePage = () => {
  const [orderData] = useContext(OrderContext);

  useEffect(() => {
    orderCompleted(orderData);
  }, [orderData]);

  const orderCompleted = async (orderData) => {
    try {
      const response = await axios.post(
        'http://localhost:4000/order',
        orderData
      );
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  };

  return <div>CompletePage</div>;
};

export default CompletePage;

• response는 다음과 같다.

import axios from 'axios';
import { useContext, useState } from 'react';
import { useEffect } from 'react';
import { OrderContext } from '../../context/OrderContext';

const CompletePage = ({ setStep }) => {
  const [orderHistory, setOrderHistory] = useState([]);
  const [loading, setLoading] = useState(true);
  const [orderData] = useContext(OrderContext);

  useEffect(() => {
    orderCompleted(orderData);
  }, [orderData]);

  const orderCompleted = async (orderData) => {
    try {
      const response = await axios.post(
        'http://localhost:4000/order',
        orderData
      );
      setOrderHistory(response.data);
      setLoading(false);
    } catch (error) {
      console.error(error);
    }
  };

  const orderTable = orderHistory.map((item, key) => (
    <tr key={item.orderNumber}>
      <td>{item.orderNumber}</td>
      <td>{item.price}</td>
    </tr>
  ));

  if (loading) {
    return <div>LOADING...</div>;
  } else
    return (
      <div style={{ textAlign: 'center' }}>
        <h2>주문이 성공했습니다.</h2>
        <h3>지금까지 모든 주문</h3>
        <table>
          <tbody>
            <tr>
              <th>number</th>
              <th>price</th>
            </tr>
            {orderTable}
          </tbody>
        </table>
        <br />
        <button onClick={() => setStep(0)}>첫 페이지로</button>
      </div>
    );
};

export default CompletePage;

오류 해결

• 발견 에러 옵션에서 체크 후 해제 시, 다음 Summary 페이지에 나타나는 에러가 발견됨.

• 원인 화면단에 보여줄 때, options.keys로 다 보여줬는데, Map 객체에서 한 번 체크한 이상 무조건 key-value가 남기 때문에 값이 1인 항목만 보여주어야 함.

문제 설명

첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요.

제한 사항

0 <numer1, denom1, numer2, denom2 < 1,000

입출력 예

입출력 예 #1

• 1 / 2 + 3 / 4 = 5 / 4입니다. 따라서 [5, 4]를 return 합니다.

입출력 예 #2

• 9 / 2 + 1 / 3 = 29 / 6입니다. 따라서 [29, 6]을 return 합니다.

내 코드

function solution(denum1, num1, denum2, num2) {
    const denum = denum1 * num2 + denum2 * num1;
    const num = num1 * num2;

    const gcd = (a, b) => b === 0 ? a : gcd(b, a % b)

    let least = gcd(denum, num)
    let answer = [denum / least , num/least]
    return answer
}

풀이

• 처음에는 1 / 2 + 3 / 4 = 1.25 이므로 (소수) 합계를 먼저 구한 후 소수 -> 기약분수로 변환하는 방식을 생각해보았다. 1.25 = 1 + 0.1(1/10) * 2 + 0.01(1/100) * 5 와 같이 쪼개는 방법도 생각해보았는데. 결국 약분해야 하므로 PASS

• 그 다음으로는 분자, 분모를 구하고 두 수의 최대공약수를 구해서 나누는 방법을 생각했다. denum = denum1 * num2 + denum2 * num1 , num = num1 * num2 이고 gcd 함수를 생성해서 만약 b가 0 (즉, a%b가 0이면) 최대공약수는 a가 되고, 그렇지 않다면 계속해서 그 나머지와 나누어 나머지를 구하는 것을 반복하는 함수이다.

• 참고 : 유클리드 호제법 (Euclidean Algorithm)

[참고] 유클리드 호제법

• 유클리드 호제법(- 互除法, Euclidean Algorithm)은 2개의 자연수 또는 정식(整式)의 최대공약수(Greatest Common Divisor)를 구하는 알고리즘의 하나이다.

• 호제법이란 말은 두 수가 서로(互) 상대방 수를 나누어(除)서 결국 원하는 수를 얻는 알고리즘을 나타낸다.

• 2개의 자연수(또는 정식) a, b에 대해서 a를 b로 나눈 나머지를 r이라 하면(단, a>b), a와 b의 최대공약수는 b와 r의 최대공약수와 같다. 이 성질에 따라, b를 r로 나눈 나머지 r'를 구하고, 다시 r을 r'로 나눈 나머지를 구하는 과정을 반복하여 나머지가 0이 되었을 때 나누는 수가 a와 b의 최대공약수이다.

• 이는 명시적으로 기술된 가장 오래된 알고리즘으로서도 알려져 있으며, 기원전 300년경에 쓰인 유클리드의 《원론》 제7권, 명제 1부터 3까지에 해당한다.

state 관리 방법

1. state, props 이용 (컴포넌트 간 통신)
2. React Context 이용
3. MobX
4. Redux
5. Recoil 등 ...

React Context

• Component 트리의 깊이와 관계 없이 Props를 전달하지 않고도 state 사용 가능.
• 전역 데이터를 관리하는데 사용됨.

React.createContext

• context 객체 생성
• Provider에서 현재 context 값을 읽음

const MyContext = React.createContext(defaultValue);

• Provider <-> Consumer 구조

Context.Provider

<MyContext.Provider value={ }>
  <AComponent />
  <BComponent />
  <CComponent />
</MyContext.Provider>

• A, B, C 컴포넌트 모두 다 컨텍스트를 구독 중이다.
• 컨텍스트 값이 바뀌면, 컴포넌트를 다시 렌더링한다.

[참고] 변경 사항은 Object.is와 동일한 알고리즘을 사용하여 이전 값과 비교하여 결정됨.

useContext

const value = useContext(MyContext);

사용 예시

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light); // initialState 지정하여 생성

const App = () => {
  return (
    <ThemeContext.Provider value={themes.dark}> 
      <Toolbar />
    </ThemeContext.Provider>
  );
}

const Toolbar = () => {
  return (
    <div>
      <ThemedButton/>
    </div>
  );
}

const ThemedButton = () => {
  const theme = useContext(ThemeContext); // themes.dark
  return (
    <button style={{background: theme.background, color: theme.foreground}}>
      style button
    </button>)
}

• 위 코드에서 InitialValue는 themes.light지만, Provider가 value props로 내려주고 있는 값이 themes.dark이므로
• useContext(ThemeContext)는 themes.dark가 됨.

사이드 프로젝트

클라이언트

• Pages

1. 주문 페이지
2. 요약 페이지
3. 완료 페이지

• Components

백엔드

• node.js

create react app (프로젝트 생성)

• 현재 폴더에 생성하려면?

  $ npx create-react-app ./

pages 생성

/src/pages에 아래와 같이 각 페이지 폴더와 index.js 생성

const SummaryPage = () => {
  return <div>SummaryPage</div>;
};

export default SummaryPage;

Summary Page 생성

구현해야 할 기능

• 주문 확인 체크박스 체크해야 [주문 확인] 버튼 클릭 가능.
• form을 이용하여 구현 (input checkbox)

1. checked state를 관리
2. input onClick 핸들러 (e.target.checked로 설정)
3. button disabled (checked가 false면 disabled)

import { useState } from 'react';

const SummaryPage = () => {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <form>
        <input
          type="checkbox"
          checked={checked}
          onClick={(e) => setChecked(e.target.checked)}
          id="confirm-checkbox"
        />{' '}
        <label htmlFor="confirm-checkbox">주문하려는 것을 확인하셨나요?</label>
        <br />
        <button disabled={!checked} type="submit">
          주문 확인
        </button>
      </form>
    </div>
  );
};

export default SummaryPage;

주문 페이지 UI 생성

• OrderPage에 들어갈 컴포넌트인 Type 컴포넌트 생성.
• /src/components/Type.jsx

App > OrderPage > Type

• Type에서는 OrderType 이라는 props를 받아서 구분함

const Type = ({ orderType }) => {
  return (
    <>
      <h2>주문 종류</h2>
      <p> 하나의 가격</p>
      <p>총 가격:</p>
      <div
        style={{
          display: 'flex',
          flexDirection: orderType === 'options' && 'column',
        }}
      ></div>
    </>
  );
};

export default Type;

const OrderPage = () => {
  return (
    <div>
      <h1>Travel Products</h1>
      <div>
        <Type orderType="products" />
      </div>
      <div style={{ display: 'flex', marginTop: 20 }}>
        <div style={{ width: '50%' }}>
          <Type orderType="options" />
        </div>
        <div style={{ width: '50%' }}>
          <h2>Total Price</h2> <br />
          <button>주문</button>
        </div>
      </div>
    </div>
  );
};

export default OrderPage;

백엔드 코드 연결

• 상품 이미지 가져오기
• API 요청 (axios)

• Type 컴포넌트에서 orderType은 'products' 또는 'options' 인데, orderType에 따라 api를 다르게 요청함.
• items 라는 state에 api response.data를 저장함.

import { useEffect, useState } from 'react';
import axios from 'axios';
import Products from './Products';
import Options from './Options';

const Type = ({ orderType }) => {
  const [items, setItems] = useState([]);
  console.log(orderType);

  useEffect(() => {
    loadItems(orderType);
  }, [orderType]);

  const loadItems = async (orderType) => {
    try {
      const response = await axios.get(`http://localhost:4000/${orderType}`);
      setItems(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const ItemComponents = orderType === 'products' ? Products : Options;

  const optionItems = items.map((item) => (
    <ItemComponents
      key={item.name}
      name={item.name}
      imagePath={item.imagePath}
    />
  ));
  return <>{optionItems}</>;
};

export default Type;

Products UI 작성

• ItemComponents(=Products)의 props 확인

  const Products = ({ name, imagePath }) => {
  console.log('products : ', name, imagePath);
  return <>Products</>;
  };
  

export default Products;

### 백엔드(서버) 이미지 접근
- 예> /images/america.jpeg 의 경우
- {백엔드 URL}/images/america.jpeg
- 즉, localhost:4000/images/america.jpeg 로 접근하면 됨.


``` jsx
const Products = ({ name, imagePath }) => {
  console.log('products : ', name, imagePath);
  return (
    <div style={{ textAlign: 'center' }}>
      <img
        src={`http://localhost:4000/${imagePath}`}
        alt={`${name} product`}
        style={{ width: '75%' }}
      />
    </div>
  );
};

export default Products;

API 에러 처리

• ErrorBanner 컴포넌트 생성

  const ErrorBanner = ({ message }) => {
  let errorMessage = message || '에러입니다.';
  return <div style={{ backgroundColor: 'red' }}>{errorMessage}</div>;
  };
  

export default ErrorBanner;

- Type 컴포넌트 수정
``` jsx
import { useEffect, useState } from 'react';
import axios from 'axios';
import Products from './Products';
import Options from './Options';
import Error from './Error';

const Type = ({ orderType }) => {
  const [items, setItems] = useState([]);
  const [error, setError] = useState(false);

  useEffect(() => {
    loadItems(orderType);
  }, [orderType]);

  const loadItems = async (orderType) => {
    try {
      const response = await axios.get(`http://localhost:4000/${orderType}`);
      setItems(response.data);
    } catch (error) {
      setError(true); // 에러 처리
    }
  };

  const ItemComponents = orderType === 'products' ? Products : Options;

  const optionItems = items.map((item) => (
    <ItemComponents
      key={item.name}
      name={item.name}
      imagePath={item.imagePath}
    />
  ));
  return (
    <>
      {optionItems}
      {error && <Error />}
    </>
  );
};

export default Type;

• React 프로젝트 -> TS + React로 변경

Dependencies 설치

$ npm install -D typescript @types/react @types/react-dom

그 외

• vite.config.js -> ts로 수정
• tsconfig.node.json 파일 생성
• src/vite-env.d.ts

참고 - vite 프로젝트 생성 시 Typescript 선택 시 자동으로 생성됨

• index.html에서 main.jsx -> main.tsx로 수정

• main.jsx -> main.tsx 수정

  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);

• tsconfig.json에서 allow.js을 true로 수정 자바스크립트 파일을 사용할 수 있게 해줄 것인지 설정

types 설정

/src/types 폴더 생성해서 타입들만 모아놓기 (.ts)

export interface PokemonData {
  count: number;
  next: string | null;
  previous: string | null;
  results: PokemonNameAndUrl[];
}

export interface PokemonNameAndUrl {
  name: string;
  url: string;
}

1. State에 타입 지정하기

   const [allPokemons, setAllPokemons] = useState([]); // error

const [allPokemons, setAllPokemons] = <PokemonNameAndUrl[]>useState([]); // OK

• allPokemons라는 state가 PokemonNameAndUrl이라는 타입을 가진다.

2. axios.get으로 가져오는 정보에 타입 지정하기

   const response = await axios.get<PokemonData>(url);

3. 함수 params에 타입 지정하기

   const filterDisplayedPokemonData = (
   allPokemonsData: PokemonNameAndUrl[],
   displayedPokemons: PokemonNameAndUrl[] = []
   ) => {
   ...
   } 

4. return 부분 map params에 타입 지정하기

   {displayedPokemons.map(({url, name}: PokemonNameAndUrl) => ( ... ))}

5. setState에 타입 지정하기

   setState: React.Dispatch<React.SetStateAction<number>>;

그 외 React에서 어떻게 TypeScript를 사용하는지는 React-TypeScript-CheatSheet에 잘 나와있으니 참조!

컴포넌트 props에 타입 지정하는 컨벤션

interface ComponentProps {
  props1: string[],
  props2: React.Dispatch<React.SetStateAction<string>>
}

const Component = ({ props1, props2 }: ComponentProps) => {
  ...
}

이벤트 객체의 경우

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  ...
}

keyof typeof

const newSprites = {...sprites};

(Object.keys(newSprites) as (keyof typeof newSprites)[]).forEach((key => {
  ...
})

• newSprites는 객체이다.
• keyof는 타입의 키를 가져오는 것 이므로, 객체에 바로 사용 불가함.
• 따라서 typeof 를 한 번 해주고나서 keyof를 해줘야 함.

type Point = {x: number, y:number};
type P = keyof Point; // "x" | "y"

✅ 타입 단언 (as)

• TypeScript보다 어떤 값의 타입을 보다 명확하게 알고 있을 때 활용
• 타입 선언(:type)과는 다름.
• 즉, 타입 단언은 강제로 타입을 지정했으니 체크를 하지 않음.

[Tool] quickType

• 데이터를 붙여넣으면 자동으로 Type을 바꿔주는 사이트
• quickType 바로가기

await

• await은 Promise를 반환
• 그 타입을 <> 안에 적어주면 됨 (string)

  const getDescription = async (id: number): Promise<string> => {
  ...
  return descriptions;
  }

useRef

1. 변수로 사용하는 경우

• 초기 값을 제네릭 타입과 같은 타입으로 넣어주기.

const varRef = useRef<number>(0);

2. DOM을 조작하기 위해 사용하는 경우

• 초기 값(HTMLElement)을 넣어주기

  const ref = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  

...

return(

- 위에서는 ref가 null이 될 수 있다.
- 타입 가드(type guard)를 해줘야 함.

``` tsx
if (ref.current) {  // type guard
  ref.current.style.width = '100%'
}

useState

• useState값이 객체거나 Null일때

  const initialUserData = localStorage.getItem('userData') ? JSON.parse(localStorage.getItem('userData')) : null;
  const [userData, setUserData] = useState<User | null>(initialUserData);

.d.ts 선언 파일 생성

uuid

• 유니크한 아이디를 생성하는 모듈.

$ npm install uuid

• app.tsx에서 임포트 시 선언 파일을 찾을 수 없다는 에러 발견됨.

  import { v4 } from 'uuid';

• 이와 같이 js로 작성된 모듈을 사용할 때, 타입이 지정되지 않은 경우

  • .d.ts 선언 파일을 생성해야 함.

uuid.d.ts 파일 생성

declare module 'uuid' {
  const v4: () => string;

  export { v4 };
}

• 파일 명을 uuid.d.ts가 아닌 main.d.ts 등으로 변경하면 다시 에러가 남.
  • 자동으로 찾아주지 않기 때문에 Reference 태그를 사용해야함.

/// <refrence path=""/>

• 파일의 최상단에 위와 같이 작성하면 해결됨.
• 즉, 선언 파일(.d.ts)명이 모듈의 이름과 다른 경우에는 위와 같이 레퍼런스 태그를 사용해야 함.

/// <reference path="./main.d.ts" />

권장 방법

• 위와 같이 직접 .d.ts 파일을 생성하는 것 보다는
• 타입 선언 모듈을 설치해서 쓰는 것이 좋다!

$ npm install -D @types/{모듈명}

참고 - npm install uuid && npm install -D @types/uuid 둘 다 해야 함.

LocalStorage Wrapper 생성

• localStorage 값을 가져올 때 Wrapper를 이용해보자.

/src/utils/storage.ts 파일 생성

const storage = {
  set: (key: string, value: any) => {
    localStorage.setItem(key, JSON.stringify(value));
  }, 

  get: <T>(key: string, defaultValue?: T): T => {
    const value = localStorage.getItem(key);
    return (value ? JSON.parse(value) : defaultValue) as T;
  },

  remove: (key: string) => {
    localStorage.removeItem(key)
  }
}

1. Firebase
2. React Project

Firebase란?

• Google 로그인 구현 가능
• 데이터베이스
• 스토리지
• 푸시 알림
• 배포 등

앱을 만들 때 필요한 여러가지 기능을 편리하게 구현 가눙. Firebase 하나로 백엔드 부분을 대체 가능.

Firebase와 어플리케이션 연결

1. Firebase 사이트로 이동 https://firebase.google.com/?hl=ko

• 로그인 후, Go to console 클릭.
• 프로젝트 생성
• 생성 후, '웹' 클릭

2. Add Firebase

• App nickname 등록

• firebase SDK 넣기 (npm 또는 script 태그)

  $ npm install firebase

• /src/firebase.js 파일 생성 후 아래 코드 붙여넣기

  // Import the functions you need from the SDKs you need
  import { initializeApp } from "firebase/app";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries
  

// Your web app's Firebase configuration const firebaseConfig = { apiKey: "AIzaSyC63UwfU5W3xQfqOR9CVObrdwtNQNe4Gak", authDomain: "react-firebase-30fd5.firebaseapp.com", projectId: "react-firebase-30fd5", storageBucket: "react-firebase-30fd5.appspot.com", messagingSenderId: "1055997579956", appId: "1:1055997579956:web:fece8bcb3636855b037de1" };

// Initialize Firebase const app = initializeApp(firebaseConfig);

3. Authentication에서 Google Sign in 메서드 허용
- Authentication > Sign-in method 에서 Google 항목을 Enabled로 변경

![](https://velog.velcdn.com/images/thisisyjin/post/b1c6099a-f8d9-450c-926f-f73621bd1a85/image.png)

![](https://velog.velcdn.com/images/thisisyjin/post/a064b8c0-e379-48f3-b1d3-96baa5ba431b/image.png)



--- 
### 로그인 페이지 생성
- 네비게이션 바 생성 (공통 부분)
- Outlet 사용 (React-Router-Dom 중첩 라우팅)

``` jsx
<Route path="/" element={<Layout />}>
    <Route index element={<MainPage />} />
    <Route path="/login" element={<LoginPage />} />
</Route>

const Layout = () => {
  return (
    <>
      <div></div>
      <Outlet />
    </>
  )
}

예> localhost:3000/login 에서는 Layout이 보이고, LoginPage가 보임.

Styled-Component

• CSS in JS
• 리액트의 컴포넌트 맞춤 스타일링을 위한 방식
• 스타일링 시 컴포넌트를 생성하고, props 를 사용할 수 있음

  const Button = styled.button`
  color: ${(props => props.primary ? "red" : "white"};
  `;

• 부모 스타일을 확장 가능 (styled())

  const Button = styled.button`
  // styling
  `;
  

const BlueButton = styled(Button)color: blue;;

### 스크롤 시 색상 변화되는 상단 네비게이션 구현
- scroll 이벤트 리스너 이용

``` js
const [show, setShow] = useState(false);

const listener = () => {
    if (window.scrollY > 50) {
      setShow(true);
    } else {
      setShow(false);
    }
}
useEffect(() => {
  window.addEventListener('scroll', listner);
  return () => {
    window.removeEventListener('scroll', listner);
  }
}, []);

Firebase를 이용한 로그인 구현

• 로그인 버튼은 path가 /login 일 때만 보이도록 설정

const { pathname } = useLocation(); // '/login'


...
// return
{pathname === '/login' ? (<LoginButton />) : null}

• signinwithpopup 이용 https://firebase.google.com/docs/auth/web/google-signin?hl=ko

import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

1. getAuth(app)

• 여기서 app은 firebase.js 생성할 때 initializeApp 으로 생성해준 앱 인스턴스임.

  import app from '../firebase';
  

const auth = getAuth(app);

2. Provider 인스턴스 생성
``` jsx
const provider = new GoogleAuthProvider();

3. SignInWithPopup 호출

   signInWithPopup(auth, provider);

• 로그인 버튼 클릭 시 함수 생성

const handleAuth = () => {
  signInWithPopup(auth, provider)
    .then(result => {
      console.log(result);
    })
    .catch(error => {
      console.error(error);
    })
}

로그인 상태 체크

'firebase/auth'의 onAuthStateChanged 메서드 사용

• 유저의 상태가 변경될 때 호출된다.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(app); // auth 인스턴스

onAuthStateChanged(auth, (user) => {
  if (user) {
    // User Signed in
    const uid = user.uid;
  } else {
    // User Signed out
  }
});

• 이를 이용해서 로그인 상태를 체크하고, 리다리엑트 가능함.

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

const navigate = useNavigate();

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (!user) {
      navigate('/login');
    } else if (user && pathname === '/login') {
      // 로그인 상태인데 로그인 페이지로 가려고 할 경우
      navigate('/');
    }
  });

  // return으로 정리해줘야함
  return () => {
    unsubscribe(); 
  }
}, []);

로그아웃 기능 구현

• 유저 정보 저장

const [userData, setUserData] = useState({})

const handleAuth = () => {
  signInWithPopup(auth, provider)
  .then(result => {
    setUserData(result.user);
  })
  .catch(error => {
    console.error(error)
  });
}

userData.photoURL을 이용하여 유저 프로필 이미지 보여주기 가능.

• 로그아웃 메서드 (signOut)

  import { signOut } from 'firebase/auth';
  

const handleLogout = () => { signOut(auth).then(() => { setUserData({}); }) .catch(error => { console.error(error); }); }

### 데이터 유지하기
- 리프레시 했을 때 userData가 날아가지 않도록 해야 함
- 리프레시 -> state가 초기화 됨 -> 데이터 날아감


- localStorage 이용하여 유저 데이터를 저장
- `result.user`은 객체이기 때문에, localStorage에 저장할 때는
`JSON.stringify()`를 통해 스트링화
- 다시 값을 불러올 때에는 `JSON.parse()` 를 이용


---

### Firebase로 앱 배포

1. Git 원격 브랜치에 Push하기
2. firebase CLI 로그인
- firebase-tools 설치 (전역)
``` bash
$ npm install -g firebase-tools

• firebase CLI를 이용하여 로그인

  $ firebase login

3. 앱 빌드

   $ npm run build

4. Firebase 시작

   $ firebase init

5. hosting 기능 선택 후 스페이스바 + 엔터 후 Existing Project 선택 후 엔터

6. 퍼블릭 디렉토리 선택

• CRA의 경우, /build 폴더
• vite의 경우, /dist 폴더

-> dist 입력 후 엔터

7. SPA 여부 -> y
8. github -> y
9. overwrite -> n
10. Authorize Firebase 버튼 클릭 (github 레파지토리 접근)
11. set up repository -> username/repository 형식으로 작성
12. 배포 전 항상 build? -> y
13. 빌드 시 어떤 script? -> npm install && npm run build
14. 어떤 브랜치 -> main

위와 같은 과정을 통해 배포 완료. 다시 한 번 소스코드를 git에 push.

github > Actions 탭 확인해보면 build_and_deploy진행 과정 볼 수 있음.

• 배포 확인 firebase console에서 Deployed 상태 클릭 -> 도메인 클릭하면 끝.

문제 설명

오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다.

정답은 아무에게도 말하지 마세요.

콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가?

단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다.

문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다. 상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 받고, 또 2병을 모두 마신 뒤 가져가서 1병을 받습니다. 받은 1병과 5병을 받았을 때 남은 1병을 모두 마신 뒤 가져가면 1병을 또 받을 수 있습니다. 이 경우 상빈이는 총 10 + 5 + 2 + 1 + 1 = 19병의 콜라를 받을 수 있습니다.

문제를 열심히 풀던 상빈이는 일반화된 콜라 문제를 생각했습니다. 이 문제는 빈 병 a개를 가져다주면 콜라 b병을 주는 마트가 있을 때, 빈 병 n개를 가져다주면 몇 병을 받을 수 있는지 계산하는 문제입니다. 기존 콜라 문제와 마찬가지로, 보유 중인 빈 병이 a개 미만이면, 추가적으로 빈 병을 받을 순 없습니다. 상빈이는 열심히 고심했지만, 일반화된 콜라 문제의 답을 찾을 수 없었습니다. 상빈이를 도와, 일반화된 콜라 문제를 해결하는 프로그램을 만들어 주세요.

콜라를 받기 위해 마트에 주어야 하는 병 수 a, 빈 병 a개를 가져다 주면 마트가 주는 콜라 병 수 b, 상빈이가 가지고 있는 빈 병의 개수 n이 매개변수로 주어집니다. 상빈이가 받을 수 있는 콜라의 병 수를 return 하도록 solution 함수를 작성해주세요.

제한사항

1 ≤ b < a ≤ n ≤ 1,000,000 정답은 항상 int 범위를 넘지 않게 주어집니다.

입출력 예

입출력 예 #1

a=2, b=1, n=20 result = 19

의사 코드

1. 남은 병 수 / a가 나누어 떨어지는 경우

• 남은 병 수 = 남은 병 수 / a (몫)
• 받은 병 수 = 몫 * b

2. 남은 병 수 / a가 나누어 떨어지지 않는 경우

• 남은 병 수 = 남은 병 수 - 준 병 수 + 받은 병 수
• 받은 병 수 = 몫(내림) * b

내 코드

function solution(a, b, n) {
  let answer = 0;
  let rest = n;

  while (rest >= a) {
    if (rest % a === 0) {
      rest = (rest / a) * b;
      answer += rest;
    } else {
      answer += Math.floor(rest / a) * b;
      rest = rest - a * Math.floor(rest / a) + Math.floor(rest / a) * b;
    }
  }
  return answer;
}

실행 결과

테스트 1 〉 통과 (0.14ms, 33.4MB) 테스트 2 〉 통과 (0.05ms, 33.5MB) 테스트 3 〉 통과 (0.16ms, 33.4MB) 테스트 4 〉 통과 (0.07ms, 33.4MB) 테스트 5 〉 통과 (0.08ms, 33.4MB) 테스트 6 〉 통과 (0.05ms, 33.4MB) 테스트 7 〉 통과 (0.07ms, 33.5MB) 테스트 8 〉 통과 (0.05ms, 33.4MB) 테스트 9 〉 통과 (0.13ms, 33.4MB) 테스트 10 〉 통과 (0.05ms, 33.4MB) 테스트 11 〉 통과 (0.05ms, 33.4MB) 테스트 12 〉 통과 (0.46ms, 33.6MB) 테스트 13 〉 통과 (0.05ms, 33.4MB) 테스트 14 〉 통과 (0.05ms, 33.4MB)

다른 코드

좀 더 간단하게 할 수 없나? 라는 생각에 다른 코드를 작성해보았다.

function solution(a, b, n) {
  // 나눠떨어지면 남은 수 = (n/a) / 얻은 수 += (n/a) * b
  // 나눠떨어지지 않으면 남은 수 = n % a + Math.floor(n/a) * b / 얻은 수 += Math.floor(n/a) * b
  let answer = 0;

  while (n >= a) {
    answer =
      n % a === 0 ? answer + (n / a) * b : answer + Math.floor(n / a) * b;
    console.log(n, answer);
    n = n % a === 0 ? n / a : (n % a) + Math.floor(n / a) * b;
  }
  return answer;
}

결국 똑같은 코드인 듯 하다