오늘은 몸이 힘들어서 헬스장 자체휴무..
10시 위코드 도착
fetch
오늘은 내가 만든 인스타그램 로그인 페이지에서 백엔드와 서버를 연동해서
fetch(“api주소” {
method: “POST”,
body: JSON.stringfy({
email: this.state.id,
password: this.state.pw,
})
})
then.((response) => response.json())
then.((result) => console.log(‘결과’, result))fetch 함수의 기본 골격
fetch 함수는 비동기 함수이다. 위에서부터 한줄 한줄 읽는 것이 아닌 통째로 서버에 저 요청을 보내면 서버에서 보내준 정보를 해석해서 다시 클라이언트에게 응답해주기 때문이다. 그래서 then을 써주는 것이다.
처음에는 위의 fetch 함수를 this.state 밑에 넣고 돌렸을 때는 500 오류가 뜨고 페이지를 새로 고침할 때마다 아무 값도 입력하지 않았는데 오류가 바로 떴다.
해결 방법으로는 goToMain함수에 먼저 새로고침할때마다 자동으로 값이 입력되는 것을 막기 위해 e.preventdefault를 사용해주었다.
그리고 500이 계속 뜨는 이유는 알고보니 백엔드에서 usernam을 유니크로 설정해주어서 username 값을 보내지 않아서 오류가 뜨는 거였다. 내 쪽에서 this.state안에 username값을 임의로 설정해주니 해결되었다!
댓글 컴포넌트화
Comment.js파일을 만들어서 따로 댓글을 컴포넌트화 시킴
Main폴더에 CommentList라는 변수에 this.state.commentList값을 넣어줌.
-> Comment파일에서 props로 값을 받음.
props란 자식에서 부모로 부모에서 자식으로 값을 전달할 수 있는 개념이다.
