[대충메모] 첫 React Native 앱 개발기

sohyoeun·2023년 7월 10일

시작 🚀

올해 상반기에는 새로운 것들을 많이 시도해봤다. 가장 큰 변화는 학교 컴퓨터 중앙동아리에 들어간 것이었다. 동아리에서 스터디 2개와 프로젝트 1개에 참여했는데, 덕분에 대학 입학 후 처음으로 '보람있다'는 느낌이 드는 한 학기를 보냈다. 어떤 활동으로 뭔가를 얻어도 시간이 지나면서 너무 금방 잊어버리는 것 같아서 이제부터는 간략하게나마 기록을 남겨보려고 한다.

React Native 스터디 📚

사실 올해 초만 해도 RN을 공부해볼 생각은 전혀 없었다. 작년에 건드려봤던 Kotlin과 안드로이드를 좀 더 제대로 파보거나, 요즘 뜨고 있다는 Flutter를 새로 공부해볼 생각이었다.

그래서 동아리 스터디 신청 기간에도 앱 관련 스터디들 위주로 살펴봤다. 이번 학기에 열린 앱 스터디들은 대부분 강의를 들으면서 매주 돌아가면서 내용을 정리 및 발표하는 방식이었는데, 내가 원하던 것과는 거리가 있어보였다. 딱 하나, 한 학기 동안 각자 원하는 앱을 완성해보자는 취지의 스터디가 있었는데 그게 RN 스터디였다. RN에는 관심이 없었지만 재밌고 얻어갈 것도 많아보여서 결국 이 스터디를 신청했다. (그런데 신청한 사람이 나밖에 없어서 스터디장과 둘이서 하게 됐다.)

스터디장은 React도 쓸 줄 알고 프로젝트 경험도 있는 분이었다. 반면 나는 React는 커녕 이제 막 HTML, CSS를 공부하기 시작하는 단계였고 Javascript와 React가 뭔지조차 모르는 상태였다. 그래서 초반에는 클론코딩 강의를 들으면서 거의 1:1 과외를 받듯이 스터디를 진행했던 것 같다. 웹 기초가 없는 상태에서 RN을 공부하다보니 내가 배운 내용이 JS인지 React인지 RN인지 구분이 안 가서 혼란스러웠던 기억이 난다.

다행히 다른 스터디와 전공수업에서 웹 기초를 다룬 덕분에 중간고사 이후로는 이 셋의 개념을 어느 정도 구분할 수 있게 됐다. 자연스레 RN에 대한 이해도도 높아졌다. 그 무렵 강의를 완강하고 드디어 '나만의 앱 만들기'를 시작했다.

대충메모 개발 현황 📝

구상 💡

각자 어떤 앱을 만들고 싶은지는 스터디 첫날에 구상해오기로 했었다. 나는 RN과 관련해서는 경험이 전혀 없었으므로 부담없이 만들 수 있을 것 같은 간단한 메모 앱을 생각했다. 맨 처음 앱을 구상할 때는 '작성, 수정, 삭제가 빠르고 편한' 것이 포인트였는데 지금 보니 이 부분이 잘 구현된 것 같지는 않아서 아쉽다. 그래도 처음으로 '완성된' 앱을 만들어볼 수 있겠다는 생각에 꽤 신났던 것 같다. 수업을 듣다가 졸리면 아이패드로 와이어프레임이랍시고 이런 걸 그려보곤 했었다. 물론 개발하면서 바뀐 기능이나 디자인도 많고, 아직 구현하지 못한 기능들도 있다.

개발 💻

개발 초반에는 깃이나 깃허브 사용도 미숙하고, expo snack 사이트에서 코드 짜는 게 편해서 중간 과정 기록이 거의 없다. 최근에야 커밋을 자주 남기는 것에 익숙해졌다. 초반에 만든 부분은 어떤 과정과 시행착오를 거쳤는지 기억이 잘 안 나기 때문에😅 지금까지 구현된 화면과 기능들에 대해 간단히 소개만 해보려고 한다.

메인 화면

작성한 메모들을 목록 형태로 볼 수 있다
제목/내용으로 메모를 검색할 수 있다
메모 블록 또는 메모 작성 버튼을 터치해 메모 화면으로 이동할 수 있다
메모 블록의 핀(pin) 아이콘을 터치해 메모를 고정하거나 고정 해제할 수 있다
메모 블록을 길게 터치해 메모를 삭제할 수 있다

가장 먼저 만들기 시작한 화면이다. 강의에서 클론코딩했던 투두리스트 앱과 비슷한 면이 많아서 강의를 많이 참고했다. 이때 내가 간과한 것이 있었는데, 내가 만들 앱은 기능이 좀 더 복잡하고 화면 개수도 많다는 점이었다.

서로 다른 파일에 컴포넌트를 만들어 한 화면에서 사용하는 법을 몰랐던 나는 메인 화면의 모든 걸 파일 1개에 다 넣으려고 했고, 그 결과... 600줄짜리 코드가 생겼다. 그때서야 '이거 좀 이상하다'는 생각이 들어 컴포넌트 분리하는 법을 찾아보고 적용했었다. 컴포넌트 설계에 대해서는 지금도 아는 게 별로 없어서 이번 방학에 제대로 공부해본 뒤 다시 한번 적용해볼 생각이다.

메모 화면

새로운 메모를 작성하거나 기존의 메모를 수정할 수 있다
우측 상단 아이콘을 터치해 메모의 고정, 잠금 상태를 변경하거나 메모를 삭제할 수 있다

