나는 영양제를 매일 먹는다. 친구들과 비교해보면 많이 먹는 편이다.
알약으론 종합 비타민, 비타민D, 오메가3 코큐텐, 알파리포산, 마그네슘, 밀크시슬
가루론 크레아틴, 아르기닌
총 9개를 먹는데 이 중 알파리포산과 아르기닌은 공복에 먹고 나머지는 식후에 먹고 있다.
이러다보니 까먹고 안먹는 날도 있고 심지어는 먹어놓고 '내가 오늘 영양제를 먹었나?' 라며 햇갈려하기도 한다.
이런 나를 위해 앱스토어에서 영양제 알람 앱을 찾아봤는데.......
뭔가.... 뭔가.... 뭔가 맘에 쏙 드는 앱이 없음.....
하~~ 이 많고 많은 앱중에 맘에 드는 앱이 없냐~
이런 나의 머릿속에 누군가의 명언이 생각났다
"답답하면 너희들이 가서 뛰던지"
오케이, 영양제 알람 개발일지 바로 시작
알람 기능을 사용하기 위해 웹앱이 아닌 네이티브앱으로 개발을 하기로 했다.
지금까지 TypeScript를 사용해본 적이 없는데 이번 기회에 잘 됐다고 생각하며 초기 세팅을 시작을 했다.
일단 node.js 공홈으로 이동하여 설치해줬다.
그 후엔 리액트 네이티브 공홈으로 이동해서 설명서(?)를 읽고 vs코드를 켜서 프로젝트를 생성해주었다.
npx create-expo-app@latest
처음 다뤄보는 새로운 언어로 개발을 하려니 설레기도 하고 걱정되기도 한다.
많은 에러와 만날것이고 개발속도도 굉장히 느리겠지.....
하지만
나에겐 든든한 아군이 있다
프로젝트를 생성하자 터미널에 qr코드가 나왔고 Expo go 라는 것으로 인식을 하면 프로젝트가 켜진다
스토어로 가서 Expo go를 다운받고 qr코드를 인식하니까 실행됐다.
(이때 신기해서 오.... 라며 감탄했음)
일단 처음 만들어지진 기본 프로젝트에 있는 .tsx 파일을 열어서 안에 있는 TypeScript를 분석하기로 하고 코드를 본 순간
진짜 이 사진의 푸와 100% 똑같은 반응을 보였다.
"자... 보자.... 어.... 그러니까.... 이게...... 어......."
보는 순간 어지러웠다.
적어도 '아 이건 html에서 사용하던 이거랑 비슷한 기능이구나~' 라는 감이라도 잡힐 줄 알았으나
말그대로 '아무것도 모르겠는데?' 라는 말이 딱 맞았다.
소스들을 복붙해서 ai한테 정말 하나하나 다 물어봤다
이것의 의미는 뭐야? 이거입니다
저것의 의미는 뭐야? 저거입니다
요것의 의미는 뭐야? 요거입니다
..
..
..
..
..
개발 전 설계단계에서 ppt로 그려본 메인 화면은
이런 느낌을 생각했다. 아래탭은 3개로 정했고, '이번주' 탭에 대해 설명을 하자면
오늘 요일을 기준으로 하여 한주의 날짜와 요일이 나오고 그 날 먹어야될(=등록된) 약들이 나온다
물론 다른 요일을 누르면 해당 요일에 대한 정보가 나오고 요일을 넘어서 다른 날짜를 보고싶다면 위의 캘린더 버튼을 눌러서 볼 수 있다
알람시간, 체크박스,등록한 약이름의 정보가 담긴 카드섹션들이 나오고
카드센션을 눌러 약을 수정,삭제 할 수 있고 하단의 초록색 +버튼으로는 약을 추가만 할 수 있다
일단 첫번째 목표를 이 '이번주' 탭의 퍼블리싱을 완성하는거였다
퍼블리싱은 꽤 오래걸릴것이고, 완성되기만 하면 백엔드 개발은 생각보다 순탄히 진행될것이라 예상을 했다.
그렇게 정말 천천히, 느리게, 조금씩이지만 앞으로 나아갔고
이 정도까지의 퍼블을 완성했고 스프링부트와도 정상적으로 연결된 것까지 테스트를 마쳤다.
테스트 방식은 버튼 하나 누르면 백엔드에 작성한 api를 호출하게 했다
위에서 expo go를 쓰던 내가 왜 갑자기 Android Studio를 쓰게됐는지,
가장 오래 걸렸던 퍼블리싱,
스프링부트와 백엔드 연동,
테이블 구조,
처음 하는 jsx 환경에서의 이해
등등....
개발적인 부분에 대해선 다음 화부터.....
'개발일지 > 영양제알람 모바일 앱' 카테고리의 다른 글
| -2- 영양제알람(supplementsAlarm) 모바일 앱 개발일지 (0) | 2026.09.16 |
|---|
댓글