전체 글 썸네일형 리스트형 React Native 날씨앱 만들기3 (노마드코더) 이번에는 React Native에서 Icons을 적용해볼 것이다. 사용하는 방법에 대한 문서는 아래 URL에 있는 문서를 참고할 것이고, https://docs.expo.dev/guides/icons/ Icons - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 아이콘을 가져오는 사이트는 아래의 사이트를 사용해서 가져올 것이다. https://icons.expo.fyi/ @expo/vector-icons directory icons.expo.fyi 1. 아이콘 Object 셋팅.. 더보기 React Native 날씨앱 만들기1 (노마드코더) 노마드코더의 React Native를 사용한 날씨앱 만들어보기를 따라할 것이다. 일단 날씨를 하기 전에 내가 위치해있는 위치를 가져오는 API를 사용해볼 것이다. 위치를 가져온 다음, 해당 위치에서 16일 간의 기상 예보를 가져오는 게 목표이다. 전 게시물에서 이야기 했던 것처럼 Expo API 문서에서 Location API를 사용한다. https://docs.expo.dev/versions/v44.0.0/sdk/location/ Location - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. do.. 더보기 github repository 새로운 저장소로 옮기기 가끔씩 github를 사용하다보면 기존 저장소에서 새로운 저장소로 repository 를 옮겨서 관리하고 싶을 때가 있을 것이다. 학교에서 사용하던 계정이였는데 졸업을 했다던지, 회사의 계정으로 사용하고 있었는데 퇴사를 하게 됐다던지 등의 이유가 있을 것이다. 이럴 경우 repository 를 어떻게 옮길 수 있을까? 1. 새로운 계정 회원가입 당연한 말이지만, 우선 repository를 옮기고 싶은 새로운 github 주소로 회원가입을 해야한다. https://github.com/signup GitHub: Where the world builds software GitHub is where over 73 million developers shape the future of software, togeth.. 더보기 React Native 날씨앱 만들기2 (노마드코더) React Native 날씨앱 만들기1 (노마드코더)Weather API를 사용해서 날씨를 가져올 것이다. 사용할 API는 유명한 OpenWeatherMap API를 사용한다. https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs for free. In case your requirements go beyond our freemium account conditions, you may check the entire list of our subscription plans. You can read the How to Start guide and e.. 더보기 expo request time out 이 발생하는 경우 가끔식 request time out이 발생해서 프로젝트의 결과 값을 확인하지 못할 때가 많다. expo request time out 나는 경우는 어떻게 해결해야할까? 1. 네트워크 확인하기 우선 제일 먼저 확인해줘야 하는 것은 같은 네트워크 망에 들어와있는지 확인해야한다. 작업을 하고 있는 컴퓨터의 네트워크와 QR코드로 인식하여 결과 내용을 확인할 모바일이 같은 네트워크에 접속해 있어야 한다. 2. 방화벽 설정 확인하기 Windows > 고급 보안이 포함된 Windows Defender 방화벽 고급 설정 새 규칙에서 Expo 가 사용하고 있는 포트인 19000, 19001을 열어주면 된다. 포트를 선택한다. 3. 터널로 실행시키기 1, 2번 작업을 진행했는데도 오류가 계속 발생하는 경우는 Expo를 .. 더보기 Expo Location API 사용해보기 이 내용은 노마드코더의 React Native로 날씨앱 만들어보기를 학습하면서 작성한 글이다. 오늘은 React Native로 날씨앱을 만들기 위해서 Location API를 사용해볼 것이다. 즉, 유저가 현재 어디에 있는지 API를 사용해서 정보를 가져오는 것이다. 이번 내용은 React Native와는 연관 없는 내용으로 이루어져있다. 하지만, API를 가져오고 사용하는 방법을 공부하면 앞으로 개발할 때 도움이 많이 되므로 한 번쯤 학습해보는 건 나쁘지 않다고 생각하는 편이다. 그럼 시작해볼까요?! 1. Expo Location 설치해주기 API는 Expo의 Location을 사용할 것이니 해당 Expo Location을 설치해주는 게 첫 번째이다. 해당 내용에 관련한 공식 문서는 아래와 같으니 참고.. 더보기 React Native 스크린 크기를 구해보자! (Dimension) React Natvie 에서 width, height의 레이아웃을 사용자마다의 스크린 기준으로 개발하고 싶을 때가 있을 것이다. 스크린의 크기를 가져오기 위해서는 Dimension이라는 React Natvie 문서에서 제공해주는 API를 사용해야한다. import { Dimensions } from 'react-native'; import로 해당 라이브러리를 가져와보자. 가져온 다음 사용하는 방법은 간단하다. const { width, height } = Dimensions.get("window"); window의 width와 height를 가져오는 문구이다. 다양한 방식으로도 표현할 수 있다. const { width: SCREEN_WIDTH } = Dimensions.get("window"); 이런 .. 더보기 React Native Layout React Native를 공부할 때, 참고할 수 있는 문서는 아래와 같다. https://reactnative.directory expo는 많은 라이브러리 제공해준다. React Native에서 제공해줄 수 없는 부분까지 말이다. https://docs.expo.dev/versions/v44.0.0/sdk/async-storage/ AsyncStorage - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev React Native 레이아웃에 대해서 알아보자. React Native.. 더보기 이전 1 2 3 다음
