ExpressJS, ReactJs, TS 기반의 프로젝트를 처음 진행하다보니 여러모로 처음 알게된 점이 많았고, 헤매기도 많이 헤맸던 것 같다. 개발 시에 서버를 백엔드 서버와 프론트엔드 서버를 localhost에서 Port만 분리해서 사용했는데, 백 <-> 프론트 간 데이터 연동이 생기면서 예상치 못한 문제들이 발생했다.
그 중에 하나가 로그인 정보를 브라우저가 쿠키 형태로 들고 있으면 추후 Request 시에 해당 쿠키를 Request Header에 실어서 서버로 보내야 하는데, 이를 보내지 않는 문제가 있었다. 찾아보니 CORS와 관련된 문제였는데, URL에서 Port까지 같아야 같은 Origin으로 판단하기 때문에 Port 번호가 다른 백엔드 서버와 프론트서버는 Cross-Origin이기 때문에 쿠키를 정상적으로 전달하지 않는다는 것이었다. 따라서 Cross-Origin에서도 쿠키를 주고 받을 수 있도록 양쪽 서버를 설정하였더니 정상적으로 동작하였다.
그런데 바로 그 날 저녁 백엔드 코치님에게 해당 문제에 대해 알려드렸더니, 이는 실 배포 환경에서는 하나의 Nginx에 Node.js와 React.js 서버가 같이 배포될 것이기 때문에, Proxy를 사용하면 간단하게 해결할 수 있는 문제라고 하셨다. 즉 서버가 돌아가는 환경 자체를 Port를 나눠서 즉 Port가 나눠지는 개발 환경에서만 이런 일이 발생하는 것이었다.
이런 식으로 문제 발견 -> 해결 -> 더 좋은 방법 발견 -> 교체 과정이 여러 부분에서 반복되었고, 그러면서 개발의 속도는 더뎌졌지만 프로그래머로서의 시야가 더 넓어진 것 같다.
이번 주가 프로젝트 마지막 주인데 현재 개발할 것이 많이 남아있어, 다음 주에 프로젝트 회고를 작성하려고 한다.