React (8) 썸네일형 리스트형 React-native expo-cli webview 사용 apk파일 만들기 webview 패키지를 먼저 설치해준다 > expo install react-native-webview 설치 완료후 App.js를 수정 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { return ( ); } marginTop : 20은 핸드폰의 맨위 상태바 때문에 조금 띄워준다 app.json에서 빌드할 앱 정보 변경 { "expo": { "name": "poohot", React-Native Expo-cli 시작해보기 웹페이지를 WebView를 이용해 쉽게 어플로 만들 수 있는걸 알게되었다. 호기심에 Expo-cli를 맛만 본다. 툴은 Vscode 사용 >npm install -g expo-cli 설치 완료 후 > expo init 프로젝트명 명령어를 입력하면 권한 관련 이 시스템에서 스크립트를 실행할 수 없으므로 머시기 저시기 에러가 뜬다. > Get-ExecutionPolicy 를 입력하면 Restricted라고 뜨는데 디폴트로 적용되어있는 제한된 정책값 이라고한다. > Set-ExecutionPolicy RemoteSigned 로컬에서 생성한 스크립트 혹은 신뢰된 배포자의 서명이 있는 스크립트만 가능한 정책값이다. 설정후 다시 expo init 프로젝트명을 입력해준다. 캡처는 못했지만 template 선택이 나오.. 카카오 맵 javascript api 적용하기 - 키워드 검색 참고 가이드 : https://apis.map.kakao.com/web/sample/keywordList/ 기존에 정보를 입력할때 다음 주소 api를 사용했지만 키워드 검색으로 수정했다. 가이드 문서에 javscript + html + css가 다 되어있어서 이를 활용하기로 했다. map을 렌더링할 div 키워드 : 검색하기 리액트를 하면서 아직 미숙해서인지 useState로 사용하다 보면 비동기 문제로 생각대로 관리가 안될때가 있었다. 그래서 전역변수 선언 var markers = []; var ps; var infowindow; var map; useEffect에 사용할 맵을 그리는 함수 drawKeywordMap const drawKeywordMap = () => { var mapContainer .. 카카오 맵 javascript api 적용하기 - 주소로 위치 표시 프로젝트를 개발하면서 가게 데이터를 맵에 표시하기 위해 카카오맵 api를 사용하기로했다. 참고 : https://apis.map.kakao.com/web/ 카카오 맵을 사용하기 위해서 map sdk.js를 사용해야한다. 나는 리액트기 때문에 index.html에 추가해주었다. 자바스크립트 앱키는 카카오 개발자 > 내 애플리케이션에서 확인 하면된다. libraries 파라미터는 기본 맵 services와 맵에 클러스터링을 할 계획이기 때문에 clusterer도 추가해주었다. 맵을 담아줄 div 생성 가이드를 참고해보면 전부 id="map"으로 되어있어서 참고하기 편하게 동일하게 해주었다 width 값과 height 값을 따로 설정을 해주었는데 둘다 %으로 지정할 경우 div의 스타일이 로드되기전 지도가 먼.. 리액트 react-device-detect로 디바이스 구분하기 react-device-detect 패키지로 프론트단에서 디바이스를 구분해서 개발할 수 있다. 패키지 설치 npm install react-device-detect --save js에서 import해준다. import {BrowserView, MobileView, isBrowser, isMobile} from "react-device-detect"; BrowserView, MobileView는 태그로 사용해서 PC인경우 BrowserView, 모바일인경우 MobileView에 개발한 코드가 출력된다. isBrowser, isMobile은 조건으로 사용하면된다. PC 화면 모바일 화면 isMobile, isBrowser 예시 let initMapLevel = 7; if(isMobile){ initMapLe.. React 스크롤 페이징 구현 react-intersection-observer 리액트 프로젝트 개발을 하면서 목록에서 스크롤 페이징 개발 중 이슈가 생겼다. const [shopList, setShopList] = useState([]); const scrollHandle = () => { let scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); let clientHeight = document.documentElement.clientHeight; let scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); if((scrollTop + clientHeight) > scroll.. 카카오 로그인 구현 javascript 푸핫을 만들면서 로그인을 카카오 로그인으로 개발하려고 한다. 카카오 가이드 문서를 참고하면 쉽게 만들 수 있다. https://developers.kakao.com/docs/latest/ko/kakaologin/js 기본적으로 카카오 내 애플리케이션 > 카카오 로그인이 활성화 되어있어야하고 정보 받을 항목을 동의항목에서 설정해주어야 한다. 나는 이름, 프로필 사진, 이메일을 설정했다. 그리고 플랫폼 메뉴에 들어가서 Web에 도메인을 넣어주어야 한다. 개발할땐 http://localhost를 넣어주어야 하지만 배포후 보안상을 위해 제거하도록 하자. 설정 완료 후, sdk를 페이지에 포함시켜주어야 스크립트로 로그인 구현이 가능하다. Kakao.init으로 초기화를 해줘야하는데 이때 값으로 javascript.. React 2. react-router-dom 라우터 사용 create-react-app환경에서 저번에 만든 튕기는공과 material-ui의 Sign, Album 페이지를 라우팅 해보기로 한다. @material-ui/core, @material-ui/icons, react-router-dom을 npm으로 설치해준다. material-ui에서 제공하는 template에서 Album과 Sign을 가져온다 https://material-ui.com/getting-started/templates/ Album.js import React from 'react'; import AppBar from '@material-ui/core/AppBar'; import Button from '@material-ui/core/Button'; import CameraIcon from.. 이전 1 다음
