// 사용자의 이름을 화면에 표시하는 함수function paintGreetings(username) { const greeting = document.querySelector("#greeting"); // HTML에 JS 객체를 연결 if (!greeting) return; // 요소가 없으면 종료 greeting.innerText = `Hello ${username}`; // HTML의 에 Hello [사용자 이름] 형식의 텍스트를 삽입한다 greeting.classList.remove("hidden"); // hidden을 지워 숨겨져 있던 인사말을 화면에 표시한다 } function onLoginSubmit(event) { // event를 괄호안에 쓰는 이유는..

const quotes = [// 각 명언과 저자 선언 (값 넣기) { quote: "첫 번째 명언", author: " -저자" }, { quote: "두 번째 명언", author: " -저자" }, { quote: "세 번째 명언", author: " -저자" }, { quote: "네 번째 명언", author: " -저자" }, { quote: "다섯 번째 명언", author: " -저자" }, ]; export function initializeQuotes() { const quoteElement = document.querySelector("#quote span:first-child"); const authorElement = document.q..

export function initializeWeather() { const weather = document.querySelector("#weather span:first-child"); const city = document.querySelector("#weather span:last-child"); // HTML에 각 JS 객체 연결 const API_KEY = "-"; // OEPN API 고유 키값 (- 자리에는 개인의 키 값 연결 필요) 선언 (가독성을 위해 이렇게 함) if (!weather || !city) { console.error("Weather or city element not found in DOM"); // 에러일 경우 에러값 콘솔 메시지로 출력하게 하기..

완성 코드 :export function initializeToDo() { const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); // HTML 요소와 JS 객체를 선언하여 연결 if (!toDoForm || !toDoList) return; // toDoForm(할 일 입력 폼)과 toDoList(할 일 목록 컨테이너)가 DOM에 제대로 렌더링되었는지 확인하는 안전 장치 // 할 일 목록은 로그인 시에만 입력하고 띄울 수 있으므로 해당 코드 사용 // localStorage에서 데이터 가져오기 let toDos = []; // 할 일 목록을 담을 ..

프로젝트 완성본 : https://id2el.github.io/Momentum_VP/ React App id2el.github.io 아래 강의를 보며 참고 및 추가하여 만든 프로젝트이다https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad CodersJavascript For Beginnersnomadcoders.co 모멘텀의 원본은 https://chromewebstore.google.com/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=ko&category=ext&pli=1 여기서 크롬 앱에 다운받을 수 있다 기능 :To-do List (JS)초단위 시계 (..

timeline.tsximport styled from "styled-components";import { Timestamp, collection, deleteDoc, doc, limit, onSnapshot, orderBy, query } from "firebase/firestore";import { db, storage } from '../firebase';import Tweet from "./post"; // 트윗 컴포넌트 가져오기import { Unsubscribe } from "firebase/auth";import { useEffect, useState } from "react";import { getDownloadURL, ref } from "firebase/storage";import { ..