[토이프로젝트] today-woozoo 제작기 (2/2) - 이미지 로딩처리, 번역모듈 부착

이 글은 나의 토이프로젝트 제작기를 정리하는 글이다.

왜 만들때 안하고 이제 하냐면 이런 스토리가 있다...

뭐냐면...

 

[토이프로젝트] today-woozoo 제작기 (1) - 리덕스 툴킷 (Redux Toolkit)

 

여따 써놓았읍니다.

---

<제작기 (2): 이미지 로딩처리, 번역모듈>

 

얼추 레이아웃을 잡고 NASA API를 연결해서 데이터를 불러와 이미지를 띄우는 것까진 했는데...걸리적거리는 문제가 있었다.

 

로딩 기다리다 나이먹겄슈

그리고 이미지를 화면에 표출할때 이미지 크기가 크면 천천히 화면에 표출되는 문제가 있었다.

 

이걸 해결하기 위해 내가 생각한 방법은 이미지가 전부 load 되기 전까지 사용자에게 '로딩중' 이라는 인지를 주는 것이었다.

그래서 어떻게 해야 조금 더 가볍고 재밌게 로딩 중임을 표현 할 수 있을까 하고 알아보다가

전에 윤선이와 알아봤던 Lottie (로티, LottieFiles) 라는 애니메이션 플랫폼이 생각났다.

 

Free Lottie Animation Files, Tools & Plugins - LottieFiles

로티는 애니메이션 데이터를 JSON화하여 여러 방식으로 응용가능하게 해주는 플랫폼인데

사이트에서 원하는 Asset을 선택하면 세부 옵션을 선택 할 수 있고 그 옵션에 맞는 JSON을 생성해준다.

그 JSON을 가져다 쓰기만 하면 웹에서 손쉽게 재미난 애니메이션을 표출 할 수 있게된다.

애니메이션 '플랫폼'답게 HTML 외에 여러 플랫폼과의 호환을 지원한다.

(리액트에서는 React-Lottie라는 라이브러리를 사용하여 표출하면 된다.)

 

 

그래서 난 이렇게 고양이를 돌려주었다.

음...어지러운고냥

 

---

와~ 완성~

인줄 알았는데 생각해보니까 거슬리는게 또 있슴

NASA API 호출 결과

뭐래는거임

 

그렇다.

난 가볍게 우주사진을 보면서 응 그렇구나 하고 보고 싶은데 영어로 써져있으면 왠지 해석해야 할 것 같고...

그래서 번역 모듈을 달아보기로 했다.

구글 API는 유료고, 파파고 API는 무료로 사용(제한있음)이 가능해서 파파고 API를 사용하고자 했다.

이왕 파파고 API 쓰는거 Node.js로 모듈을 구현해보자 싶어서 Node.js를 붙였다.

그래서 사이트의 데이터 호출 프로세스가 조금 바뀌게 됐다.

기존에는 웹(리액트)에서 API를 직접 호출하고, 반환받은 결과를 이용해 표출하는 방식이었는데 Node.js가 추가되면서

 

1. 리액트에서 NASA API를 호출하고, 노드는 번역만 수행

2. 노드에서 NASA API 호출과 번역을 모두 수행

 

두가지 선택지가 있었는데

위와 같은 방식으로 변경하게 되었다.

 

와~ 완성~

인줄 알았는데 여기까지 왔더니 좀 욕심이 난다.

 

파파고는 무료로 사용하게되면 일일 번역글자수 제한이 있다.

하루 1만자까지 무료로 제공되는데 위에 API 호출 결과에서 description이 총 몇 자냐면

공백 포함 1,019자다. 당연하겠지만 파파고에서는 공백을 포함하여 카운팅한다.

그렇다면 10번만 호출해도 번역 글자수 제한을 넘어가버린다는 것이여...

파파고 결제가 가장 쉬운 해답이라고 생각한다.

그렇지만 결제를 하더라도 번역가능 글자수가 늘어날 뿐 파파고 번역 제한이 사라지는 것이 아니다.

 

그래서 아래와 같은 간단한 로직을 넣어 두었다.

 

DB에서 호출한 날짜에 해당하는 데이터가 있는지 조회

-> 데이터가 없다면, 번역을 진행하고 DB에 데이터를 INSERT

-> 데이터가 있다면 DB에서 해당 일자에 해당하는 데이터를 가져온다.

 

정리하면 한번이라도 파파고API로 번역된 날짜의 데이터는 번역모듈을 타지않고 DB에 저장된 데이터를 사용한다.

 

와! 간단!

 

---

이번에 토이 프로젝트를 하면서 중점을 뒀던 부분들은 이랬다.

 

1. 간단한 것

2. 복잡하지않은 것

3. 가벼운 내용

 

새로운 기술을 공부하려고 토이 프로젝트를 시작하면 그 기술을 쓰는데 바빠 결과적으로는 간단한걸 어렵게 만들게 됐다.

너무 복잡하고 어려운 주제를 선정해서 토이 프로젝트를 진행하다보면 제대로 끝마치지 못하는 경우가 너무 많았다.

그리고 내 흥미에서 시작된 아이템(우주라던지)이었으면 했다.

꼭 대단하고 어떤 도움을 주는 것만이 가치있는 프로젝트는 아니니까...

 

 

 

TODAY WOOZOO

 

2024년 3월 추가

 

이제 더이상 번역 모듈이 동작하지 않는다.

왜냐하면 파파고가 날 버렸기 때문이다.

 

 

흑흑 네이버가 나한테 토이프로젝트 못만들게하려고 종료시켰다

이건 분명 내 앞길을 막으려는 네이버의 움직임...

아님말구