개발하게 된 계기 작년에 들었던 수업에서 개인 프로젝트로 3대운동에 도움이 되는 계산기들과 영상들을 볼 수 있는 웹사이트를 만든 후부터 내가 좋아하는 운동과 관련된 서비스를 만들고 싶었다. 이후 학기와 방학 중 다른 것들을 하느라 따로 짬이 나지 않았는데 이번 여름에는 각을 잡고 만들어보려고 한다. 어떻게 쓰일 것인가 학생들이 자신의 운동 영상을 제출하면 해당 영상으로 운동을 얼마나 많이 or 무겁게 들었는지를 평가한다. 무게, 횟수 등의 랭킹은 학부, 학번, 성별, 소속 RC 등의 카테고리로 나뉘어져 자신이 어느 그룹에서 어느 정도의 순위인지 가늠할 수 있다. 자신의 운동능력등에 따라 업적과 그로 인해 얻을 수 있는 뱃지 등이 있고, 이는 자신의 프로필이나 게시판에 글이나 댓글을 쓸때 나타낼 수도 있다 (Ex. 3대 500 뱃지, XX학부 스쿼트 랭킹 1위 등). 자신의 프로필을 꾸며 본인의 운동 경력을 보일 수 있다. 이 기술을 쓰려고 한 이유 처음 시작할 때 예정은 저번 학기…

유일하게 디자인을 못했던 로그인 페이지다 구글 로그인은 프로젝트를 시작할 때 내가 가장 처음으로 구현한 기능이다. 프로젝트 시작 전에는 개발에 재미를 붙이지 못했던 내가 이 로그인 기능 구현을 처음으로 성공하고 재미를 붙이게 해준 아주 고마운 기능이 됐다. 구글 로그인말고도 React에서의 계정 기능은 어렵지 않게 구현할 수 있기 때문에 처음 시작하는 사람들이 시도해보면서 재미를 붙이면 좋을 것 같다. 주의!! 이 포스트는 react-native-cli를 이용하여 생성한 프로젝트가 있다는 가정하에 진행됩니다. 만약 expo-cli를 사용하고 있다면 새롭게 프로젝트를 만들어 주시길 바랍니다. (react-native-cli 설정 방법은 여기에서 찾아볼 수 있다.) Firebase 설정 먼저 Firebase의 계정을 만드는 것부터 시작한다. 계정을 만들었다면 Firebase 홈페이지 우측 상단에 있는 ‘콘솔로 이동’ 버튼을 누르거나 console.firebase.com 으로 직접 이동…

저번편에서는 Firebase의 설정을 끝마쳤고, 이번편에서는 실제로 구글 로그인 기능을 구현할 차례다. 프로젝트 설정 먼저 필요한 패키지들을 설치한다. app 모듈은 Firebase의 기능들을 사용하기 전에 반드시 깔아야 하는 모듈이고, auth 모듈은 계정 기능을 사용할 수 있게 해준다. 그리고 google-signin은 문자 그대로 React에서 구글 로그인 기능을 쉽게 만들어주는 패키지다. 패키지들을 설치한 이후에는 프로젝트 자체에서의 설정을 해준다. android 폴더 안에 있는 build.gradle 파일에 들어가 google-services 플러그인을 추가해준다. 다음으로는 android/app 경로 안에 있는 build.gradle 파일에서 플러그인을 적용한다. 경로가 비슷하니 헷갈리지 말자. auth 모듈도 같은 파일 안에 추가해준다. 로그인 기능 구현 이젠 정말로 기능 구현을 할 차례다. App.js App.js에 있는 코드를 모두 지우고 필요한 패키지들을 불러오자…