[React Native] kakao map을 webview로 구현하기(Feat. React.js, Vercel 배포)
·
앱개발/React Native
0. 카카오 개발자 계정 생성하기https://developers.kakao.com/console/app 카카오계정 accounts.kakao.com - 상단의 내 애플리케이션을 클릭하고, 애플리케이션을 추가해줍니다. (절차 생략) - 저희가 사용할 키는 웹에 맵을 사용하므로, 자바스크립트의 키입니다. ( 다른 키 사용시, 맵 안보임 + 이메일로 경고옴) - 플랫폼에서 웹에 도메인을 등록해줍니다.- 개발 시, 보통 http://localhost:3000 입니다. (자신의 개발 혹은 프로덕션 도메인 작성) - 왼쪽 바의 거의 끝쯤에 카카오맵이 있습니다. 클릭해줍니다.- 카카오 맵의 상태를 활성화해줍니다. 그래야 사용가능해집니다.1. 카카오맵을 위한 웹 프로젝트를 생성하기 (React.js)1.1 새로운 웹..
[React Native] 옆으로 스크롤링 하는 달력 만들기
·
앱개발/React Native
1. 결과물 2. Date 코드 ( moment 사용)// components/Date.tsximport React from 'react';import { Text, TouchableOpacity,View } from 'react-native';import moment, { Moment } from 'moment';import styles from '../styles/Calendar.style';import 'moment/locale/ko'; // 한글 로케일을 불러옵니다.import { theme } from '../styles/theme';moment.locale('ko'); // 전역 locale을 한글로 설정interface DateProps { date: Moment; onSelectDat..
[React Native] Mac 에서 안드로이드 스튜디오 설치 및 React Native 프로젝트 안드로이드 빌드
·
앱개발/React Native
1. 안드로이드 스튜디오 설치하기https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android DevelopersAndroid Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.developer.android.com 설치 후 필수 설정: Android SDK 설치Preferences → Appearance & Behavior → System Settings → Android S..
[React Native] 프로젝트 생성 및 초기 세팅 (Typescript)
·
앱개발/React Native
1. 개발환경 준비1-1. Node.js, npm 설치-Node.js: 공식 홈페이지에서 최신 LTS 버전을 설치합니다. (v22.13.1) node -v-npm: Node.js 설치 시 기본 제공됩니다. 1-2. React Native CLI 설치npm install react-native-cli2. React Native 프로젝트 생성2-1. 프로젝트 생성 명령어 실행npx @react-native-community/cli init 자신이 원하는 프로젝트 이름 2-2. 생성된 디렉토리 구조 개요 3. TypeScript 및 타입 관련 패키지 설치3-1. TypeScript 컴파일러와 React, React Native에 대한 타입 정의 파일 설치npm install --save-dev typescri..
[React Native] ios 빌드시 키 체인 입력하라는 창 뜰 때
·
앱개발
문제점따로 키체인을 설정한 적이 없는데 프로젝트를 실제 아이폰과 선으로 연결 후 빌드하려고 할 때, 키체인을 입력하라는 창이 팝업 해결방법맥북의 루트 비밀번호 입력후 '항상허용' 을 체크해줍니다.