홈 화면에 들어갈 달력을 만들어보자. 달력을 만드는 이유는 깃허브의 잔디처럼 운동을 하면 달력에 표시를 해 동기부여를 주기 위해서다. React-Native-Calendars 달력 라이브러리는 React-Native-Calendars라는 걸 이용했다. yarn으로 설치후, 불러왔다. 달력에 넣을 기능은 1. 운동한 날짜를 표시한다. 2. 날짜를 누르면 그 날한 운동 기록을 보여준다. 날짜를 누르면 해당 날의 다이어리 스키린으로 이동하게 했다. 다음엔 본격적으로 운동 데이터를 저장해보자. 참고 자료 GitHub - wix/react-native-calendars: React Native Calendar Components 🗓️ 📆 React Native Calendar Components 🗓️ 📆 . Co..

우리가 사용하는 앱들은 클릭이나 스크롤, 드래그 등을 통한 인터렉티브한 화면 이동을 지원한다. React Navigation를 이용하여 화면 이동을 구현해보자. Stack Navigation 적용하기 native용 react-navigation을 설치 해준다. $ yarn add @react-navigation/native $ yarn add @react-navigation/native-stack $ yarn add react-native-screens react-native-safe-area-context 앱과 웹의 화면 전환 차이점 중 하나는 앱은 화면을 단순히 이동하는 것이 아니라 새로운 화면을 스택으로 쌓는다는 점이다. 따라서 뒤로가기 버튼을 클릭하면 전 화면으로 이동한다. 유튜브 앱도 뒤로 가기..

보기 좋은 떡이 먹기도 좋다고, React-Native-Paper을 이용해 앱을 예쁘게 꾸며주고 로그인 화면을 만들어보자. React-Native-Paper 적용 Home · React Native Paper Material design for React Native callstack.github.io React-Native-Paper는 리액트 네이티브용 디자인 라이브러리다. paper에 있는 예쁜 컴포넌트들을 사용해 헬스 어플을 좀 세련되게 만들어 보자. 위의 사이트에 들어가면 친절하게 어떻게 설치하고 사용하는지가 나와 있다. 아래의 명령어를 이용해 paper을 설치하자. $ yarn add react-native-paper 아이디와 비밀번호를 입력하는 인풋필드는 TextInput 컴포넌트를 로그인 버..

앱을 만들기 위한 개발 환경 세팅을 해보자. 안드로이드 개발을 위한 코틀린이나 ios 개발을 위한 swift 등 새로운 언어를 배우기엔 지금 시간 여유가 없어서 네이티브 앱은 부담스럽고, 자바스크립트나 리액트 개발 경험이 있으니 리액트 네이티브로 개발 하기로 결정했다. 리액트 네이티브는 하나의 언어로 ios, 안드로이드 모두 개발 가능하기 때문에 많이들 사용한다. 찾아보니 Expo와 React Native CLI 두가지로 개발을 하는데 Expo는 간단하고 빠른 앱 개발을 지원하지만 그만큼 여러 제약이 존재한다. 앱 개발이 처음이니 우선 Expo로 리액트 네이티브와 앱 개발에 익숙해진 뒤, CLI로 개발을 하자 그럼 Expo로 리액트 네이티브 개발 환경을 세팅해보자. 공식문서를 따라했고 정말 간단했다. S..

최고의 개발 공부는 직접 무언갈 만들어 보는 것이라 한다. 단순히 공부만 하는 것보다 직접 만드는 것이 효율도 좋지만 무엇보다 훨씬 훨씬 재밌다! 그래서 간단한 앱을 하나 만들어야겠다 생각했고, 지금 가장 필요한 헬스 기록 앱을 만들기로 했다. 만들고 싶은 기능은 헬스 기록을 일별 그래프로 보여주기 특정 시간 내에 헬스 기록이 없으면, 푸쉬알림 보내기 어제보다 조금하면 더 하라고 얼려주기 요런 기능들을 넣어 어떻게든 헬스를 더 하게끔 만들고 싶다. 지금껏 수많은 시도들을 했지만, 매번 꾸준히 하지 못한채 실패했다. 돌이켜보니 이주를 넘은적이 한번도 없다 ㅎㅎ.. 이 앱을 통해 이번에는 다르기를 기원한다.

