μΆμ΅μ μ§λ’° μ°ΎκΈ° κ²μμ λλ€. Easy, Medium, Hard, Extream 4κ°μ§μ λͺ¨λλ₯Ό κ²½νν΄λ³Ό μ μκ³ , μΉ λΈλΌμ°μ , λͺ¨λ°μΌμμ κ²μμ μ¦κΈΈ μ μμ΅λλ€.
- Build & Installation
- Introduction
- Goal
- Motivation
- κΈ°μ μ€ν
- Schedule
- Feature
- λ°°μ΄ μ κ³Ό λλ μ
- μμ¬μ΄ μ
npm install
npm start
React
μ Class component
μ React-Redux
connect(mapStateToProps, mapDispatchToProps)
λ₯Ό μ¬μ©ν νλ‘μ νΈμ
λλ€.
νμ¬ κΆμ₯νλ λ°©λ²μ΄ μλ μ΄μ μ λ§μ΄ μΌλ λ°©λ²μ κ²½νν΄λ΄μΌλ‘μ¨ Reactμ Reduxκ° μ΄λ€ λ°©ν₯μΌλ‘ μ λ°μ΄νΈλκ³ μ΄λ€ μ μ κ°μ νλμ§ λ μ΄ν΄ν μ μλ κ²μ λͺ©νλ‘ μ€μ νμ΅λλ€. κ·Έλ¦¬κ³ ν¨μν μ»΄ν¬λνΈμ Redux ν΄ν· μ¬μ©μ μ£Όλ‘ νλ©΄μ λμ³€λ κΈ°λ³ΈκΈ°λ₯Ό λ€μ§λ κ²λ ν¨κ» λͺ©νλ‘ μ€μ νμμ΅λλ€.
Reactμ λν΄μ μμλ³΄λ€ λ³΄λ©΄ Class μ»΄ν¬λνΈμ ν¨μν μ»΄ν¬λνΈλ₯Ό λΉκ΅νλ©° μ€λͺ νλ κΈμ΄ λ§μμ΅λλ€. ν¨μν μ»΄ν¬λνΈλ₯Ό μ£Όλ‘ μ°λ€ 보λ Class μ»΄ν¬λνΈμμ λΉκ΅κ° μ μ λΏμ§ μλ λΆλΆμ΄ μ겨 κ·Έ νμ λ©κΎΈκ³ μ Class μ»΄ν¬λνΈλ₯Ό μ¬μ©ν λ―Έλ νλ‘μ νΈλ₯Ό μ§ννκ² λμμ΅λλ€. μ΄μ μ μ¬μ©νλ λ°©μμ κ²½νν΄λ³΄κ³ λλ©΄, μ§κΈμ λ°©λ²κ³Ό μ΄μ μ λ°©λ²μ μ°¨μ΄λ₯Ό λ λͺ νν μ μ μμ κ² κ°μ μ’μ κ²½νμ΄ λ κ²μΌλ‘ μκ°νμ΅λλ€.
-
React 18
,cra(create-react-app)
λ₯Ό νμ©νμ΅λλ€. -
React Router Dom
μ μ΄μ©ν΄ λΌμ°ν μ μ²λ¦¬νμ΅λλ€. -
Redux
,React-Redux
μ μ μν κ΄λ¦¬ ν΄μ μ΄μ©νμμ΅λλ€. -
Tailwind
CSS νλ μμν¬λ₯Ό μ¬μ©νμμ΅λλ€.Dependencies Version react ^18.2.0 react-redux ^8.0.5 redux ^4.2.0 react-router-dom ^6.7.0 tailwindcss ^3.2.4
Date | Schedule |
---|---|
23.01.23 | μ€μΌμ€ μ€μ λ° κΈ°λ₯ ꡬν λ°©λ² νμ |
23.01.24 | κΈ°λ₯ ꡬν |
23.01.25 | κΈ°λ₯ ꡬν |
23.01.25 | λ²κ·Έ μμ , λ°°ν¬ |
23.01.26 | λ²κ·Έ μμ |
// status reducer
const initialState = {
gameStatus: GAME_STATUS.START,
mode: "easy",
table: [],
row: 0,
col: 0,
minesCount: 0,
minesIndexObj: {},
finishCellCount: 0,
};
...
// base reducer
const initialState = {
isModalShowing: false,
};
- κ²μκ³Ό κ΄λ ¨λ μν, κ΄λ ¨λμ§ μμ μν λ κ°μ§λ‘ λλμ΄ μν κ΄λ¦¬λ₯Ό ν΄μ£Όμμ΅λλ€.
minesIndexObj
: μ§λ’°κ° μμΉν indexλ₯Ό objectμ κΈ°λ‘ν΄μ£Όμμ΅λλ€. λΉ λ₯Έ νμμ μν΄ λ°°μ΄μ΄ μλ κ°μ²΄λ₯Ό μ ννμ΅λλ€.
import React from "react";
import { useParams } from "react-router-dom";
const withParams = Child => {
return function hoc(props) {
const params = useParams();
return <Child {...props} params={params} />;
};
};
export default withParams;
- μ νν κ²μ λͺ¨λμ λ§λ μ§λ’° κ°μλ‘ λλ€ λμλ₯Ό μμ±ν©λλ€. μ μ κ° μ²μ μ
μ ν΄λ¦νμ λ μ§λ’°λ₯Ό μμ±ν©λλ€. μ¬μ©μ κ²½νμ μν΄ μ²μ μ νλ μ
μ λλ€ λμμμ μ μΈνμ΅λλ€. μ νν κ²μ λͺ¨λλ μν κ΄λ¦¬ νμ§ μκ³
params
λ₯Ό μ΄μ©ν΄action
μ μΈμλ‘ μ λ¬νμ΅λλ€.class component
μμreact router
μuseParams
ν μ μ¬μ©νκΈ° μν΄withParams
λΌλHOC
λ₯Ό λ§λ€μ΄ μ¬μ©νμ΅λλ€.
- μ μ κ° ν΄λ¦ν μ μ΄ μ§λ’°κ° μλ κ²½μ° μ£Όμ μ§λ’° κ°μλ₯Ό νμνκ³ , μ£Όμμ μ§λ’°κ° μμΌλ©΄ μ§λ’°κ° μλ κ³³κΉμ§ μ μ μ΄μ΄μ€λλ€. DFS μκ³ λ¦¬μ¦μ μ΄μ©ν΄ μ£Όμ μ νλλ₯Ό νμΈνκ³ μ£Όμμ μ§λ’°κ° μμ λκΉμ§ κΉμ΄ νμν ν νμμ λ§μΉλ©΄ λ€μ μ μ νμνλ λ°©λ²μ μ μ©νμ΅λλ€.
- ν΄λ¦ν μ
μ μ£Όμ μ
λ°μ΄ν°λ₯Ό
aroundCellData
λΌλ λ°°μ΄μ push ν©λλ€. - aroundCellDataμ μννλ©° νλμ© popν΄μ€ ν cellμ΄ μ§λ’°μΈμ§ λΉ μ
μΈμ§ νμΈνκ³ λΉ μ
μ΄λΌλ©΄
aroundEmptyCellArray
λ°°μ΄μ pushν΄μ€λλ€. aroundEmptyCellArray
λ°°μ΄μ κ°μκ° 8κ°λΌλ©΄ μ£Όμ μ μ΄ λ€ λΉμ΄μλ κ²μ΄λ―λ‘ forEachλ₯Ό μ΄μ©ν΄ μ¬κ·λ₯Ό μ€νμν΅λλ€.aroundEmptyCellArray
λ°°μ΄μ κ°μκ° 8κ°κ° μλλΌλ©΄ μ£Όμ μ μ μ§λ’°κ° μλ κ²μ΄λ―λ‘aroundEmptyCellArray
λ°°μ΄μ μ§λ’° κ°μλ₯Ό νλ³ν΄ ν΄λ¦ν μ μ λ°μ΄ν°λ‘ μ λ ₯ν©λλ€.
μ΄λ €μ λ μ
- μ
μ΄ μ€κ°μ μλ κ²½μ° μ μ
, μμμ μ
, μλ μ
μ΄ λͺ¨λ μ‘΄μ¬νμ§λ§, μ
μ΄ μ μΌ μ, μλ, μΌμͺ½, μ€λ₯Έμͺ½μ μλ κ²½μ° μ£Όμ μ
κ°μκ° 8κ°κ° μλκ² λλ λΆλΆμ μ²λ¦¬νλ κ² μκ°λ³΄λ€ μ΄λ €μ μ΅λλ€.
outsideCellCount
μ΄λΌλ λ³μλ₯Ό λ§λ€μ΄ μ μ΄ μλ κ°μλ₯Ό 체ν¬ν΄ 쑰건문μΌλ‘ μ²λ¦¬ν΄μ ν΄κ²°νμ΅λλ€.
const FLAG = {
MINE: -1,
AROUND_ALL_EMPTY: 9,
EMPTY: 10,
OPENED: 11,
QUESTION_MARK: 12,
MINE_FLAG: 13,
};
- μ μ λ°μ΄ν° νμ μ μ«μλ‘ μ μνμ΅λλ€. λͺ μμ μΈ μ½λλ₯Ό μμ±νκΈ° μν΄ flagλ₯Ό μμλ‘ μ²λ¦¬νμμ΅λλ€.
PureComponent
λ₯Ό μ¬μ©νμ¬ μ΅μ νλ₯Ό ν΄λ³΄μμ΅λλ€. μ μ»΄ν¬λνΈμΈ TD μ»΄ν¬λνΈμ μ μ©ν΄ λ³κ²½λ μ»΄ν¬λνΈλ§ 리λ λλ§ λλλ‘ ν΄μ£Όμμ΅λλ€.
class
μ λν΄μ μ‘°κΈ λ μΉμνκ² λκ»΄μ§λ κ³κΈ°κ° λμμ΅λλ€.class
λ¬Έλ²μ΄ μ΅μνμ§ μμ λμ μ λ€μ΄μ€μ§ μμλλ° μ΄μ λ νλ‘μ νΈ μ λ³΄λ€ μ΅μνκ² μ¬μ©ν μ μκ² λμμ΅λλ€.- ν¨μν μ»΄ν¬λνΈμμ
useEffect
λ§ λ§€λ² μ°λ€κ°class
μ»΄ν¬λνΈμ λΌμ΄ν μ¬μ΄ν΄μ λ€λ£¨λ λ©μλλ€μ μ°λ μλ¬λμ΅λλ€.class
μ»΄ν¬λνΈλΌμ μ’ λ λΆνΈν μ€ μμλλ° μκ°λ³΄λ€ λ©μλ λͺ λ€μ΄ λͺ ννμ¬useEffect
λ³΄λ€ μ΄ν΄νκΈ° μ¬μ μ΅λλ€. Redux toolkit
μ μ°μ§ μκ³ , κΈ°λ³Ένμ κ·Έλλ‘ μ°λ€ 보λ λ§μ 보μΌλ¬νλ μ΄νΈκ° μκΈ°κ² λλλ°, κ°λ μ μ’ λ μ΄ν΄νκ³ μ¬μ©νλ€ λ³΄λ ν¬κ² κ±°μ¬λ¦¬μ§ μμμ΅λλ€. μ΄μ λ μ€νλ € λ λͺ νν λλμ΄ λ€μκ³ κ·Έμ μ μ λλ‘ μκ³ μ¬μ©ν κ² μλλΌλ μκ°μ΄ λ€μμ΅λλ€.
- νλ‘μ νΈ κΈ°κ°μ μ§§κ² μ€μ νμ¬ UIμ κΈ°λ₯λ€μ λν μΌμ λ μ΄λ¦¬μ§ λͺ»ν μ μ΄ μμ¬μ μ΅λλ€. νμ§λ§ μ²μ κΈ°ννλ νλ‘μ νΈ λͺ©νλ λ¬μ±νμ¬ μΆνμ μ‘°κΈμ© λ μ λ°μ΄νΈλ₯Ό ν΄λ³΄κ³ μ ν©λλ€.
container-presenter
ν¨ν΄μ μ μ©νκΈ° μν΄ μλνμ§λ§,container
λ‘ λΆλ¦¬ν μ»΄ν¬λνΈλ₯Ό μμ§ μλ²½ν μΆμννμ§ λͺ»ν μ μ΄ μμ¬μ μ΅λλ€. μ»΄ν¬λνΈ λ΄μ μ€νμΌκ³Ό λ§ν¬μ μ΄ ν¨κ» λ€μ΄κ° μμ΄ μ’ λ λΆλ¦¬κ° νμν κ² κ°μ΅λλ€.class
μ»΄ν¬λνΈμμ ν¨μ, λ³μλ₯Ό λ©λͺ¨μ΄μ μ΄μ νμ¬ μ΅μ ννμ§ λͺ»ν μ μ΄ μμ¬μ μ΅λλ€.PureComponent
λ₯Ό μ¬μ©νκΈ΄ νμΌλ μμ§λ λ§μ λ λλ§μ΄ μΌμ΄λ μ μ΄ λ§μ Extream λͺ¨λμμλ νλ©΄μ μ€μΌ λ λ²λ² μμ΄ μ¬ν©λλ€. μ΄ λΆλΆμ λν΄μλ μ’ λ κ³ λ―Όνμ¬ μ λ°μ΄νΈ ν΄μΌ ν κ² κ°μ΅λλ€.tailwind
λ₯Ό μ΄λ²μ μ²μ μ¬μ©ν΄λ³΄μλλ° μ΅ν μκ°μ΄ μ μ΄tailwind
μ μ₯μ μ μ λλ‘ μ¬μ©ν΄λ³΄μ§ λͺ»ν μ μ΄ μμ¬μ μ΅λλ€. μμ§μ κΉλνκ² μ€νμΌ μ μ©μ΄ μλμ§ μμμ μ΄λ €μ΄ λΆλΆμ΄ λ§μλλ°, μ μ μ΄νμλ custom class λ± λͺ¨λνν μ μλ€λ μ₯μ μ μ μ¬μ©ν μ μμ κ² κ°μ ννΈμΌλ‘λ κΈ°λλλ λ§μμ΄ λ€κ² λμμ΅λλ€. μ’ λ μ 리νλ μκ°μ κ°μ§ ν μ¬μ©ν΄λ³΄κ³ μ ν©λλ€.