TIL day 38

이혜원·2023년 1월 6일
0

오늘 한 일

드디어 이미지 업로드를 할 수 있게 되었다! multer를 미들웨어로 이용하여 어디 파일에 무슨 이름으로 저장할 건지 설정해주었다.

처음에는 경로만 설정해주고 어떤 형식으로 저장해줄건지를 안넣어줘서 파일이 깨져서 들어왔다. 지금은 저 위에 코드처럼 고쳐줘서 잘 들어가진다.

처음에는 form tag를 잘 사용 못해서 어려움을 겪었다.
이미지+input 정보들을 서버쪽으로 보내주는 방법은 두가지가 있는데 초반에는 ajaxform 방법으로 보내주려고 해봤지만 실패...

결국 form tag에서 바로 보내주는 형식으로 고쳤다.

성공적으로 POST가 되면 res.redirect로 페이지를 넘겨주는 형식으로 마무리했다.

이쪽은 html 프론트 파일의 form 부분이다.

여기서 중요한 부분은 enctype="multipart/form-data"이다. multer를 쓰려면 "multipart/form-data"를 써야된다.

이미지 쪽 input이다. readURL이라는 이름으로 만든 function을 통하여 클라이언트가 업로드 할 이미지를 미리보여준다.

그 다음 문제는 guest_id를 서버로 넘겨주는 부분이였다. 그래서 form tag 안에 type을 hidden으로 안보이게 한 input 부분에 서버에서 GET으로 가져온 guest_id 값을 넘겨서 다시 form tag로 서버로 넘겼다.

정리하자면
GET ajax(guest_id) --> html form tag--> router POST
서버 --> 프론트 --> 서버

window.을 사용하여 guest_id를 globalThis로 만들어줬다.

document.getElementById('guest_id(input tag의 id').value를 이용하여 guest_id input에 guest_id 값을 줬다.

이것으로 form tag를 이용하여 빨래를 요청하는 손님의 guest_id값까지 받아올 수 있었다.

프로젝트 기능까지 끝냈다... 그런데....
지금 이건 nvc 형식으로 짜둔거다..
원래는 처음부터 3 layered Architecture Pattern 으로 정리하고 시작해야 되었는데 안하고 나중에 할 수 있다고 착각했다..

다른 팀의 사람이 owner_review 페이지의 router.post 를
layered Architecture Pattern 으로 정리해주셨다.. 하나하나 알려주셔서 조금 이해할 수 있었다. 나중에 주말에 한번 정리해야겠다. 중간에 미들웨어도 말썽이여서 그것도 고쳤다..

그리고 이건 튜터님이 추천한 ajaxform 설명 블로그이다. https://yoondeng.tistory.com/41

0개의 댓글