소스코드, HTML 기본 구조 (웹개발 기초 1)
개발자도구 (검색)
내가 원하는대로 웹의 글씨를 바꿀 수 있음
웹사이트 레퍼런스 참고하기
ATOM 프로그래밍 언어의 편집기로 사용되는 텍스트 에디터
Node.js Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임
웹사이트 제작시 3개 언어 필요
HTML = 이미지, 입력창, 영역 구분 용도
CSS = html로 넣은 요소들을 꾸며주는 용도
javascript = 웹사이트를 움직이게 하는 용도
<body>
1 div (가로로 꽉찬 하나의 영역)
<body> <div style="background-color:black;">
ㄴ 검정 박스가 생김
2 input = 입력창 생성
<input type="text">
type = 다양한 입력창 모양
placeholder = 입력창 안에 글자
CSS 스타일 (다양하게 줄 수 있음)
< style> 입력 꾸며주기
</style>
<script>
alert("안녕하세요!"); = 주의 창 생성
</script>
채팅앱 모양
float : right 오른쪽으로 이동
width : %
기능 동작 - firebase 채팅앱 중요
쉽게 이해하는 firebase
https://youtu.be/9RkXchEJgKU?feature=shared
realtime database : 엑셀 같은거
hosting
아래 내용 복붙
사전 준비(Firebase 콘솔 설정) 없이는 브라우저에서 아무리 코드를 잘 짜도 Firebase와 연결이 안 돼서 아무 일도 안 일어남.
✅ 왜 사전 준비가 필요한가? 이유 3가지 요약
1. Firebase 프로젝트는 데이터 저장소이자 서버다
우리가 만든 웹은 프론트엔드일 뿐.
실시간 데이터 저장/읽기를 하려면 Firebase 서버에 연결해야 함.
- 콘솔에서 프로젝트 생성 → 우리의 데이터가 저장될 공간을 만드는 것
- Firestore를 켜야만 Firebase에서 "실시간 채팅 데이터"를 처리할 수 있어
2. 보안 규칙 없으면 Firebase가 외부 접근을 차단한다
기본 보안 상태에서는 모든 쓰기/읽기 요청을 거부함
- 실습할 때는 테스트 규칙으로 "누구나 읽고 쓰기 가능"하게 설정해야 우리가 만든 웹에서 메세지를 쓸 수 있음
- 그렇지 않으면 코드가 돌아도 에러만 뜨고 아무 동작 안 함
3. 웹 앱 등록 + Firebase 설정 코드 필요
Firebase는 누가 내 서비스를 쓰는지 알아야 함
- 웹 앱 등록 후 나오는 Firebase SDK 설정 코드 (apiKey, projectId 등)가웹 코드에서 Firebase와 연결되는 열쇠 역할
- 이걸 안 하면 Firebase는 "이 요청이 어디서 왔는지" 모름 → 차단됨
이해를 돕는 비유
웹앱이 손님이라면,
Firebase는 카페고, 콘솔에서 설정하는 건 출입증 발급
- 손님이 아무 카페나 들어가서 아무 커피 주문 못하듯,
- Firebase도 설정 안 하면 "누구세요?" 하고 쫓아냄 (403 에러)
index.html 을 txt 파일로 저장하고 열면 채팅창 열림
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>🔥 미니 채팅</title>
<style>
body { font-family: sans-serif; padding: 20px; }
#messages { border: 1px solid #ccc; height: 300px; overflow-y: scroll; padding: 10px; margin-bottom: 10px; }
#input { width: 80%; }
#send { width: 18%; }
.msg { margin: 5px 0; }
</style>
</head>
<body>
<h2>🧡 실시간 채팅</h2>
<div id="messages"></div>
<input type="text" id="input" placeholder="메시지를 입력하세요" />
<button id="send">전송</button>
<!-- Firebase SDK 추가 -->
<script type="module">
// ✅ 1. Firebase SDK import
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
import { getFirestore, collection, addDoc, onSnapshot, query, orderBy } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";
// ✅ 2. Firebase 설정 (자신의 config로 바꿔야 함)
const firebaseConfig = {
apiKey: "AIzaSyCatsnk_be5jtzjZNYeIoBHETNQja_32TE",
authDomain: "test-ffcfa.firebaseapp.com",
projectId: "test-ffcfa",
storageBucket: "test-ffcfa.firebasestorage.app",
messagingSenderId: "1040582099410",
appId: "1:1040582099410:web:c1c3870e17dd207e41c80b",
measurementId: "G-8L790DLWG9"
};
// Firebase 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// ✅ 3. 실시간 메시지 렌더링
const messagesRef = collection(db, "messages");
const q = query(messagesRef, orderBy("timestamp"));
onSnapshot(q, snapshot => {
const messagesDiv = document.getElementById("messages");
messagesDiv.innerHTML = ""; // 초기화
snapshot.forEach(doc => {
const msg = doc.data().text;
const div = document.createElement("div");
div.classList.add("msg");
div.textContent = msg;
messagesDiv.appendChild(div);
});
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
// ✅ 4. 메시지 전송
document.getElementById("send").addEventListener("click", async () => {
const input = document.getElementById("input");
const text = input.value.trim();
if (text) {
await addDoc(messagesRef, {
text: text,
timestamp: new Date()
});
input.value = "";
}
});
</script>
</body>
</html>
'IT 스타트업 사업 개발(BD) 부트캠프' 카테고리의 다른 글
| CSS, HTML 적용 활용 (0) | 2025.03.15 |
|---|---|
| 웹사이트 코딩 기초 ; 웹사이트 구동 방식 이해 (0) | 2025.03.14 |
| 카피라이팅 & 제품 상세페이지 작성 방법 (1) | 2025.03.12 |
| 카피라이팅 마케팅 전략 스토리텔링 이해 (0) | 2025.03.11 |
| 프로 제안러가 되는 법: 실패 유형과 성공 스킬 완벽 정리 (1) | 2025.03.08 |