rhanziy

AsyncStorage만들던 어플을 껐다 켜도 데이터가 저장이 되는 storage를 구성해보자! react native에서 제공하는 AsyncStorage를 프로젝트에 설치해 사용하면 된다. import도 잊지맙시다.npx expo install @react-native-async-storage/async-storage import AsyncStorage from '@react-native-async-storage/async-storage'; 저장하기(set)saveToDos -> AsyncStorage.setItem(데이터) 비동기 함수로 처리한다. JSON형식으로 저장해야함~ const addToDo = async() => { if(text === '') { return } const newToDos..

사용자의 text input을 다루는 컴포넌트이다. 여러가지 속성이 있음. keyboardType은 상황에 따른 키패드 유형을 지정할 수 있음 default number-pad decimal-pad numeric email-address phone-pad url returnKeyType은 엔터버튼 전송/이동 등으로 바꾸기 onChangeText는 input창이 바뀔때마다 실행할 함수 onSubmitEditing은 submit 버튼 클릭 시 실행할 함수 수정 완료시에 실행할 함수를 작성하는 onEndEditting도 있다. 아래 코드는 간단하게 To-Do 앱 만드는 중 . . . . export default function App() { const [working, setWorking] = useStat..

button 컴포넌트는 안드로이드/ios에서 다르게 보이기때문에 관리하기 쉽게하기위해 react native에서 제공하는 사용자의 터치를 감지하는 컴포넌트를 사용한다. import { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, Pressable } from 'react-native'; ◾ Touchable component : 터치 이벤트에 반응하여 시각적인 피드백을 제공한다. 버튼, 링크, 이미지 등과 같이 터치에 의해 동작하는 요소를 구현할 때 사용된다. 터치 시 투명도 변경, 배경색 변경, 하이라이트 효과 등 다양한 스타일 변화를 적용할 수 있다. TouchableOpacity - 터치 시 activeOpacity 속성으로 투명..

expo를 설치했다면 자동으로 icon 라이브러리도 설치된다. Fontisto 의 아이콘 스타일을 import 하고 import { Fontisto } from '@expo/vector-icons'; 원하는 스타일의 아이콘태그로 사용할 수 있다. 단일 아이콘이라면 사이트에서 복사해다 쓰면 되는데, 나는 날씨에 맞게 아이콘을 표출하고싶어서 이렇게 작성했다. icon object 생성해서 weather API의 day데이터와 일치하는 아이콘 띄워주기.(물론 사이트에서 일일이 찾음) const icons = { "Clouds" : "cloudy", "Rain" : "rains", "Clear" : "day-sunny", "Snow" : "snowflake", "Atmosphere" : "cloudy-gusts..

import부분을 살펴보면 react-native에서 가져오는게있고 expo에서 가져오는게 있다. react-native에서 기존에 지원하던 라이브러리들을 축소해 더 가볍게 개발할 수 있게 바뀌었고, 그밖에 expo사이트에서 에서 필요한 라이브러리를 import해 사용하면 됨. import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( hello ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignIte..

1. React Native ?React Native는 iOS 및 Android용 실제 네이티브 렌더링 모바일 애플리케이션을 개발을 위한 자바스크립트 프레임워크이다. 이름 그대로 React를 기반으로 앱개발을 할 수 있다. 즉, React에 익숙하다면 웹 뿐만 아니라 React Native로 따로 네이티브 지식 (iOS, Android) 없이 JavaScript와 React 지식만으로 iOS와 Android 앱개발이 가능해지게 됨. 크로스 플랫폼 개발을 통해 개발자는 단일 코드베이스를 사용하여 여러 플랫폼 또는 장치와 호환되는 소프트웨어 개발을 할 수 있다. 즉, 하나의 코드베이스로 여러 플랫폼(iOS, Android)에 대응하여 개발이 가능한 것. 2. React Native 동작방식React Nati..

이미지 미리보기를 구현할때, 파일을 선택하면 img와 img 삭제 버튼 태그를 동적으로 생성했다. $('#img-preview').append(` x `) 그런데 저 id가 del인 버튼에 클릭이벤트를 달아 콘솔에 찍어도 아무 반응이 없는 것! 당연하다. html이 렌더링이 된 후 생성한 태그는 못찾지 응응ㅋ 그럼 document 자체에서 찾으면 된다. $(document).on('click', '#del', function(e){ e.currentTarget.parentElement.remove(); }); 따로 버튼에 data-id 속성을 지정하지않아도 이벤트리스너 e.currentTarget에 담겨있으니 선택한 element의 부모ele를 찾아 지우면 삭제 끗.

node.js로 프로젝트 생성중에 이미지를 업로드 하는 기능은 multer 미들웨어를 통해 구현했다. 이제 파일을 선택했을 때 preview를 만들어주고 싶었는데 서버단에서 계속 삽질함;; 걍 간단하게 자바스크립트의 FileReader() 객체로 화면단에서 구현가능했다. html 코드 + 제목 작가 카테고리 선택 국내도서 외국도서 등록 🔽 css코드 더보기 input[type="file"] { display: none; } .fileLabel { display:block; min-width: 150px; height:150px; margin-right: 5px; color: #8d8d8d; font-size:20px; text-align: center; line-height:150px; border: 1..