4. [프로젝트 : 같겜(GOATGAME)]

8월부터 진행한 프로젝트 같겜이 마무리 단계까지 왔다.

현재 반응형까지 마쳤고 자잘한 오류들을 수정중인데

회고록을 쓸 기회인것 같아 적어볼려고 한다.

[같겜(GOATGAME)]

홈페이지 링크 : http://goatgame.co.kr/
깃허브 링크 : https://github.com/bomkyu/gotgame

개발기간 및 인원

기간 : 2023.08 ~ 2023.10 (약3달)
인원 : 1명

기술스택

• FRONT-END : React.js, TypeScript, React-router-dom, react-calendar, axios, redux toolkit
• BACK-END : MySQL, Node.js, AWS(E2C, RDS), googleOauth, kakaoOauth
• TOOL : GIT

기능

같이 게임할 사람을 디스코드 링크로 모집하는 컨셉으로 진행했다.
게임 이름, 게임 장르, 세부 장르, 마감날짜, 모집인원, 디스코드 링크, 소개를 통해 글을 작성하고 수정 삭제
메인페이지에서 탭을 통해 필터링 및 검색기능 페이징 그리고 반응형까지 작업했다.

상세기능

1. router를 Front에서 처리

let location = useLocation();
  const dispatch = useDispatch();
  //redux store에 저장된 userInfo가 새로고침했을때 지워졌을경우 다시 dispatch함
  useEffect(()=>{
    if(getUserInfo() !== null) {
      const {isLoggedIn, userInfo} = getUserInfo();
      if(isLoggedIn && userInfo){
        dispatch(setUserInfo(userInfo));
      }
    }
  },[dispatch])
  return (
    <>
      <Header/>
      <div className='content-wrap'>
        <Routes>
          <Route path='/' element={<Main/>} />
          <Route path='/view/:num' element={<View/>} />
          <Route element={<PrivateRoute/>}>
            <Route path='/write' element={<Write/>} />
            <Route path='/modify/:num' element={<Write/>} />
          </Route>
          <Route path='/*' element={<NotFound/>} />
        </Routes>
      </div>
      <Modal/>
      {location.pathname == '/' && <Footer/>}
      
    </>
  );

코드에서 알 수 있다싶이 React Router를 써서 페이지를 처리했고 Parameter도 넘겨줬다.
또한 PrivateRoute를 만들어서 접근제어를 실행한다. 보안성까지 챙겼다.

2. custom Hook
React를 사용하다 보니 자연스래 Custom Hook에 관심이 생겼다.
왜나면 Modal을 사용해야 되고, 상태관리를 더 쉽게? 하고싶었기 때문이다.
처음에는 Custom Hook이라니 막막했는데,
국비학원에서 들은 context와 Chat GPT를 참고해서 만들어 보았다.

export const ModalProvider = ({ children } : { children : ReactNode}) => {
  const [modalStatus, setModalStatus] = useState(false);
  const [modalType, setModalType] = useState('');
  const [modalData, setModalData] = useState({});

  const openModal = (type : string) => {
    setModalStatus(true);
    setModalType(type)
  };

  const closeModal = () => {
    setModalStatus(false);
    setModalType('')
  };

  

  return (
    <ModalContext.Provider value={{ modalStatus, modalType, openModal, closeModal, setModalData, modalData }}>
      {children}
    </ModalContext.Provider>
  );
};

// useModal 훅을 위한 함수 컴포넌트 정의
export const useModal = () => {
  const context = useContext(ModalContext);
  if (context === undefined) {
    throw new Error('에러');
  }
  return context;
};

3. Redux 및 메인페이지
처음에는 Redux를 사용할 생각이 없었다.
이 생각이 바뀌게 된건 메인페이지 페이징을 작업하면서 부터다.
다른 컴포넌트에 들어가고 메인페이지로 진입하면 페이징부터 탭, 검색결과까지 전부 초기화 되는것...
그래서 이론만 알고 있던 Redux를 사용했다.

공을 안들인 페이지가 없지만 그 중 가장 공을 들인 페이지가 메인페이지인데
페이징, 검색, 필터링기능이 들어가 있으며 여기서 큰 깨달음을 얻게 되었다.

https://velog.io/@bomkyu/2.-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B0%99%EA%B2%9C
위에 링크에 Redux 및 메인페이지에 관해 자세하게 서술되어있다.

4. TypeScript
단순히 TypeScript를 공부하게 된 계기는 많은 회사에서 이 기술을 필요로 한다는것

그러나 공부하게 되면서 왜 TypeScript를 써야하는지 깨달았다.

변수나 함수에 타입을 명시함으로써 코드 실행 전에 타입 오류를 발견할 수 있게 되었고.
이는 런타임 오류를 사전에 방지하는데 큰 역할을 했다.

또한 다시 작업을 했을때 데이터가 명확하기에 코드를 예측하고 다시 작업하는데 큰 무리가 없었다.

어려웠던점

이번 프로젝트를 진행하면서 도전해본것이 정말 많았는데
CustomHook과 전역상태관리툴인 Redux였다.

CustomHook같은 겨우 모달기능을 생각해서 만들었는데
그 이유는 기존에 작업했던 NBBANG을 생각하면서 아쉬운 부분 때문이였다.

모달을 만들었는데 재사용하기에는 어려움이 있었다는점.
처음에는 개념이 이해되지 않았다 로직을 Hook으로 만들고 필요한 컴포넌트들에서 Hook을 사용한다라..
문서와 블로그를 보면서 흐름을 이해했고,

기능구현은 Chat Gpt로 물어보면서 삽질하며 몸으로 익히게 되었다.
액션을 Hook으로 만들어 필요한 컴포넌트에서 불러 사용하며,
Layout같은경우에는 컴포넌트들을 만들어 필요한 화면들을 불러 사용할 수 있게 만들었다.

이 다음으로는 Redux였다.
이 부분에 관해서는
https://velog.io/@bomkyu/3.-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B0%99%EA%B2%9CGOTGAM
위 링크에서 자세히 서술했다.

느낀점

같겜을 진행하면서 기술적으로 좀 더 성숙해진거 같다.
평소 해보지 않은 Custom Hook, Redux, Node.js, AWS, REST API등등

여러 기술을 도전해보니 역시 많은 고통이 뒤따랐다.
에러부터 버전문제..
하지만 나는 이런 부분들을 해결하는게 고통스럽고 힘들지만 재밌다.
살짝 변태같지만 이런 재미때문에 개발을 포기 못하는거 같다 ㅋㅋㅋ