티스토리 스킨 커스터마이징하는 프로젝트를 여기서 중단하려 한다. 처음 시작할 땐, 배경 툴바 등등 이것저것 만들어 완전 나만의 사이트로 꾸미려 계획했지만 열정이 식어버렸다 ㅜㅜ 마음이 떠난 이유는 1. 스킨을 새로 만드는 것이 아닌, 기존의 스킨을 수정하는 것에서 오는 한계 이미 만들어진 스킨을 편집하는 것이어서, 코드를 수정할 때 많은 사이드이펙트가 발생했다. 레이아웃이나 스타일 중 하나를 수정하면 수정할게 또 생기고, 수정하면 또 생기고, 또생기고 ... 이런 식의 꼬리에 꼬리를 무는 작업을 하다 보니 정말 진이 빠졌다. 그리고 티스토리 자체에서 삽입하는 같은 태그들을 수정할 수 없다는 한계도 있었다. 2. 몹쓸 미적감각 사실 그런 한계가 있더라도 스킨을 바꾸는 것은 가능하다. 하지만 문제는 내가 바..

이번엔 다크모드 버튼을 만들어보자. 상단바의 검색버튼 옆에다 만들 것이고, 이번엔 기능만 구현하고 디자인은 다음에 하도록 하자. 상단바 태그 안에 버튼 태그를 만들자. 다크모드 해당 태그의 CSS를 추가해 버튼의 위치를 검색버튼 옆으로 위치시키자. 버튼을 만들 동안 배경색을 넣어서 편하게 편집하도록 하겠다. #darkModeButton { position: absolute; top: 20px; right: 80px; cursor: pointer; background-color: red; } 이제 button에 JavaScript를 추가해 다크모드 기능을 만들어 보자. 1. button을 누르면 태그의 class를 변경하는 함수를 실행시키도록 한다. 2. 해당 class의 배경색, 글자색을 정의함으로써 다..

기존의 블로그 모습이다. 이미지와 배경 구분이 잘 안돼서, 보기 조금 불편하다. 그래서 이미지의 테두리를 추가해 배경과 이미지를 잘 구분되도록 만들어보자. 개발자 도구로 이미지가 어떤 태그에 해당하는지 찾아보자. 위 사진처럼 태그에는 class나 id가 없으니, 를 포함하는 상위 태그 중 class나 id가 있는 가장 가까운 태그를 찾으면 사진에 보이는 이다. 그래서 CSS 파일에 의 class를 검새해보니 해당 선택자가 존재하지 않았다. 그리고 왼쪽 사진과 오른쪽 사진에서 의 class가 다른 것처럼, 이미지의 설정을 달리할 때마다 의 class가 달라진다. 그래서 의 CSS를 편집하는 것은 비효율적이다. 그러면 의 상위 태그 중에서 모든 를 포함하는 태그는 어떤 것일까. 상위 태그를 편하게 알 수 있..

* 기존의 스킨을 편집하는 것이어서 스킨이 다를 경우 HTML, CSS 파일이 다르게 구성되어 있을 수 있다. 내가 편집하는 스킨은 티스토리에서 제공하는 Poster 스킨이다. 스크롤을 내리면 상단바가 보이지 않는데, 유튜브 웹사이트처럼 스크롤에 상관없이 항상 보이는 고정된 상단바를 만들어보자. 우선 HTML 파일에서 상단바에 해당하는 태그를 찾아야 한다. 이때 크롬에서 지원하는 개발자 도구를 사용하면 편리하다. 구조를 보고 싶은 페이지(여기선 티스토리 블로그)에서 F12를 누르면 개발자 도구를 사용할 수 있다. Elements 메뉴에 들어간 뒤 아래 사진에 표시한 동그라미 부분을 누르거나 ctrl + shift + c 키를 누르고, 원하는 영역에 마우스를 대면 해당하는 태그를 알 수 있다. 여기선 he..

그렇다면 HTML, CSS 파일은 어디서 수정할 수 있을까? 블로그 관리자 페이지에 들어가서, 왼쪽 메뉴에 있는 '스킨 편집'에 들어가자. 들어가면 오른쪽에서 스킨을 편집할 수 있고, 왼쪽에서 편집한 스킨을 미리 볼 수 있다. 오른쪽에 있는 'html 편집' 버튼을 누르면 이렇게 HTML 파일과 CSS 파일을 편집할 수 있고, 필요한 파일을 업로드할 수 있다. HTML 파일을 살펴보니 같이 처음보는 코드와 처럼 생소한 태그가 있었다. 그래서 우선 이 HTML, CSS 파일을 내 VSCode로 옮긴 다음 크롬으로 열어봤다. 이런 식으로 페이지가 길게 형성되었다. 보아하니 같은 코드는 '글 제목', '블로그 제목' 등 내가 설정한 정보들을 표시하는 것 같고, 하나의 HTML 파일에 홈, 글, 카테고리 등 여..