프론트 js 처음부터 뿌시기 4월 - 1

1. What I learned today

• 브라우저 역할도메인 주소에 대응되는 브라우저에 가서 뭔갈 가져와서 보여준다.주는 쪽 : 서버
• 요청하는 쪽 : 클라이언트 (내컴퓨터)
• 이미 페이지를 불러온다.
• html : 뼈대head : 화면에 보이지 않는거class : 명찰 (짱구라는 이름을 붙인다)
• 구역을 나눌땐 p태그 쓰기
• body : 화면에 보이는거
• css : 꾸미기
• js : 움직임
• 변수, 자료형, 함수, 조건문, 반복문
• 줄맞추기
• option shift F
• margin auto: 끝까지민다
• JQuery토글 => .toggle()
• $(‘’).~
• GET
• 읽기전용
• fetch
• 데이터를 url을 통해 불러온다.
• <script type="module"> ⇒ ??? 왜 모듈을 써야하는지

  import { initializeApp } from "firebase/app";
  

  이런 식으로 import 키워드를 사용하려면, <script type="module">을 써야 브라우저가 ES6 모듈로 인식하고 import를 실행할 수 있어.
• 모듈로 하면 페이지를 불러올때 맨마지막에 불려진다
• ㄴ> Firebase 9버전 이상부터는 "모듈 방식 (ES Module)"을 사용

2. Code Snippets

// toggle
function openclose() {
    $('#postingbox').toggle();
}

// value 가져오기
let star = $('#star').val();

// html에 추가
$('#card').append(temp_html);

// fetch
fetch(url).then(res => res.json()).then(data => {
	console.log(data['RealtimeCityAir']['row'][0])
})

// firebase DB 접근
				// module을 쓰면 onclick이 안먹힘
        // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "<<a href=https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js>https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js</a>>";
        import { getFirestore } from "<<a href=https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js>https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js</a>>";
        import { collection, addDoc } from "<<a href=https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js>https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js</a>>";
        import { getDocs } from "<<a href=https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js>https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js</a>>";

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyAJA7040AiatPmJjgcjbLSmvy34PDDnKJs",
            authDomain: "sparta-dc194.firebaseapp.com",
            projectId: "sparta-dc194",
            storageBucket: "sparta-dc194.firebasestorage.app",
            messagingSenderId: "917399219394",
            appId: "1:917399219394:web:88e982f55943cf4a6d9f5b",
            measurementId: "G-G1LG46GC85"
        };

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);
        
        
        // 데이터 저장하기
        **await addDoc(collection(db, "albums"), doc);
        
        // 데이터 불러오기
        let docs = await getDocs(collection(db, "albums"));**
// module 을 썼을때 클릭 붙이기 $("#savebtn").click(async function () { $('#postingbox').toggle(); }) // 화면 리로딩 window.location.reload();

 

3. Challenging (학습하며 어려웠던 점)

• 토글 함수 작성하는 법을 몰랐는데 JQuery를 이용해 .toggle로 간단히 할 수 있다는게 신기했다.
• 왜 script에 module을 써야하는지 이해하지 못했는데 그냥 firebase 9 버전 이상부터 모듈 방식을 써서 그런 것 같다.
• 왜 sciprt에 module을 썼을 때 onclick이 안되는지? ⇒ ❗ <script type="module">:→ 즉, window에 자동으로 등록되지 않음ㄴ> 지피티 말인데 이해하지 못했습니다.
• → 그래서 HTML의 onclick="함수()"처럼 전역 접근이 필요한 이벤트가 함수를 못 찾는 거야
• 모든 코드가 모듈 스코프로 감싸짐

→ 즉, window에 자동으로 등록되지 않음

→ 그래서 HTML의 onclick="함수()"처럼 전역 접근이 필요한 이벤트가 함수를 못 찾는 거야

ㄴ> 지피티 말인데 이해하지 못했습니다.