월 15,400원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 배우는 리액트 네이티브
커스텀 컴포넌트 관련 질문드립니다
안녕하세요 커스텀 컴포넌트 강의를 듣고 따라하고 있는데 react native에서 Button 부분 받아와서 작성한 코드만 가상기기에 적용이 안됩니다. 예를 들어 가상기기의 초기 화면에 뜨는 텍스트의 단어를 수정한 것은 바로바로 반영이 되는데, MyButton 등의 항목은 나타나지 않을 뿐더러 아예 반영이 되지 않습니다.. 코드 에러도 나는 것이 아니여서 무엇이 잘못되었는지 모르겠습니다 ㅠㅠ https://blog.naver.com/wlsgywjd22/222724101803 여기에 영상 등록해놓았는데 어디 문제일까요.. ++ 혹시 TouchableOpacity 대신 Pressable을 이용해야 하나요? Pressable을 이용해야 한다면 문법이 좀 다른가요?ㅜㅜ 그냥 TouchableOpacity 단어 대신 Pressable을 치환하는 걸로는 정상 실행이 안되네요... 코드는 우선 pressable로 바꾼 후 코드로 올립니다 MyButton.js import React from 'react'; import { Pressable,View,Text } from 'react-native'; const MyButton = () => { return ( <Pressable onPress={() => alert('MyButton')}> <View Style={{backgroundColor: 'red', padding: 10}}> <Text style={{ fontSize: 20, color:'white'}}>MyButton</Text> </View> </Pressable> ); }; export default MyButton; App.js import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View, Button} from 'react-native'; import MyButton from './MyButton'; export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> <Button title="Button" onPress={() => alert('Click!!')} /> <MyButton /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
- 미해결처음 배우는 리액트 네이티브
Axios
axios로 불러오는 방식으로 하려면 어떻게 해야하나요...??
- 미해결처음 배우는 리액트 네이티브
윈도우 운영체제로 ios 개발환경구성
윈도우 운영체제를 이용하는 PC로는 ios 개발환경 구성을 못하나요? ㅠㅠ
- 미해결처음 배우는 리액트 네이티브
ReferenceError: Can't find variable: Data
import React, { useState } from 'react'; import { StatusBar, Dimensions } from 'react-native'; import styled, {ThemeProvider} from 'styled-components/native'; import {theme} from './theme'; import Input from './components/Input'; import Task from './components/Task'; const Container = styled.SafeAreaView` flex: 1; background-color: ${({theme}) => theme.background}; align-items: center; justify-content: flex-start; /* 타이틀이 상단에 나타나도록 justify-content의 값을 flex-start;로 지정해준다. */ `; const Title = styled.Text` font-size: 40px; font-weight: 600; color: ${({theme}) => theme.main}; width: 100%; align-items: flex-end; padding: 0 20px; `; /* styled components를 이용해서 Title이라는 이름에 새로운 컴포넌트를 만드는 작업이다. font-size와 font-weight 그리고 글자 color를 설정해주는데 글자 color는 theme.js에 정의해놓은 main을 가져와서 사용할것이다. 가로(width)는 전체를 차지하게하고, 글자를 왼쪽(align-items: flex-end;)에서부터 하도록한다. 화면의 끝에 바짝붙지않도록 padding을 주어서 약간 떨어지게 설정을한다. */ const List = styled.ScrollView` flex: 1; width: ${({ width }) => width -40}px; `; export default function App() { const width = Dimensions.get('window').width; const tempData = { 1: { id: '1', text: 'React Native', completed: false }, 2: { id: '2', text: 'Expo', completed: true }, 3: { id: '3', text: 'JavaScript', completed: false }, }; const [tasks, setTasks] = useState(tempData); const [newTask, setNewTask] = useState(''); const addTask = () => { const ID = Data.now().toString(); const newTaskObject ={ [ID] : {id: ID, text: newTask, completed: false }, }; setNewTask(''); setTasks({...tasks, ...newTaskObject}); }; return ( <ThemeProvider theme={theme}> <Container> <StatusBar style="light-content" backgroundColor={theme.background} /> <Title>TODO List</Title> <Input placeholder="+ Add a Task" value={newTask} onChangeText = {text => setNewTask(text)} onSubmitEditing={addTask} /> <List width = {width}> {Object.values(tasks) .reverse() .map(item => ( <Task key={item. id} text={item.text} /> ))} </List> </Container> </ThemeProvider> ); } 강의에 나오는것과 똑같이 했는데 +Add a Task에 글자입력하고 enter를 누르면 오류가 나오네요ㅠㅠ
- 해결됨처음 배우는 리액트 네이티브
Object.values requires that input parameter not be null or undefined.
IconButton 만들기에서 Object.values requires that input parameter not be null or undefined. 라는 오류가 나타나는데 왜 그런걸까요 ? 도움 부탁드립니다. IconButton.propTypes = { icon: PropTypes.oneOf(Object.values(icons)).isRequired, onPress: PropTypes.func, }; 위 코드를 빼니까 정상적으로 동작하네요 .. icons를 undefined으로 인식하는데 무엇이 잘못된걸까요? * 파일구조 theme.js export const theme = { background: '#111111', itemBackground : '#333333', main: '#778bdd', text: '#eeeeee', done: '#666666' }; Input.js import React from 'react'; import styled from 'styled-components/native'; import {Dimensions, useWindowDimensions} from 'react-native'; import PropTypes from 'prop-types'; const StyledInput = styled.TextInput.attrs(({theme}) => ({ placeholderTextColor: theme.main, }))` width: ${({width}) => width - 40}px; height: 60px; margin: 3px 0; padding: 15px 20px; border-radius: 10px; font-size: 25px; background-color: ${({theme}) => theme.itemBackground} color: ${({theme}) => theme.text}; `; const Input = ({placeholder, value, onChangeText, onSubmitEditing}) => { // const width = Dimensions.get('window').width; const width = useWindowDimensions().width; return <StyledInput width={width} placeholder={placeholder} maxLength={500} autoCorrect={false} autoCapitalize="none" returnKeyType="done" keyboardAppearance="dark" onChangeText={onChangeText} onSubmitEditing={onSubmitEditing} value={value}></StyledInput> } Input.propTypes = { placeholder: PropTypes.string, value: PropTypes.string.isRequired, onChangeText: PropTypes.func.isRequired, onSubmitEditing: PropTypes.func.isRequired } export default Input; App.js import { StatusBar } from 'react-native' import React, {useState} from 'react'; import styled, {ThemeProvider} from 'styled-components/native'; import {theme} from './theme'; import Input from './components/Input' import IconButton from './components/IconButton' import { icons } from './icons'; /** Styled Component */ const Container = styled.SafeAreaView` flex: 1; background-color: ${({theme}) => theme.background}; align-items: center; justify-content: flex-start; `; const Title = styled.Text` font-size: 40px; font-weight: 600; color: ${({theme})=> theme.main}; width: 100%; align-items: flex-end; padding: 0 20px; `; export default function App() { const addTask = () => { alert(newTask); setNewTask(''); } const [newTask, setNewTask] = useState(''); return ( <ThemeProvider theme={theme}> <Container> <Title>TODO List</Title> <Input placeholder="+ Add a Task" value={newTask} onChangeText = {text => setNewTask(text)} onSubmitEditing={addTask}></Input> <StatusBar barStyle= "light-content" backgroundColor={theme.background} /> <IconButton icon={icons.check} onPress={()=>alert('check')}></IconButton> {/* <iconButton icon={icons.uncheck} onPress={()=>alert('uncheck')}></iconButton> <iconButton icon={icons.edit} onPress={()=>alert('edit')}></iconButton> <iconButton icon={icons.delete} onPress={()=>alert('delete')}></iconButton> */} </Container> </ThemeProvider> ); } icon.js import Check from '../assets/icons/check.png'; import Delete from '../assets/icons/delete.png'; import Uncheck from '../assets/icons/uncheck.png'; import Edit from '../assets/icons/edit.png'; export const icons = { check: Check, uncheck: Uncheck, edit: Edit, delete: Delete, }; iconButton.js import React from 'react'; import {TouchableOpacity, View} from 'react-native'; import styled from 'styled-components/native'; import PropTypes from 'prop-types'; import icons from '../icons' const Icon = styled.Image` width: 30px; height: 30px; margin: 10px; tint-color: ${({theme})=> theme.text}; `; const IconButton = ({icon, onPress}) => { return ( <TouchableOpacity onPress={onPress}> <View> <Icon source={icon}></Icon> </View> </TouchableOpacity> ); }; IconButton.propTypes = { icon: PropTypes.oneOf(Object.values(icons)).isRequired, onPress: PropTypes.func, }; export default IconButton;
- 미해결처음 배우는 리액트 네이티브
expo go와 연결시 계속되서 오류가 생깁니다!
안녕하십니까 강사님 강의정말 유익하게 잘듣고 있습니다. 2번째 프로젝트의 login등록 구현파트에서 firebase를 이용하여 구현하다가 로그인 버튼을 눌렀을 시 Profile화면으로 이동하지 않아 다시키고 cmd에서 expo start를 실행한 후 expo 어플을 통해 바코드를 찍고 연결하는 도중 01:36 Building JavaScript bundle: error ERROR 01:36 While trying to resolve module `firebase` from file `C:\Windows\System32\Capstone\src\firebase.js`, the package `C:\Windows\System32\Capstone\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Windows\System32\Capstone\node_modules\firebase\index`. Indeed, none of these files exist: * C:\Windows\System32\Capstone\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json) * C:\Windows\System32\Capstone\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json) 이러한 오류가 발생하였습니다. 제가 어느부분에서 놓친것이 있나요? 다시돌려봐도 찾기 힘들어서 질문을 올립니다..! GitTutorials/Capstone at master · sss654654/GitTutorials (github.com)
- 미해결처음 배우는 리액트 네이티브
채널화면에서 에러가 나네요 ..
아마 파이어베이스에서 channels 의 하위 컬렉션 members 생성시의 에러인것 같은데 실력부족입니다 https://github.com/dongguntechnology/rn_chat Possible Unhandled Promise Rejection (id: 0): FirebaseError: Function doc() cannot be called with an empty path.
- 미해결처음 배우는 리액트 네이티브
TypeError: Cannot read properties of undefined (reading 'toString') 이란 에러가 뜨네요
https://github.com/dongguntechnology/rn_chat
- 미해결처음 배우는 리액트 네이티브
firbase firestore database 규칙수정을 아래와 같이 하면 되는지요 ..
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth.id != null; } match /channels/{document=**} { allow read, write: if request.auth.id != null; } } } 실행해보니 missing or insufficient permissions .... 라는 에러가 뜨는데요 지송해요 범준님 ...
- 미해결처음 배우는 리액트 네이티브
아래 에러의 원인을 못찾겠네요 ,,,
https://github.com/dongguntechnology/rn_chat 17:20 Invariant Violation: "main" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called. rror: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
- 미해결처음 배우는 리액트 네이티브
안드로이드 변수 오류
1. github 주소: https://github.com/Gophycal/Inflearn 2. 오류사항 ReferenceError: Can't find variable: IDBIndex - ... 9 more stack frames from framework internals Invariant Violation: "main" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called. at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError 3. package.json { "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "expo": "^43.0.0", "expo-image-picker": "~11.0.3", "expo-status-bar": "~1.1.0", "firebase": "^9.6.1", "moment": "^2.29.1", "prop-types": "^15.7.2", "react": "17.0.1", "react-dom": "17.0.1", "react-native": "0.64.3", "react-native-gesture-handler": "~1.10.2", "react-native-gifted-chat": "^0.16.3", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-reanimated": "~2.2.0", "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.8.0", "react-native-web": "0.17.1", "styled-components": "^5.3.3" }, "devDependencies": { "@babel/core": "^7.12.9" }, "private": true } 4. 문제 발생 지점: 안드로이드 애뮬레이터(Pixel_4) 5. 오류 내용 프로필 화면을 만들던 중 일어난 오류입니다. 구체적으로 navigations의 index, 그리고 firebase.js, screens의 Profile을 수정하여, 'Profile' 스크린에서 사용자의 정보에 따라 이름, 이메일, 사진 등을 보여주는 기능을 추가하는 중에 일어난 오류입니다. 지금 한 5시간째 찾아보고 있는데, 어떻게 해결하는지 잘 모르겠습니다. 추측으로는 노드 모듈에서 버젼이 안 맞는 게 있는 것 같은데, yarn이라든지, npm이라든지 노드 모듈 다 지우고 다시 install 하거나 add 했는데, 오류가 사라지지 않네요. IOS 애뮬레이터(iPhone 13)에서는 오류가 없는데 이상합니다.
- 미해결처음 배우는 리액트 네이티브
undefined disabled 란 에러가 뜨는데 아무래도 변수 props 전달에서
아무래도 변수 props 전달에서 문제가 발생한것 같은데 제실력으론 찾기가 어렵네요 범준님 ... https://github.com/dongguntechnology/rn_chat
- 미해결처음 배우는 리액트 네이티브
범준님 오랜만이네요 새해 건강+부자되세용
복습과정에서 에러가 나는데 아무리 뒤져봐도 통 ~ ~ ~ 아래는 저의 깃헙주소이구요 https://github.com/dongguntechnology/rn_chat 에러내용은 ErrorMessage.js 에서 아래 에러메세지가 발생하는 것 같습니다 늘 건강하시고 번창하시길 ... Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
- 미해결처음 배우는 리액트 네이티브
빌드 관련 문의
expo build:android 로 빌드시에는 정상적으로 빌드가 되지만 expo build:ios 빌드시 시뮬레이터를 하거나 아카이브를 선택을 해도 동일한 빌드 오류가 발생을 하는데 특별한 빌드오류 정보가 없는데... 어떤 부분을 찾아 봐야될지 문의 드립니다. expo.dev 에 아래와 같은 오류만 계속 나오고 빌드가 되지 않아 문의 드립니다. Error: ibtool exited with non-zero code: 255 at ChildProcess.completionListener (/usr/local/turtle-js/node_modules/@expo/xdl/node_modules/@expo/spawn-async/build/spawnAsync.js:52:23) at Object.onceWrapper (events.js:421:26) at ChildProcess.emit (events.js:314:20) at ChildProcess.EventEmitter.emit (domain.js:483:12) at maybeClose (internal/child_process.js:1022:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5) ... at spawnAsync (/usr/local/turtle-js/node_modules/@expo/xdl/node_modules/@expo/spawn-async/build/spawnAsync.js:17:21) at spawnAsyncThrowError (/usr/local/turtle-js/node_modules/@expo/xdl/build/detach/ExponentTools.js:201:45) at Object.configureLaunchAssetsAsync (/usr/local/turtle-js/node_modules/@expo/xdl/build/detach/IosLaunchScreen.js:330:53) at async Object.configureAsync (/usr/local/turtle-js/node_modules/@expo/xdl/build/detach/IosNSBundle.js:714:7) at async Object.configureAndCopyArchiveAsync (/usr/local/turtle-js/node_modules/@expo/xdl/build/detach/IosShellApp.js:367:3) at async Object.runShellAppBuilder [as default] (/usr/local/turtle-js/build/builders/utils/ios/shellAppBuilder.js:67:12) at async Object.buildSimulator [as default] (/usr/local/turtle-js/build/builders/ios/simulator.js:11:5) at async Object.iosBuilder [as ios] (/usr/local/turtle-js/build/builders/ios/index.js:33:13) at async build (/usr/local/turtle-js/build/jobManager.js:181:33) at async processJob (/usr/local/turtle-js/build/jobManager.js:118:32) at async Object.doJob (/usr/local/turtle-js/build/jobManager.js:49:5) at async main (/usr/local/turtle-js/build/server.js:66:13)
- 미해결처음 배우는 리액트 네이티브
안녕하세요! 2분 30초쯤 질문드립니다.
const tempData: ITaskType = { 1: { id: '1', text: 'React Native', completed: false }, 2: { id: '2', text: 'React', completed: true }, 3: { id: '3', text: 'Expo', completed: false }, }; const [newTask, setNewTask] = useState<string>(''); const [tasks, setTasks] = useState<ITaskType>(tempData); const addTask = () => { if (newTask.trim().length === 0) { return; } const ID = Date.now().toString(); const newTaskObject = { [ID]: { id: ID, text: newTask, completed: false }, }; setNewTask(''); setTasks({ ...tasks, ...newTaskObject }); }; return ( <ThemeProvider theme={basicTheme}> <Cotainer> <Title>Todo List</Title> <StatusBar barStyle='light-content' backgroundColor={basicTheme.theme?.background} /> <Input placeholder='+ Add a Task' value={newTask} onChangeText={(text) => setNewTask(text)} onSubmitEditing={addTask} // onSubmitEditing : 키보드 완료버튼 /> <List width={width}> {Object.values(tasks) .reverse() .map((item) => ( <Task text={item.text} key={item.id} /> ))} </List> </Cotainer> </ThemeProvider> ); 강의에서는 이렇게 진행이 되었는데요. Object.values를 찾아보니까 tasks의 value 값을 배열로 바꿔주더라구요. 저같은 경우는.. const tempData2= [ {id:'1' , text:'React Native', completed:false}, {id:'2' , text:'React Native2', completed:true}, {id:'3' , text:'React Native3', completed:false} ] const [tasks,setTasks] = useState(tempData2); setTasks([ ...tasks, {id:ID , text:newTask,completed:false}]); tasks.map((task) => <Task key={task.id} text={task.text} ></Task>) 처음부터 배열형식으로 하는 타입이라.. 혹시 배열타입이 아닌 오브젝트 형식에서 하신 이유가 있으신지 궁금합니다.
- 미해결처음 배우는 리액트 네이티브
리액트 메모를 적용했는데 이전에 렌더링 했던 내용을 다시 렌더링 해요
https://github.com/corn1200/rn-chat/blob/master/src/screens/ChannelList.js React.memo를 코드에 적용했음에도 오류 메세지도 없이 그냥 이전에 렌더링 했던 아이템이 다시 렌더링 되는데 왜 그런지 알 수 있을까요?
- 미해결처음 배우는 리액트 네이티브
강의과정별 즉 단원별로 깃헙에 소스파일이 있으면 더 좋겠습니다
범준님께서 깃헙에 올리신 자료는 최종적으로 완성된 소스파일이라 강의과정중에 작성한 수강생의 자료와 비교하여 오류를 찾기에는 너무 힘들군요 ...
- 미해결처음 배우는 리액트 네이티브
현재 강의내용과 관련된 파이어베이스의 버젼이 얼마인지요
현재 최고버젼을 9이상이 나와있는데 버젼차이로 인해 오류가 발생하는 것 같습니다 가급적 강의와 일치하는 버젼을 설치한 후 수업을 다시 듣고져 합니다
- 미해결처음 배우는 리액트 네이티브
Nodejs 를 사용해 mysql 을 react native 모바일앱에 적용하는 것이 가능한지요 ?
본 강의와 조금 벗어난 질문을 드려서 대단히 송구하옵니다
- 미해결처음 배우는 리액트 네이티브
Chat App - Part 2 >> 프로필화면에서 프로필사진수정시 에러
Firebase Storage: User does not have permission to access profile/ .... / photo.png(storage/unauthorized) 이런메세지가 뜨네요