React Native를 이용한 사이드 프로젝트 만들기 -8. 오랜만의 수정 또 수정 (with 오늘의 그림일기)

예전에 만든 그림일기라는 프로젝트가 있었다.

rn 시작할때 만든 프로젝트였는데, 최근에 기억이 나 들어가보니 생각보다 사람들이 써줘서 약 1년? 만에 조금 손보았다.

https://kunkunwoo.tistory.com/253

React Native를 이용한 사이드 프로젝트 만들기 -7. 감동실화 app store 2전 3기

---

마음아팠던 글ㅠ

죄송..

계속 이 글이 마음이 걸려서 전체적으로 다 수정하였다!

---

수정사항

1. drawing 페이지

이번에 svg drawing(vector)방식으로 변경하였다. 하지만, 기존 일기들은 raster 방식이므로 호환성을 고려해야해서 고민끝에 두가지 페이지를 분기를 태워서 routing하는 방향으로 수정하였다. 

 

그에 따라서 다른 일기를 보여주는 페이지들도 다 분기로직을 추가해줬다. ㅠ 

왼쪽이 새로운 drawing 페이지, 오른쪽이 개선된 기존 drawing 페이지 이다.

 

3. 이미지 비율버그 수정

이미지 비율을 맞추지 않고 그냥 눈대중으로 개발했던거 같은데..(미친 내자신..)

ㅠ

아무튼 수정했다... 모두 하드코딩되어있었어서 정말 귀찮았다.ㅋㅋ

 

4. 재미있는 로티 애니메이션들 추가

이 앱에는 로티애니메이션을 선택하는식으로 날씨를 고른다. 고치는김에 재미있는 애니메이션을 몇개 추가하면 좋을거 같아 추가했다!

ㅋㅋ

4. ui & ux 개선

1) 폰트 변경

가시성이 좋은 pretendard로 폰트를 바꿨다.

 

2) 전체적인 폰트사이즈 다듬기

둘쑥날쑥한 폰트사이즈를 다듬었다.

 

3) toast message를 적절하게 추가

일기 추가, 일기 저장, 일기 삭제 등등 action 마다 적절한 toast message를 추가했다.

 

5. refactoring

view와 logic이 하나도 분리되어있지 않고 + 그외에도 logic이 더러움 + 주석없음ㅠ 의 문제가 있었다.

 

그래서 저 위의 수정사항을 진행하면서 만졌던 script들은 모두 view, logic을 분리하고 logic들을 가시성 있게 코드를 바꾸고 주석을 달았다.

---

 

시연영상

https://www.youtube.com/shorts/BJgesYDU2Uk

 

시연영상

 

---

아쉬운 사항들

svg drawing 방식으로 바꾸면서 생기는 단점이 있는데

- long latency로 그림을 그릴때 느려짐

- 지우개로 특정부분만 지우는 기능이 아직 없음

 

지우개로 특정부분만 지우는 기능은 clip or mask 를 사용해서 구현할수 있을거 같지만, long term으로 그림을 그릴때 느려지는 현상은.. 음.. 해결하기가 힘들것 같다 ㅠ