TIL 23.01.09

오늘은 아고라스테이츠 게시판을 제작하는 개인프로젝트를 진행했고,

그 과정에서 겪은 어려웠던 점에 대해서 작성하고자 한다.

 

우선 글 작성 시, 요소의 맨 앞에 새로운 요소를 넣으려고 unshift를 사용하였다.

오류가 나서, 무엇때문인지 고민해 보았다. 분명 unshift는 맨 앞에 넣은 명령어인데

적용이 되지 않아서 의아했다.

 

문제를 찾아본 결과, unshift는 배열에 적용되는 메소드이고, 요소의 맨앞을 추가할 때는

prepend()를 사용해야 했다.

 

prepend를 사용해 앞쪽으로 추가가 된 모습

 

이후 프로필 이미지를 깃허브 api를 이용하여 github 프로필 이미지를 받아오려고 시도하였다.

하지만, 사진이 받아지지 않고, Promise(<pending>)이란 문구가 console에 찍혔다.

 

문제점을 찾아보다가 let으로 설정해준 뒤에 재선언을 해주면 어떨까? 해서 코드를 작성해보았다.

formImg를 let으로 변경 후 할당하는 식으로 변경

의도대로 이미지를 받아오기는 하지만, 왜? 이게 작동되는지 기존과는 무슨차이가 있는지는 몰라서, 

fetch 함수에 대해서 공부하고, 이해하고 넘어가야겠다.

 

23.1.11 추가

fetch의 리턴값에 대해서 잘 모르는 상태에서 벌어진 오류였다.

 

첫번째 코드에서 return을 통해 JSON으로 변환된 객체가 반환될 것으로 예상했지만,

fetch는  Promise 객체를 반환한다. 따라서 formImg에는 Promise 객체가 할당되어서,

원하는 값이 나오지 않았던 것이다.

 

당연하게 return 문으로 반환되는 값이 반환값이 되는 줄 알았지만, 

fetch문의 Promise 객체를 반환한다는 점을 알게되었다.

 

이 부분을 가지고 2-3시간동안 고민하고 여러 블로그와, 강의를 보았는데도

해결을 못했다.

 

내가 겪은 오류를 스터디에  공유했고, 같은 스터디원 분께서 fetch의 반환 값에 대해서 말씀해 주셨고,

관련 내용을 찾고 어떤 부분이 잘못되었는지 확신을 했다.

 

MDN 공식문서 참조

결론

fetch는 promise를 반환한다.

따라서 직접 원하는 response 객체를 받지 못하므로

두번째 코드처럼 then 내부에서 할당해주는 방식으로 사용해야한다. 

 

 

 

 

 

내일은 글쓰기 폼을 모달형태로 변경하고, 받은 대화 또한 모달로 생성하는 기능을 추가해 봐야겠다.

 

 

-끝-