본 코드는 graphql을 통해 클라이언트에서 서버통신을 하는 코드를 바탕으로 작성되었다!
개발자 도구 단축키
- 맥: option + command + i
- 윈도우: F12
Elements 탭
-
html, css 를 디버깅 할 수 있는 탭
내 vsc 코드를 바꾼 후 새로고침해서 결과를 일일히 확인하는 것이 아닌 개발자 도구의 Elements 탭에서 바로 수정하고 결과를 확인한 후 확정하고 싶을 때 내 코드를 바꾸면 된다.
상단 맨 왼쪽의 버튼을 클릭하고 내가 확인하고 싶은 element를 클릭하면 해당 element에 대한 코드를 바로 볼 수 있다.
css 같은 경우에도 브라우저에서 바로 css를 여러 번 적용하며 테스트해본 뒤 가장 마음에 드는 스타일을 적용했을 경우 그때 내 코드를 수정하면 효율적으로 작업할 수 있다.
Console 탭
- 상태코드를 찍어보거나 에러가 났을 경우 콘솔을 찍어 확인해 볼 수 있다.
Network 탭
- 네트워크 요청 (서버통신..) 에서 오류가 났을 때 Network 탭을 통해 확인할 수 있다.
내 코드는 다음과 같다.
네트워크 탭을 눌러보면 네트워크 상황을 확인할 수 있다.
네트워크 상황에는 통신 상태코드, 데이터 사이즈, 일을 처리하는데 걸린 시간을 확인할 수 있다.
(graphql은 원하는 데이터를 골라서 받을 수 있기 때문에 restapi보다 실행 속도가 빠르다.)
지금은 graphql을 통해 요청을 보내고 있기 때문에 graphql과 관련된 네트워크 통신이 보인다.
이 중 Preflight은 사전 요청이기 때문에 무시해도 된다.
preflight이란 프론트에서 백한테 요청을 보내기 전 백엔드에 무슨 요청(get, post, put..)이 가능한지 알아보기 위한 사전 요청 과정이다.
(허락되는 메서드들)
이때, Preflight이 가장 먼저 보이지 않는 경우는 크롬 브라우저가 잘못 보여주고 있기 때문이고 원래는 Preflight이 가장 먼저 실행되고 그 다음에 실제 요청을 하게된다.
http 통신에서는 header와 body가 존재한다.
네트워크 탭에서 각 네트워크의 Headers 와 Payload 탭은 각각 header와 body를 나타낸다.
요청에 대한 결과는 Response탭에서 확인 할 수 있다.
Preview는 Response의 결과를 보기 쉽게 보여주는 탭이다.
Response는 텍스트로 처리되어 있기 때문에 보기 어려울 수 있다. Preview는 텍스트를 객체 형태로 변환해서 보여주기 때문에 비교적 보기 쉽다.
Payload는 내가 요청한 데이터를 볼 수 있다. 내가 요청한 데이터가 제대로 되어있는지 확인해볼 수 있다.
header 부분은 상태코드를 확인할 수 있고 네트워크 통신의 요약정보를 보여준다.
통신 중 에러가 나는 경우 확인하는 방법
다음은 graphql 이다.
docs를 살펴보면 createBoard 할 때 writer의 data type이 String으로 지정되어 있다.
일부러 에러를 내기 위해 내 코드에서 writer 부분의 data type이 정수인 데이터로 createBoard를 해보겠다.
개발자 도구의 network 탭을 확인해보면 에러가 난 부분을 확인할 수 있다.
graphql 클릭 시 상세정보를 확인할 수 있다.
Response 탭을 누르면 에러 정보를 확인할 수 있다.
21이라는 숫자가 String으로 표현될 수 없다는 에러가 나고 있다.
이런 에러메세지를 확인하고 난 후 내 코드를 올바르게 수정하면 된다.
