웹개발(32)
-
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <github-btn.js>
import React, { useEffect } from "react";import { GoogleAuthProvider, GithubAuthProvider, signInWithRedirect, getRedirectResult,} from "firebase/auth";import { auth } from "../firebase"; // Firebase 설정import { useNavigate } from "react-router-dom";import styled from "styled-components";import { getDoc, setDoc, doc } from "firebase/firestore";import { db } from "../firebase";const Button = st..
2024.12.20 -
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <create-account.js>
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";import { auth } from "../firebase";import { useState } from "react";import { Link, useNavigate } from "react-router-dom";import { FirebaseError } from "firebase/app";import GithubButton from "../component/github-btn";import styled from "styled-components";const Switcher = styled.p` color: white; a { color..
2024.12.20 -
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <login.js>
import { auth } from "../firebase";import React from "react";import { useState } from "react";import { Link, useNavigate } from "react-router-dom";import { FirebaseError } from "firebase/app";import { signInWithEmailAndPassword } from "firebase/auth";import GithubButton from "../component/github-btn";import styled from "styled-components";const Switcher = styled.p` color: white; a { ..
2024.12.20 -
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <protected-route.js>
import React from "react";import { Navigate } from 'react-router-dom';import { useAuthState } from 'react-firebase-hooks/auth';import { getAuth } from 'firebase/auth';const auth = getAuth();// Firebase Authentication 서비스의 인스턴스를 가져오는 코드const ProtectedRoute = ({ children }) => { const [user, loading] = useAuthState(auth); if (loading) { return Loading...; } if (!user) { return ; // re..
2024.12.20 -
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <layout.js>
import { Outlet, Link, useNavigate } from "react-router-dom";import styled from "styled-components";import { auth } from "../firebase";import { useState, useEffect } from "react";import { onAuthStateChanged } from "firebase/auth";import { signOut } from "firebase/auth";const Wrapper = styled.div` @media (max-width: 600px) { grid-template-rows: auto 1fr auto; /* 헤더, 메인, 푸터 */ grid-template..
2024.12.20 -
[개인 포트폴리오] [클리이밍 커뮤니티 SNS] 1. 구상 및 완성 과정
https://climbing-together.firebaseapp.com/ '벽을 보며 말해요'라는 클리이밍 커뮤니티 SNS이다클라이밍은 벽을 보고 길을 찾아 올라가는 실내 스포츠인데거기서 지인과 대화하던 중 작명 아이디어를 받았다 로고는 현존하는 로고를 보며 모작했다이미 계정이 있나요를 누르면 회원가입 화면으로 이동할 수 있다해결중인 문제는 Github 로그인이 잘 안된다는 점이다 연결이 제대로 안된 거 같기도 하다또 로그인 창이 이유를 아직 모르겠는데 로딩은 되는데 홈으로 못넘어갈 때가 간헐적으로 있다이 문제는 해결하여 이 포트폴리오의 마지막 포스팅 쯤 작성할 계획이다 한때 이용했던 고민 상담 어플리케이션 엔라이즈사의 '모씨'가 생각났다글을 많이 쓰면 카드가 터질 수 있다고 알림이 뜨고 터진 부..
2024.12.19