블로그를 이전했어요 다른 플랫폼으로 옮긴게 아니라 아예 직접 개발했습니당 아직 갈길이 멀지만, 티스토리야 기다려라 많은 관심 부탁드립니다!!! https://heeground.com 개발이 개발새발 개발새발 개발 블로그 heeground.com

리액트는 props를 통해 데이터를 상위 컴포넌트에서 하위 컴포넌트로 전달한다. 리액트 어플리케이션을 개발하다보면 여러 겹의 컴포넌트를 거쳐 데이터를 전달하는 일이 빈번하게 생긴다. Props Drilling 간단한 예시를 만들어 봤다. import { useState } from "react"; import "./App.css"; function App() { const [cnt, setCnt] = useState(0); return ( setCnt(cnt + 1)} > +1 ); } function RedBox() { return ( ); } function GreenBox() { return ( ); } function YellowBox() { return ; } export default App;..

앱을 직접 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 청량한 느낌이 나긴 하는데..

헬스 다이어리 앱을 거의 다 완성해서 지금은 UX를 다듬고 있다. 다음주 중에 마무리해서 스토어 출시까지는 어니더라도 내 핸드폰으로 직접 테스트해 볼 예정이다. 헬스 다이어리 앱이 완성되면 또 새로운 사이드 프로젝트를 기획하고 진행할 것이다. 사이드 프로젝트는 가장 효율적인 공부 방법이기도 하고 무엇보다 재밌다. 만약 사이드 프로젝트를 할까 고민하고 있다면 유튜버 노마드 코더의 아래 영상을 추천한다.

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

9월 초에 개강을 했다. 오랜만에 학교를 가니 정신이 하나도 없다. 그 뿐만 아니라 학교가 끝나면 체력이 방전되서 운동도 못하고 있다. 체력을 기르려면 운동을 해야하는데 체력이 없어서 운동을 못하고 있다. 사실 운동을 해서 체력이 좋은게 아니라, 체력이 좋은 사람이 운동을 하는게 아닐까. 이번 학기는 컴퓨터 공학과 수업을 많이 신청했다. OOP도 배우고 알고리즘도 배운다. 기대를 많이 했는데, 학기 초여서 그런가 아직까진 재밌다. 한 두달정도 방치했던 헬스 다이어리 앱 개발을 재기했다. 방치했던 이유는 처음 시작할 때 구체적인 스펙을 정하지 않으니 개발이 늘어졌기 때문이다. 이제까지 개발 과정은 A를 하다 보면 해야 할 B, C, D, E가 생각났고, 그 A 마저 맘에 안들어서 갈아 엎는 식이었다. 그래..