rhanziy

카카오 간편 소셜 로그인 기능 구현 중 맞닥뜨린 에러. 라이브러리는 /react-native-kakao-login 을 사용했다. 이걸로 몇시간을 삽질했나 우하하!!!^__^ invalid hool call 에러가 뜬 3가지 이유를 알아보자~ 1. react와 react dom버전이 일치하지 않을 수 있다. 이건 뭐,, 패스 2. hook 규칙 위반! 대부분 이 이유로 만났을검니다. 그래서 3번 사유도 패스할거임. 훅 규칙을 아라보자. React에서 함수 컴포넌트를 렌더링하는 동안에만 Hooks를 호출할 수 있습니다. ✅ 함수 컴포넌트 본문의 최상위 레벨에서 호출하세요. ✅ 사용자 정의 Hook 본체의 최상위 레벨에서 호출하세요. 내 로그인 기능 흐름은 원래 이랬다. 1. 카카오 로그인 버튼을 누르면 ge..

Next.js에서는 server component, client component 2가지 종류의 component가 있다! 리액트에서 하던 방식대로 component를 그냥 만들면 server component임. component 만드는법 function 작명() { } return ( html ) 으로 사용 export default function Cart() { return ( Cart ) } function CartItem(){ return( 상품명 $40 1개 ) } 여기서는 CartItem이 server component 임. server component? html 상에 자바스크립트 기능 넣기 불가능(ex. onClick) useState, useEffect 사용 불가능 로딩..

하.. . . . .. .. ...... ToDo 만들면서... 작성한 리스트의 edit 버튼을 누르면 onPress 함수에 의해 해당 key의 isEdit 값을 반전시키고(boolean) isEdit가 true 면 text로 보이던 value값을 TextInput 태그를 통해 수정할 수 있게 기능을 개발하려고 했음... { toDos[key].isEdit === true ? : {toDos[key].text} } ERROR Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. ERROR Warning: Failed prop type: Invalid prop `onSubmitEditing` of..

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..