일단 먼저 로딩이 되긴 하지만 로딩이 Loading...
이 모양 이따구라 바꿔야된다..! 진짜다!! 그래서 바꾸고 netlify로 배포하겠다.
일단 나는 그냥 아무런 애니메이션 없으면 로딩 컴포넌트 자체가 보이는 게 꼴보기 싫다. 그래서 애니메이션이라도 취해서 최면을 통해 그 기다리는 시간 마저도심심하지 않게 기다리게 만들어야한다. 그래서 애니메이션을 가져올 거시다.
그 중 json으로 애니메이션을 구현하는 Lottie 애니메이션 라이브러리를 이용할 거시다!
json을 가지고 이미지로 구현해주는 라이브러리다.
이걸 왜 쓰냐면 png, jpg보다 압도적으로 파일 크기가 작아서 가볍고, 벡터에 기반하기 때문에 자유로운 크기 조정이 가능하고, 깨지지 않는다. 또 json 형태라 우리도 읽을 수 있는 형태로 관리도 가능하다. 제작도 쉽다고 하는데 제작은 내 영역이 아니라 패쓰. 하겠다!
설치부터 해야겠지?
npm install --save react-lottie-player
컴포넌트 Loading.tsx
를 따로 만들어 코드 구현하자
import React from "react";
import Lottie from "react-lottie-player";
import lottieJson from "public/loading.json";
export default function Loading() {
return <Lottie loop animationData={lottieJson} play style={{ width: 150, height: 150 }} />;
}
나는 ChatResponse.tsx
의 결괏값 받는 곳에 로딩컴포넌트를 넣었다.
if (isLoading || isFetching)
return (
<section className="flex justify-center mt-5">
<Loading />
</section>
);
짠! 이제 결과물을 보자.
완전 이쁘다! 이제 배포해보자.
netlify는 vercel과 마찬가지로 배포툴인데, vercel처럼 무료다! 그래서 써보는 거시외다.
그래서 그런지 vercel과 똑같다.
너무너무 쉽게 돼서 이게 맞나 싶지만 맞다 ㅋㅋㅋ
배포 결과물: https://vargen.netlify.app/
가서 해보시길 바란다. 이게 유료라 API 불러올때마다 내 돈이 나가긴 하는데.. 괜찮다! 써봐서 신기함을 드렸다면 그걸로 만족이다! 그것도 귀찮다면 아래 사진을 보자.
잘된다! URL 부분을 보면 netlify라고 떠있어서 배포도 됐다! 환경변수도 잘 반영이 되어있다! 혹시 사용하다가 버그나 추가 기능이 있으면 좋겠다 싶으면 댓글로 건의 달라! 최대한 반영해보겠읍니다.
길고 길었던 VarGen 여기서 마치겠다.
생각해보니 subject
인풋에 입력하지 않았다면 결괏값이 안뜨게 해야하는데 그냥 떠서 에러처리도 같이 해보자.
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
queryClient.invalidateQueries("chatResponse");
setPromptValue(
`Create ${countVariable} ${subject} related variable names with ${namingConvention}`
);
// if (inputValue !== "") {
// setPromptValue(inputValue);
// }
};
보면은 그냥 저렇게 문장이 입력돼서 원하지않는 결과가 나온다. 에러처리를 통해 막아보자.
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
queryClient.invalidateQueries("chatResponse");
if (subject !== "") {
setPromptValue(
`Create ${countVariable} ${subject} related variable names with ${namingConvention}`
);
} else {
alert("변수 생성 관련 주제를 입력해주세요!");
}
};
이렇게 하면 alert가 떠서 막아준다! alert 못생겨서 싫은데 쩔 수 없다.
이제 진짜 끝!
헐.. 유료였군요 한 다섯번 좀넘게 쓴거 같은데... ㅎㅎ
잘만드셨어요 수고하셨습니다!