코딩 초보의 코딩 적응기

파이어베이스는 회원가입, 로그인부터 로그인 상태까지 쉽게 관리할 수 있게 해주는 기능(API)들을 제공해주기 때문에  참으로 편리하다. config 폴더 안에 firebaseFunction.jsx 파일을 만들고 그 파일 안에 파이어베이스 라이브러리를 넣어서 사용하고 관리하도록 한다. 내가 사용할 라이브러리는 1)회원가입함수, 2)로그인함수, 3)로그아웃함수, 4)데이터베이스 이용 함수이다. import * as firebase from 'firebase' ; import 'firebase/firestore' ; import { Alert } from 'react-native' ; export async function registration ( nickName , email , password , navigation ) { try { console . log ( nickName , email , password ); await firebase . auth (). createUserWithEmailAndPassword ( email , password ); const currentUser = firebase . auth (). currentUser ; const db = firebase . firestore (); db . collection ( 'users' ). doc ( currentUser . uid ). set ({ email : currentUser . email , nickName : nickName , }); Alert . alert ( '회원가입 성공!' ); navigation . push ( 'TabNavigator' ); } catch ( err ) { Alert . alert ( '무슨 문제가 있는 것 같아요! =...

[스파르타 코딩클럽 | 앱개발 플러스 2주차 수업] 애니메이션-움직이는 배너만들기 리액트 네이티브에서 직접적으로 애니메이션 기능을 제공하지만, (링크) 이미 또 구현을 다 해놓고 쓰기만 하라고 하는 도구들도 너무나 많다. (링크) 가만히 있는 배너를 재미있게 꾸미기 위해 react-native-animatable  이란 라이브러리를 사용하여 배너를 움직이게 바꿔보았다.  우선 react-native-animatable 을 다음 명령어로 vscode 터미널에 입력하여 설치하도록 한다. yarn add react-native-animatable 현재 제작중인 앱의 MainPage.jsx 에 다음과 같이 코딩하니 위 화면과 같이 puls 로 동작하는 애니메이션이 만들어졌다. import React , { useState , useEffect } from 'react' ; import { StyleSheet , Image , View } from 'react-native' ; import { Col , Row , Grid } from 'react-native-easy-grid' ; import { Container , Header , Content , Left , Icon , Right , Text , Button , } from 'native-base' ; import CardComponent from '../components/CardComponent' ; import HeaderComponent from '../components/HeaderComponent' ; import * as Animatable from 'react-native-animatable' ; const data = require ( '../data.json' ); export default functio...

 스파르타 코딩클럽 앱개발플러스 1주차 수강을 마무리하는 날, 매주마다 숙제로 마무리를 하는데, 난 거의 숙제해설을 보고 하는 편... ㅎㅎ;; 뭐 ㅋ도 모르면서 코딩을 하다보니... 그래도 종합반을 듣고 와서 그런지 어떤 파일을 추가해야하는지 어디에 추가해야하는지가 좀 감이 온다. 어떤 코딩을 넣어야하는지는 아직도 잘 모르지만, 이만큼의 발전도 감사할 따름이다.  컴포넌트 폴더에 플러스, 마이너스 파일을 추가하고,  App,jsx에 카운트 상태가 변경되도록 하면 되는...  명령어들을 쓰는게 아직은 어색하고 따라해야하는 실정이지만, 계속 하다보면 언젠가는 익숙해지겠지... +++MinusButton.jsx import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default function MinusButton({ Minus }) { return ( <TouchableOpacity onPress={Minus} style={styles.container}> <Text> Minus </Text> </TouchableOpacity> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', backgroundColor: 'green', width: 50, height: 50, }, }); +++PlusButton.jsx import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default functio...

 react-native와 expo로 앱을 만든후 배포를 위해 expo build:android 명령을 실행했는데, 떡하니 발생한 오류... 빨간 글씨들이 이젠 낯설지가 않다.ㅎㅎㅎ  apk 생성은 되었지만 키 저장소가 생성되지 않았다, 자바 런타임 문제다 뭐 이런 내용...  알아보니 M1 mac에 자바가 깔려있지 않아서..라는데, 처음에 개발환경 설정할때 Homebrew, nodejs 등 전부 무사히 설치했던 것 같은데, 참 이상하다 라는 생각이 들었지만 뭐 어떡하리, 안됐다면 다시 해줘야지. JDK 설치를 위해 Homebrew 명령어를 실행, brew tap AdoptOpenJDK/openjdk 그러나  zsh: command not found: brew  라는 메세지가 출력되었다. 산넘어 산이라던가... Homebrew 설치하기 (소꿍님의 블로그를 참고하여 해결함. 고마우신 블로거님들이 참 많으심ㅎㅎ) 다시 homebrew 명령어를 실행, brew tap AdoptOpenJDK/openjdk 무사히 설치됨을 확인하고 brew cask install adoptopenjdk8  명령을 실행, ...했더니   Error: Unknown command: cask   라는 메세지 출력, 또 산인가..ㅎ; 모를땐 구글링이지.. 구글링 결과 명령어 사용법이 변경되었다고 한다.   brew install --cask adoptopenjdk8   명령을 실행, 무사히 설치가 완료되고    java -version  명령어로 java 버전을 확인할 수 있다. openjdk version "1 .8 .0_292 " OpenJDK Runtime Environment ( AdoptOpenJDK )( build 1 .8 .0_292-b10 ) OpenJDK 64 -Bit Server VM ( AdoptOpe...

스파르타코딩클럽 앱개발종합반 5주 수강하면서 만들어본 건강정보 저장 앱 My Honey Life~! 강의에서 다룬 꿀팁저장앱을 나만의 스타일로 바꿔보았다. 사실 'data.json'과 버튼 색깔, 제목 정도 바꾼 것인데, 코딩초보인 나에게는 이것도 참으로 어려운 과정이었다. :)  좀더 많은 기능들을 넣고 싶었지만 여기까지가 끝인가보오..ㅎㅎ 넣고싶었던 다른 기능들은 앱개발플러스 강의를 통해 구현해보기로 하고, 완성된 앱에 관한 몇가지 이야기를 하고자 한다. 1. 앱 구동화면 :  2. 취지&설명 : 건강에 관한 여러가지 정보들을 볼 수 있고, 관심있는 정보는 저장소에 저장해두었다가 다시 볼 수 있도록 만든 앱이다. 소화계, 순환계, 호흡계, 신경계에 관한 정보들을 볼 수 있다. 각 카테고리 버튼을 눌러서 그 분야에 대한 정보들을 볼 수 있고, 전체보기 버튼에서는 모든 카테고리의 정보를 볼 수 있다. 건강정보를 그리 많이 만들지 않아서 스토어에 올리는건 사용자들에게 좀 미안한 마음이 들어서.. 일단 블로그에만 올리기로 했는데, 자료가 풍부해지면 출시할지도 모르겠다.  3. 기술설명 : 리엑트 네이티브 & Expo를 이용하여 만든 앱 4. 어려웠던 점 & 극복방법 :  코딩초보가 따라하기만 하다보니.. 이해보다는 잘 돌아가기에 집중을 했다. 앱이 완성되었는데도 아직 이해는 못하고 있고.. 극복방법은 강의중에 제공받은 강의노트와 코드스니펫, 강의를 반복해서 돌려보면서 잘 안되는 부분을 확인하고, 그래도 잘 안되는 부분은 슬랙을 통해 질문하거나 FAQ로 해결하곤 했다. 지나고보니 이 모든 과정들이 코딩이라는... 이것이 바로 코딩이구나.. 5. 코딩 첫걸음 후기 : 무작정 따라하기에 급급했던 초반에는 '나한테 코딩이 안맞는걸까' 라는 생각이 들 정도였다. 당최 무슨 소린지도 모르겠고, 공식문서는 봐도 멍-해지고. 근데 하루하루 지날수록 앱이 모습을 갖춰가고 완성되는 걸 보니 '아, 이게 코딩이구나...

  파이어베이스 라이브러리의 버전이 업데이트 되면서 import 의 사용법이 달라짐. firebaseConfig.js 파일에서, import * as firebase from 'firebase/app'; 를 import firebase from 'firebase/app'; 로 바꿔주면 해결~!!! ++++++ The usage of import changes as the version of the Firebase library is updated. import * as firebase from 'firebase/app'; -----> import firebase from 'firebase/app';

 vscode 터미널에 SyntaxError: Unexpected end of JSON input while parsing near '' at JSON.parse(<anonymous>) 라는 메세지가 뜨면서 앱 작동이 되지 않는다. 프로젝트의 data.json 파일이 저장이 안되었을 가능성이 있으니, data.json 파일을 저장하고 휴대폰 앱을 재실행하면 잘 작동하는 것을 볼 수 있다. 코딩할때는 수시로 저장하는 습관을 들이는 것이 좋겠다.    +++++++   The app does not work with the message "SyntaxError: Unexpected end of JSON input while parsing near '' at JSON.parse(<anonymous>)" in the vscode terminal. There is a possibility that the data.json file of the project was not saved, so if you save the data.json file and run the phone app again, you can see that it works well. It is good to get into the habit of saving frequently when coding.