프론트엔드
1.왼쪽 겹치는 그래프 막대그래프로 바꿔서 하기
2.디스크립션에 그래프관련 설명
3.그래프 제목 적기
4.회원가입 , 프로젝트 소개페이지에 고객이탈률분석 버튼 넣기
5.메인페이지를 제외하곤 줄였을때 유동적으로 배너 사이즈 안줄어드는거 고치기
6.바차트 안뜨는거 고치기
->원인은 BarChart에선 layout="vertical"로 했는데
이렇게 안하고 x축에 데이터키를 작성해서 그랬음.
디비완성이 안되서 , 폴더내에 더미데이터로 연결하는거 말고 api로 연결하는거 미리 준비하기 위해 제이슨 서버 연결 준비
엑시오스 다운
npm install axios
import axios from 'axios';
npm install -g json-server
제이슨 서버 안됨
경로를 잘못갔음 현재디렉토리만 워치가능하다함
여기서 다시 시행
제이슨서버가 요구하는 데이터구조가 따로존재해서 실행이 또 안됨, db라는 파일 새로생성
제이슨서버 실행완료
데이터 리턴방식이 조율된거랑 조금 달라서(오버롤이 따로 세팅)
그에 맞춰 코드 변경
백엔드 방화벽내리고 엔드포인트 axios연결해서 받았는데
숫자가 클릭시마다 달라져서 너무 이상함
json에 맞춰 코드변경
7.로그인 하는데 오류뜸
'http://백엔드아이피/login' 하고
member@naver.com
1234 했는데 디비에 있는데도 401오류뜸
포스트로 바꾸고, 필드명 일치시킴
그래도안됨
로그인에 아무것도 없고
네트워크탭에 토큰도 안보였음
근데 네트워크 리소스 초기화하니까 보이더라
네트워크 탭에서 안 보이는 건 CORS expose 설정 때문이니, 서버에서 Access-Control-Expose-Headers: Authorization을 추가하면 해결되는건데
백엔드쪽에선 이 코드를 적어뒀는데도 안보였었음
이유가 , 서버연결을 이 코드 작성전에 해뒀어서 리소스 초기화하기전엔 기존 캐시를 써서 그랬음.
이제 토큰 저장해야함
그리고 인증이 필요한 API 요청 시 헤더에 붙여서 사용해야함
로그인 요청을 보내면 서버 응답 헤더(res.headers.authorization)에 JWT 토큰이 정상적으로 들어오지만
응답 바디(res.data)는 빈 배열 또는 데이터가 없어서 "이메일 또는 비밀번호가 일치하지 않습니다."라는 메시지가 뜨고 있었음
바디가 아니라 헤더를봐야함 코드수정
근데 캐치로 빠짐
상태 200인데?
바디 없는데 바디에서 읽으려들어서 오류난거임. 주석처리하니 됨
8.교수님 조언을 받아서 오른쪽 퍼널그래프를 변경하기로 함
오른쪽 그래프를 퍼널차트가 아닌 그래프(Bar/Line 등)로 변경
결제수단별 주문과정 이탈률을 한눈에, 단위는 %로 해야하는데, 이는 원래 churn rate로 받아온거에 100만 곱하면 됨. 백엔드에게 해당 json추가요청
등락폭이 작아도 크게 보이도록 Y축 기준값(도메인) 조정
현재 클릭된 결제수단은 가장 진한 색상으로 표시
모든 결제수단별 이탈률을 한 번에 비교 가능해야 함
클릭바 한글이 낫다하셔서 바꿈
