레고마켓 만들기 우여곡절 리스트

1. 렌더링  순서이슈

const Login = () => {
    async function login() {
        const email = document.querySelector("#email").value
        const password = document.querySelector("#pw").value

        const url = "#";
        const reqPath ="/user/login";
        const loginData = {
		"user":{
				"email": email,
				"password": password
		}
}
        const res = await fetch(url+reqPath,{
            method:"POST",
            headers:{
                "Content-type" : "application/json"
            },
            body:JSON.stringify(loginData)
        })
        const json = await res.json()
        console.log(json,"제이손입니다")

}

const loginButton = document.querySelector("#login-btn");
loginButton.addEventListener("click",login);

return ( )

 login이라는  로그인버튼을 클릭하면 서버와 통신해서 로그인 가능여부를 판단하는 함수를 만들었다.

그런데 이게 동작을 할때가 있고 안할때가 있는데

const loginButton = document.querySelector("#login-btn");
loginButton.addEventListener("click",login);

이 부분이 없으면 사이트가 정상 작동하는데, 이부분을 넣고 새로고침을 하면 사이트가 뻗어버린다.

근데 또 이 부분이 없는 정상상태에서 코드를 넣으면 (새로고침X)  사이트가 정상작동을 했다.

 

작동안됨.. (새로고침)

지금은 또 됨 (새로고침X)

 

 

그 이유는새로고침을 하면 return값으로 HTML이 랜더링 되기전에 addEventListner함수가 실행되어 버리니 오류가 났던것이고,

 

이미 랜더링 된 상태에서는 addEventListener함수를 추가했을때 순서대로 오류없이 진행되었기 때문에 정상적으로 작동한것이다.

 

그러면 어떻게 고치면될까?

=>  addEventListener를 쓸 필요없이, 그냥 해당 버튼에

onClick={login}

이걸 추가하니 되었다....🤪

 

 

2. Git 사용하기

 

팀원들과 과제에대해서 코드리뷰를 해본적은 있지만, 프로젝트용으로 사용해본적은없다.

 

일단 현재 완성된버전

 

1) 공동레포 만들기

2) 파일구조 동일하게 만들기

3) 기능구현한것은 branch를 새로만들어서 Pull Request를 날린다. 

4) 팀원들이 확인한후 Develop(main)에 merge한다. 완전 완성되면 해당 branch 삭제하기

 

세부사항

1) 커밋할때 gitmoji를 사용한다.

2) 커밋 컨벤션을 사용한다.

3) 기능구현하면 커밋하기, 기능 여러개 구현하고 한번에 뭉탱이로 커밋XX

 

1) 처음엔 각자 브랜치를 만들어서 각자 개발해서 마지막에 합치려고 했었음

2) 근데 마지막에 충돌날껄 대비해서 기능 하나 개발할때마다 Develop(main)에 merge하는거로 했음 

 

3. 버튼 비활성화하기

 

로그인과 상품등록 모두에 해당하는 사항이지만, 로그인부분을 구현할때 있었던 일.

 

const [isActive, setIsActive] = useState(false);
  const isPassedLogin = () => {
    email.includes("@") && password.length > 4
      ? setIsActive(true)
      : setIsActive(false);
  };
  
  
			 <Input
              label="비밀번호"
              marginBottom={16}
              type="password"
              onChange={handlePw}
              onKeyUp={isPassedLogin}
            />
            
            
            <Button
            onClick={login}
            content="로그인"
            background={isActive ? `#F26E22` : `#FFC7A7`}
            disabled={email === '' || password === ''? true:false}
          />

처음엔 Email에 @포함, 비밀번호 4글자이상 쓰면 버튼 색상이 바뀌는 클래스를 작동시키는 방식과

Email과 비밀번호중 하나라도 비어있으면 버튼을 비활성화 하는정도만 구현을했다.

 

그런데 API서버와 통신을통해서 유효성검사를 해서 Input밑에 에러문구를 띄워줘야하는데

(Email PW 미일치, 글자수 부족)

저 방식으로는 무리였다.

 

그래서 적용한 기술은 React hook form이다.  useForm !!

장점은 state를 여러개 사용하지 않아도 되고 각각에 error handling을 하지않아도 되기에 코드의 양이 많이 줄어든다.

또한, 실시간으로 감시해서 error문구를 띄울수 있다.

실시간으로 등장한다

 

이 기술을 사용하면 register를 통해서 Input형식에 제한을 둘 수 있다. (required, maxLength, minLength, pattern, validate)

 

required는 필수값

maxLength 와 minLength는 길이를 설정한다

pattern은 입력가능 값을 설정한다 ( 영어만? 숫자만?)

validate는 개발자가 커스텀할수있다.

 

문제는 한국어문서는 잘없기때문에(있어도 구버전사용법) 공식사이트를 통해서 배워야한다..

https://react-hook-form.com/api/useform/

useForm