질문 있습니다! | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

질문 있습니다!

코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0

5주차

김*현

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

깃허브에 배포하고 열어봤는데 스파르타플릭스 화면에서 온도 정보를 가져오지 못하더라구요

오류 메세지를 봤을 때는 저 url이 잘 불러와지지 않은 것 같은데,

검색해서 알아보니

암호화된 HTTPS 기반의 사이트에서 암호화되지 않은 HTTP 사이트에 요청을 보내서 Mixed content 에러가 발생한 것이라는데..

스파르타에서 준 url을 https로 수정할수는 없으니 다른 api를 갖다 쓰지 않는 이상 배포에 적용하는건 불가능한가요??

<!DOCTYPE html>

<head>

<title>스파르타플릭스</title>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1:wght@200&family=Noto+Sans+KR:wght@200&display=swap');

* {

font-family: 'Black Han Sans', sans-serif;

font-family: 'Gothic A1', sans-serif;

font-family: 'Noto Sans KR', sans-serif;

}

.main {

color: white;

background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');

background-position: center;

background-size: cover;

}

/* body를 불러올때는 .을 안붙였다 (테그가 하나밖에 없기 때문.) */

body {

background-color: black;

}

.mycard {

width: 1200px;

margin: 20px auto 20px auto;

}

.mypostingbox {

width: 500px;

margin: 20px auto 20px auto;

border: 1px solid white;

padding: 20px;

border-radius: 5px;

}

.form-floating>input {

background-color: transparent;

color: white;

}

.form-floating>label {

color: white;

}

.input-group>label {

background-color: transparent;

color: white;

}

.mypostingbox>button {

width: 100%;

}

</style>

//type에 module이 붙는 순간 onclick에서 뭔가를 부를 수 없게 됨.

//--> 버튼에 click을 동적으로 만들어줘야함(동적으로= 코드로 click을 달아준다= 코드로 만들어준다)

//module이 추가되면 script가 나중에 호출 되기 때문에 $(document).ready(~~~) 이게 필요 없어짐 (136번째줄)

// 아래 3문단이 firebase 설정

// Firebase SDK 라이브러리 가져오기

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";

import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// Firebase 구성 정보 설정

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

apiKey: "AIzaSyAAVaJX-MgwX2vwMxI0c3-RkNX6b3UkZto",

authDomain: "sparta-be265.firebaseapp.com",

projectId: "sparta-be265",

storageBucket: "sparta-be265.appspot.com",

messagingSenderId: "898638651895",

appId: "1:898638651895:web:295ea72be1384d0e138ef2",

measurementId: "G-MVQK1SC5RT"

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

// firebase

$("#postingbtn").click(async function () {

let image = $('#image').val();

let title = $('#title').val();

let star = $('#star').val();

let comment = $('#comment').val();

let doc = {

'image': image,

'title': title,

'star': star,

'comment': comment

};

await addDoc(collection(db, "movies"), doc)

alert('저장 완료!')

window.location.reload();

});

$("#savebtn").click(async function () {

$('#postingbox').toggle();

})

//데이터 읽기 스켈레톤 코드 코드스니펫 (getDocs)

let docs = await getDocs(collection(db, "movies"));

docs.forEach((doc) => {

let row = doc.data();

console.log(row); //콘솔 창에서 어떤 데이터를 어떻게 가져오는지 확인 가능

let image = row['image'];

let title = row['title'];

let comment = row['comment'];

let star = row['star'];

let temp_html = `

<img src="${image}"

class="card-img-top" alt="...">

<h5 class="card-title">${title}</h5>

<p class="card-text">${comment}</p>

</div>

</div>`;

$('#card').append(temp_html);

});

let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";

fetch(url).then(res => res.json()).then(data => {

let temp = data['temp'];

let qwer ="";

if (temp > 20) {

qwer = ('더워요');

}

else {

qwer = ('추워요')

}

$('#feel').text(qwer)

$('#asdf').text(temp)

})

// $(document).ready(function () {

// })

// function openclose() {

// $('#postingbox').toggle();

// }

// function makeCard() {

// let image = $('#image').val();

// let title = $('#title').val();

// let comment = $('#comment').val();

// let star = $('#star').val();

// let temp_html = `

// <div class="col">

// <div class="card h-100">

// <img src="${image}"

// class="card-img-top" alt="...">

// <div class="card-body">

// <h5 class="card-title">${title}</h5>

// <p class="card-text">${star}</p>

// <p class="card-text">${comment}</p>

// </div>

// </div>`;

// $('#card').append(temp_html);

// }

</script>

</head>

<body>

</svg>

</a>

<li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>

</ul>

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>

<button type="button" class="btn btn-outline-light me-2">Login</button>

</div>

</header>

<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직

세자뿐이다.</p>

</div>

</div>

</div>

</select>

</div>

</div>

</div>

<!-- <div class="col">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

</div> -->

</div>

</body>

</html>

댓글 알림