220928 TIL 풀스택 개발자로 가는 길

백엔드와 프론트엔드의 경계

매번 프론트엔드와 백엔드를 독립적으로 배워서 이 둘의 경계가 어디인지 왜 나눠서 사용하는지 정말 애매했었다.

리액트만으로도 투두리스트나 마카오 뱅크가 만들어지고 스프링만으로도 만들어지는데 왜 나눠서 사용할까...?  이런 궁금증은 항상 갖고 있었다.

이번 주에 둘을 같이 사용하여 마카오 뱅크를 만들어 보면서 그 경계를 조금이나마 허물 수 있었다.

 

그리고 이번 주 강의만 봤을 때는 이 둘을 어떻게 연결시키는 건지 잘 이해가 되지 않았었는데 오늘 직접 해봄으로써 조금이나마 이해할 수 있었다.

 

입력 폼에 대한 예외처리를 하는 것을 직접 해봤는데 처음에는 어떻게 해야 할지 전혀 감이 잡히지 않아 헤매고 있었다.

 

백엔드에서 입력하는 폼에 대한 조건을 따져서 조건에 맞지 않으면 예외 메시지를 던지고 그 메시지를 프런트엔드가 받아서 화면에 보여줘야 했는데, 어떻게 하면 백엔드에서 던진 예외 처리를 프론트엔드쪽에서 받을 수 있을까 고민하다 알고 보니 강의에서 하는 방법을 다 알려줬었다.

 

try ~ catch 구문을 사용해서 예외를 처리하는 방법을 이용했다는 것을 알 수 있었다.

catch로 에러를 받아오는 방법인 것 같았는데 잘 이해가 되지 않았다.

그래서 콘솔로 하나씩 찍어보면서 이해를 했다. catch로 받아온 에러에서 내가 필요한 건 백엔드에서 던진 메시지였는데 그 메시지만 사용하기 위해 콘솔로 하나씩 찍어서 찾아봤다.

 

내가 찾아야 하는 건 백엔드에서 던진 "잘못된 계좌번호입니다. 다시 입력해주세요"라는 메시지이다.

우선 백엔드에서 던진 것을 그대로 찍어봤다. 

 

 

우선 맨 처음 찍었을 때는 내가 찾으려는 메시지는 보이지가 않았었다.

누를 수 있는 화살표를 다 눌러보다가....! 희미하게 내가 찾던 메시지가 보였다.

 

내가 백엔드에서 던져준 정보를 response가 갖고있다는 것을 알게 되었다.

내가 널 애타게 찾았단다..

 

 

data 안에 message만 프론트엔드에서 받아와서 사용하는 방식으로 에러 메시지를 화면에 보이게 했다.

 

근데 이렇게 하다가 궁금한 점이 생겼는데 현재 리액트에서 react-hook-form이라는 라이브러리를 이용해서 form을 만들어 input의 입력 검사를 하는 것을 배웠었다. 

react-hook-form을 이용하면 register나 minLength나 validate 등등 여러 가지 검사를 할 수 있는 것을 알게 되었는데 그러면 굳이 왜 입력 폼을 백엔드에서 검사해서 예외를 던져 프론트엔드에서 받아서 사용하는 번거로운 일을 하지????라고 의문을 갖고 진행하던 중 react-hook-form으로는 검사가 불가능한 예외처리 조건이 생겼다. 

데이터베이스에 있는지 없는지를 검사해야했는데 이 검사는 프론트엔드에서 불가능했다. 레파지토리를 백엔드에 만들어놓고 관리를 하고 있었기 때문이다.

조건 검사를 백엔드에서 할 수밖에 없는 상황이 있다는 것을 깨달았다.

그러면 모든 조건 검사를 백엔드에서 하는 게 좋은 것인지, 아니면 프런트엔드에서 할 수 있는 건 프런트엔드에서 하는 게 좋은지 이 경계가 모호해졌다.

 

오늘 직접 여러 가지 실험해보면서 백엔드와 프론트엔드를 연결하는 공부를 해봤는데 나름 재미도 있고 뭔가 둘 다 사용하니까 간지 좀 나는 듯..?