221124 D+67 CSE의 하루

오늘은 취업 후 처음으로 몸 상태가 가장 안 좋은 날이었다. 다행히 코로나는 아니었지만, 기침이 많이 나와 목이 아프고 약 기운에 정신이 멍해졌다. 하지만 나에게는 아직도 끝낼 일들과 수행할 일들이 많이 있었기 때문에 병원만 잠시 다녀오고 바로 업무를 시작했다.

윈도우 ec2와 우분투 가상 머신을 활용한 배포는 시간이 너무 오래 걸리는 데다 에러가 너무 많이 나와 결국 성공하지는 못했다. 대신 수강생 시절, tailwind를 배우며 vercel로 배포해보는 시간이 있었던 것이 생각났다. vercel로 리액트 배포하기를 시도했고, 결론적으로는 성공했다.

 

처음에는 배포는 성공했지만 화면이 나오지 않았고, 콘솔 네트워크창을 보며 서버에서 데이터를 받아오지 못한다는 것을 알 수 있었다. 왜 데이터를 받아오지 못할까에 대해서는 구글링이나 혼자 깨닫지는 못했지만, 주변의 도움을 받아 이에 대한 원인으로 vercel이 환경변수를 인식하지 못한다는 것을 찾아냈다. 

 

그렇다면 내가 지정한 환경변수를 인식하게 하려면 어떻게 해야할까, 찾아보다 vercel은 환경변수를 외부에서 받아 연결하는 것이 아니라 내가 배포하기 전에 지정해주어야 한다는 것을 알게 되었다. 지정해주는 것을 process.env까지 붙여야하는 것인지 아닌지를 깨닫는데에 조금 시간을 들였지만 - 붙이면 안된다 - 해결을 하고 나니 map 함수를 읽어오지 못하는 에러 메시지가 떴다. 데이터를 전체 조회하기 위해 map()을 활용했는데, 그 부분을 읽어오지 못하는 듯 보였다. 이 부분 또한 구글링을 통해 해결할 수 있었다.

 

그러나 여기까지 했다고 성공하지는 못했다. 환경변수를 넣어주었지만, 서버의 주소는 http였고, vercel은 자동으로 https로 들어가기 때문에 Mixed Content 에러가 떴다. 이 에러 메시지를 보자 일단 반가웠다.

에러 메시지가 떴는데 반가웠던 이유는, 어쨌든 서버와의 연결은 되었다는 뜻이었으니까. 조금만 더 무언가를 해주면 받아올 수 있다는 의미로 받아들여져서 좋았다.

처음에는 에러 메시지를 콘솔창에서 띄우지 않는 방향으로 수정했는데, 그 방법대로 하면 강제로 http를 https로 바꾸는 방법이었기에 제대로 화면이 조회되지 않았다.

 

그렇다면 http를 사용하면서 Mixed Content가 되지 않는 방향으로 하려면 어떻게 할 수 있을까를 고민해야했다. 사실, https로 하는 것이 보안상 더 안전하기는 하지만, 서버에서 배포한 주소가 http였기때문에(추후 바뀔 것 같지만), 당장은 http를 사용할 수 있는 방법을 알아내야했다.

결국 크롬 보안 설정에서 안전하지 못한 컨텐츠를 허용해주는 옵션을 선택하여 해결 아닌 해결을 했다. 이 방법대로 하면 콘솔창에서는 Mixed Content 메시지를 경고 메시지로 띄워준다. 그렇기에 완전한 해결을 했다고 볼 수는 없지만, get과 post 요청이 잘 보내지고 그에 따른 응답을 잘 받아오는 것을 확인할 수 있었다.

이제 put 요청과 응답을 잘 보내고 받아올 수 있도록 코드를 수정하고, 재배포를 시도해야한다. 여전히 수정 기능에서 막히고 있어 답답하지만 답을 찾아내야지.