개인프로젝트: VarGen(6)-배포

윤뿔소·2023년 3월 28일
1

개인프로젝트: VarGen

목록 보기
13/15

일단 먼저 로딩이 되긴 하지만 로딩이 Loading... 이 모양 이따구라 바꿔야된다..! 진짜다!! 그래서 바꾸고 netlify로 배포하겠다.

로딩 컴포넌트 구현

일단 나는 그냥 아무런 애니메이션 없으면 로딩 컴포넌트 자체가 보이는 게 꼴보기 싫다. 그래서 애니메이션이라도 취해서 최면을 통해 그 기다리는 시간 마저도심심하지 않게 기다리게 만들어야한다. 그래서 애니메이션을 가져올 거시다.

그 중 json으로 애니메이션을 구현하는 Lottie 애니메이션 라이브러리를 이용할 거시다!

Lottie

json을 가지고 이미지로 구현해주는 라이브러리다.

이걸 왜 쓰냐면 png, jpg보다 압도적으로 파일 크기가 작아서 가볍고, 벡터에 기반하기 때문에 자유로운 크기 조정이 가능하고, 깨지지 않는다. 또 json 형태라 우리도 읽을 수 있는 형태로 관리도 가능하다. 제작도 쉽다고 하는데 제작은 내 영역이 아니라 패쓰. 하겠다!

사용법

참고: lottie player 깃헙

1. 라이브러리 설치

설치부터 해야겠지?

npm install --save react-lottie-player

2. 컴포넌트 제작

컴포넌트 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 }} />;
}

3. 적절한 곳에 배치

나는 ChatResponse.tsx의 결괏값 받는 곳에 로딩컴포넌트를 넣었다.

if (isLoading || isFetching)
  return (
    <section className="flex justify-center mt-5">
      <Loading />
    </section>
  );

짠! 이제 결과물을 보자.

완전 이쁘다! 이제 배포해보자.

Netlify 배포하기

netlify는 vercel과 마찬가지로 배포툴인데, vercel처럼 무료다! 그래서 써보는 거시외다.

그래서 그런지 vercel과 똑같다.

  1. 회원가입하고
  2. 자기 팀으로 들어간 다음
  3. Sites 탭으로 들어가 Add new sites 하고,
  4. 깃헙 연동해서 깃헙 레포지토리를 가져온 다음
  5. 환경 변수 있다면 환경변수 설정한 다음
  6. Deploy 하면 끝이다 ㅋㅋㅋ

너무너무 쉽게 돼서 이게 맞나 싶지만 맞다 ㅋㅋㅋ

결과!

배포 결과물: 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 못생겨서 싫은데 쩔 수 없다.

이제 진짜 끝!

profile
코뿔소처럼 저돌적으로

6개의 댓글

comment-user-thumbnail
2023년 3월 31일

헐.. 유료였군요 한 다섯번 좀넘게 쓴거 같은데... ㅎㅎ
잘만드셨어요 수고하셨습니다!

답글 달기
comment-user-thumbnail
2023년 3월 31일

lottie는 처음 보네요 !! 수고하셨습니다 !

답글 달기
comment-user-thumbnail
2023년 4월 2일

헛 유료 API 였습니까..ㅠㅠㅜ

답글 달기
comment-user-thumbnail
2023년 4월 2일

저도 이미 두 번은 넘게 썼는데요 ...!!! ㅋㅋㅋ

답글 달기
comment-user-thumbnail
2023년 4월 2일

헉 유료였나용..?ㅠㅠ근데 잘만드셨어요 고생하셨숩니다아

답글 달기
comment-user-thumbnail
2023년 4월 2일

버셀 쵝오!

답글 달기