[신발검색엔진] 03 개발 1주차 - 웹 구현 Debugging

 화,수,목 3일간 빠르게 웹 클라이언트와 서버를 구현했다. 종강하고 과제, 연구실 일정이 끝나서 속도가 빨라졌다. 생각했던 것 보다 빠르게 결과물이 나왔지만, 어려웠던 부분도 있었다. Lightsail도 처음이고, 웹에서 Flask로 Client와 Server를 분리해본 경험도 없었다.

1. Javascript에서 REST Api 데이터 받기

프론트는 따로 프레임워크를 공부할 시간을 아끼고 싶어서 bootstrap 코드들만 가져와서 구현중이다. 따라서 프레임워크에서 제공하는 REST Api 툴을 사용할 수 없었고, javascript로 직접 받아와야 한다. fetch 라는 내장 함수로 연결과 데이터 수신이 가능하다.

사실 지금은 급한대로 내가 프론트 개발을 하고 있는데, 프론트 개발자의 필요성을 많이 느낀다. 코드도 점점 지저분해지고 UI도 점점 지저분해지고 있다. IP주소 같은 정보를 .env로 숨기는 방법도 모르겠다..

2. CORS(Cross-Origin Resource Sharing)

참고자료: https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 통신 정책? 같은 거다. 브라우저는 Server의 응답이 CORS 정책을 위반하지 않는다면 데이터를 수신한다.

Server에서는 응답 헤더에 Access-Control-Allow-Origin 를 명시해줘야 한다. 가장 간단한 방법으로는 Access-Control-Allow-Origin : * 과 같이 명시해서 해결 할 수 있는데, 좋은 방법은 아니다. Client에서 credentials 옵션을 변경해서 반드시 특정 url을 명시했을 때만 허용하도록 할 수 있기 때문이다.

Flask에서는 response의 header를 위와 같이 수정해줄 수 있다. 나는 급한대로 "*" 을 사용했지만, 배포 단계에서는 Client 주소를 명시해야겠다. 그리고 지금은 하나의 응답에 Header를 수정해줬는데, 모든 응답의 Header를 수정하는 방법도 알아봐야 할 것 같다.

3. Workbench - Lightsail Database 연결

Workbench에서 서버 DB를 연결해서 보면서 작업하고 있다. EC2와 RDS를 사용할 때도 연결 문제를 겪었었는데, 이번 문제는 좀 어이가 없었다. 내 로컬 컴퓨터의 문제였는데, mysql이 로컬 컴퓨터에서 꺼져있었다(?). 사실 문제 해결 과정을 정확히 이해하진 못했는데, 로컬 터미널에서 mysql을 한 번 실행시켜주고 나서 다시 연결하니 정상적으로 연결되었다. Lightsail을 내가 처음 쓰는거라 잘 몰라서 그랬나 한참을 헤맸는데, mysql이 꺼져(?)있었나 보다. 조금 검색해보니 local mysql server를 키고 끌 수 있는 것 같다.