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 -
react-native 개발 환경 설정
react-native로 앱을 개발할 계획이다. react-native로 웹을 개발하고 안드로이드 앱이면 android studio를 이용해 apk파일로 감싸고, ios앱이면 맥북을 이용해 감싸면 된다. 아마도 chocolatey 설치 Nodejs 설치 python 설치 React Native CLI 설치 JDK설치 안드로이드 스튜디오 설치 안드로이드 스튜디오 SDK 설정 안드로이드 스튜디오 환경 변수 설정 react-native 프로젝트 생성 및 확인 완성! react-native 환경 설정 시작하자! chocolatey 설치 chocolatey: 윈도우즈용 패키지 설치삭제 관리 프로그램이다. cmd를 관리자 권한으로 실행한 뒤 아래 명령어를 실행하고 @"%SystemRoot%\System32\Wind..
2021.09.23 -
인증
인증(authentication)은 사용자의 신원을 확인하는 절차이다. 공통적으로 구현되는 엔드포인트들 중 하나이다. 인증절차의 구현방법, 사용자의 비밀번호 암호화 등에 대해서 알아보자 1.가입절차를 통해 사용자의 아이디와 비밀번호를 생성 2. 가입한 아이디와 비밀번호를 데이터베이스에 저장, 비밀번호 암호화해서 저장 3. 사용자가 로그인할 때 본인의 아이디와 비밀번호 입력 4. 사용자가 입력한 비밀번호를 암호화한 후, 그 값을 이미 암호화되어서 DB에 저장된 비밀번호와 비교한다 5. 비밀번호가 일치하면 로그인 성공 6. 로그인에 성공하면 백엔드 API 서버는 access token 을 프론트엔드 혹은 클라이언트에게 전송한다. 7. 프론트엔드 서버는 로그인 성공 후 다음부터는 해당 사용자의 access t..
2021.08.24 -
API와 HTTP의 관계
API를 개발하기 전에 ! API가 무엇인지 알아보자!! API란 API를 설명하기 위해 주로 식당이 사용된다. 여기서 API는 점원과 같은 역할이다. 1. 손님이 점원에게 음식을 요청한다. 2. 점원이 요리사에게 음식을 요청한다. 3. 요리사가 점원에게 음식을 전달한다. 4. 점원이 손님에게 음식을 전달한다. 요리사와 손님을 연결하는 것이 점원(API)의 역할이다. 여기서 요리사와 손님은 프로그램이고, 음식은 데이터이다. 즉, API는 프로그램 간의 연결 다리이다. API의 역할 1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다. 허용된 사람들에게만 접근성을 부여한다. 2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다. 데이터를 원활히 주고받을 수 있도록 돕는다. 3. AP..
2021.08.09 -
2-3.모델로 데이터 처리하기
웹서비스는 데이터를 처리할 때 대부분 데이터베이스를 사용한다. 데이터를 SQL쿼리 문으로 데이터베이스에 저장하거나 불러올 수 있다. 구조화된 질의를 작성하고 실행하는 등 복잡한 과정이 필요한데, ORM을 이용하면 파이썬 문법만으로도 데이터베이스를 다룰 수 있다. ORM을 이용하면 =>별도의 SQL문법을 배우지 않아도 된다는 장점이 있다. =>데이터베이스 종류에 상관 없이 일관된 코드를 유지할 수 있어서 프로그램을 유지, 보수하기가 편리하다. =>내부에서 안전한 SQL 쿼리를 자동으로 생성해주므로 개발자가 달라도 통일된 쿼리를 작성할 수 있고, 오류 발생률도 줄일 수 있다. [플라스크 ORM라이브러리 사용하기] 1) ORM 라이브러리 설치하기 Flask-Migrate 라이브러리를 설치하면 SQLAlchem..
2021.08.06