1. THREE.JS 기본 구조 가장 기본이 되는 구조는 Render, Scene, Camera이다. 장면을 만들어서 그 안에 3D 오브젝트를 넣고, 그걸 렌더를 통해서 html 파일 안에 보여주는 순서이다. 1) Render Scene과 Camera의 객체 데이터를 넘겨 받아서 화면 안에 이미지로 그려주는 역할(렌더링)을 한다. 2) Scene 특정한 장면 안에 geometry, mesh, 3D object들이 여러 개가 있을 수 있다. 빛, 안개 등 다양한 요소도 모두 포함하고 있다. 3) Camera 앞 전에 셋팅해놓은 Scene에 담긴 3D 공간들에 대한 정보 데이터를 카메라로 특정 위치를 비춰서 거기 안에 담긴 부분만 렌더러에게 넘기는 역할을 한다. 카메라의 시야각, 시작과 끝지점, 위치를 조절..
1-1. 설치 (npm) npm install --save three 이런 경고창이 뜬다면, npm install -g npm@10.2.0으로 업데이트가 필요한 것이다. 근데 또 10.2.0으로 설치하니까 안되서 npm install -g npm@9로 해주니까 three 설치가 잘 된다. three설치 후에도 package.json이 안보인다면 다음과 같은 명령어를 실행해보자 npm init -y npm install --save three init 처리 후 three를 설치하면 package.json에 추가되는 것이 보인다. 1-2. 설치 (번들) git clone https://github.com/aakatev/three-js-webpack.git cd three-js-webpack npm run s..
- 결과물 요 드롭다운을 만들어볼 것이다. 라이브러리 써서 간단해보이지만... 속성 찾느라 힘들었더란다... - 다운받기 npm install react-native-dropdown-picker - 드롭다운 내부 background color 조절하는 속성 dropDownContainerStyle={{backgroundColor: 'transparent', borderColor:"white",zIndex:100}} - 드롭다운 내부 text color 조절하는 속성 listItemLabelStyle={{ color: 'white', zIndex:"100" }} - 드롭다운 arrow icon 크기 조절하는 속성 arrowIconStyle={{width: 20, height: 20}} - 드롭박스 내부 v..
1. 기존 코드 나는 니꼬쌤의 react native 기본 강의를 보면서 간단한 날씨 어플을 만들었다. // import { StatusBar } from 'expo-status-bar'; import * as Location from "expo-location"; import { useEffect, useState } from 'react'; import { StyleSheet, Text, View, ScrollView, Dimensions, ActivityIndicator } from 'react-native'; const {width:SCREEN_WIDTH} = Dimensions.get("window"); const API_KEY ="15195b65e8894febd84d5a8e8357ef06"; ..
ActivityIndecator을 쓰면 된다. import { ActivityIndicator } from 'react-native'; 이런식으로 import를 해주고, 컴포넌트처럼 써주면 된다. 내부에 스타일도 저런식으로 넣어줄 수 있다. 결과
Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org 위 사이트에서 무료 날씨 정보를 얻어올 것이다. 가입하고 Current Weather이나 3-hour Forecast 5 days 중 하나를 선택해 들어가 subscribe를 한다. 가만 읽어보니 ..
1. expo-location 다운 expo install expo-location 2. expo-location 사용법 import * as Location from "expo-location"; export default function App() { const [location, setLocation] = useState(); const [ok, setOk] = useState(true); const ask = async () =>{ const permission = await Location.requestForegroundPermissionsAsync(); console.log(permission); } useEffect(()=>{ ask(); },[]); } //결과 {"canAskAgain":..
https://reactnative-archive-august-2023.netlify.app/docs/0.65/scrollview ScrollView · React Native Component that wraps platform ScrollView while providing integration with touch locking "responder" system. reactnative-archive-august-2023.netlify.app 주로 공식문서에서 react native 기본을 떼자 1. flex 웹에서는 flex direction 기본 방향이 row이지만, react native에서는 기본 방향이 column이다. 핸드폰의 크기는 정말 다양하기 때문에 대부분 width나 height을 설..
