[React Native] Steem 모바일 지갑앱 만들기 #1

in #kr6 years ago (edited)

옛날에 이런 책이 있었습니다. 스팀잇에는 이 책을 기억하는 분들이 많을 것 같습니다.
저는 리액트를 공부한지 일주일이 훨씬 넘었는데 잘 할 수 있을까요? ㅋ


안녕하세요. 안피곤입니다.

WDT(WHAN DEV TEAM)에 합류해서 올리는 첫 글이네요. WDT가 뭔지 잘 모르는 분들은, 뉴비존님이 작성한 "[출범식] WDT(WHAN DEV TEAM) 공식 활동 개시" 글을 읽어보세요.

이제 저는 WDT 팀원의 조언과 피드백을 거의 실시간으로 받을 수 있기 때문에, 코딩 실력 향상에 정말 많은 도움이 될 것 같습니다. 그리고 WDT 도움을 받아 스팀(Steem) 모바일 지갑앱 개발을 하려고 합니다.

저는 리액트 네이티브(React Native)를 공부하고 있었으므로, 모바일앱을 리액트 네이티브로 개발할 것 같습니다. 그리고 개발 과정을 스팀잇에 기록하려고 합니다. 스팀잇분들과 의견을 나누면서 개발하고 싶습니다. 많은 관심과 조언 부탁드립니다.




* * *



Expo 사용하기

저는 Expo를 사용해서 리액트 네이티브를 개발하고 있습니다. Expo 장점은 "리액트 네이티브로 무비앱을 만들어서 스토어에 올렸어요!" 글에서 한번 설명했습니다. 추가로 좋은점을 하나 더 알려드리면 앱 서명 키를 내가 관리할 필요가 없습니다. Expo에서 관리하도록 선택할 수 있습니다. 저는 앱 서명 키를 잃어버린 적이 많아서 큰 장점이라고 생각합니다.

그리고 Expo는 이렇게 개인 페이지도 제공 해줍니다. 개인 페이지에는 공개한 앱이 노출됩니다. 아래 보이는 앱들은 제가 동영상 강좌를 학습하면서 만든 샘플앱입니다. 그런데 어느 천사분께서 하트를 하나 눌러 주고 가셨네요.

https://expo.io/@markan


Expo CLI 설치하기

expo를 사용하기 위해서는 expo-cli가 설치되어 있어야 합니다.

npm install expo-cli --global


.gitignore 파일 생성하기

저는 .gitignore 파일을 생성할 때 아래 사이트를 사용합니다.

https://www.gitignore.io/

키워드를 입력하고 생성 버튼을 눌러서 파일을 다운받으면 됩니다. 아니면 아래 명령어로 다운로드하면 간편합니다.

curl -o .gitignore https://www.gitignore.io/api/node,reactnative




* * *



프로젝트 생성하기

expo 명령어로 프로젝트를 생성합니다.

expo init whan-wallet


프로젝트 실행하기

생성한 프로젝트를 실행하면, 기본적으로 포함되어 있는 코드가 빌드되어 앱이 실행됩니다. 그리고 터미널 창에 QR 코드가 출력됩니다. QR 코드를 촬영하면 스마트폰으로 앱을 확인할 수 있습니다.

cd whan-wallet
npm start


스마트폰으로 앱을 확인하기 위해서는 expo client 앱이 설치되어 있어야 합니다. expo client 앱은 구글 스토어와 애플 스토어에서 설치 가능합니다.

https://expo.io/tools#client

expo client 앱에서 확인하기 위해서는 USB 연결 또는 PC와 같은 네트워크의 Wi-Fi에 연결되어 있어야합니다.


expo client 앱에서 QR코드를 촬영하면, 아래 화면과 같이 샘플앱이 보입니다.


그리고 폰을 좌우로 흔들면 아래 화면처럼 개발 메뉴가 짠~!하고 나타납니다. 저는Remote DebuggingHot Reloading 기능을 자주 사용합니다.


Fin.



저는 많은 분이 코딩에 흥미를 느꼈으면 좋겠습니다. 그리고 #kr-dev에 더 많은 글이 올라왔으면 좋겠습니다.

#kr-dev에 올라오는 대부분의 개발글에는 보팅하고 있습니다. 참고로 제 스팀파워가 작아서 보상금액이 많지는 않습니다. 대신 정성을 다해서 보팅하고 있어요. ㅋ

여기까지 읽어주셔서 감사합니다.


Sponsored ( Powered by dclick )
장애인의 주홍글씨 BeMinor를 여러분의 가치로 만들어 주십시오.

1,000인의 마이너는 비마이너의 경제적 자립을 지원합니다.

Sort:  


@anpigon님 곰돌이가 1.1배로 보팅해드리고 가요~! 영차~

재미잇을것 같아요 응원합니다

아곰님 감사합니다. 응원 덕분에 힘이 납니다.ㅎㅎ

곰돌이가 @ayogom님의 소중한 댓글에 $0.016을 보팅해서 $0.007을 살려드리고 가요. 곰돌이가 지금까지 총 4083번 $47.663을 보팅해서 $50.929을 구했습니다. @gomdory 곰도뤼~

expo init whan-wallet

와우!! 시작이 반이니까!! 오늘부터 공정 50%!!
화이팅입니다!! ㅋㅋ

이제 조금만 다듬으면 완성할 것 같습니다. ㅋㅋ

곰돌이가 @happyberrysboy님의 소중한 댓글에 $0.016을 보팅해서 $0.007을 살려드리고 가요. 곰돌이가 지금까지 총 4084번 $47.679을 보팅해서 $50.936을 구했습니다. @gomdory 곰도뤼~

.gitignore 파일 생성하기
저는 .gitignore 파일을 생성할 때 아래 사이트를 사용합니다.

https://www.gitignore.io/

이 부분은 처음 보는 거네요. ㅇ_ㅇ? 무슨 작업을 하는 건가요?

.gitignore 파일은 git 관련된 설정 파일입니다.
git repository 에 업로드 되면 안되는 폴더 또는 파일 목록이 포함되어 있습니다.
예를 들면, 불필요한 node_module 폴더 또는 공개되면 안되는 .env 파일 등이 있습니다.
오픈 소스를 github에 업로드할때 꼭 필요한 파일입니다.

아하. ㅇ_ㅇ 그렇군요. 그냥 기본 설정으로만 늘 셋팅하다 보니 몰랐습니다. gitignore 파일도 한 번 읽어봐야겠네요.

곰돌이가 @urobotics님의 소중한 댓글에 $0.016을 보팅해서 $0.007을 살려드리고 가요. 곰돌이가 지금까지 총 4092번 $47.734을 보팅해서 $51.065을 구했습니다. @gomdory 곰도뤼~

많이도 구했네요. 티끌모아 태산입니다. ^^ 정말 감사합니다. 곰돌이 짱. ㅎㅎㅎㅎ

Hi @anpigon!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 3.037 which ranks you at #10602 across all Steem accounts.
Your rank has improved 128 places in the last three days (old rank 10730).

In our last Algorithmic Curation Round, consisting of 214 contributions, your post is ranked at #80.

Evaluation of your UA score:
  • You're on the right track, try to gather more followers.
  • The readers like your work!
  • Good user engagement!

Feel free to join our @steem-ua Discord server