[코린이 앱 개발 5] React Native 앱 개발 일지
오늘도 안녕하세요!
아래 코드는 제가 정말 자주 쓰는 프로젝트 시작 코드..
이걸 맨날 까먹어서 그냥 제가 볼 수 있도록 블로그에 적었습니다.
cd ReactNativeTodos // cd 프로젝트 이름
//프로젝트 시작
npm run ios
npm run android
코딩,, 쉬운 게 아니네요,,
아래 정말 앱 만들기에 있어서 기본적으로 필요한 건 다 있길래 참고하시라고 넣어둡니다!
https://reactnavigation.org/docs/getting-started
https://reactnavigation.org/docs/getting-started/
reactnavigation.org
저는 무엇하나 순서대로 하는 법은 없어서..
저에게 현재 도움이 되는 애들을 아래 붙여넣어 놓겠습니다!
[React Native] VIVA | 프로젝트 생성 및 초기화면 구성
[참고] https://www.youtube.com/watch?v=Sr5UOR4llXY&t=41s - 리액트 네이티브 기본 강좌 https://reactnative.dev/docs/getting-started - 리액트 네이티브 doc https://reactnavi
velog.io
https://www.youtube.com/watch?v=7XDiKA_VaDE&list=PL60Uti4nULBN7EQYmgjksXJXnkufo0m-9&index=13
https://www.notion.so/11-params-hook-0ed82bff79434837ad0202e3867b526f
11강 - 네비게이션 (params, hook)
class Hook extends Component { constructor(props) { super(props); this.state = { name: 'jin', }; } render() { return ( <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <Text>안녕하세요 Hook테스트 입니다.</Text> <Text>이
www.notion.so
현재 네비게이션으 통해 스크린을 쌓고 넘기는 단계를 하고 있습니다.
앱을 만듦에 있어서 디자인 다음으로 가장 큰 틀을 만들고 있는 것 같아요.
제가 앱을 만드는 방식은 그저 사용하고 싶은 코드들을 가져다가 그냥 붙여넣습니다.
그리고 조금씩만 바꿉니다. 처음에는 이해하지 못하는 게 대부분이지만 이때 하다가 배웁니다 오류 때문에,,
이런 방법은 이론을 공부하고 실전에 들어가는 것보다 시간이 더 걸립니다.
즉 효율적이지 않다는 말이죠. 대신 효과적입니다.
저는 이렇게 해야 공부가 되는 사람이어서요.
저같은 분들은 제가 쓴 글들이 도움이 될 것 같아요.
아래는 앱을 개발할 때 조금씩 코드들을 가져다 쓰는 소스들이 담긴 사이트들입니다.
컴포넌트 분리하기
React Native Tutorial For Beginners - 2019
jeffgukang.github.io
https://reactnative.dev/docs/0.61/getting-started
Introduction · React Native
This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment.
reactnative.dev
그리고 윗 사이트들까지 모두 활용 중입니다!
리액트 네이티브 사이트들은 전부 영어기 때문에 가끔 읽기 싫은 경우가 있어요.
그리고 기초 이론을 공부하기에는 부담이 될 때가 있더라고요.
아래 사이트는 리액트 네이티브 doc에 나와 있는 내용의 많은 부분을 한국어로 잘 설명해주고 있어서 가져왔습니다.
https://daesiker.tistory.com/category/React-Native
'React-Native' 카테고리의 글 목록
IOS Dev Blog 하다보면 되드라...
daesiker.tistory.com
그리고 직접적인 디자인을 가시화 할 때, 혹은 앱에 들어가야 하는 페이지를 만들 때는 figma를 사용했습니다!
핸드폰 사이즈를 고를 수 있어서 좋더라구요, 게다가 무료!
https://www.figma.com/files/recent?fuid=1189469947619466829
Figma
www.figma.com
계속 하다 보니 코드를 복붙해서 쓰는데 있어서도 한계가 있다는 걸 깨달았다.
코드들이 각각 무슨 뜻인지 알지를 못하기에 수정해서 쓰는 데도 어디를 고쳐야 하는지 몰랐다.
그래서 아래 사이트를 통해 이론을 공부하려 했다.
https://marshmello.tistory.com/71
React Native UI 구성 및 문법 2
저번글에서는 JSX의 정의, 변수선언 방법, Component, Props,Status 에 대한 기본적인 사용방법에 대해 알아봤습니다. https://marshmello.tistory.com/70 React Native UI 구성 및 문법 1 저번글에서는 개발환경을 구
marshmello.tistory.com
하지만 쉽지 않았다.
무슨 말인지 이해가 잘 가지 않자, 문득 떠오른 생활코딩 수업!
생활코딩 수업 중 리액트 수업이 있었고, 리액트 네이티브가 아니어도 이해하는 데 조금이라도 도움이 될 것이라 생각했다.
그래서 보려는데, 그 수업은 자바스크립트(언어)를 기반으로 하고 있다고 하여 그 수업부터 시작하게 되었다,
나는 웹2에 있는 자바스크립트를 보았는데, 그것과 다른 것 같다.
아래 다시 한 번 사이트를 붙여넣겠다!
https://opentutorials.org/course/743/4650
언어소개 - 생활코딩
JavaScript JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수
opentutorials.org
무작정 몇 개 수업만 듣고 진짜 앱을 만들려고 하니까 참 힘들긴 한 것 같다.
게다가 나 혼자 하는 프로젝트도 아니라서 마음이 조금 무겁지만, 이 부담감이 나를 더욱 공부하도록 만들어 준다.
앞으로 나는 내 앱을 개발하고 수업을 같이 병행하는 방식으로 앱 개발을 나갈 것이다.
언어를 공부하면서 조금씩 더 많은 코드를 이해할 수 있겠지!
이것은 마치 내가 영어를 배우는 것과 거의 흡사하다.
그저 소통하는 대상이 사람에서 컴퓨터로 바뀐 것뿐!
앞으로는 사람들에게 직접적으로 도움이되는, 실질적으로 유용한 블로그를 쓸 수 있음 좋겠다!
다시 원점으로 돌아간 내 앱 개발 프로젝트,,
이런 내 모습도 누군가에게는 공감이 될 수 있을 거라고 생각하고
모두 모두 힘내시길!
오늘도 읽어주셔서 감사하고 좋은 하루 보내세요 :)