eyecon 팀프로젝트

 

1. 팀프로젝트 개요

---

프로젝트 명 : EyeCon

역할 : 프론트엔드

기술스택 

 - Client : React, Tailwind, Lottie, Redux, fabricJS
 - Server : Spring Boot(JPA, Security), Flask
 - Data Base : MySQL

- Data storage : FireBase
 - Model : ChatGPT API, CNN, OpenCV, YOLOv5

프로젝트 기간 : 2023.09.18 ~ 2023.11.09(7주)

---

 

- 프로젝트 설명

• 시선예측 AI를 활용한 상품배치 최적화 서비스

 

- 개인 역할

• 테일윈드를 사용하여 웹사이트 전반적인 레이아웃 담당
• 로그인 회원가입 유효성 검사를 통한 최소한의 SQL인젝션 방어
• 리덕스를 활용해 로그인 상태관리로 페이지 접근 권한 분리
• 전체적인 웹사이트 프론트 기능 담당
•  

- 프로젝트 문제 해결 및 기여

 

문제 1 중요도 A
- 회원가입시 form 태그가 유효성검사가 나중에 실행되는 문제가 발생

해결방법
1. 사용자로부터 이메일, 비밀번호, 비밀번호 확인을 입력
2. 각 입력값을 훅(hook)에서 검사하고 올바르다면 변수(메세지)에 저장
3. 폼(form)을 작성하고, 사용자가 제출하면 훅에서 변수(메세지)를 확인
4. 변수(메세지)가 문제 없다면 회원가입 로직이 실행
5. 데이터가 백엔드로 전송

 

ps. 지금 와서 되돌아 보니 그때 formik과 react-hook-form 라이브러리를 사용했으면 개발 속도에 이점을 얻었을것으로 생각이 된다.

문제 2 중요도 A
- 탭 2개 이상 사용하는 경우 로그아웃시 기존 탭에서 로그아웃 상태가 안되는 문제 발생

해결방법
1. 쿠키에 로그인 정보가 있다면, 로컬 스토리지에 로그인 상태를 저장
2. 로컬 스토리지에 있는 로그인 상태 변수를 리덕스를 통해 전역 변수로 사용
3. 다른 탭에서 로그아웃 이벤트가 발생하면, 기존 탭에서 쿠키에 정보가 있는지 확인
4. 쿠키가 없을 경우 로컬 스토리지에서 로그인 상태 변수를 제거
5. 로컬 스토리지에서 로그인 상태 변수를 제거하면, 리덕스 역시 전역 변수를 로그아웃 상태로 변경
6. 로그아웃 상태로 변경 후, 로그인이 필요한 서비스의 경우 경고 창을 표시한 후 시작 페이지 또는 로그인 페이지로 이동

 

ps. 국내 인기 사이트의 경우 로그아웃 후 다른탭에서 모달 창 혹은 알림 창으로 로그아웃되었다고 알려주는것을 보고 비슷하게 구현.

문제 3 중요도 C
- 로그인 상태에 따른 페이지 이동 제한

해결방법
1. 리덕스의 전역 변수를 사용하여 로그인 상태를 관리
2. Router를 통해 로그인 후와 로그인 전 상태를 구분
3. 로그인 상태 변수를 기반으로 다른 요소(Element)를 지정

문제4 중요도 B
-상위 컴포넌트의 useState 업데이트 이전에 useEffect 실행되는 문제 발생

해결방법
1, 상위 컴포넌트에서 상태와 상태 업데이트 함수를 정의
2. 하위 컴포넌트에 상태 함수를  전달
3. 하위 컴포넌트 내에서 useEffect를 해당 상태가 변경될 때 코드를 실행

 

2. 팀프로젝트 GitHub

GitHub - SIM-TOO/eyeconFront: 실전프로젝트 eycon Front

3. 팀프로젝트 결과 영상