[유투브 어딘가] 통신에 관련된 영상을 잠깐보았다.

처음에는 JWT 토큰에 대한 내용을 찾아보다가 잘못들어 갔었다.

서버에 대해서 node.js들은 어떤식으로 구성하는지 보았는데 기억은 잘 안나지만 재밌어보였다.

 

클라이언트에서 서버로 요청을 할 때에 정보는 body 안에 넣어서 준다는 것을 알게되었다

 

fetch의 형식에 대해서 다시 한번 복습하는 기회가 되었다.

fetch('서버주소').then((response)=>response.json()).then((data)=> console.log(data));

fetch를 사용할때에는 바디에 담아서 직렬화를 해준 다음에 보내준다.

 

cors정책에 대해서 조금 더 알게되는 시간이 되었다

cross origin resorce sharing 에러가 난다면 어떻게 해결해야할까?

client : 3000 개발서버 

server: 4000 개발서버 이 두개는 서러 origin(출처, port)이 다르다

웹 개발자 입장에서 origin이 다르다는 것은 데이터를 마음껏 공유하는 사이가 아니다.

ex) 네이버와 구글은 origin이 다른 2개의 서버이다 서로 데이터를 막꺼내가는 그런 사이는 안된다.

그러니깐 origin이 다르면 일단 막는다.

은행에 돈을 꺼내러 갔을 때 돈을 줄지 말지는 창구직원이 정하는 것이다 클라이언트가 서버에 요청하려하지만 서버가 막는다면 불가능해진다 그러니깐 서버가 cors정책을 허용하지 않으면 절대 못가져간다.

 

통신 과정에서 비동기를 만들어주지 않는다면 무한리랜더링이 일어나는 경우가 있다

이 이유는 처음 useState를 만들고 통신을 요청하는 과정에서 요청은 시간이 걸리기때문에 아직 결과가 나오지 않았다 그떄 return문이 실행되면서 랜더링이 끝났을 때 통신으로 인해서 setState가 실행되면서 state가 바뀌게 되면서 리랜더링이 일어나서 다시 통신이 일어난다 이렇게 된다면 무한루프에 빠지게 된다.

useEffect로 감싸주는 방법(의존성배열 비워둬야함)으로 최초 랜더링 1번에 실행되게 할 수 있다 

 

null에는 map을찍을 수 없다 그러니 옵셔널 체이닝을 써서 없을때는 map을 실행시키지 않게끔하는 로직을 구성하자

 

submit의 기본동작은 쿼리파라미터에 각각 값을 넣고 보내버린다 이걸 막아줘야한다 e.preventDefault()