그동안 인스타그램 클론코딩을 하면서 input값 등으로 들어온 value를 자체적으로 저장하여 배열을 만들고, 자르고 쪼개고 유효성 검사를 하고 컴포넌트로 값을 전달하고 했었다.

그런데 오늘 드디어 백엔드 분들과 소통을 하면서 서버에 값을 전달하고 유효성 검사를 하고 그 결과를 되돌려 받아 페이지를 넘길지, 아니면 입력값을 다시 확인하라고 알림창을 띄울지 작업을 할 수 있게 되었다.

지금까지는 백엔드분들과는 접점이 없어 간간이 무슨 작업을 하는 지 들어보긴 했어도 직접적으로 체감되는 부분은 사실 없다싶이 했었다.
하지만 오늘 협업을 하면서(사실 협업이라 하기엔 아무것도 안한 수준이지만) 서버에 값을 보내고 다시 결과를 받고 하는 작업이 되게 신기했었다. 그동안 그렇게 따오기 힘들었던 값들을 사실은 이렇게 쉽게 주고 받을 수 있던 거라는 것도 새로 알게 된 사실이다.

1. 회원가입 먼저!

회원가입을 상정한 페이지를 만들었고, input태그를 4개 만들어 각각 이메일과 비밀번호, 이름과 전화번호를 입력하도록 하였다.

fetch함수를 통해 첫번째 인자로 넣은 웹 페이지(이는 공개된 페이지가 아니고, 함수에 포함되어 있는 페이지라고 한다.)인 register 페이지에 input태그에서 받은 입력값을 보낸다.

회원가입하는 상황이며, 이메일과 비밀번호, 그리고 이름과 전화번호를 입력한다. 그리고 콘솔 창에는 SUCCESS가 뜨며 회원가입이 성공한 것을 알 수 있다.

이렇게 되면 내가 기입한 정보들이 서버에 전송되며, 차후 로그인할 때 등에 사용할 수 있다.

이메일에는 @와 .com이 있어야 하고, 비밀번호는 8자 이상에 특수문자와 알파벳 그리고 숫자가 포함되어 있어야 가입할 수 있도록 설정해 두셨다고 한다(사실 이런 유효성 검사는 프론트 쪽에서 1차로 검수한 뒤 백엔드 쪽으로 보내야 하는 것인줄 알았다).

이렇게 네트워크 창에서도 201 created가 뜨면서 회원가입을 위한 정보가 생성되었음을 알려준다!

2. 회원가입에 성공했다면 이번엔 로그인을 해 보자

로그인에는 회원가입과 다르게 이메일과 비밀번호만 받는 input 태그만 입력하였다.

이번에는 register이 아닌 login 링크로 input값을 보내보자

회원가입할 때 입력했던 이메일과 비밀번호를 입력하고 보내기 버튼을 누르면!

오른쪽에 보이듯 LOGIN SUCCESS가 보인다 로그인 성공!

네트워크에도 200 ok가 뜨면서 서버와의 통신이 원활하게 돌아감을 확인할 수 있었다.

3. 이번엔 연습이 아닌 프로젝트에 적용시켜 보자

실제 인스타그램을 클론 코딩했던 프로젝트 중 로그인 페이지 코드의 일부에서 가져왔다.

구현해 놓았던 로그인 버튼에 handleBtnValid 함수를 onClick 속성으로 줬다.

통신은 아까와 같이 하되, 아까는 결과를 console창에 출력시키는 데 그쳤다면
이번에는 로그인에 성공했다면 로컬 스토리지에 token 값을 저장해 두고, 메인 페이지로 넘길 수 있도록 구현해 보았다.

사실 클론코딩을 진행하면서 생각대로 구현이 안되는 함수와 기능에 짜증도 많이 났었고 지치기도 했었는데 오늘 또 새로운 작업을 해 보고 신기하다는 생각을 많이 했던 것 같다.

백엔드 분들과의 팀으로서 소통은 처음이었는데, 위에서도 써놨지만 나로서는 되게 신기한 경험이었다.
서버와의 통신도 처음이었고, 말로만 들어보던 200 ok를 내 consol창에서 직접 보는 것도 처음이었다.

다음 주부터는 실질적으로 백엔드 분들과 팀으로 소통하며 진행하는 클론 프로젝트가 시작되는데, 지치지 않도록 컨디션 조절에도 신경써야 하겠다.

객체의 이름은 제대로 확인토록 하자. MESSAGE를 message로 작성해 왜 token값이 로컬 스토리지에 저장 안되는지 짜증내지 말고...

fetch 함수를 무조건 useEffect함수 안에 써야 하는 줄 알고 onClick함수 안에서 useEffect함수가 사용이 불가해서 당황탄 것만 5분 걸렸던 적도 있었다.

아 괄호 제대로 안닫아서 생긴 오류도 한 5분만에 찾았었지

그러고 보니 캡쳐해 둔 이미지를 보다가 에러처리를 위한 캡쳐는 하나도 없었다 / 그렇다고 한다