Today I Learned ...
오늘은 '웹개발 A to Z' 3강의 실습을 진행하고, 4강 강의를 들었다.
📚 3강 실습 _ html, css를 활용하여 화면 만들기
3강의 실습은 1~3강에서 배운 내용을 가지고 화면을 만드는 것이었다.
기본적인 html과 css는 구성이 되어있었고, 제공되는 파일에서 예시 답안 화면과 같아지게 수정하면 되는 것이었다.
첫 번째 미션은 부트스트랩을 활용해 jumbotron을 추가하는 것이었다.
사실 여기에 가장 많은 시간을 보냈다.
부트스트랩에서 긁어온 점보트론에는 이번 과제에서 필요하지 않은 div가 추가되어 있는데, 그걸 삭제하지 않아서 배경사진의 여백이 계속 맞지 않았다.
이걸 해결해보려고 margin도 수정해보고, width 값도 줘보고 다 해봤지만, 결국은 필요없는 것을 삭제하면 되는 일이었다.
첫 번째 미션에는 또 하나의 골칫거리가 있었는데, h1 텍스트 하나에만 폰트를 적용하는 것이었다.
처음에는 이전에 실습했던대로 *를 사용해서 폰트를 적용해봤지만, 전혀 바뀌지 않았다.
그냥 하나의 클래스만 지정해서 바꾸면 되는 일이었다.
두 번째 미션은 부트스트랩에서 카드들을 긁어오는 것이었다.
사실 이 부분은 굉장히 쉽게 넘어갔다.
카드의 클래스만 부여하니 기존에 세팅되어있던 디자인으로 바로 적용이 되어서 내가 할 부분은 딱히 없었다.
마지막 미션은 구글 폰트에서 특정 폰트를 가져와 적용하는 것이었다.
이 부분도 앞선 첫 번째 미션에서 해결해버렸기 때문에 쉽게 해결할 수 있었다.
실습 과제를 하는 동안 파일명을 잘못 수정해서 이상한 파일에서 작업을 하고 있기도 했고, 노가다로 여백을 맞춰보기도 했고, 이런 저런 시도를 다 해보다가 ChatGPT에게 물어보기도 했다(전혀 도움은 안 되었지만,,).
그래도 결국에는 예시 답안과 똑같은 화면을 만들어냈다.
이렇게 하나씩 스스로 해결해나감에 뿌듯함을 느꼈다.
📚 4강 _ 데이터베이스
4강은 데이터베이스에 관한 내용이다.
데이터베이스란 데이터를 저장하고, 여러 사람들이 관리하는 데이터의 모음이다.
데이터베이스를 사용하면, 데이터를 쉽게 찾고, 효율적으로 관리할 수 있게 된다.
데이터베이스는 크게 2종류로 나눌 수 있는데,
정리된 정보를 다룰 때 사용하는 관계형 데이터베이스(SQL)과
복잡하거나 유연한 정보를 다룰 때 사용하는 비관계형 데이터베이스(NoSQL)이다.
관계형 데이터베이스는 은행에서, 비관계형 데이터베이스는 스타트업 기업에서 많이 사용한다고 한다.
이번 강의에서는 구글에서 개발한 Firestore Database를 사용한다.
구글에서는 모바일과 웹 애플리케이션 개발을 위한 웹 서버를 대신 만들어주는 서비스는 Firebase를 운영하고 있다.
Firebase 안에서도 다양한 서비스를 사용할 수 있는데, 그 중에서 우리는 클라우드 기반 NoSQL인 Firestore을 사용했다.
Firestore 데이터베이스를 생성한 후에 내가 사용하고자 하는 웹페이지의 html 파일에 정보를 추가하면 된다.
<script type="module">
// 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 프로젝트 정보 입력
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
</script>먼저, html의 script에 type="module"을 추가해야 한다.
그런데, 이걸 추가하게 되면, 기존에 스크립트에 작성해두었던 내용들이 작동되지 않게 된다.
$("#000").click(async function () {
// 원하는 내용 입력
})그래서 위와 같은 골격을 사용해 기존에 있던 내용들을 수정해야 한다.
예를 들어, 기존에는 버튼에 onclick으로 함수를 부여해서 사용했다면, 여기에서는 id를 새롭게 부여한 후, 위의 서식 안에 동작을 집어넣으면 된다.
$("#000").click(async function () {
let doc = {};
await addDoc(collection(db, "컬렉션이름"), doc);
})Firebase 데이터베이스와 연결을 하기 위해서는 doc 함수 안에 원하는 내용을 입력하고, 컬렉션 이름을 기입하면 된다.
내가 작업할 Firebase 프로젝트의 정보를 위해서 지정해두었기 때문에, 그 안에서 컬렉션이 생성되고, 내가 기입한 정보들이 저장된다.
$("#postingbtn").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let doc = {
'image':image,
'title':title,
'content':content,
'date':date
};
await addDoc(collection(db, "albums"), doc);
// 저장 완료된 후, 안내창 실행
alert('저장 완료!');
// 새로고침
window.location.reload();
})예를 들어, '추억 앨범' 실습에서 이렇게 작성을 한다면, 이미지, 제목, 내용, 날짜의 벨류 값이 'albums'라는 컬렉션 안에 각각의 키값을 가지고 저장이 되는 것이다.
이렇게 저장된 내용들을 다시 html로 불러올 수도 있다.
이전에 실습을 진행할 때에는 데이터베이스를 사용하지 않았기 때문에, 내가 카드를 새롭게 생성하더라도 새로고침을 하면 사라진다는 한계가 있었다.
그런데, 이제는 데이터베이스에 연동을 해두었기 때문에, 사라지지 않는 진짜 정보들을 담을 수 있게 되었다.
자세한 실습 내용은 노션을 통해 정리해두었다.
Notion 확인하기
🙃 오늘의 느낀점
오늘 처음으로 강의 도움 없이 스스로 실습을 진행해보았다.
강의를 들으면서 실습을 할 때에는 막힘없이 술술 해나갈 수 있었지만, 강의의 도움 없이 나 혼자서 문제를 해결하려고 하니 막히는 부분들이 많았다.
하나씩 정리하면서 강의의 내용을 내 것으로 만드는 시간이 필요하다.
빠르게 하려고 하지 말고, 내 속도에 맞게 천천히 해봐야겠다.
