내일배움캠프 70일차

1. 오늘 내가 한 일!

게시글 수정 모달 생성 : 오늘은 게시글 수정 모달을 만들고 프론트와 백을 연결했다! 하루에 기능 하나씩밖에 못하는듯.. 아직 많이 모자라...😥

2. 알게된 것

1. 페이로드로 url 연결하기

기존에는 url에 필요한 데이터를 setitem으로 로컬스토리지에 저장하고 getitem으로 받아와서 url을 작성하였는데, 이 방법은 좋지 않은 방법이라고 하셔서 payload로 url을 작성하는 방식으로 변경하였다.

<페이로드 가져오는 방식 예>

const payload = localStorage.getItem('payload')
const personObj = JSON.parse(payload)
const userId = personObj['user_id']

1. 로컬 스토리지에서 payload를 가져온다.
2. parse 메소드가 payload의 string 객체를 json 객체로 변환시켜준다.
3. json 형태로 변환한 payload에서 user_id만 불러온다.

JSON.parse 참고자료 : https://ithub.tistory.com/54

2. FormData 사용하기

1. FormData 정의하기

const formData = new FormData();

2. 정의한 formdata변수에 데이터 append하기

formData.append('content', NewContent);
formData.append('rating', NewRating);
formData.append('image', NewImage);

3. headers에 'Content-Type': 'application/json'을 삭제하고 body에 formData 넣어주기
   'Content-Type': 'application/json'을 삭제하는 이유는 이미지 파일은 application/json이 아닌데 이렇게 타입 선언을 해버리면 오류가 난다!!

const response = await fetch(`http://127.0.0.1:8000/articles/${code}/`, {
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("access")
        },
        method: 'PUT',
        body: formData
    })

content-type 참고자료 : https://jw910911.tistory.com/117