세종대학교 Capstone디자인 수업에서 진행한 프로젝트이다. _구현, 리팩토링 과정 및 코드는 페이스리뷰 시리즈의 다른 글에 정리하였고, 해당 글은 프로젝트 기능 및 UI 소개 글이다._ AI를 이용한 YouTube시청자(웹캠 사용자)의 감정분석 프로젝트 Face Review 🗓️ 프로젝트 기간 • 2023.10.13~2023.11.30 👥 팀...
프로젝트를 마치고 본인이 작성했던 코드를 리뷰하면서 블로그를 썼기 때문에 부자연스러운 부분이 있을지도 모른다. 처음 각각의 페이지를 구현할 때는 Responsive UI를 고려하지 않고 만들었기 때문에, 고생했던 기억이 있어서, 다음에 프로젝트를 진행한다면 시간이 많이 절약될 것 같다... 어느정도 페이지가 완성되어 갈 쯤, 아래의 SCSS코드로 bre...
Face Review 프로젝트는 유저의 로그인상태, 로그인한 유저의 정보에 따른 튜토리얼 페이지 로딩 여부 및 영상 추천 등 여러가지로 프론트에서도, 서버와의 통신에서도 필요로하는 유저의 정보를 브라우저에서 가지고 관리하기 위해 Zustand라는 상태관리 도구를 사용하였다. React 프로젝트에서는 보통 Redux를 많이 사용하는 것으로 알고 있는데, 비교...
Face Review를 기획하면서, 여러 페이지로 구성되기 때문에 router를 통해 관리하기로 했다. TypeScript를 사용했기 때문에 아래와 같이 패키지를 설치해 준다. 그 다음 Router.tsx파일을 만들고 App.tsx에서 Router 컴포넌트를 통해 각각의 페이지를 라우팅하도록 하였다. react-helmet-async라이브러리의 Helm...