💡 회고 룰
Mood : 오늘의 기분 - 기분과 그렇게 느낀 이유도 적는다.

Facts : 사실, 객관 - 실제로 내가 했던 일이나 겪었던 일의 사실
Feelings : 느낌, 주관 - 내가 했던 일을 하면서 느꼈던 감정이나 느낌
Findings : 내가 했던 일을 통해서 새롭게 배운 점이나 알게 된 점

Keep : 현재 만족하고 이어나가면 좋을 것
Ploblem : 불편하거나 개선이 필요한 것
Try : Ploblem에 대한 해결책, 앞으로 실행할 것

Affirmation : 자기 확언, 용기를 주는 문장

✨ Mood

-  약기운때문인지 피곤. 뭔가 하고는 싶은데 열정넘치는 느낌은 아니고, 그럼에도 잘 해서 뿌듯함도 있고. 걱정도 한스푼..

✨ Facts

- 공통 컴포넌트 중 input컴포넌트를 완료했다. 

- 팀장의 역할로 다양한 문서 정리를 해야했다.

✨ Feelings

- 자주 하던 작업임에도 새로이 할 때는 매번 헷갈린다. 

- 똑같은 걸 또 검색하는데, 전에 검색했던 게 뭔지 기억이 날 정도.

- 같은 실수를 반복하는구나 싶어 씁쓸하면서도, 기록의 필요성을 다시금 느꼈다. 

✨ Findings

- zod 라이브러리를 접했다. 내가 맡은 부분에서 다 사용하진 않다보니 email검증정도로 딥하게 사용하진 않았지만, 새로운 라이브러리를 사용한다는 거부감이 조금은 줄어든 듯 하다. 

✨ Keep

- 기록하는 것. 학습하다보면 기록할 게 자연스레 생긴다.

- 그러다보니 개발블로그는 오늘 회고까지 5포스팅 째....ㅋ

✨ Ploblem

- 기본기 부족에 대한건 계속 느껴진다.

- 오후에 급하게 회고를 하려니 시간이 부족할까 조마조마 하다. 

- 최근 자주 했던 (물론 조금씩은 달랐지만) 환경셋팅과 소소한 작업에도 많은 시간을 투자해야해서 시간 낭비가 많았다. 작업 하나하나에 나의 생각을 잘 담아서 기억해야겠다는 생각이 들었다. 

✨ Try

- 5시 땡 하면 회고를 하고 남는 시간에 추가 작업을 해야겠다.

- 그나마 오전에 집중이 잘 된다. 오전에는 이론을 쌓고, 늦은 오전부터 플젝을 시작하면 딱 좋을 것 같다. 

- 무언가를 할 때 그냥 복붙 말고, 이유를 진지하게 생각해보기.

✨ Affirmation

- 소소한 뿌듯함이 자신감으로 이어지겠지!!

자주 쓰이는 기능이지만 할 때마다 귀찮은 비밀번호 input에 눈 아이콘 배치하기..

이번에는 tailwind로 반영해보았다.

이메일 유효성 검증은 이전 글에서 zod 라이브러리를 사용해서 

스키마 정의 후 검증해주었고, password는 기준 값과 다른 경우 

일치하지 않음 메시지와 input컬러를 바꿔준다.

메시지와 컬러는 useState로 주어서 텍스트 입력중일 때, 

input에서 벗어날 때 바로 체크해서 반영해주도록 했다. 

8자 미만인 경우 검정색으로 8자 이상 입력 하라는 텍스트도 보여준다.

눈 아이콘 켜짐 여부에 따라 비밀번호는 암호화 되거나 그대로 보여준다.

사실 별 건 없지만.. 나중엔 더 빠르게 작업하기 위해 기록해두는 글.

  const [visibility, setVisibility] = useState(true);

  const handleVisibility = () => {
    setVisibility(!visibility);
  };
  
  return (
	<label className="flex flex-col font-normal text-base gap-2 relative w-[21.875rem]">
      {labelName}
      <input
        type={
          props.type === 'email' || (props.type === 'password' && visibility)
            ? props.type
            : 'text'
        }
        className={`w-[21.875rem] h-[3.625rem] px-5 py-4 bg-white rounded-md border border-${errorMessageColor} pt-8`}
        onChange={handleChange}
        onBlur={handleBlur}
        placeholder={placeholder}
      />
      {props.type === 'password' && (
        <img
          className="absolute pt-10 right-3 cursor-pointer "
          src={`/icons/btn_visibility_${visibility ? 'on' : 'off'}.svg`}
          onClick={handleVisibility}
        />
      )}
      <div className={`text-${errorMessageColor} text-xs`}>{errorMessage}</div>
    </label>
)

참고로, 해당 컴포넌트는 email과 함께 사용하다보니 type에 따라 따로 구분해두었다.

Css

전체적으로 감싸주는 label에 relative를 주고, 기준이 될 가로값을 넣어주었다.

