앱을 직접 2주 동안 사용해봤다. 실제로 사용해보니, 개발할 때 미쳐 생각하지 못한 불편함 점, 아쉬운 점들이 보였다. 더 나은 앱을 만들기 위해 2주 동안 테스팅한 하며 느꼈던 것들을 정리하고, 개발 과정을 회고해봤다 테스팅 #1 - 런치 스크린 중복 런치(스플래시)스크린은 앱을 처음 실행했을 때 2초 정도 보이는 화면이다. 많은 앱들은 런치 스크린이 렌더링되는 동안 필요한 데이터를 로딩하고 로고 등을 이용해 유저에게 앱에 대해 소개한다. 런치 스크린은 유저가 처음 앱과 만나는 인터페이스여서 앱의 브랜딩에 많은 영향을 끼치고, 그만큼 중요한 스크린이다. 그래서 앱의 아이덴티티를 표현하는 목적으로 배경색과 로고, 문구를 넣어서 런치 스크린을 디자인했다. 하지만 앱을 실행하면 만든 런치 스크린이 렌더링되는..

이제 드디어 apk 파일을 만들고 내 핸드폰에서 직접 실행해볼 차례다. build는 공식 문서를 참고했다. Creating your first build - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 우선 app.json에서 정보를 수정해주자. // app.json { "expo": { "name": "운동하자", "slug": "HealthDiaryApp", "version": "1.0.0", "orientation": "portrait", "icon": "./assets..

Launch 스크린에 넣을 로고를 만들어보자. 로고는 canva라는 사이트에서 만들 것이다. https://www.canva.com/ canva는 무료로 많은 템플릿들을 제공하고 있고, 사용자는 요소들을 커스터마이징 할 수 있다. 핼스 앱과 같은 푸른 배경(#005eb8)에다 하얀 몸짱 이미지와 테두리를 추가했다. 리액트 네이티브의 Image 컴포넌트를 이용해 이미지를 넣었다. 높이와 너비를 지정하고, source props에 이미지를 넘겨주면 된다. 헬스 기록 앱이니까 동기 부여될 겸 하단에 니체의 명언을 넣었다. what does not destroy me makes me stronger 나를 죽이지 못하는 고통은 나를 더 강하게 만든다 canva의 무로계정은 svg를 지원하지 않아, 로고와 텍스트 ..

동적 타입 언어인 javascript를 보완하는 정적 타입 언어 typescript를 적용해보자. Why TypeScript 동적 타입 언어는 타입을 따로 지정하지 않아서 편리해 보이기도 한다. 하지만 프로젝트가 커질수록 동적 타입 언어는 런타임에서 오류가 날 가능성이 많아진다. 그리고 이런 자바스크립트의 타입에 대한 유연성, 허술한 점을 보여주는 예시가 하나 있다. 세번째 문자 'a'에 숫자 자료형에 사용되는 +단항 연산자가 붙어 NaN(not a number)이 반환되었고, 이 NaN이 그대로 합쳐져 banana가 된 것이다. 사실 banana를 의도해서 이렇게 만들 수도 있겠지만, 대부분의 경우 이런 결과들은 예상하지 못한 것들이고 어떤 에러를 더 초래할지 에측하고 준비하기 힘들다. 그래서 타입 때..

