[Main_day12]2022.11.23 회고_아이디 찾기 기능구현 완료, 비밀번호 재설정 구현 시작

wool·2022년 12월 10일

회고

목록 보기

18/29

Intro

기상 시간	오전 7시 30분
전날 취침 시간	새벽 3시
컨디션	git실수로 인한 멘탈 조각

1122 회고 이슈

잘해오고 있는 부분

<개인>

회고작성 https://www.notion.so/Mainday12-2022-11-23--90d0d9fb56734487997bed6cfce41fac
빠르게 오늘 안으로 멘탈 회복 한 것
안되는 부분 빠르게 질문 하여 해결 한 것
아이디 찾기 기능 구현 완료 한 것

<함께 진행 한 것>

다른 팀원의 에러사항 함께 고민 한 것

아쉬운 부분

언제나 그렇듯 나의 부족한 지식..ㅎㅎ^^…
작업 속도가 좀 느린 듯 하다

개선할 점

회고를 좀 정갈하게 쓸 필요 있음…
작업 속도 내고 집중 더 하자

Today log

아이디 찾기 페이지 기능 구현 거의 완료

이것을 보고 일단 포스트맨으로 정보를 넣어준다

포스트가 되지 않아서 확인해보니 서버가 끊겼다고 한다

기다렸다가 다시!

대문자필요!!!

드디어성공

독스에서 예시 엔드포인트를 얻을 수 있다!

아이디 겟!

아이디를 자를 때 슬라이스를 사용했는데 슬라이스를 읽을 수 없다고 한다

TypeError: Cannot read Property 'slice' of Undefined in JS | bobbyhadz

슬라이스를 return 위에서 썼을때는 안된다고 했었는데 return안쪽 태그안에서 하니 또 문제는 없었다!

이렇게 했다

<div className="transition duration-700 ease-in-out  w-full h-1/6 flex items-center justify-center text-mainOrange font-SCDream4 text-sm mt-1">
            {data
              ? `ID는 ${
                  data.data.id.slice(0, 4) + "*".repeat(data.data.id.length - 4)
                }입니다`
              : null}
</div>

그리고 기존에는 그냥 페이지 안에서 api요청을 했었는데 따로hook으로 만들어서 improt하는 방향으로 수정했다.

설명도 추가

getIdByEmail.tsx

import axios from "axios";

/**
 * @description userEmail을 props로 받아서 id를 return하는 hook
 **/

const fetchIdByEmail = (userEmail: string) => {
  // 요청메소드 + 요청정보
  return axios.get(
    `http://13.209.7.184:8080/members/find-id?email=${userEmail}`,
  );
};

export default fetchIdByEmail;

2중 3항연산자로 유효성 검사 진행 결과 보여줌

아직 해결하지 못한 것

공백에서 엔터를 하거나 없는 사용자의 이메일을 보냈을 경우 에러 메세지가 뜨지 않는다
메세지가 일부 사라질 경우 아이디가 사라지지 않는다

에러메세지

인터페이스 설정 중요!

빈칸일 경우 에러 메세지 반환하겠ㅅ다!

안됨..

원인 ⇒ input태그의 type이 submit이어야 하는데 text로 되어 있어서 먹통인 것이였다!

공식 문서의 input에 submit이 있는 것을 보고 깨달아버림..

https://react-hook-form.com/api/useformstate/errormessage/

import React from "react";
import { useForm } from "react-hook-form";
import { ErrorMessage } from '@hookform/error-message';

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("singleErrorInput", { required: "This is required." })} />
      <ErrorMessage errors={errors} name="singleErrorInput" />
      
      <ErrorMessage
        errors={errors}
        name="singleErrorInput"
        render={({ message }) => <p>{message}</p>}
      />
      
      <input type="submit" /> **=> 이 부분!!**
    </form>
  );
}

하지만 바꾸어 주었더니 또다른 문제가 생겼다.

텍스트 영역이 아주 안잡힌다.

그래서 고민을 해보다가 그냥 submit태그 하나 더 넣어주면 어떨까 싶어

<input type="submit" />

이 태그를 하나 더 넣어주었더니

에러메세지가 보이긴 하지만 이상한 제출 버튼이 생겨버렸고

내가 생각한 엔터를 통해서가 아닌 제출버튼을 클릭해야만 오류메세지가 보였다.

이벤트핸들링을 어떻게 잘 조정하면 되지 않을까..?

다른 분은 아주 스타일 디스플레이 논으로 해서 안보이게 하던데..

<form method="post" action="./new_file3.html">
    <input type="text" name="test" />
    <input type="text" style="display: none;" />
</form>

https://blog.outsider.ne.kr/292

여려 방법을 시도 해 보도록 하자

일단 이게 중요한게 아니니 넘어가..

비밀번호 재설정 구현 시작

비밀번호 구현 로직을 먼저 고민 해 보기로 한다.
로직 고민 해 보기

5회차_3강 : 이메일 인증을 통한 비밀번호 재설정 기능을 구현한다.

레포지토리를 뒤져보기로 하자^^..

https://github.com/ahmaat19/NEXTjs-boilerplate

오예 디렉토리 구조 먼저 파악 해 보기

넥스트js에서 로컬스토리지 접근 안되는 오류

taskList-nextjs/index.tsx at main · JJMarques/taskList-nextjs

const useSsrLocalStorage = (key: string, initial: string): [string, React.Dispatch<string>] => {
  return typeof window === 'undefined'
    ? [initial, (value: string) => undefined]
    : useLocalStorage(key, initial)
}