항해99WIL - 8주차

실전 프로젝트에 들어갔는데 너무 이상과 다르다... 기획도 안나오고 배정된 디자이너님은 우리가 완성할 수 있는 내용과 그 기간을 고려하지 않고 너무 크고 디테일한 것 을 원하신다 사실 나는 내 포폴에 넣을 작품이기에 당연히 어떤 부분이든 고퀄로 나와주면 좋다 하지만!!!! 기간내에 완성이 된다는 전제하다... 제발 조금이라도 뭐라도 주세요 디자이너님.... 작업을 할 수 있도록 뭐라도.. 뼈대라도... 좀... 주세요

---

그냥 오늘 메모...

//기존 내가 하던 예외 처리
let obj = undefined;
let result = obj && obj.data; // &&앞이 참이면 뒤의 내용이 실행된다
console.log(result);

위 코드를 옵셔널 체이닝 연산자를 이용해 바꾸어 보면

let obj = undefined;
console.log(obj?.data);

obj가 undefined이지만 에러를 내지 않고 undefined를 반환해준다

사실 기존에 쓰던 방법이 어렵거나 불편하진 않다(아직 경험부족으로 그럴지도 모르겠다)하지만 옵셔널 체이닝 연산자를 알게되었으니 요곳도 종종 써보면 좋을것같다

---

2. FormData 객체

백 엔드 개발자분께서 "폼데이터로 요청해주세요"라고 요청해주셨는데 잉?.. 그냥 모가다르지 싶었다.. 그리고 나의 삽질이 시작되었다...(제발 어믄거 찾지말고 MDN이나 잘 읽어보자 제발)

FormData는 form data를 ajax로 전송 가능하게 해주는 객체이다. 이미지를 ajax로 업로드할 때 필요하다고 한다. 아래와 같이 사용한다

let formData = new FormData();
formData.append('key','value')
formData.append('item','hi') // <input name="item" value="hi"> 와 같다.

*값은 "문자열"로 자동 변환되는 점 참고하자

여기 까지는 막 검색해도 다 나와서 룰루랄라 요청하기직전에 확인하자 하고 콘솔로 찍어보는 순간 formData{}.....? 난 으마무시하게 많은 친구들을 .append했는데 아무것도 나오지 않는다 MDN만 잘 읽었어도 당황하지 않았을텐데... 일단 결론은 FormData는 console.log()로 찍으면 확인할 수 없고 아래와 같이 formData.entries()를 이용해 확인할 수 있다.

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}
// key1, value1
// key2, value2
// 코드 출처 : https://velog.io/@ash3767/react-formData

왜? 콘솔로그에 출력되지 않았을까
FormData 객체는 단순 객체가 아닌 XMLHttpRequest 전송을 위해 설계된 특수한 객체라고 한다.
문자열화할 수 없기 때문에 console.log에 출력되지 않음..

---