보기 좋은 떡이 먹기도 좋다고, 앱을 한번 보기 좋게 만들어보자. 디자인 컨셉은 포카리 스웨트다. 헬스 끝나고 마시는 포카리 스웨트가 좋아서, 포카리 스웨트처럼 청량한 핼스 앱을 만드는 것이 목표다. 포카리 스웨트 공식 홈페이지에서 포카리 스웨트의 블루 컬러는 pantone300C(#005eb8) 이라고 한다. 배경색, 메인색은 이 블루 컬러로 글자색, 보조색은 흰색으로 정했다. 사용하고 있는 UI 라이브러리 react-native-paper도 이에 맞게 커스터마이징해주었다. 포카리스웨트 동아오츠카 이온음료 포카리스웨트. 제품소개, 캠페인, 광고, 이벤트 안내 pocarisweat.co.kr Theming · React Native Paper callstack.github.io 청량한 느낌이 나긴 하는데..

저번에 짠 스펙대로 개발을 시작했고, 기존 코드를 거의다 갈아엎었다. 그래도 완성까지 80% 정도는 구현한 것 같아서 뿌듯하다. [헬스 다이어리 앱 개발] 7편 - 중간점검 이 프로젝트는 앱을 공부하려고 시작한거였고, 간단히 만들 계획이었다. 당연히 따로 스펙을 정하지도 않았었다. 하지만 스펙을 정하지 않고 개발을 하니, 중간 중간 추가하고 수정할 것들이 계 junhee-hee.tistory.com 런치 스크린 우선 앱에 처음 들어갔을 때, 보이는 런치 스크린이다. 아직은 텍스트만 달랑 있지만, 나중에 애니메이션이나 로고를 추가할 예정이다. // src/components/screens/LaunchScreen.js import React, { useEffect } from "react"; import {..

이 프로젝트는 앱을 공부하려고 시작한거였고, 간단히 만들 계획이었다. 당연히 따로 스펙을 정하지도 않았었다. 하지만 스펙을 정하지 않고 개발을 하니, 중간 중간 추가하고 수정할 것들이 계속 생기고, 구조도 이리저리 바뀌었다. 그러니 두달 정도 소홀히 할 정도로 늘어졌었다. 하지 않을 것을 정하는게 얼마나 중요한 지를 체감하며, 지금이라도 구체적인 스펙을 정해보려 한다. 우선 앱을 처음 들어가면 런치 스크린이 나온다. 런치 스크린에는 간단한 애니메이션이랑 로고나 문구를 넣을 것이고, 로컬 저장소에서 데이터를 가져온다. 헬스 일지 데이터는 이런 식으로 구성한다. interface SetState { weight: number; num: number; } interface HealthState { name: ..

본격적으로 앱에 기능들을 추가하기에 앞서서 지금까지 만든 앱 상황을 정리해봐야겠다. 블로그의 쓴 내용말고도 짬짬이 몇가지를 추가했다. 우선 홈 스크린이다. 운동한 날짜를 보여주는 달력과 오늘 운동을 기록하는 버튼이 있다. 달력과 운동하기 버튼 사이에 며칠 연속으로 운동하고 있는지 보여주는 칸도 추가할 예정이다. 달력에 날짜를 클릭했을 때 보여지는 다이어리 화면이다. 날짜는 탑바로 뺄 예정이고 그날 한 운동들을 보여줄 거다. 운동 기록하기 버튼은 깜빡하고 기록을 하지 않았을 때를 위한 버튼이다. 만약에 이미 기록이 있다면 '기록 수정하기'라고 텍스트를 바꿔서 보여줄 것이다. 다이어리 화면에서 '운동 기록하기' 버튼을 클릭하거나 홈 화면에서 '운동하기' 버튼을 클릭했을 때 들어가지는 기록 추가 화면이다. 탑..

사이트마다 아이디, 비밀번호 생성 규칙도 다르고 다 똑같으면 보안이 취약하니, 가입할 때 계정을 다 다르게 했다. 모든 계정을 외울 수 없어서 메모장에 계정 정보를 적어놨었다. 그런데 보기에 지저분하고 사용하기도 불편해서, c++로 아주 간단하게 계정 관리 프로그램을 개발해보자. 기획 인터페이스는 GUI가 아니라, 터미널에서 명령어로 동작하는 CLI로 만들 것이다. 만들 명령어는 1. account / account --all 모든 계정을 출력한다. 2. account 사이트도메인 해당 사이트의 계정을 출력한다. 3. account --help 계정 관리 프로그램의 모든 명령어에 대한 설명을 출력한다. 4. account --add 계정을 추가한다. 5. account --update 계정을 수정한다. ..

개발의 편의를 위해 import 방식을 상대 경로에서 절대 경로로 변경하자. 기존엔 import 할 때 아래와 같이 상대 경로로 불러왔다. import Calendar from '../Calendar'; 상대 경로의 단점은 파일 위치를 변경하면 import하는 파일들의 경로도 다 변경된다는 점이다. 바뀐 경로를 하나하나 수정하는 작업은 매우 번거롭고 복잡하다. 따라서 절대 경로로 변경해주자. babel-plugin-module-resolver 절대 경로를 사용하기 위해선 module-resolver라는 바벨 플러그인을 설치해야 한다. $ yarn add -D babel-plugin-module-resolver 설치해준뒤 babel.config.js 파일을 아래처럼 작성해준다. module.exports ..