코딩 이야기

[코린이 앱 개발 1] 앱 개발 시작 및 리액트 네이티브 설치

oozoobigstar 2022. 12. 15. 16:43
반응형

안녕하세요!

저는 코딩의 코자도 모르지만,

만들고 싶은 앱이 있어서 친구들을 모아 앱만들기를 시작해보려 합니다.

약간 한국의 에브리타임 같은 앱인데, 미국 버전으로 만들어 보려고 해요!

 

먼저 이 글을 쓰는 이유는 제 니즈를 만족시켜줄 수 있는 글을 하나도 못 찾았기 때문이에요

(여기서 부터는 말하는 게 조금 달라지네요)

정말 열심히 찾는 중이지만 여전히 갈피를 못잡겠는..

그나마 아래 두 분의 글을 읽고 네이티브가 아니라 크로스-플랫폼으로 앱을 바로 만들기 시작해도 될 것 같다는 정보를  얻었다

https://webcorgi.tistory.com/30

 

React Native로 2개월간 사내 앱 프로젝트 작업한 후기

안녕하세요 최근 퍼블리셔에서 프론트엔드 개발자로 전향한 웹코기입니다. 프론트엔드 개발자로 입사 후 React Native(이하 RN)를 이용한 프로젝트 앱을 약 2개월간 진행하게 되었는데요 이 RN은 나

webcorgi.tistory.com

https://ahnheejong.name/articles/galpi-development-diary/

 

갈피: 나의 첫 모바일 앱 개발기

인생 첫 앱을 만들었습니다. 독후감 앱입니다.

ahnheejong.name

특히 갈피라는 앱을 만든 분이 정말 많은 도움이 되었다.

플루터랑 리액트 네이티브 둘 중에 무엇을 사용할지 고민했는데

일단 리액트 네이티브를 사용하기로 결정!

 

 

12월 8일부터 시작해서 친구들과 앱을 구상해서 문서화하고,

(제가 한 건 아니지만 앱구상의 좋은 본보기가 될 것 같아서 Github글을 가져왔습니다. 그리고 제가 한 것과 비슷하더라고요.)

이렇게 구상하시면 될 것 같아요.

https://github.com/alswl98/everytime-server

 

GitHub - alswl98/everytime-server: 에브리타임 백엔드 기능 구현

에브리타임 백엔드 기능 구현. Contribute to alswl98/everytime-server development by creating an account on GitHub.

github.com

 

이제는 각자 역할을 맡아 시작해보려 합니다!

제가 맡은 역할은 프론트엔드입니다.

사실 생활코딩으로 javascript, css, html 관련 강의들을 전부 다 봤기 때문에 

그나마 이쪽이 익숙해서 이쪽을 골랐습니다.

이제는 제가 맡은 역할을 시작해 보려합니다!

하지만 솔직히 무엇부터 시작해야 하는지 몰라서 구조부터 파악하고자 아래 글을 보고 기본을 잡았습니다.

https://lovefor-you.tistory.com/409?category=326717 

 

모바일 App, Web 프론트엔드, 백앤드 개발 개념

- 프론트엔드 (Front-End) 일반적으로 프론트는 앞을 의미하듯이 App, PC 에서 제일 앞단을 의미한다. 처음 보여지는 App 화면, PC, 모바일 홈페이지 화면이 프론트엔드로 실제 보여지는 화면들을 개발

lovefor-you.tistory.com

https://ahnheejong.name/articles/galpi-development-diary/

 

갈피: 나의 첫 모바일 앱 개발기

인생 첫 앱을 만들었습니다. 독후감 앱입니다.

ahnheejong.name

 

1. RN 환경을 구축합니다 (쓰고 있는 노트북: M1 에어)

(아래 글이 많은 도움이 될 겁니다)

https://ddioniii.tistory.com/m/48

 

[React Native] Mac M1 개발환경 세팅 (22.12.05수정)

