[Side PJ] 야구게임 - 삽질과 배운점🛠

 

복잡한 상태관리를 통해 간단한 야구게임을 만들어 보는 미니 프로젝트를 진행했다.

백엔드에서 API를 제공해 주었고,  간단한 로직같은 경우는 FE단에서 관리하기로 결정했다.

프로젝트를 진행하며 겪었던 크고 작은 error들과 배웠던 점을 정리해보겠습니다-!

 

 

 

---

 

 

 

VS Code 사소한 문법 맞추기

 [ Setting -> quote 검색 -> 수정 ]

 

오톰과 함께 프로그래밍 하면서 발견한 사소한 번거로움은 

바로 VS Code 저장 시 자동 적용되는 문법 설정이 다르다는 것

 

JS에서 문자열이 auto로 되어있고

Prettier 상 JSX 도 체크가 안되있었지만 

 

single, check 로 맞추었다.

 

merge할때 이런 사소한 부분이 변경사항으로 기록되었기 때문에 고쳐주었는데 협업할 때 이런 사소한 문제도 발생하는구나 하는 헤프닝~

 

 

 

 

 

 

 

 

  + Router 설정 

 

오늘의 삽질: module을 설치하면 ( styled-components 를 설치했다) 서버를 한번 껐다 켜야하는데 

마음이 급하다보니 생각을 못했다.

---

📌 ThemeProvider 로 공통 Theme 만들어 관리하기

 <ThemeProvider>

 : Context API를 통해 자체 아래의 모든 React 구성요소에 공통 테마를 제공하는 styled-components 래퍼구성 요소

 

App에서 <ThemeProvider>로 감싼 자식 Component들은 props로 theme을 전달받아

각각의 Component에서 따로 선언 없이 사용 가능

 

사용법

1) sytled-components 에서 ThemeProvider  import 

2) 공통으로 사용할 Component요소를 감싼다

 

App.jsx

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import "./App.css";
import PlayScreen from "./routes/PlayScreen";
import StartScreen from "./routes/StartScreen";
import theme from "./theme";

function App() {
  const GlobalStyle = createGlobalStyle`
  * {
    padding:0;
    margin:0;
  }
  
  body{
    box-sizing:border-box;
  }
  
  ol,ul {
    list-style: none;
  }
  `;

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <BrowserRouter>
        <Switch>
          <Route path="/" exact>
            <StartScreen />
          </Route>
          <Route path="/play-screen">
            <PlayScreen />
          </Route>
        </Switch>
      </BrowserRouter>
    </ThemeProvider>
  );
}

export default App;

 

 

theme.js

const theme = {
  fontSizes: {
    XS: "14px",
    S: "16px",
    M: "18px",
    L: "20px",
    XL: "24px",
    XXL: "40px",
  },

  screenType: {
    START: "start",
    PLAY: "play",
  },
};

export default theme;

 

이렇게 styled-components에서  제공하는 ThemeProvider를 상단 부분에 감싸주면 

theme에 있는 속성들을 따로 import 할 필요 없이 global하게 사용 가능하다.

 

 

Component에서의 사용

const TeamCurrent = styled.div`
  font-size: ${({ theme }) => theme.fontSizes.XS};
  color: ${({ theme }) => theme.colors.orange};
`;

 

⚠️  단 속성으로 넘겨주는 경우로는 사용이 안된다 ㅠㅠ

import Title from "../components/Title";

const PlayScreen = (props) => (
  <>
    <h1>play화면</h1>
    <Title type={theme.screenType.PLAY} />
  </>
);

export default PlayScreen;

이렇게 하면 안먹음 

 

느낀점 

 

 

장점	단점
- 프로젝트 전반 스타일에 일관성 생김 - 팀 나름의 StyleConvention이 생김	- 이것 또한 팀의 convention이기 때문에 초반에 규칙 설정에 시간이 소요됨

 

---

📌 CRA의 public path는 public

처음 이미지경로르 설정할 때  src 폴더에 넣어두고 상대경로로 연결했더니 img가 불러와지지 않았다.

 

검색을 해보니 CRA 에서 image를 불러올 경우

1) 절대 경로 사용

2) public / images 폴더를 생성해 사용

위와 같은 방법을 권장하고 있다.

https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js

Correct path for img on React.js

 

image 사용 component

import styled from 'styled-components';

const Stadium = () => {
  return (
    <StadiumDiv></StadiumDiv>
  );
};

const StadiumDiv = styled.div`
  box-sizing: border-box;
  opacity: 90%;
  background-image: url('./baseballRound.jpg');
  background-position: center;
`;


