완성 코드 :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 { ..

post-tweet--form.tsximport { addDoc, collection, updateDoc } from "firebase/firestore";import { useState } from "react";import styled from "styled-components";import { auth, db, storage } from "../firebase";import { getDownloadURL, ref, uploadBytes } from "firebase/storage";// 폼 스타일 정의const Form = styled.form` display: flex; flex-direction: column; gap: 10px;`;// 텍스트 에어리어 스타일 정의const TextArea..

post.tsximport React, { useState, useEffect } from 'react';import styled from 'styled-components';import { auth, db } from '../firebase';import { doc, getDoc, updateDoc } from 'firebase/firestore';import { Timestamp } from "@firebase/firestore";import { Link } from 'react-router-dom';import Modal, { Styles } from "react-modal";import { media } from '../media-query-file';// 날짜를 표시하는 스타일드 컴포넌트cons..

profile.tsximport { styled } from "styled-components";import { auth, db, storage } from "../firebase";import { useEffect, useState } from "react";import { getDownloadURL, ref, uploadBytes } from "firebase/storage";import { updateProfile, getAuth } from "firebase/auth";import { Timestamp, collection, deleteDoc, doc, getDoc, getDocs, limit, onSnapshot, orderBy, query, setDoc, where, updateDoc } fr..