WIL 23-07-23

level·2023년 7월 23일

TIL

목록 보기
60/95

리뷰등록에 s3사진 업로드 연결하기
let url : 리뷰 이미지의 url을 저장할 변수 선언
이미지를 표시할 html 요소의 참조를 가져옴
이미지 업로드 버튼의 참조를 가져옴
이미지업로드 버튼에 change 이벤트 리스너를 등록함
사용자가 이미지를 선택하면 이벤트 발생
사용자가 선택한 이비지의 유형과 크기를 확인하고 제한된 유형과 크기 조건에 맞을 경우 서버로 이미지를 업로드
업로드된 이미지의 url을 url 변수에 저장하고 해당 이비지를 표시. 이미지 수정 및 삭제 버튼 추가
임지 수정버튼을 클릭하면 실제 이미지 업로드 버튼을 클릭할 수 있도록 함
이미지 삭제 버튼을 클릭하면 url변수를 비우고 이미지를 삭제한 것과 동일한 ui로 변경

socket.io

서버
io.use()함수를 사용하여 소켓 연결 요청이 올 대마다 cookieParser 미들웨어를 실행하여 쿠키 파싱
io.on은 클라가 서버에 소켓 연결 시 발생하는 이벤트 처리
연결된 클라로부터 accessToken을 추출하여 jwt를 검증하고 유저 정보를 추출
order-complete이벤트를 수신하면 해당 주문 정보를 가지고 ownerId와 일치하는 소켓들에게 order-complete 이벤트를 발생시킴
delivery-complete 이벤트를 수신하면 해당 유저 정보를 가지고 userId와 일치하는 소켓들에게 delivery-complete이벤트를 수신하면 해당 유저 정보를 가지고 userId와 일치하는 소켓들에게 delivery-complete이벤트를 발생시킴
클라가 연결을 끊었을때는 해당 소켓을 users 배열에서 제거

프론트(카트)
클라측에서 주문 버튼을 눌렀을 때 주문 완료 이벤트를 서버로 보내는 역할 담당
서버로부터 delivery-complete 이벤트를 받으면 해당 정보를 출력하는 기능 수행

프론트(사장-주문확인)
클라측에서 주문상태를 확인하고 배달완료 처리
페이지가 로드될때 서버로부터 주문 정보를 받아와 해당 정보를 가지고 주문 리스트를 렌더링
배달 완료 버튼을 클릭하면 서버에 배달 완료 요청을 보내고 요청이 성공적으로 완료되면 delivery-complete 이벤트를 서버로 보냄

0개의 댓글