[TypeScript] js파일 1개 리팩토링하기

노호준·2023년 6월 1일
0

팀 프로젝트 이후 약간의 여유가 생겨 이참에 팀 프로젝트에서는 하지못했던 TS를 팀프로젝트에 적용시켜보고자 한다.

첫날인만큼 Login.js 파일 하나를 TS 적용 후 에러없이 화면에 띄우는걸 목표로 했다.

//Login.js 일부

import googleLogo from '../../../public/googleLogo.png';
import naverLogo from '../../../public/naverLogo.png';
import kakaoLogo from '../../../public/kakaoLogo.png';

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  window.scrollTo(0, 0);

  const handleSubmit = async (e:React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const response = await Axios.post('/users/login', {
        username: email,
        password,
      });
      const accessToken = response.headers['authorization'];
      const refreshToken = response.headers['refresh'];
      localStorage.setItem('accessToken', accessToken);
      const date = new Date();
      //쿠키 만료시간 7일뒤
      date.setDate(date.getDate() + 7);
      document.cookie = `refreshToken=${refreshToken}; expires=${date.toUTCString()}; path=/`;
      alert('로그인 성공!');
      navigate('/');
      dispatch(login());
    } catch (error) {
      alert('로그인에 실패했습니다! Email과 Password를 다시 확인해주세요.');
      console.error(error);
    }
  };
  1. ts, ts-loader 설치
    npm install typescript --save-dev
    npm install ts-loader --save-dev

  2. Login.js 수정

  • Login.js > Login.tsx 파일 확장자 변경
  • 컴포넌트의 props, state에 타입지정해야함
  • 이벤트 핸들러 함수의 매개변수에 타입을 지정해줌
// async(e) => async(e : React.FormEvent<HTMLFormElement>)
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 e.preventDefault();
 try {
 const response = await Axios.post('/users/login', {
 username: email,
 password,
 });
  1. declation.d.ts 추가
    tsx로 파일명을 바꾸니 이미지 import에 에러가 생김. 블로그 보고 해결
    https://totally-developer.tistory.com/105
  • src에 tsconfig.json 생성
  • 이미지 확장자 declare
  • webpack.config.js에 추가
  1. App.js수정
  • import Login from './page/user/Login 에서 import Login from './page/user/Login.tsx'로 변경
  1. 웹팩 설정파일에서 ts-loader추가
{
 test: /\.tsx?$/,
 use: 'ts-loader',
 exclude: /node_modules/,
}
  1. tsconfig.json 파일 생성
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "esModuleInterop": true,
        "jsx": "react"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

했더니 성공적으로 Login.tsx가 프로젝트에 변환되었다.

0개의 댓글

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN