자주 사용하는 CSS
margin
padding
border: solid 2px #e8344e;
border-radius: 20px;
// 정렬
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// a 태그 속성 삭제
a {
text-decoration: none;
color: inherit;
}
// 포인터 설정
cursor: pointer;
// 트랜지션
transition: all 0.3s ease-in-out;
// hover: 마우스가 올라갈 때, focus: 선택될 떼
.dropbtn:hover,
.dropbtn:focus {
background-color: #e8344e;
color: white;
}
// display 속성으로 drop down 기능 구현
display: none;
display: block;
// 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
box-sizing: border-box;
// 그림자 속성
box-shadow: 0px 8px 16px 0px #00000033;
// 주어진 공간보다 내용이 넘칠 경우
overflow: scroll
overflow: auto
// 가로 스크롤
.lyrics {
overflow: auto;
white-space: nowrap;
}JQuery 사용하기
JQuery를 사용하면 dom 요소를 더 간단하게 가져올 수 있다는 장점이 있다.
js에서 DOM 요소를 가져올 경우
const newElement1 = document.querySelector('.newElement1')
const newElement2 = document.getElementById(('#newElement2')
JQuery를 사용할 경우
$('#q1').text(a)-> 요소를 가져와서 바로 사용할 수 있다.
JQuery 사용법
- JQuery CDN을 가져와서 JQuery를 사용할 수 있는 환경을 만들어 준다.
- JQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>- js 파일에서 '$("#q1') 형식으로 요소값을 가져와 사용한다.
<JQuery 사용 예시>
// 텍스트 변경
$('#q1').text(a)
$('#q2').text(b['name'])
// html 추가하기
// 원하는 html 태그를 `` 안에 묶어 temp_html 변수에 저장한다
$('#q1').append(temp_html)
// 반복문
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}
// 삭제하기
$('#q1').empty()
let profile = `${nameDict['name']}의 나이는 ${nameDict['age']}살 입니다`
// 토글
$('#q1').toggle
// 클릭 이벤트
$('#q1').clickFetch
Fetch란 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.
fetch.("url") // 해당 url로 통신 요청
.then(res => res.json()) // json 파일을 가져온다.
.then(data => {
let temp = data['temp'] // 데이터에서 필요한 데이터를 추출한다.
$('#msg').text(temp) // 가져온 데이터로 text 변경
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
$('#names-q1').empty()
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = ``
if (gu_mise > 40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
});
})
}Firebase 사용하기
- 초기 설정
- 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 구성 정보 설정
const firebaseConfig = {
// 자신의 구성 정보 삽입
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
</script>- 사용 예시
- Firebase에 데이터 반영하기
addDoc(collection(db, "콜렉션이름"), doc);- Firebase에 저장된 데이터 가져오기
getDocs(collection(db, "콜렉션이름"));<script type="module">
// 추가 버튼
$("#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);
// await를 사용하여 반영될 때까지 기다려준다.
alert('저장 완료!');
window.location.reload();
})
let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image']
let title = row['title']
let content = row['content']
let date = row['date']
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">${content}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
});
</script>await와 async
JavaScript에서 비동기 작업을 처리하기 위해 사용된다.
비동기(Asynchronous) 처리
비동기적인 작업은 작업들이 동시에 실행될 수 있으며, 한 작업의 완료를 기다리지 않고 다음 작업을 시작할 수 있다.
await를 사용하여 비동기 처리를 할 수 있고, await는 항상 async 함수 안에서 작동한다.
(만약 async로 지정해주지 않으면 에러가 발생할 것이다.)
요약
(1) CSS를 실습하면서 자주 사용할 것 같은 CSS 속성을 정리했다. 실습을 진행하면서 자주 사용하면서 익숙해지면 좋을 것 같다.
(2) DOM 요소를 간단하게 가져와서 사용할 수 있도록 해주는 JQuery의 사용 방법을 간단하게 알아보았다.
(3) Firebase를 사용해서 Fieabase database에 데이터를 저장하고 가져오는 방법을 알아보았다. 프로젝트를 진행하면서 보다 쉽게 데이터베이스를 사용하기 위해 Firebase를 활용하면 될 것 같다.
