[포스코x코딩온] 풀스택 부트캠프 13주차 정리 -2 3차 프로젝트 회고

01/18

 

회원가입 로직을 만들고 postman API로 검증을 하려고 했는데 db가 아직 구축이 안되어있어서 확인을 못했다. 그래서 cors error 체크나 할 겸 postman을 돌리고 있었는데 자꾸 fetch에 실패했다는 에러가 등장했다. 만약 에러가 생긴 구문의 line을 알려줬다면 금방 찾았을 텐데, 정확한 위치를 알려주지 않기 때문에 에러가 sequelize에 오타가 있을 수도 있고 다를 수도 있어서 전부 찾아봐야 한다는 게 조금 빡세다.

 그래서 다른 팀원 분의 sequelize 구축이 완료되자 마자 postman api를 써서 회원가입 로직 구축한 것을 테스트하려 했다. 하지만 바로 axios error가 등장했다. 일단 팀원분이 만드신 sequelize 파일의 오타를 잡았다.

오타를 잡고 돌려보는데 함수에서 api를 요청할 때 findOne()을 이용하는 existAlready 함수는 정상적으로 실행이 되는데, db에 데이터를 insert into 하는 create함수를 실행하면 axios error가 나왔다. 이전에도 오류의 원인이 오타였기 때문에 오타를 일단 잡으려 했는데 풀릴 기미가 보이지 않았다. 애초에 findOne은 되는데 create가 되면 오타의 문제는 아닌 것 같았다. (자라보고 놀란 가슴 솓뚜껑보고 놀란다...)

01/20

이거 알고보니까 postman api 사용법을 완벽하게 숙지하지 못한 것이었다.

body로 form data나 urlencoded로 보내게 되면 모든 값이 string으로 가져서 오류가 떴던 것이다.

난 urlencoded형식으로 지금까지 이걸 보내면서 왜 값을 못읽지? 하고있었다.

타입을 다르게 보낼거면 rawdata를 쓰는 게 편하긴 할 듯 하다.  아니 써야 한다.

이미 string인 value에다가 "data"이렇게 넣고있었다...

 

그렇게 삽질을 하던 도중 뭔가 cors error가 아닐까 하는 느낌이 왔다. 

 구글링의 결과 react의 package.json 파일에 proxy를 서버 경로로 설정하면 된다고 해서 설정하니까 해결되었다. 서버에서 돌리는 cors 라이브러리만으로는 부족했나보다.

항상 에러가 떠도 이게 무슨 에러인지 설명을 안해줘서 구글링에 제약이 생기는 게 힘들다. 그래도 해결했으니 된거지.

그나저나 지금까지 프록시가 서버 우회 그런건지 알았는데 중계 느낌인건 처음알았다.

 

프록시 서버의 정의는 이렇다고 한다.

프록시 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리켜 '프록시', 그 중계 기능을 하는 것을 프록시 서버라고 부른다.

 

또한 배우는 언어, learning language의 경우에는 하나 이상이 있을 수 있기 때문에 그 숫자를 동적으로 받아줘야 하는데 처음에는 객체로 접근하려다가 typescript의 벽에 막혔다. 그래서 array로 만들어서 input 창의 value !=='' 한 경우 array에 push 하게 했다. 기왕이면 length > 1로 하고 싶은데 어차피 input에서 select, option이고 default value를 ''로 하면 유저측에서 인풋을 넣을 일이 없으니까 상관없으려나.

뭔가 더러운데 조금 더 까끔하게 하고싶다.

 

내일은 로그인 페이지 로직 구현해야겠다.

다만 로그인을 완료하면 쿠키로 유저아이디와 isLoggedin같은 정보를 리액트 서버에 담아두고 이를 통해서 로그인 유지를 해야할 것 같은데.. 그러면 로그인 자동 연장은 어떻게 해야할 지 감이 안잡힌다. 애초에 자동연장을 한 적이 없나?

생각해보니 저번 프로젝트에서 refresh, access 토큰도 14일, 30분으로 설정해놓고 계속 서버에서 요청한거지,

애초에 자동연장을 했던 기억이 없다.

다만 리액트는 모든 요청이 무조건 서버를 한번 거쳤던 저번 프로젝트와는 달라서 조금 까다롭긴 한 것 같다.

하지만 방법을 찾겠지.