23.02.10) 최종 프로젝트 작업을 진행한 72일차

components 적용시키기

usestate클릭할 때 마다 state가 변경되면 렌더가 되는 것을 변경하게 한다.

삼항연산자 같이 뭘 조건문을 하라는 걸까?

const a,setA = useState ("a컴포넌트")

{a=="1" && <보여주고싶은 컴포넌트>}

페이지 나눌때 폴더에 index.js를 만든다.

@tailwind base. = 테일윈드 css 가져오는 것. css에서 import하는 새로운 방식.install에 이미 깔려있다.

React.ChangeEvent<HTMLInputElement> =>  해당 속성에 호버하면 type이 써잇음...참고..

 

as HTMLElements 타입이 html이라고 확신하게 하는 것.

 

tsconfig에 ../ 대신@으로도 사용가능하게 했다.

 

 

회의록 피드백 : 기술스택을 쓸 떄 왜라는 이유를 따로 쓰면 좋을듯..다이나믹 라우팅...파일 기반 시스템..특정 id기준 페이지 모르면..안동훈 튜터님께 방문하면 알려주신다고 하심.

 

스타일 컴포넌트와 테일윈드 반반 자주 쓴다.

 

isloding같은 것은 현업에서 사용하기 위해...firebase는 잘 되니까 나중에 현업으로 가면 서버가 어떻게 될지 모르니까...예외처리는 해주는게 좋다.

 

비밀번호 재변경(이메일 링크로 요청하기)

import React, { useRef, useState } from "react";
import Link from "next/link";
import { authService } from "@/config/firebase";
import {
  getAuth,
  updatePassword,
  reauthenticateWithCredential,
  sendPasswordResetEmail,
} from "firebase/auth";

const FindPassword = () => {
  // useRef로 취득하는 DOM은 최초 mount되기 전엔 null이다
  const emailRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);
  const passwordConfirmRef = useRef<HTMLInputElement>(null);

  const [email, setEmail] = useState("");
  const [newpassword, setNewpassword] = useState("");
  const [newpasswordConfirm, setNewpasswordConfirm] = useState("");
  // email, password 정규식
  const emailRegex =
    /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/;
  const passwordRegx = /^[A-Za-z0-9]{8,20}$/;
  // email password 유효성검사
  const changePassword = () => {
    if (!email) {
      alert("이메일을 입력하세요");
      emailRef.current!.focus();
      return true;
    } else if (!email.match(emailRegex)) {
      alert("이메일형식에 맞게 입력해주세요");
      emailRef.current!.focus();
      return true;
    }

    // if (!(password || passwordConfirm)) {
    //   alert("비밀번호 또는 비밀번호확인란이 비어있습니다");
    //   passwordRef.current!.focus();
    //   return true;
    // } else if (!password.match(passwordRegx)) {
    //   alert("비밀번호형식에 맞게 입력해주세요");
    //   passwordRef.current!.focus();
    //   return true;
    // } else if (password !== passwordConfirm) {
    //   alert("비밀번호 확인이 일치하지 않습니다");
    //   passwordConfirmRef.current!.focus();
    //   return true;
    // }
  };

  // 비밀번호 재설정 메일 보내기
  const handleResetPassword = (e: any) => {
    e.preventDefault();
    if (changePassword()) {
      return;
    }
    sendPasswordResetEmail(authService, email)
      .then((data) => {
        console.log("보내기 성공");
      })
      .catch((error) => {
        if (error.message.includes("auth/user-not-found")) {
          alert("회원이 아님.");
          return;
        }
        console.log(error.message);
      });
  };

  const onChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };
  const onChangePassword = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNewpassword(e.target.value);
  };
  const onChangePasswordConfirm = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNewpasswordConfirm(e.target.value);
  };
  return (
    <>
      <input
        id="email"
        type="email"
        placeholder="Example@example.com"
        ref={emailRef}
        value={email}
        onChange={onChangeEmail}
      />
      {/* <input
        id="pw"
        type="password"
        placeholder="password"
        ref={passwordRef}
        value={newpassword}
        onChange={onChangePassword}
      ></input>
      <input
        id="pwConfirm"
        type="password"
        placeholder="passwordConfirm"
        ref={passwordConfirmRef}
        value={newpasswordConfirm}
        onChange={onChangePasswordConfirm}
      ></input> */}
      <button type="submit" onClick={handleResetPassword}>
        이메일 인증
      </button>
    </>
  );
};
export default FindPassword;

 

firebase 오류

firebase initializeApp을 중복해서 실행하여서 발생한 문제이다.

Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app).

나의 경우는 중간에 appkey를 변경해서 그런지 오류가 난 것 같다..vscode를 재실행 하여 npm run dev 재 실행 하니 해결됐다.