본문 바로가기

Coding/Etc120

React Native exp로 빌드하는 방법 리액트 네이티브로 제작한 교내 어플리케이션이 완성됐다.애플 개발자 등록과 구글 개발자 등록도 준비해놨다.(구글 개발자 등록 : http://hides.kr/882애플 개발자 등록 : http://hides.kr/784 )이제 개발한 어플리케이션을 Standalone 파일로 만들고 등록만 하면 된다.먼저 애플 개발자 등록은 이미 해놓은 상태라고 가정하고 설명한다.먼저 아래의 명령어로 exp를 설치한다. yarn global add exp 다음으로 Expo를 킨다. 오른쪽 상단을 보면 위처럼 Publish가 있다.클릭한다. (시간이 좀 걸림)* 추가 *Expo를 통해 Publish는 굳이 할 필요가 없다.단순히 Expo어플을 통해 접근할 수 있게 해주는 것이라고 한다. 위처럼 나오다가 완료되면 마지막에 ht.. 2018. 3. 8.
구글 개발자 등록 및 어플 등록 방법 최근 리액트 네이티브로 개발하고 있는 어플의 마무리가 다가오면서슬슬 개발자 등록도 미리 준비해놓고 있다.애플 개발자는 미리 등록했으며 이제 안드로이드 마켓에 올리기 위해구글 개발자 등록을 하기로 했다.애플 개발자는 1년에 129000원이라는 금액을 지불해야 하지만구글 개발자는 처음 25$만 지불하면 그 이후부터는 추가적인 비용 지출이 없다.먼저 아래의 주소로 들어간다. https://play.google.com/apps/publish/signup/ 구글 계정으로 로그인하고 나면 위와 같은 화면이 보일 것이다.체크할곳에 체크를 한 후 결제 페이지로 이동을 누른다. 이제 25$를 결제해야한다.나는 미리 카드를 등록시켜놨다.아직 카드를 등록하지 않은 사람은 카드를 등록한 후 결제하기를 누른다. 위와 같이 나오.. 2018. 3. 4.
React Native Splash 및 로고 수정하는 방법 리액트 네이티브로 만들고 있는 어플이 어느정도 막바지에 왔다.큰 틀은 완성됐으며 세부적인 디테일만 만져주면 끝날 듯 하다.이제 어플리케이션의 로고를 넣어주려고 한다.어플을 실행시키면 초반에 조그마한 로고와 함께 로딩 페이지가 나타난다. 바로 이 부분이다. 가운데 네모난 박스에 로고를 넣어줄 예정이다.먼저 나는 Expo를 사용하여 프로그래밍하고 있으니 참고.app.json으로 들어가보면 splash와 logo 관련된 부분을 찾을 수 있다. 현재 아이콘은 /assets/icon.png에 있으며splash는 /assets/splash.png에 들어있다. 대부분 어플리케이션의 아이콘은 네모상자로 만들기 때문에 나도 그렇게 만들어줬고크기는 512x512로 만들었다.이렇게 적용하면 어플리케이션의 아이콘이 적용되는데.. 2018. 3. 4.
React Native Collapsible로 Dropdown 만들기 요즘 리액트 네이티브로 앱 개발을 하고 있다.많은 부분에서 스택 네비게이터 또는 탭 네비게이터를 사용하고 있다.현재 만들고 있는 부분은 공지사항과 FAQ부분인데,현존하는 어플들을 살펴보면 여기서도 다양한 방법으로 구현을 하고 있다.초기에 나는 스택 네비게이터를 사용하여 작성했는데 생각해보니 굳이 이부분까지스택 네비게이터를 사용할 필요는 없다고 생각됐다.그래서 그냥 제목을 클릭하면 아래에 공지사항의 내용이 펼쳐지는 형태가 낫다고 판단하고관련 라이브러리를 찾아보던 중 react-native-collapsible 라는 것을 발견했다.먼저 yarn을 통해 설치한다.yarn add react-native-collapsible 그리고 상단에 다음과 같이 import를 해준다. import Accordion from.. 2018. 3. 4.
자바스크립트 ES6 Promise를 통한 비동기 프로그래밍 자바스크립트의 코드는 기본적으로 싱글스레드 기반 비동기 방식의 언어이다.때문에 아래와 같은 코드가 있다고 가정해보자. console.log(1);console.log(2); 기존 C등의 절차지향 언어를 접하다 온 사람은 무조건 1이 찍히고 2가 찍힌다고 생각할 것이다.하지만 실제로는 console.log(1), console.log(2) 가 동시에 실행되는 것이기 때문에실행순서를 예측할 수 없다.프로그램을 설계하다 보면 반드시 특정 함수가 실행된 후 또다른 함수가 실행되어야 하는 경우가 존재한다.한마디로 비동기 프로그래밍을 동기 프로그래밍처럼 동작하도록 바꿔줘야 한다는 말인데,자바스크립트에서는 이러한 상황을 콜백함수(Callback function)를 통해 해결한다.하지만 콜백을 너무 남발하다보면 콜백 .. 2018. 2. 27.
React Native Child에서 Parent State 변경하는 방법 리액트 네이티브로 어플을 만들고 있는데 검색기능을 구현해야했다.기존에 타임라인 형식으로 글을 보여주는 게시판이 하나 있었는데검색기능도 필요할 것 같아서 구현하던 중 막히는 부분이 생겼다.현재 나는 Board Component에서 게시글을 보여주는 형태인데,특정 버튼을 클릭하면 Search Component가 Modal형태로 올라온다.(게시글에 관련된 정보는 모두 Board Component의 State에 박혀있다)따라서 Board가 Parent이고 Search가 Child Component이다.Search에서 API요청을 하고 받아온 값을 Parent인 Board의 State로 업데이트 해줘야 하는데리액트에서의 State는 부모에서 자식으로 흐르기 때문에 어떻게 해줘야 할지 난감했다.그러다 방법을 찾았는.. 2018. 2. 26.

티스토리툴바