skdksldk1485/react-mobx-movie

react-mobx-movie

👩‍💻프로젝트

이번 프로젝트에서는 MobX를 통한 상태관리를 경험해보고 공부해볼 목적으로
React와 MobX를 사용하여 개발한 영화사이트입니다.

💻 사이트

아래 링크에서 프로젝트 데모 확인이 가능합니다.

• 🎯 사이트 :https://isu-mobx-movie.netlify.app/

MobX_Movie.mp4

📆 기간

• 2021.04 ~ 2021.05

📗사용기술

• Front End
  • HTML5 / CSS3
  • React
  • React Hooks
  • MobX
  • SCSS(BEM 활용)

📝담당업무

• MobX를 활용한 상태관리
• TMDB API를 사용한 영화정보검색 기능 구현 (상세정보, 트레일러)
• Material-UI를 사용하여 헤더 구현
• BEM 방법론을 적용한 SCSS로 웹 디자인 구성
• Transaction, Transition을 사용한 애니메이션 구현 (배경화면 전환)

📜구현기능

• 배경화면 전환
• 메뉴 선택
• 검색기능
• 영화 상세정보 확인
• 영화 트레일러 확인
• 반응형 웹

🌵 후기

이번 프로젝트에서는 Redux 말고 MobX를 통해 상태관리를 해보고자 프로젝트를 시작해보았습니다.
MobX를 공부하면서 직접 경험해보니
MobX는 불변성을 반드시 유지할 필요가 없었고, 코드가 생각보다 간결하고 쉽게 개발할 수 있었습니다.
또한, 비동기 동작 액션을 실행시키기 위해 thunk 등의 미들웨어가 불필요하다는 것을 알 수 있었으며
React 함수형으로 개발을 진행하면서 hooks를 사용중이었는데
mobx-react 라이브러리를 통해, decorators(@action, @observable) 없이도 프로젝트를 완성할 수 있었습니다.
이번 경험으로 규모가 작은 프로젝트 같은 경우는,
Redux 말고도 MobX 또한 상태관리를 위해 알맞다고 느낄 수 있었습니다.