눈 아이콘 img에 absolute를 주어 고정을 시키고, 위쪽 패딩과 오른쪽부분을 띄워서 적당한 위치에 배치해줬다. 

visibility 보임 여부

visibility 상태 값에 따라 type을  text 혹은 props.type(password)로 받아 반영해주고 있다.

visibility의 초깃값은 false로 해서 true인 경우에는 on아이콘이 보이고, false일 땐 off아이콘이 보이도록 했다.

따로 버튼으로 감싸주지 않고, class에 susor-pointer를 주어서 손바닥 아이콘으로 변하도록 해주었다.

눈 아이콘 버튼을 누르면?

버튼을 누를 때마다 visibility값이 true, false로 상태가 변경이 되고, 

그에 따라 type이 text와 password로 변경이 되면서 비밀번호를 보였다가, 숨겼다가 할 수 있다.

이번 프로젝트때 zod를 처음 접하게 되었다.

zod를 사용하면 스키마 선언을 해서 유효성 검사를 할 수 있는 라이브러리이다.

이메일 검증을 할 때 복잡하게 따로 정규식을 넣지 않고 간편하게 가능한 장점이 있다. 

라이브러리다보니 설치는 필요하다.

npm install zod
npm i zod react-hook-form @hookform/resolvers

공식문서에서 설치는 위에껄로 하면 된다 써있는데, 

react-hook-form을 사용할 예정이면 아래거 설치 해야한다고 해서 난 결국 둘 다 했다.

사용 방법

import { z } from 'zod';

이렇게 상단에서 zod를 가져와주고

// 이메일 스키마 정의
const EmailSchema = z.string().email();

이메일 스키마를 정의 해준다.

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  try {
    const validatedEmail = EmailSchema.parse(e.target.value);
    console.log('Valid email : ', validatedEmail);
  } catch (error) {
   setErrorMessage('잘못된 이메일입니다.');
   setErrorMessageColor('red100');
  }
};

나는 react + Ts 사용중이고, 

이메일을 적는 input의 값이 변경 될 때, 해당 값을 체크해서 

오류가 없는 경우 콘솔로 기재한 이메일을 보여주고, 

이메일 형식이 맞지 않는 경우 에러메시지와 색상 상태를 업데이트 하도록 해주었다.

만들어진 정규식이 물론 있지만, 괜찮은것을 찾아야 하고..

@넣고 . 넣어야 하고 등등 복잡한 것을 쉽게 할 수 있어 좋다.

물론, zod는 이메일만 검증해주는 것이 아니라 텍스트 수 제한, 숫자 제한 등

다양한 검증이 가능하고, 내가 위에 정의한 스키마는 단순히 이메일형식만 체크했지만,

이메일에 들어가는 단어수 등 디테일한 검증도 가능하고, 오류시의 메시지 설정까지 가능하다.

차차 검증이 필요한 부분도 반영해봐야겠다.

zod공식문서는 아래~

https://zod.dev/?id=table-of-contents

react + next + ts 를 사용해서 프로젝트를 진행하는데, 

수정사항을 적용해도 새로고침이 되지 않았다.

서버를 껐다가 켜면 반영이 되는데, 즉각 반영이 되지 않아 매우 답답하던 찰나.

동일한 오류가 많지도 않은데, 환경셋팅에 문제가 있나 싶어 

버전도 바꾸고 명령어 추가도 하는 등 다양하게 해봤으나 장렬히 실패.

윈도우에서 발생되었다고, 맥으로 바꾸고 싶다는 글도 수두룩 했으나,

아주 억울하게도 난 맥 사용자..........

나의 케이스

엄청난 곳에서 발생이 된 것도 아니었다.

그냥 환경 셋팅 후 기본으로 뜨는 페이지에 새로 생성한 컴포넌트를 추가 하고 싶을 뿐이었다.

import를 해서 추가를 하고 실행을 했는데, npm run dev를 할 때만 일시적으로 반영이 되고

이후 컴포넌트의 수정 반영이 되지 않았다.

해결방법

대소문자 문제라는 글도 언뜻 봤지만, 내가 새로 만든 컴포넌트엔 진짜 별게 들어있지 않기에

대소문자 실수 역시 발견할 수 없었는데..

어이없게도 새로 만든 컴포넌트를 import해올 때 대소문자 실수가 있었다...

Input인데 input이라 작성했고, 오류도 발생되지 않는데다가..

처음 실행시엔 Input컴포넌트를 잘 불러왔기 때문에 이곳이라 생각할 수 없었다. 

진짜 별 것도 아닌데 시간을 날려서 너무너무 화가나지만......

똑같은 실수를 하지 않기 위해 기록해둔다 ㅠㅠ

만약 동일한 오류가 발생되었다면, 적용하려는 컴포넌트 외에도 그 컴포넌트를 import해올 때, 

대소문자 실수가 있었는지 한 체크해보자.