백엔드와 통신할 때는 json 파일로
- 서버는 문자열 데이터만 취급하기 때문에 객체인 js 데이터를 문자열로 변경해서 전달하고 받는다.
(MDN) JSON
js를 서버에 전해 줄 때
- JSON.stringify(데이터)
(MDN) JSON.stringify(데이터)
서버에서 받아서 js 에서 사용할 때
stackoverflow JSON.parse() Vs. .json()
- AJAX 사용할 때-> JSON.parse() -> 동기적
(MDN) JSON.parse(response) - Fetch 사용할 때-> res.json() -> 비동기적, promise 를 리턴
(MDN) Response.json()
백엔드가 직접 만든 개인 서버와 통신
백엔드 개발자분이 만든 개인 컴퓨터의 서버와 연결하기 위해서 오늘 체크해야 했던 부분은
- 동일한 와이파이인지 (IP 주소가 동일해야 하기에)
- 포트 번호
- endpoint
Status
200 OK
요청이 성공적으로 되었습니다.
- 로그인 -> 성공적으로 로그인되고 토큰을 받았을 때
201 Created
요청이 성공적이었으며 그 결과로 새로운 리소스가 생성되었습니다. 이 응답은 일반적으로 POST 요청 또는 일부 PUT 요청 이후에 따라옵니다.
- 회원가입 -> 성공적으로 회원가입이 되었을 때
400 Bad Request
이 응답은 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미합니다.
- 회원가입 시 -> 키 에러 - 꼭 필요한 값이 들어오지 않았을 때
(만약 등록하지 않은 키가 들어왔을 때는 해당 부분 무시하고 저장됨)
401 Unauthorized
비록 HTTP 표준에서는 "미승인(unauthorized)"를 명확히 하고 있지만, 의미상 이 응답은 "비인증(unauthenticated)"을 의미합니다. 클라이언트는 요청한 응답을 받기 위해서는 반드시 스스로를 인증해야 합니다.
- 회원가입 시 -> 아이디 중복되어 그 아이디로 가입할 수 없음
- 로그인 시 -> 아이디는 맞지만 비밀번호가 맞지 않을 때
404 Not Found
서버는 요청받은 리소스를 찾을 수 없습니다. 브라우저에서는 알려지지 않은 URL을 의미합니다.
- 로그인 시 등록된 아이디가 아닐 때
500 Internal Server Error
서버가 처리 방법을 모르는 상황이 발생했습니다.
- 에러 정의하지 않아 나타남
오늘 있었던 다른 에러코드
net::err_connection_refused
- 백엔드 단에서 mysql 데이터베이스를 실행하지 않아 그랬던 것 같다
오늘의 코드
로그인
const [form, setForm] = useState({ email: '', password: '' });
fetch('http://10.58.5.37:8000/users/signin', {
method: 'POST',
body: JSON.stringify(form),
})
.then(res => {
const { status } = res;
if (status === 401) {
alert('비밀번호를 확인해주세요!');
}
if (status === 404) {
alert('등록된 사용자가 아닙니다.');
}
return res.json();
})
.then(res => {
if (!!res.token) {
setToken(token);
alert(`로그인 되었습니다.\n${email}님 좋은 하루되세요 :)`);
navigate('/main-kim');
}
})
.catch(e => console.log(e));회원가입
const [form, setForm] = useState({ email: '', password: '' });
fetch('http://10.58.5.37:8000/users/signup', {
method: 'POST',
body: JSON.stringify(form),
})
.then(res => {
const { status } = res;
if (status === 201) {
alert('회원가입 되셨습니다! 축하드립니다!');
}
if(status === 401){
alert('비밀번호를 확인해주세요!');
}
})
.catch(e => console.log(e));오늘 고민하고 알게 된 것
-
다음에 코드를 짤 때에는 백엔드가 보내준 status 가 아닌 message로 구분해서 분기를 처리하려고 한다. 그래야 더 세세한 분기 처리가 가능할 것 같다.
-
또한 switch 문으로 나누어 처리해야지!
-
프론이 트단에 서도 회원가입할 때 아이디와 비밀번호 유효성을 진단하고 백엔드에서도 진단하는데 이는 중복으로 보여 한 부분에서만 해도 될 것처럼 보이지만 그만큼 예외가 없어야 하는 부분이기 때문에 다시 한번 확인을 위해 2번 해주는 게 좋다.
-
처음 백엔드에서 직접 만든 서버와 통신을 하며 통신을 백엔드에서 받는 것도 구경하고 그것을 받아 화면에 표시해 본 너무도 재미있고 역사적인 하루였다!! 오늘 많은 status 상태를 알게 된 만큼. 에러 메시지를 보고 백엔드와 더 많이 소통할 수 있는 프런트엔드 개발자가 된 것 같아 뿌듯한 하루다 :)
-
공부할수록 초반 기획 단계가 중요함을 더 많이 느낀다. 큰 그림을 그리고 전체적인 방향을 프런트, 백 모도 같이 이야기하며 같이 맞춰야 하는 부분은 최대한 맞추고 시작해야겠다는 생각이 많이 들었다. 그래야 모두 더 효율적인 코딩이 가능하다. 또한 진행하면서도 진짜 끊임없이 소통해야 간극이 커지는 불상사가 나타나지 않겠다는 생각이 든 하루였다!