export default Stadium;

public/baseballRound.jpg를 불러와 사용했다.

---

📌 ContextAPI 적용하기

ConstextAPI를 적용하기 위해 애썼다.

일단 나는 여태껏 상태관리를  위해 props drilling or useState 만 사용해왔었는데 

좀더 상위에서 props drilling을 신경쓰지 않고 상태관리를 해주는 방버인 ContdxtAPI에대해 공부했고 사용하기로 결심!

 

사용법

 

1) provider 생성 : 전역사용할 data 생성  Context.js

2) reducer 생성 : useReducer 이용한  state, dispatch 생성  ( Provider있는곳 혹은 분리해도 됨)

3) App 에서 (혹은 상위에서 ) Provider 로 묶어주기 - 이때 reducer 함수 전달 

4)  사용할 곳에서 import후 사용  ({state, dispatch} = useContext(newContext) )

 

 

provider/Context.jsx

import { createContext } from 'react';

const boardHistory = {
  S: 0,
  B: 0,
  O: 0,
  H: 0,
  HitInfo: ' ',
};

const BoardHistoryContext = createContext();

export { boardHistory, BoardHistoryContext };

전역사용할 state 생성 ( boardHistory, BoardHistoryContext)

 

 

reducer/ ballReducer.js

const ballReducer = (ballCnt, action) => {
  switch (action.type) {
    case 'hitS':
      return { ...ballCnt, S: ballCnt.S + 1 };

    case 'hitB':
      return { ...ballCnt, B: ballCnt.B + 1 };
      
    default:
      return null;
  }
};

export default ballReducer;

ballReducer 라는 dispatch에 따라 state관리할 reducer 함수 생성

 

App.js

import { boardHistory, BoardHistoryContext } from './components/provider/Context';
import ballReducer from './components/reducer/ballReducer';

function App() {
  const [ballCnt, dispatch] = useReducer(ballReducer, boardHistory);


  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <BrowserRouter>
        <Switch>
          <AppDiv>
            <Route path='/' exact>
              <StartScreen />
            </Route>
            <BoardHistoryContext.Provider value={{ ballCnt, dispatch }}>
              <Route path='/play-screen'>
                <PlayScreen />
              </Route>
            </BoardHistoryContext.Provider>
          </AppDiv>
        </Switch>
      </BrowserRouter>
    </ThemeProvider>
  );
}

해당 전역 state를 사용할 Component  Provider로  감싸기

 

 

 

 

Stadium.jsx( 사용하는 자식)

import { boardHistory, BoardHistoryContext } from '../provider/ContextB';

const Stadium = () => {
  const { ballCnt, dispatch } = useContext(BoardHistoryContext);
  
    return (
    <StadiumDiv>
    
    //...중략
    
      <PlayButton onClick={() => playPitch(dispatch, ballCnt)}>
        PITCH
      </PlayButton>
    </StadiumDiv>
  );
};


const playPitch = (callback, ballCnt) => {

  const tempBoardLst = ['S', 'B', 'H'];
  
  var randomBoard =
    tempBoardLst[Math.floor(Math.random() * tempBoardLst.length)];
  callback({ type: randomBoard });
  
  dispatch({ type: 'hitInfo', payload: randomHit });
  dispatch({ type: 'hit' + randomHit });
};

useContext 에 정의 후

PlayBoard component , playPitch 함수 이용하여 

PlayButton에 클릭 이벤트 전달 

<PlayButton onClick={() => playPitch(dispatch, ballCnt)}>

 

PlayButton을 누르면 랜덤값에 따라 ballreducer의 dispatch 가 적용되도록 했다.

 

 

---

📌 useEffect로 상태 관리하기

내가 원하는 루틴은 

1)  버튼 클릭

2) 3가지 경우 중 하나 선택 -> 해당 값 +1 (Context 로 관리)

3) Component는 해당값이 변경되면 재렌더링

 

return 부분

<PlayBoardTemp type='S' />
<PlayBoardTemp type='B' />
<PlayBoardTemp type='O' />

type에 따라 렌더링

 

 

playPitch (버튼 클릭시 실행될 함수)

const playPitch = (ballCnt, dispatch) => {
  const tempBoardLst = ['S', 'B'];
  const randomHit =
    tempBoardLst[Math.floor(Math.random() * tempBoardLst.length)];
  console.log('1');
  dispatch({ type: 'plus' + randomHit });

  if (ballCnt.S > 3) {
    console.log('아웃입니다');
    setTimeout(() => dispatch({ type: 'plusO' }), 1000);
  }
  if (ballCnt.B > 4) {
    console.log('안타입니다');
    setTimeout(() => dispatch({ type: 'plusH' }), 1000);
  }
};

 

