첫번 째 팀프로젝트의 주제는 다방으로 정했다!
물론 완전한 클론 코딩은 아니고 필요한 부분과 우리가 해보려는 부분을 추스려서 진행했다.
- 로그인 / 회원가입
- 로그인 유지(새로고침 시에 로그인이 풀리기 때문에 서버로 get요청)
- 지도 menubar or 검색을 통해 대학교를 검색하면 지도 안에 주변 자취방이 나오게 하기
(클릭시 모달창이 열리고 그페이지에서 누른 방의 옵션 및 집,집주인 상세정보를 알 수 있고 찜하기 가능(로그인이 되어있다면)) - 마이페이지 menubar click시에는 찜한 자취방 정보와 내 정보를 알 수 있고 수정 및 찜한 자취방 삭제등이 가능하다
가져온 자취방 데이터들을 가지고 학생들 위주로 만들었는데 추후 여유가 된다면 사장님 입장에서 자취방을 추가해서 백으로 넘겨서 추가하는 것도 해보려 한다.
아무래도 처음 팀프로젝트 이다 보니, 많은 오류를 만나게 되었는데 (물론 아직 진행중인 프로젝트이다)
우선 백과의 협업시 많이 직면하는 문제 - cors 문제가 있는데 이 문제를 만나기 전 좀 색다른 오류를 접했다.
오류는 백에서 배포한 주소가 .:8080 이었는데 다른 컴퓨터 / 모바일 등에서는 백에서 배포한 주소로 접근이 되는데 프론트를 담당한 내 맥북에서만 되지 않았다. 서버로 요청한 값이 그냥 timeout 이 되고 오류를 나타내진 않았기에 초보인 나는 도저히 알 수가 없었다.. 그래서 정말 열심히 찾아보고 많이 바꿨는데도 잘 되지 않아서 백엔드 주소에서 8080을 뗀 상태로 다시 빌드 후 배포를 했더니 그제서야 서버로 접근이 가능했다.
물론 계석 알 수 없는 이유로 뜨던 timeout 오류가 사라지자 마자 cors 문제에 부딪혔다. cors 에러란
Cross-Origin-Resource-Sharing error 인데, 서로 다른 출처에서의 리소스를 제어하기 위한 정책을 위반한 에러이다.
이 문제를 해결하기 위해서는 백엔드에서 접근하는 사용자의 IP를 허용가능 하게 열어주거나 프론트에서 프록시 미들웨어를 사용해서 접근하는 주소를 마치 백자체에서 접근하는 것처럼 하는 것이다.
우선 백에서 허용을 해서 접근을 하려했는데 백엔드 하는 분도 스프링을 접한지 별로 안된 분이라서 수정이 안되서 우선 프록시 미들웨어를 이용해서 서버와의 연동을 하였다.
첫 플젝인 만큼 부족한 부분이 많지만 같이 진행하며 데이터를 맞추고 서로 원하는 바가 조금씩 다른 것을 맞춰가며 하는 것이 참 흥미롭게 느껴지는 중이다. 추후에 더 진행되면 글을 더 써보려한다!
