웹개발(32)
-
[팀 포트폴리오] [Momentum 클론 웹사이트] 1. 구상 및 완성 과정
프로젝트 완성본 : 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)초단위 시계 (..
2024.12.10 -
[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 13 'timeline.tsx'
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 { ..
2024.07.08 -
[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 12 'post-tweet-form.tsx'
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..
2024.07.08 -
[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 11 'post.tsx'
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..
2024.07.08 -
[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 10 'profile.tsx'
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..
2024.07.08 -
[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 9 'create-account.tsx' & 'login.tsx'
create-account.tsximport { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";import logo from "/logo.svg"import { auth } from "../firebase";import { useState } from "react";import { Link, useNavigate } from "react-router-dom";import { Error,} from "../component/auth-components";import { FirebaseError } from "firebase/app";import GithubButton from "../component/gitdub-btn";i..
2024.07.08