[TIL] 20240216 4일차

개인 페이지를 완성하고 배포하는 프로젝트를 진행하는 도중에 2개의 문제가 발생했다.

 

1. navbar 안에 요소를 배치하는 과정

시계를 넣을 때 가운데에 배치되지 않고 가운데에서 조금 위에 배치되는 문제가 발생한다.

가운데에서 살짝 위로 뜬 것을 볼 수 있다

 

원인을 파악해보니 p 태그의 기본 설정이었다.

p 태그를 씌우면 margin-bottom이 16px가 설정되어서 가운데 배치가 제대로 되지 않았다.

그래서 a 태그를 씌움으로써 해결했다.

a 태그를 씌움으로써 원하는대로 가운데 배치를 할 수 있었다

 

2. 로컬 환경과 배포 환경의 차이

원래 html 코드 상으로 http 주소로 요청을 보내서 json 형식의 데이터를 fetch해서 가져오는 파트가 있었는데

로컬 환경(로컬 컴퓨터에서 flask 실행해서 여는 서버)에서는 http 페이지에서 http 주소로 요청하는 식이라 문제가 없었지만
배포 환경(클라우드 서버에서 flask 실행해서 여는 서버)에서는 https 페이지에서 http 주소로 요청하는 식이 되어서 html 보안 상 요청이 실행되지 않는 문제가 있었다.

 

해결 방법으로는 https 페이지에서 https 주소로 요청하는 형태로, 즉 데이터를 전달해주는 서버가 https 주소 요청을 받을 수 있게 세팅하면 정상적으로 동작하게 된다.

 

나는 해당 문제를 해결할 수 없기 때문에(데이터를 전달해주는 서버를 만질 권한이 없음)

과감히 해당 파트를 내 코드에서 날렸다.

 

관련 자세한 내용 참고: https://choijying21.tistory.com/entry/Mixed-content-Error-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-https-http-%EC%9A%94%EC%B2%AD-%EC%8B%9C-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EB%B3%B4%EC%95%88-%EB%AC%B8%EC%A0%9C