Mobile App(13)
-
[JavaScript] 비동기 처리 방법 (promise, async & await)
https://whales.tistory.com/131 님의 글을 정리보며 내가 이해한 내용을 덧붙여보겠다! 동기는 요청을 보낸 후 응답을 받아야 다음 요청을 실행할 수 있다. 반면, 비동기는 요청을 보낸 후 응답과 관계없이 다음 요청을 실행한다. 따라서, 동시에 여러 작업을 처리할 수 있다. 비동기 ex) fetch, axios의 api 요청, setTimeout, 파일 읽기 아래는 동기/비동기의 차이를 명확히 이해할 수 있었던 이미지이다!! 비동기 코드를 처리하는 promise와 async & await를 알아보자. promise 하나의 함수를 인자로 받고, promise가 생성되는 즉시 인자로 받아진 함수(실행자 함수라고 함)도 즉시 실행된다. 실행자 함수는 다시 2개 함수(resolve, reje..
2023.03.19 -
[React-Native] ExpoCLI와 React Native CLI
react native를 사용하여 앱을 개발하는 방법은 크게 두 가지가 있다. 1. expo-cli 사용 2. react-native-cli 사용 expo-cli는 - 개발 시작과 배포가 매우 편리하다. - RN을 위한 설정이 미리 구성되어있어서 초기 설정이 간단하다. - 각 플랫폼의 IDE(android -> android studio, iOS-> Xcode)를 설치하지 않고도 시뮬레이터를 사용할 수 있다. 하지만, - 네이티브 파일을 제어할 수 없고, 모든 라이브러리를 사용할 수도 없다. - expo에서 제공하는 api만 사용 가능하고, 필요한 기능이 없어도 모듈을 만들어서 사용할 수 없다. ==> 개발하기 편리하지만, 기능이 제한될 수 있다. 따라서, 앱 기능 개발에 제한되지 않는다면 굿 react..
2023.03.19 -
[React-Native] RN은 어떻게 작동할까?1 (가상 DOM)
가상 DOM에 대해 알아보기 전에 DOM이 무엇인지 알아보자! 별코딩님의 React의 가상돔 (Virtual DOM)이 뭔가요? (짱 쉬움) 영상을 보고 정리해보았다! : https://www.youtube.com/watch?v=gc-kXt0tjTM DOM이 무엇일까? 웹 사이트의 글, 버튼,, 하나하나를 요소라고 한다. 그리고, 이 모든 것을 담고 있는 것을 Document 문서라고 한다. DOM이란 웹 페이지의 요소를 트리 형태로 표현한 것이다. 우리는 DOM이 제공하는 api를 통해 DOM구조에 접근할 수 있고, 원하는 요소를 입맛대로 변경할 수 있다. 이 것을 DOM조작이라고 한다. ex) JS: getElementById( ), querySelector( ) 가상DOM이 무엇일까? 가상DOM을 ..
2023.03.15 -
모바일 앱 종류
우리가 사용하는 앱은 개발 측면에서 여러 종류로 분류할 수 있다. 각 앱의 종류와 개발 시 장단점을 알아보자! 1. 네이티브 앱 안드로이드 휴대폰은 안드로이드 운영체제, 아이폰은 iOS 운영체제를 사용한다. 네이티브 앱은 안드로이드 폰, 아이폰 각각의 전용 앱의 각각의 운영체제에 최적화된 앱이다. 따라서, 네이티브 앱 개발은 각각의 운영체제에 맞는 앱을 개발하는 방법이다. 장점) 스마트폰의 모든 기능을 사용할 수 있고, 성능 또한 최대치로 활용할 수 있다. 단점) 안드로이드/iOS 개발자가 각각 필요하다. 개발에 소요되는 인력과 시간이 많이 필요하다. 2. 크로스 플랫폼 앱 네이티브 앱은 하나의 운영체제 당 하나의 코드가 필요한 반면, 크로스 플랫폼 앱은 하나의 코드로 두 개의 운영체제 앱 모두 만들 수..
2023.03.13 -
react-native 앱 따라만들기2
앱을 구성하는 컴포넌트에 대해 알아볼 것이다. View 과 화면분할 return 값에는 무조건 하나의 View만 와야된다 !!!! 여러개의 View를 쓰는 방법은 View를 View로 감싸기. 위 사진처럼 감싼 View의 갯수만큼 한 화면이 분할된다. 이런식으로 분할 가능! flex를 통해 각 화면 크기비율을 다르게 할 수 있음 이건 flex를 각각 2, 1 ,1 로 준 상황 Text 말그대로 글!! 텍스트!! Image 일단 Image 컴포넌트를 import 해주어야 함 3번째 줄에 Image를 추가해준다. import { StyleSheet, Text, View, Image } from 'react-native'; //App.js import React from 'react'; import { Sty..
2021.09.23 -
react native 앱 따라 만들기
https://bit.ly/39t2lO9 개발하는 펭군이님을 따라하면서 배워볼 예정이다! [#2 Component와 메인화면 분할] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React 리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하 dev-pengun.tistory.com 앞서 생성했던 프로젝트인 SampleApp 폴더를 vscode나 pycharm 등 에디터에서 오픈한다. SampleApp은 cmd를 관리자 권한으로 실행하지 않고 생성한 프로젝트다! 관리자 권한으로 생성했으면 C드라이브..
2021.09.23