[졸업프로젝트] React + TypeScript로 변환 - 1

krkorklo·2022년 1월 24일

typescript 졸업프로젝트

졸업프로젝트

목록 보기

2/7

JavaScript코드를 TypeScript로 변환하기로 결정
패기있게 결정했는데 괜히 한 것 같음
일단 열심히 해보기로...

기본 설정

npm install --save typescript @types/react @types/node @types/react-dom
다른 JavaScript 라이브러리 @types/라이브러리로 설치
.js 파일 .ts로 변경

이때부터 오류지옥에 빠지기 시작함

겪었던 오류들

1. dispatch.then() 사용 불가

로그인하거나 회원가입 할 때 dispatch로 함수 호출하고 처리했는데 then 사용이 안 된다고 한다. 나중에 redux 코드 변환하면서 이거 처리하는 방법도 다시 생각해봐야 할듯... 일단 지금은 주석처리ㅎ

2. 'Container'은(는) 값을 참조하지만, 여기서는 형식으로 사용되고 있습니다.

// Login.ts
import styled from 'styled-components';

const Container = styled.div`
...
`

const Login = () => {
  return (
    <Container>
    	...
    </Container>
    )
}

.ts로 바꿔주자마자 오류가 났는데 이해가 안돼서 구글링
구글링하는데도 잘 안 나오길래 포기할까 생각하던 중 .tsx로 바꾸라는 글 발견 (어떤 글인지 정확히 기억이 안 남...)

❗ .tsx로 바꾸니까 해결됨
쪼금 허무했는데 일단 기분 좋게 넘어갔다. 아직 할 일이 많음

3. ChangeEventType 설정

const _handleChange = (e: any) => {
  setUser({ ...user, [e.target.name]: e.target.value });
}

처음에는 귀찮아서 any로 넣었는데 생각해보니까 너무 성의없는 것 같아서 어떤 type으로 설정해야 하는지 찾아봤다.

const _handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setUser({ ...user, [e.target.name]: e.target.value });
}

❗ React.ChangeEvent로 설정해주니까 돼더라.

4. RadioButton, File type

// MainPage.js
...
const MainPage () => {
  ...
  
  const props = {
    beforeUpload: (file) => {
      if (file.type !== "video/mp4") {
        message.error("Please upload video(mp4) file");
      } else {
        setUploadFile(file);
      }
      return file.type === "video/mp4" ? false : Upload.LIST_IGNORE;
    },
  };

  const _handleChangeLanguage = (e) => {
    setLang(e.target.value);
  };
  const _handleChangeType = (e) => {
    setType(e.target.value);
  };
}

아직 완성된 코드는 아니지만 파일 올리는 부분과 RadioButton 선택 부분이 있는데 file type과 event type을 어떻게 해야할지 고민함.

근데 생각보다 쉽게 풀림

const MainPage = () => {
  ...
  
  const props = {
    beforeUpload: (file: File) => {
      if (file.type !== "video/mp4") {
        message.error("Please upload video(mp4) file");
      } else {
        setUploadFile(file);
      }
      return file.type === "video/mp4" ? false : Upload.LIST_IGNORE;
    },
  };

  const _handleChangeLanguage = (e: RadioChangeEvent) => {
    setLang(e.target.value);
  };
  const _handleChangeType = (e: RadioChangeEvent) => {
    setType(e.target.value);
  };
}

❗ 그대로 File, RadioChangeEvent를 입력해주면 되는거였다.
아무생각없이 입력하다가 자동완성에 걸려서 얼떨결에 성공

5. video timeline 설정

// ResultPage.tsx
...

const ResultPage = () => {
  ...
  
  const _handleTimeline = (e: React.MouseEvent<HTMLParagraphElement>) => {
    const timeArr = e.target.innerText.split(":");
    if (timeArr.length === 3) {
      const hour = Number(timeArr[0]) * 3600;
      const min = Number(timeArr[1]) * 60;
      const sec = Number(timeArr[2]);
      ref.current.currentTime = hour + min + sec;
    } else {
      const min = Number(timeArr[0]) * 60;
      const sec = Number(timeArr[1]);
      ref.current.currentTime = min + sec;
    }
  };
  const _handleYoutubeTimeline = (
    e: React.MouseEvent<HTMLParagraphElement>,
  ) => {
    const timeArr = e.target.innerText.split(":");
    if (timeArr.length === 3) {
      const hour = Number(timeArr[0]) * 3600;
      const min = Number(timeArr[1]) * 60;
      const sec = Number(timeArr[2]);
      setYoutubeTime(hour + min + sec);
    } else {
      const min = Number(timeArr[0]) * 60;
      const sec = Number(timeArr[1]);
      setYoutubeTime(min + sec);
    }
  };
  ...
}

타임라인을 클릭하면 해당 시간으로 설정되도록 해뒀다.
처음에는 SelectEvent인줄 알았는데 오류가 남. 근데 친절하게 MouseEvent로 설정하라고 알려주길래 쉽게 해결했다.

6. 'EventTarget' 형식에 'innerText' 속성이 없습니다. & 개체가 'null'인 것 같습니다.

// ResultPage.tsx
...

const ResultPage = () => {
  const ref = useRef<HTMLVideoElement>();
  ...
  
  const _handleTimeline = (e: React.MouseEvent<HTMLParagraphElement>) => {
    const input = e.target as HTMLElement; // 추가!
    const timeArr = input.innerText.split(":");
    if (ref.current) {
      if (timeArr.length === 3) {
        const hour = Number(timeArr[0]) * 3600;
        const min = Number(timeArr[1]) * 60;
        const sec = Number(timeArr[2]);
        ref.current.currentTime = hour + min + sec;
      } else {
        const min = Number(timeArr[0]) * 60;
        const sec = Number(timeArr[1]);
        ref.current.currentTime = min + sec;
      }
    }
  };
  ...
}