2021-06-24 :: 로그인, 회원가입 만들기1

중복되는 부분에 대해서 custom hook을 제작한다. 쭉 쓰고 완성한 뒤 중복되는 부분을 제거하는 것을 추천한다.

사소한 차이로 중복이 아닌 경우도 있다.

 

SPA submit에서 e.preventDefault()

 

useCallback 자체가 해당 함수를 해싱해두는 것 deps의 값이 바뀔 때만 리랜더링 해준다. 성능 최적화

 

커스텀 훅 만들기

state와 input의 onChange

email과 nickname은 같은 형식을 공유한다. 이 때 custom hook을 만든다.

hooks/useInput.ts

import {Dispatch, SetStateAction, useState, useCallback } from "react";

const useInput = <T = any>(initialData: T): [T, (e:any) =>void, Dispatch<SetStateAction<T>>] => {
    const [value, setValue] = useState(initialData);
    const handler = useCallback(e => {
        setValue(e.target.value);
    }, []);
    return [value, handler, setValue];
};

export default useInput;

 ts generic 사용 재너릭은 타입에 대한 변수

ts는 가독성이 안좋음. 타입에 대한것도 변수로 뺄 수 있다.

안정성이 늘어난다.

뒤에 :는 반환값 타입

index.tsx

  const [email, onChangeEmail] = useInput('');
  const [nickname, onChangeNickname] = useInput('');

axios로 요청 보내기와 CORS, proxy

server에 데이터 보내기

redux를 안쓴다. 전체적인 상태관리와 비동기 처리를 thunk나 saga로 처리했다. 비동기 로직과 컴포넌트의 분리가 장점이였다.

회원가입과 같이 하나의 컴포넌트에서만 사용되는 비동기 코드는 괜히 리덕스로 넘기면 코드가 길어진다.

리덕스의 단점은 코드가 길어진다는 점. 그러니까 깔끔한 코드를 위해 그냥 내부에 같이 쓰자

axios
  .post('/api/users', { email, nickname, password })
  .then(() => {
    setSignUpSuccess(true);
  })
  .catch((error) => {
    setSignUpError(error.response?.data?.statusCode === 403);
  });

성공하든 실패하든 공통 처리는 .finally로 하면 된다. promise에 새로 생김

post메서드의 두번째 인자로 요청의 body를 담아준다. 

서버에 요청 보낼 때는 network탭을 먼저 보자. header의 의미는 프론트앤드 개발자도 다 알아야한다.

 

network 탭을 보면 post요청만 해도 option도 같이 진행된다. 프론트와 백의 포트번호가 다르다면 CORS에 걸림. 이에 대한 정보가 option가 필요하다. 백앤드 개발자가 설정을 해주어야 한다. 해결 방법에는 두 가지가 있다.

백앤드에서 해결하는 방법, 프론트에서 해결하는 방법

webpack-dev-server에서 proxy 서버를 통해 해결가능하다. proxy 서버를 다음과 같이 지정하면 문제해결 가능하다.

proxy: {
  '/api/': {
    target: 'http://localhost:3095',
    changeOrigin: true,
  },

webpack.config를 변경할 때는 다시 서버를 시작해주어야 한다.

서로 다른 origin 간의 통신에는 option역시 필요하다. 하지만 proxy 서버를 통해 같은 domain, origin에서 보낸거라면 option이 뜨지 않는다. 둘 다 로컬호스트일 때 편하게 해결 가능

 

화면에 보여주는 데이터는 항상 state로 관리하기

err.response.data로 실패시 받은 응답에 대해 접근할 수 있다.

각 error상황 역시 boolean 타입의 state로 관리한다. (실패, 성공 둘 다 만들어서 관리)

 

input값을 연달아 전송할 때, 성공 또는 실패에 대한 state를 초기화 해두지 않으면 이전 요청으로부터 간섭을 받을 수 있다.

비동기는 loading-success-failure 3단계로 관리한다.