나의 예상으로는

클릭 ->  dispatch({type: 'plus' _ randomHit}); 실행

->  해당조건에 맞으면 if 문이 실행 이었지만

 

실제로는 

클릭 ->  dispatch 전 if 문 실행

-> dispatch({type: 'plus' _ randomHit}); 실행 

이 순서로 진행되기 때문에 조건이 다음 클릭시에 적용 되는 것이다.

 

 

 

 

 

 

 

수정 전 PlayPitch

const playPitch = (ballCnt, dispatch) => {
  const tempBoardLst = ['S', 'B'];
  const randomHit =
    tempBoardLst[Math.floor(Math.random() * tempBoardLst.length)];

  if (ballCnt.S < 2 && ballCnt.B < 3) {
    dispatch({ type: 'plus' + randomHit });
  }
  if (ballCnt.S === 2) {
    dispatch({ type: 'plus' + randomHit });

    setTimeout(() => dispatch({ type: 'plusO' }), 1000);
  }
  if (ballCnt.B === 3) {
    dispatch({ type: 'plus' + randomHit });

    setTimeout(() => dispatch({ type: 'plusH' }), 1000);
  }
};

수정 후 PlayPitch

const playPitch = (ballCnt, dispatch) => {
  const tempBoardLst = ['S', 'B', 'H'];
  const randomHit =
    tempBoardLst[Math.floor(Math.random() * tempBoardLst.length)];
  console.log(randomHit);
  dispatch({ type: 'hitInfo', payload: randomHit });
  dispatch({ type: 'hit' + randomHit });
};

 useEffect(() => {
    if (ballCnt.S === 3) {
      setTimeout(() => dispatch({ type: 'hitO', payload: 'O' }), 1000);
    }
    if (ballCnt.B === 4) {
      setTimeout(() => dispatch({ type: 'hitH', payload: 'H' }), 1000);
    }
    if (ballCnt.O === 3) {
      setTimeout(() => dispatch({ type: 'resetAll' }), 1000);
    }
  }, [ballCnt]);

 

수정전 PlayPitch를 보면 

ballCnt 를 억지로 조절하고 있는걸 볼 수 있다.

 

내가 원했던 상황은 이걸 예상햇지만  

1) 버튼 클릭

2) dispatch 동작 [ ballCnt +=1 증가 ]

3) 조건문 동작 [ 증가한상태의 값에서 S==3이면 아웃 B===4이면 아웃인데 ]

 

(수정전의 PlayPitch에서) 동작

1) 버튼 클릭

2) 조건문 동작 [ prev dispatch 로 동작 ] 

3) dispatch 동작 [ ballCnt ++ ]

 

실제로는 이렇게 동작했다. 

왜냐면 나는 완전히 잘못 생각했던 것이 , 

버튼이클릭되고 PlayPitch가 실행되면 dispatch가 동작되면서 전체 Component 재 렌더링이 된다  

또 클릭될 당시의 ballCnt의 상태는 내가 원한 동작을 수행하기 전이기 때문에 

다음 클릭을 누르면서 변화한 ballCnt 상태로 조건문이 동작할 수 있는 것이다.

 

그래서 처음에는 구성이 잘못된 걸 파악하지 못한 채 

억지로 상태를 우겨넣었다.

 

 

useEffect를 생성하고 ballCnt가 변경이 되면 바로 동작하도록 생성했다.

 

1) PlayPictch onClick 실행 

2) random 하게 dispatch 실행

3)  ballCnt변경

4) 변경 이후의 상태로 if 조건 적용

 

총 4단계를 통해 투수가 공을 던졌을 때 일어나는 일을 관리했다.

 

 

느낀점 

 

 

react에서 상태관리의 중요성을 다시금 깨달았다.

 특히 상태에 따른 조건문과 그 과정을 처리할 때 

코드가 내 생각대로 동작할거라 생각했지만 

리액트는 상태가 감지함과 동시제 재 렌더링 되기 때문에 

밑의 조건들은 그 다음상태가 되어서야 적용이 된다는 사실을 깨달았다. 

 

상태관리의 늪에 빠져있을 때 DD의 도움을 많이 받았고 .

DD가 써주신 블로그에 상태관리의 기본적인 원리가 잘 설명되어 있기 때문에 해당 🔗링크를 남깁니다.

 

 

https://velog.io/@jjunyjjuny/React-useState%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%A0%EA%B9%8C

[ React ] useState는 어떻게 동작할까