리액트 네이티브로 Adroid와 iOS 앱을 빠르게 개발이 가능하며, 여러가지 장점이 있고 점차 발전해왔다는 점은 좋지만 ... 단점이라면 초기 세팅할게 너무 많다. 1. Homebrew 설치 Homebrew : MAC/Linux에서

ddioniii.tistory.com

 

저는 이거 하다가 중간에 오류가 났는데, 아래 사이트들을 참고해서 처리했습니다!

https://2vup.com/mac-ruby-update/

 

[Mac] 맥 Ruby Update 업데이트 적용 방법

🟥 Mac에서 Ruby Update 방법 맥에서 루비를 업데이트 하기 위해 아래 코드를 한 줄씩 차례대로 실행합니다. 2021년 8월을 기점으로 3.0.2버전으로 업데이트하지만, 시기에 따라 Mac에서 Ruby Update가 가

2vup.com

https://codecamper.me/blog/122/

 

Ruby 버전 업데이트 방법 in MacOS - Blog

 

codecamper.me

https://nashorn.tistory.com/entry/React-Native-%EC%84%A4%EC%B9%98-%EB%B0%8F-iOS-%EC%95%B1-%EB%B9%8C%EB%93%9C-%EC%8B%A4%ED%96%89

 

React Native 설치 및 iOS 앱 빌드, 실행

1. react-native 설치 및 프로젝트 생성 $ npm install -g react-native-cli $ react-native init TestProject $ cd TestProject $ npm install https://github.com/nashorn74/TestProject nashorn74/TestProject Contribute to nashorn74/TestProject development b

nashorn.tistory.com

실행까지 하는데 4일 걸렸읍니다.. 제가 설명은 못 할 것 같아요.. 저도 겨우 했거든요..

위에가 비중있게 도움을 준 사이트들입니다!

만약 이걸로도 안 되신다면 개인의 에러를 그냥 구글에 복붙하면 해결이 될 겁니다! 

역시 코딩의 시작과 끝(이 있는지는 모르겠지만)은 모두 인터넷 서칭이네요!

 

- 아래 링크는 루비 버전이 다르다고 나오는 오류가 났다면 사용할 수 있는 사이트들이에요

https://stackoverflow.com/questions/74189532/your-ruby-version-is-2-6-8-but-your-gemfile-specified-2-7-5

 

Your Ruby version is 2.6.8, but your Gemfile specified 2.7.5

I have installed node@16(v16.18.0) in macOS and npm version: 8.19.2. Operating System macOS(Monterey) version: 12.6 Xcode Verion: 14.0.1 Followed some instructions to setup react-native environme...

stackoverflow.com

https://stackoverflow.com/questions/64291625/zsh-permission-denied-users-macbookpro-zshrc

 

zsh: permission denied: /Users/macbookpro/.zshrc

I'm new in flutter I want to set flutter sdk path in Mac OS (VS code) for this I'm fallow the https://flutter.dev/docs/get-started/install/macos#update-your-path but when I run $HOME/.zshrc in Term...

stackoverflow.com

리액트 네이티브가 X-code나 안드로이드 스튜디오처럼 앱일 줄 알았는데, 그건 아니더라고요.

이거에서도 헤맸읍니다..^!^

 

2. 이제는 시작해 볼 겁니다. 아래 사이트와 함께요.

https://sendbird.com/ko/blog/tutorial-react-native-%EB%A9%94%EC%8B%9C%EC%A7%80-%EC%95%B1-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0

 

Tutorial: React Native 메시지 앱 제작하기

안내드립니다: 최근 (2017년 11월 10일 기준) 센드버드 샘플 코드와 함께 본 튜터리얼을 최신버전으로 업데이트 하였습니다. 가장 최신의 ‘React Native 채팅 튜터리얼’ […]

sendbird.com

 

하나로 끝내려 했는데 너무 기네요. 

다음 편으로는 정말 앱 개발 시작하는 걸로..~

반응형