팀 프로젝트 이후 약간의 여유가 생겨 이참에 팀 프로젝트에서는 하지못했던 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);
}
};
ts, ts-loader 설치
npm install typescript --save-dev
npm install ts-loader --save-dev
Login.js 수정
// 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,
});
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"esModuleInterop": true,
"jsx": "react"
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
했더니 성공적으로 Login.tsx가 프로젝트에 변환되었다.