이 화면은 현재 작은 오류가 있어서(메모를 수정하면 날짜가 오늘 날짜로 변경되도록 하고 싶었는데, 메모에 들어가기만 해도 날짜가 변경된다) 수정할 예정이다. 디자인을 많이 고민했는데 나름 깔끔하게 잘 뽑힌 것 같아서 만족스럽다.

메뉴 화면

로그인 상태와 사용자 이메일 정보를 확인할 수 있다
현재 기기에 작성된 메모들을 백업할 수 있다
메모 잠금에 사용되는 PIN을 설정할 수 있다

처음 앱을 구상할 때는 메뉴를 사이드바로 구현할 생각이었다. 하지만 막상 만들기 시작하니 사이드바에는 디자인을 예쁘게 넣기 어려울 것 같아서 그냥 화면을 따로 만들었다. 디자인도 원래 항목들을 계정/설정으로 나누지 않고 각 줄에 아이콘을 하나씩 넣어줬다가, 갑자기 메인 화면과 안 어울린다는 생각이 들어 갈아엎어서 지금의 디자인이 됐다. 훨씬 통일감 있어보여서 마음에 든다. 최근까지 거의 UI만 만들어뒀다가 며칠 전에야 로그인과 백업 기능을 구현했다. (설정의 테마, 글꼴 항목은 허전해서 넣어놨는데... 아무런 기능도 없다.)

메모 잠금 기능

(실제로는 입력칸이랑 키보드도 있는데, 인풋필드의 secureTextEntry 속성 때문에 캡쳐화면에는 안 보이는 것 같다)

메인 화면에서 제목 옆에 자물쇠 아이콘이 있는 메모들이 있는데, 이걸 누르면 메모 화면으로 이동하기 전에 PIN을 입력하는 화면이 나오도록 만들었다. 이 PIN은 '메뉴 - 설정 - PIN 설정'에서 설정 및 변경할 수 있다. 아직 PIN을 설정하지 않은 상태에서 잠긴 메모를 누르면 자동으로 PIN 설정 화면으로 먼저 이동한다. 사진에는 없는데 비밀번호를 틀리면 틀렸다는 메세지가 표시되고 다시 입력해야 한다.

Firebase 인증 및 백업

Firebase의 인증(Authentication)과 실시간 데이터베이스(Realtime Database), 두 가지를 사용했다.

인증으로는 이메일로 회원가입, 로그인, 로그아웃하는 기능을 구현했다. 이 글을 쓰다 생각난 건데 이메일과 비밀번호를 입력하면 인증없이 바로 회원가입이 되도록 만든 것 같다. 이메일 인증을 추가해야겠다. 추후에 이메일 변경, 비밀번호 재설정 기능도 추가할 예정이다.

실시간 데이터베이스로는 메모 백업 및 동기화 기능을 구현했다. 전에 사용해본 경험도 있었고 메모들을 업로드/다운로드하기만 하면 되는 단순한 작업이라 비교적 수월했다. 현재 백업은 메뉴 화면에서 언제든 할 수 있지만 백업 데이터 다운로드는 로그인 직후 딱 한 번만 할 수 있도록 만들어놨기 때문에 여러 기기에서 동시에 사용할 수는 없다. 상시 백업 및 동기화가 가능하려면 기기에서 메모를 수정하는 즉시 서버에 업로드되도록 해야 할 것 같은데... 뭔가 복잡할 것 같아서 미뤄둔 상태다. 이것도 추후 업그레이드 예정이다.

사실 처음 연동하고 지금까지 API 키를 비롯한 정보들을 그대로 깃허브에 올려뒀었다. 그런데 다행히도 최근 다른 프로젝트를 하다가 팀원 분이 API 키를 깃허브에 그대로 올리면 안된다는 사실을 알려주셨다. 그래서 오늘 파베 프로젝트를 아예 새로 파서 중요 정보들은 env 파일에 따로 저장하는 방식으로 수정했다. 아래 블로그 글을 참고했다.
👉 [RN] React Native/Typescript 환경에서 env 파일 사용하는 방법

시스템 테마 적용 기능

평소에 폰에서 다크모드를 자주 쓰는 편이라 어두운 테마를 꼭 만들어보고 싶었다. 검색해보니 몇 가지 방법이 있었는데 시행착오 끝에 그나마 간단해보이는 useColorScheme과 react navigation의 useTheme을 사용해서 구현했다. 밝게/어둡게를 선택할 수는 없고 시스템 설정을 따라가는 방식이다. 앱 내에서 테마를 선택해서 적용하는 것도 가능할 것 같아서 나중에 시도해볼 생각이다.

이 기능을 구현하면서 color를 일일이 style 속성으로 넣어줘야 했는데, 덕분에 코드가 꽤나 지저분하고 수정이 번거로워졌다. styled component와 함께 사용할 수 있는 방법을 찾아봐야겠다.

마무리 ⚙️

확실히 개발 실력은 실제로 뭔가 만들어보면서 직접 부딪혀볼 때 빠르게 느는 것 같다. 하지만 단순히 부딪히는 것만으로는 터득하기 어려운 부분들도 있다는 걸 이번 경험으로 알게 됐다. RN 스터디는 끝났지만 이 앱은 아직 부족한 부분이 많기 때문에 앞으로도 공부하면서 글에서 언급한 것들을 하나씩 개선해나갈 계획이다.