문제상황 자바스크립트 기반의 리액트 네이티브 앱 개발을 하면서 Expo도구로 아이폰과 연동하여 구동을 테스트하던 중이었다. '스파르타 코딩 클럽' 에서 앱 개발 종합반을 수강하면서 4주차까지 공부하며 큰 오류, 작은 오류 잘 해결해왔었다. 이번에도 조금 문제가 생겼었는데 바로 Expo를 통해 QR코드를 촬영하여 지금까지 만든 앱을 아이폰에서 구동시키고자 하였으나 밑의 그림처럼 에러가 발생하였다. 오류 발생 내용을 요약하자면 "idb 오류"였다. 해결과정 그래서 수강중인 강의의 튜터분께 문의를 드렸더니 빠른 시간 내에 답장을 해주셨다. (너무 감사할 따름) idb오류는 firebase의 버전과 expo 버전 사이 호환성 충돌 문제로 앱 내 프로젝트 폴더에 metro.config.js를 생성한 뒤 const..
파이어베이스는 서버를 쉽게 사용할 수 있도록 도와주는 서비스입니다. 이번 공부일지에서는 파이어베이스에 가입하고, 프로젝트에 적용하여 사용하는 방법까지 공부해보겠습니다. 파이어베이스를 사용하기 위해서는 구글 계정으로 로그인 후 '시작하기'를 눌러 진행해야합니다. 가입을하고 프로젝트를 생성했으면 이제 앱에 연결할 수 있습니다. 정리하자면, 1) 파이어베이스에 가입 2) 파이어베이스 프로젝트를 생성 (만든 프로젝트와 이름이 일치해야합니다.) 3) 그 후 두개를 연결 파이어베이스에 가입을 완료하였으면, 1) 프로젝트 시작하기 2) 프로젝트 이름 지정 (Expo 프로젝트와 이름을 일치시키는게 관리하기 편합니다.) 3) 구글 애널리틱스 사용 설정 >> 이 서비스를 기본적으로 권장 cf) 구글 애널리틱스? >> 웹사..
일반적으로 앱 서비스는 실시간으로 변경되어야하는 데이터가 있거나, 인터넷 환경 연결로 상시 업데이트 되는 환경이 중요합니다. 이번에는 앱에 실시간 날씨 데이터를 외부 API로부터 받아와 적용시키는 방법을 공부해보고자합니다. 서버가 제공하는 도메인을 그대로 사용하여, 실제 날씨 데이터를 넣고자합니다. 날씨 데이터는 무료 API인 "openweathermap api" 를 사용합니다. 과정으로는) 1) 현재 위치 (좌표) 데이터 필요, 가져오기 2) 위치 데이터를 이용해 현재 위치 날씨 데이터를 가져오기 가 됩니다. 평소 다른 앱 서비스들을 보면 처음 앱을 시작할때나 특정한 경우에 앱 위치 정보권한을 물어보게 됩니다. 따라서 먼저 앱 위치 정보 권한을 설정하여야하는데, expo install expo-loca..
지금까지 팁 데이터들을 data.json(로컬파일)로 관리하였는데, 이는 실시간으로 바뀌어야하는 데이터나 많은 유저들이 접근해야하는 앱 서비스일 경우에는 적합하지 않습니다. 굉장히 무거워지기 때문에 파이어베이스라는 서버를 사용해 데이터를 관리하는 방법을 공부해보고자 합니다. 지금까지는 프론트엔드(화면을 그리는 것)를 공부했는데, 서버는 백엔드 부분을 다루게됩니다. 앱에서 다양한 요소들이 화면에 보여지게 될 때 map 함수로 반복하여 화면에 그렸습니다. 서버를 사용하게되면 다른 방식으로 구현할 수 있게 됩니다. >> 쉽게 서버를 제공해주는 서비스를 사용하게됩니다. 이는 '서버리스'라고 합니다. 서버리스중에서 가장 유명한 구글에서 제공중인 파이어베이스라는 서버리스를 사용할 것입니다. 데이터 요소가 많아질수록..
1. 자바스크립트란? >> 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다. 2. 브라우저는 왜 자바스크립트 언어를 사용? 2-1) HTML 안에 파이썬, 자바 언어사용은 불가능? >> 브라우저에 자바스크립트 언어 사용은 이미 만들어진 표준이기때문에 모든 브라우저는 기본적으로 자바스크립트를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+자바스크립트 구조로 되어있습니다. >> 이미 많은 브라우저들이 자바스크립트로 만들어져있어서 파이썬이나 자바로 굳이 만들 이유가 없기때문에 표준처럼 굳어진 것입니다. 3. 자바와 자바스크립트의 차이점? >> 아무관련 없다고 봐도 무방합니다. 4. 자바스크립트 사용법? >> 태그 안에 CSS를 넣었듯이 태그 안에 자바스크립트를 넣습니다. ex) on..
CSS의 간단한 문법을 복습해보고 CSS 꾸미기의 유용한 도구인 부트스트랩에 대해서 공부해보고자 합니다. : 내 눈에 보이는 부분입니다. : 구역을 나누는 태그로, 여러가지 태그들을 한번에 옮길때 묶어서 옮길 수 있습니다. : 문단을 뜻합니다. : 문장 중에서 특정 글자에만 무언가를 효과주고싶을때 사용합니다. : 하이퍼링크를 사용할 수 있습니다. : 가로선을 주는 태그 CSS 주석처리 : 태그에서 /* 텍스트 */ HTML 주석처리 : 태그에서 1. div 태그 >> Button의 부모태그는 div태그라고 한다. >> 부모태그의 내용을 상속받는 것이다. 2. image 태그 이미지를 넣을때는 background-image:url("링크"); background-size:cover; background-p..
리액트 네이티브로 앱개발을 하면서, 다양한 페이지를 구현했지만 그 페이지들 간의 이동에 대해서는 아직 구현하지 못했었습니다. 리액트의 네비게이터 기능을 이용하여 페이지 간 이동에 대해서 공부해보고자 합니다. 네비게이터? : 페이지 끼리 이동할 수 있게끔 만드는 것으로, 웹 사이트를 이용하듯 앱에서 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리입니다. ex) 가로방향으로 슬라이드 했을 때 다음페이지로 넘어가는 기능이 포함됩니다. cf) React Navigation 공식문서에서 정말 좋은 기능들을 가져다 쓸 수 있습니다. https://reactnavigation.org/ 1. React Navigation 공식문서의 installation 에는 npm과 Yarn ..
리액트 네이티브로 앱 개발을 하다보면, 앱 화면을 보면서 스마트폰의 배터리 잔량, 인터넷 연결상태, 시간등을 확인하고 싶을때가 있습니다. 이를 표시해주는 기능이 '상태바 (Statusbar)' 입니다. 이 상태바를 표시해주는 방법에 대해 공부해보겠습니다. - 기본값은 WHITE(흰색)으로 되어있기때문에, 몇시인지, 배터리, 와이파이 연결 등 잘 보이지 않습니다. 1. 먼저 상태바는 Expo에서 제공해주는 도구를 설치해주어야합니다. 2. 설치 후 이 도구에서 꺼내서 사용하기 expo install expo-status-bar 3. 기존 white로 되어있어 보이지 않던 상태바를 보이게 하기 => (MainPage.js) 에 추가 StatusBar style="black" ** 기본적으로는 스마트폰에는 st..
리액트 네이티브로 앱 개발을 할 때 알아둬야하는 리액트 기초지식에 대해서 공부해보겠습니다. 리액트의 간단한 과정을 살펴보자면, (컴포넌트 / 상태 / 속성) ** 컴포넌트에 Props(속성) 가 데이터를 전달해주면 컴포넌트 안에 있는 State(상태)가 그 데이터를 관리하게됩니다. 1. 컴포넌트 : 정해진 태그들을 사용하여 화면의 일부분들을 만드는 것을 말합니다. ex) 페이지를 여러 개로 나눠서 작성하고 관리한 것조차 컴포넌트라고 할 수 있습니다. ex) 버튼, 이미지, 전체화면조차 가능합니다. ex) 크게는 "코드를 분할해서 관리했다"를 의미합니다. 2. State (상태) : 컴포넌트 안에서 데이터를 관리하는 방법 : 하나의 파일, 페이지 등과 같은 의미입니다. >> 리액트에서는 상태가 바뀌어야 화..
