💖 221107 Today I Learned 💖

데이터에 사진 데이터가 담기지 않음

---

• 에러 발생 이유 : 계속 다른 문자 데이터들처럼 JSON으로 만들어서 그랬던 것…
• 몰랐던 것 / 시도해 본 것 : 가져오는 태그도 바꿔보고 GET의 content type도 바꿔보고 여러가지 했지만 전혀 되지 않았다…
• 해결 방법 : 폼데이터에 넣어서 보냈다.
• 알게된 것 : 폼데이터로 사진 보내는 법. 폼데이터로 보낼 경우 따로 header 부분에 따로 Content-Type을 명시해주지 않아도 된다.

사진 엑박

---

• 문제 상황 : 연동도 성공했고, 코드도 문제없고, 사진 경로를 주소창에 복붙하면 사진도 잘 뜨는데 엑박이 뜸. 구글링을 통해 이유가 사진 용량 때문일 수도 있대서 이미지 최적화까지 진행했으나 뜯지 않음.
• 발생 이유 : 로컬이나 프론트 경로가 아닌 백 쪽의 장고 경로에서 사진을 가져와야 했다.
• 알게된 점 : 걍 서버가 켜지는갑다 하고 코딩하고 있었는데 서버라는 것에 대해 인식하게 되었다.

리스트로 넘어오는 데이터 JOSN으로 뽑아내기

---

• 문제 상황 : 머신러닝 쪽에서 리스트 형태로 데이터를 넘겨주고 있어서 그대로 띄워보니 프론트에서 활용할 수 없는 형태로 데이터가 뜨길래 . .json을 해주었으나 그러니까 Promise pedning과 같이 나왔다.
• 해결 : .then(response ⇒ response.json() fetch함수에 해당 내용을 포함시켰다.
• 알게된 것 : .then
• 음 좀 더 자세히 적는 게 좋을 거 같아서 방금(11월 9일 저녁) 코드 변화에 따른 결과를 다시 뽑아보고 캡처해 두어서 따로 정리해 두었다.

Promise {<pending>}

---

• 문제 상황 : 에러라기보다는 처음 보는 형태로 데이터가 나와서 뽑아쓸 수가 없었다.
• 해결 : async await로 데이터를 뽑아왔다. 근데 또 이 상황에서 forEach를 사용해 for문을 돌려고 하니 문제가 발생해서 forEach가 아닌 for of를 사용해 데이터를 뽑아왔다.
• 알게 된 점
  1. forEach는 비동기를 기다려주지 않아…⭐️
  2. 그 놈의 아는 걸로만 해결하는 버릇 때문에 강의에 나온 forEach만 주구장창 썼는데 (i++ 이런 식으로 작성해서 하는 건 써본 적은 있지만 잘 안 써 버릇했다. 쓸 일이 없기도 했고) for문 도는 법이 다양하다는 사실도 알게 됐고 그 중 실제로 for of를 사용해 데이터를 뽑아봤다.
  3. 더 자세히 적고 싶지만 프로젝트 끝나고 async await이나 promise pending 등 어차피 다시 다 공부해야 할 거 같아서 여기까지 적겠당. 더 찾아보고 싶었지만 내일 발표 준비하고 뭐 하고 하면 사실상 오늘이 프로젝트 마지막 날일 거 같아 자세히 찾아 볼 시간이 없었다.
• 추가 공부 필요 : Promise pending 이렇게 간단하게 하고 넘어갈 게 아닌 거 같은데 더 자세히 알아봐야겠다.