1. 웹프로그래밍 서버로부터 HTML, CSS, JS를 받게된다.
HTML은 뼈대, CSS 꾸미기, JS는 움직임을 담당하게 된다.
html은 head와 body 부분으로 나뉘며 body부분에서 class를 사용하여 이름을 붙여줄수있다(객체지향)
그렇게 붙여준 이름을 head 부분에서 <style>안에 채워넣어서 원하는 코드를 작성하여 만들어 나갈 수 있다.
<head>
<style>
.wrap{
background-color: green;
width: 300px;
//위 오른쪽 아래 왼쪽
margin: 20px auto 0px auto;
// auto는 끝까지 민다 라는 의미라고 보면된다.
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요.</h5>
</div>
</div>
</body>
2. display 속성
- 요소를 어떻게 보여줄지 레이아웃을 결정하는 속성
- 디폴트는 inline
- 모든 elements에 적용 가능하다.
display: flex; //width나 height를 지정하지 않고도 유연하고 균형잡힌 배치가 가능
flex-direction: column; // row 가로정렬 , column 세로정렬
align-items: center;
justify-content: center;
3. .mytitle > button
mytitle 안에있는 button들을 지정한다는 의미이다.
4. 데이터 베이스
4-1 관계형 데이터베이스(SQL) : 철저하고 완벽하게 관리되어야하는 데이터. (ex 은행, 대기업, 결제시스템)
4-2 비관계형 데이터베이스(NoSQL) : 자유도가 높다. 복잡하고 다양한 데이터를 다룰 때 사용.
5. 파이어 베이스 : google에서 제공하는 NoSQL 데이터 베이스.
아래는 파이어 베이스 세팅 코드이다.
// 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에 type='module'을 선언하고 사용하게 되는데 이렇게 선언하면
.ready로 하던 로딩이 완료되면 ~~을 해라가 필요없어진다.
이유는 type='module'을 선언하는 순간 script가 가장 나중에 호출이 되기 때문에 굳이 로딩이 완료되면 한다는 명령어가 필요없어진다.
Tip
1. alt + shift + F 줄맞추기 단축키.
2. 구역을 지정할때 눈에 잘보이는 색을 background-color로 지정하여 정확한 구역을 눈으로 확인하며 작업하자.
3. alt + b 저장한 페이지 열기.
4. * {} 하게되면 모든 태그에 영향을 주게 된다.
5. 파이어베이스 사용할때 오타나면 데이터가 아예 추가가 안된다.
6. script type='module' 을 하는 순간 onclick으로 동작 하던 것들이 작동하지 않게 된다.
'내일배움캠프 > 본캠프' 카테고리의 다른 글
| Day7 (0) | 2024.08.13 |
|---|---|
| Day 5,6 (0) | 2024.08.12 |
| Day4 (팀프로젝트 마무리) (0) | 2024.08.08 |
| Day3 (파이어베이스) (0) | 2024.08.07 |
| Day2 (0) | 2024.08.06 |
