[TypeScript] 회원가입 페이지 구현하기

이 글은 Slack 클론 코딩[실시간 채팅 with React] 강의의 내용을 담은 글입니다.

TypeScript에 대한 이론을 어느 정도 익히고서, 이제 TypeScript를 사용한 React 프로젝트를 진행하는 강의를 수강 중에 있다. 여기서, 내가 궁금했던 axios의 활용법을 어느정도 익히게 된 것 같아서 그 내용을 포스팅 하고자 한다.

1. axios를 활용하여 서버로 데이터 보내기(+CORS, proxy)

우선 백엔드 서버로 데이터 보내기(http://localhost:3095/api/user에 axios 활용)는, 해당하는 서버가 켜져 있어야 한다.

즉, 데이터의 흐름은 localhost:3090(리액트 서버) -> localhost:3095/api/user (백엔드 서버)로 이뤄지게 되는데, 이 경우에는 (당연히) CORS 에러가 발생한다. CORS 에러에 대해서는 아주 좋은 글이 있어서 링크로 대체한다.

 

이렇게, 서버로 데이터를 보내야 하는 상황에서 axios의 URL에 localhost:3095가 생략된 이유가 무엇일까? 이는, 웹팩 설정에서 프록시 타겟을 미리 설정해 두었기 때문이다.

프록시 설정에서, /api/에 대해 타겟을 http://localhost:3095로 설정해 두었고, changeOrigin: true 설정을 통해 CORS 에러를 피할 수 있었다.

 

아래 사진에서, 각 요구조건을 충족한 뒤에 회원가입 버튼을 누르면, Status Code 201과 함께, 만들어졌음을 확인할 수 있다.

Network 탭

Console 탭

반면에 실패했을 경우에는 (ex. 이미 사용중인 아이디인 경우)

Console 탭

위와 같은 오류를 띄울 수 있게 하였다. 이 부분은 서버 단에서 MySQL이 사용되었는데, 여기서는 프론트만 다루고 있으므로 생략하였다.

2. 슬랙 CDN 가져와서 스타일 적용하기

현재 만들고 있는 서비스는 이러한 형태를 띠고 있다. 이는 강의에 따르면 슬랙의 스타일을 100% 똑같이 가져온 것이라고 하였다. 그리고 이는 슬랙 웹페이지에서(어플리케이션 X) 개발자 도구를 통해 CDN 링크를 가져올 수 있었다.

위 코드에서,

import { Success, Form, Error, Label, Input, LinkContainer, Button, Header } from './styles';

이 부분을 통해, 슬랙의 스타일을 컴포넌트 형태로 옮겨둔 파일에서 변수 형태로 가져온 다음 각 상황에 맞게 사용하였다.

 

3. 비밀번호 확인 일치, 닉네임 입력 확인, 오류 출력 등

이 부분은 전적으로 2번의 Error와 Success에 의존하였다. useInput이라는 Custom Hook을 만들어서 

input에 입력한 e.target.value를 setValue를 통해 값으로 설정한 뒤 [변수명, set변수명, handler] 이렇게 세 개를 return하게끔 하였다. 이렇게 한 이유는, 이메일 주소부터 비밀번호 확인까지 모든 칸에 대해 입력한 값을 value로 설정하는 작업이 필요하기 때문이다. 이제 이렇게 설정한 Custom Hook을, 단지 입력한 값을 value로만 설정하면 되는 이메일, 닉네임에 대해서는 useInput Hook을 불러오기만 함으로써 코드 간소화를 할 수 있었다.

  const [email, onChangeEmail] = useInput('');
  const [nickname, onChangeNickname] = useInput('');
  // email, nickname 중복 -> 커스텀훅으로 제거

그 다음, mismatchError(비밀번호와 비밀번호 확인이 일치하지 않음)가 발생했을 경우 비밀번호가 일치하지 않습니다. 라는 alert를 띄우고 nickname 변수로 설정한 닉네임의 값이 없을 경우(!nickname)에도 닉네임을 입력해주세요. 라는 alert를 띄우게 하였다.