월 15,400원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 배우는 리액트 네이티브
김범준님의 강의를 신뢰하는 이유는
간단합니다 마치 오프라인에서 수업을 듣고 질문을 하는것처럼 강의과정중에 수많은 문제들에 대해서 질문을 드리면 항상 자상하게 답변을 주시니 그모습에 너무 감사드리게 되어 향후에도 김범준님의 강의를 들어보고 싶습니다 사실 온라인상에 다른분들의 강의도 많지만 강의과정중에 질문을 올릴수 있는 곳이 없는 데도 많은데다 질문게시판이 있더라도 수강생이 질문을 올리면 답변조차없는 곳들이 대부분이라 수강생들도 강의선택에 이부분을 참고하시면 좋겠습니다
- 해결됨처음 배우는 리액트 네이티브
Firebase Error (Auth / invalid-email) 란 오류가 발생합니다
로그인정보를 정확히 입력해도 오류가 발생합니다 firebase.js 는 수정하였습니다 import {initializeApp} from 'firebase/app'; import {getAuth, signInWithEmailAndPassword} from 'firebase/auth'; import config from '../firebase.json'; const app = initializeApp(config); const auth = getAuth(app); export const signin = async ({email, password}) => { const {user} = await signInWithEmailAndPassword(auth, email, password); return user; }; 로그인정보는 shafeel2@naver.com dch0611 입니다 전체 코드는 깃헙에 올려두었습니다 https://github.com/dongguntechnology/rn-chat
- 해결됨처음 배우는 리액트 네이티브
이런 오류메세지가 뜹니다
또 질문드리게 되어 송구합니다 안드로이드에서 실행하니 아래와 같은 오류메세지가 보이네요 ... While trying to resolve module `firebase` from file `D:\study\ReactNative\app_expo\src\firebase.js`, the package `D:\study\ReactNative\app_expo\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`D:\study\ReactNative\app_expo\node_modules\firebase\index`. Indeed, none of these files exist: * D:\study\ReactNative\app_expo\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) * D:\study\ReactNative\app_expo\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) 전체 코드는 깃헙에 올려두었습니다 https://github.com/dongguntechnology/rn-chat
- 해결됨처음 배우는 리액트 네이티브
_handlePhotoBtnPress 의 함수가 실행이 않되어 내폰안의 파일에 접근하는 스크린이 열리지 않습니다
const Image = ({url, showButton}) => { // useEffect >>> 사진접근권한을 요청 useEffect(() => { (async () => { if (Platform.OS !== 'web') { const {status} = await ImagePicker.requestMediaLibraryPermissionsAsync(); if (status !== 'granted') { Alert.alert('사진접근권한이 필요합니다', '접근권한을 켜세요'); } } })(); }, []); const _handlePhotoBtnPress = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, aspect: [1, 1], quality: 1, }); console.log(result); if (!result.cancelled) { setImage(result.uri); } }; return ( <Container> <ProfileImage source={{uri: url}} /> {showButton && <PhotoButton onPress={_handlePhotoBtnPress} />} </Container> ); }; 전체 코드는 깃헙에 올려두었습니다 https://github.com/dongguntechnology/rn-chat 테스트기기는 안드로이드 갤럭시 s10 입니다
- 해결됨처음 배우는 리액트 네이티브
카메라 이미지가 안보이는 군요
늘 건강하시옵고 부자되소서 const ButtonIcon = styled(MaterialIcons).attrs(({theme}) => { name: 'photo-camera'; size: 22; color: theme.imgBtnIcon; })``; 이부분에서 뭔가 문제가 발생한 것 같은데 에러는 뜨지를 않고 다만 해당 이미지가 보이지를 않고 LOGO 이미지의 우측아래에 작은회색사각박스만 보이네요 전체 코드는 깃헙에 올려두었습니다 https://github.com/dongguntechnology/rn-chat
- 해결됨처음 배우는 리액트 네이티브
오전내내 에러원인을 찾아도 모르겠네요 죄송
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. 파일은 https://github.com/dongguntechnology/rn-chat 에 있습니다
- 해결됨처음 배우는 리액트 네이티브
Chat App 의 프로젝트준비란에서
항상 범준님의 건승하심과 평안하심을 기원합니다 firebase 설치도중에 아래주소로 들어가 아이콘변경에 관한 설명부분이 이해가 안갑니다 https://www.figma.com/file/... https://console.firebase.google.com/ 에서 어떻게 https://www.figma.com/file/... 주소로 점프하는지 설명 부탁드립니다
- 해결됨처음 배우는 리액트 네이티브
padding-top: ${({insets: {top}}) => top}px; 이부분에서 에러가 발생하는군요
List Screen 에서 Home 버튼을 누르면 아래에러가 발생하는군요 늘 건강하시고 부자되세요 TypeError: Cannot read properties of undefined (reading 'top') 깃헙주소 >>> https://github.com/dongguntechnology/Stack-Navigation
- 해결됨처음 배우는 리액트 네이티브
이런에러메세지의 원인에 대해서 궁금합니다
Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window). 이런 메세지가 발생해도 앱의 실행은 정상적으로 되는데 단지 원인에 대해 알수 있을까요 ???
- 해결됨처음 배우는 리액트 네이티브
Stack-Navigation 학습중 에러메세지 관련입니다
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 위의 이런 에러가 나는데 몇시간 헤메이어도 도무지 제실력으론 찾지를 못하겠네요 범준님 부탁드려용 사랑해용 소스는 깃헙 에 올려두었사옵니다 https://github.com/dongguntechnology/Stack-Navigation
- 해결됨처음 배우는 리액트 네이티브
Task 컴포넌트의 기능구현하기 삭제에서
Task 컴포넌트의 기능구현하기 삭제에서 삭제아이콘을 누르면 전부 지워집니다 또한 이런 에러메세지가 뜨네요 Warning: Each child in a list should have a unique "key" prop. 또 님의 깃헙에서 질문을 올리려면 어떻게 하는지 잘 모르오니 갈켜주시와요 소스파일 App.jsty import {StatusBar, Dimensions} from 'react-native'; import React, {useState} from 'react'; import {Text, View, LogBox} from 'react-native'; import styled, {ThemeProvider} from 'styled-components/native'; import {theme} from './src/theme'; import Input from './src/input'; import Task from './src/Task'; const Container = styled.SafeAreaView` flex: 1; background-color: ${({theme}) => theme.background}; align-items: center; justify-content: flex-start; padding: 30px; `; const Title = styled.Text` font-size: 30px; font-weight: 600; color: ${({theme}) => theme.main}; width: 100%; align-items: flex-end; padding: 0 20px; `; // 목록의 스크롤바를 스타일링 const List = styled.ScrollView` flex: 1; width: ${({width}) => width - 40}px; //목록화면의 좌우마진을 20으로 줌 `; LogBox.ignoreLogs(['Remote debugger']); export default function App() { const width = Dimensions.get('window').width; const tempData = { // Task list 1: {id: '1', text: '리액트네이티브', completed: false}, 2: {id: '2', text: 'Expo', completed: true}, 3: {id: '3', text: '자바', completed: false}, }; const [tasks, setTasks] = useState(tempData); const [newTask, setNewTask] = useState(''); // Task 목록추가하기 const addTask = () => { if (newTask.length < 1) { // 공백인 자료입력시 추가가 않되게 함 return; } const ID = Date.now().toString(); // 현재시간의 타임스탬프 const newTaskObject = { [ID]: {id: ID, text: newTask, completed: false}, }; // alert(newTaskObject); setNewTask(''); setTasks({...tasks, ...newTaskObject}); }; // 선택된 Task 삭제 const deleteTask = (id) => { console.log(id); // 현재 Task항목들의 객체와 동일한 변수를 생성 const currentTasks = Object.assign({}, tasks); // 해당되는 값을 가진 항목만 삭제 delete currentTasks[id]; // 선택된 항목만 삭제된 객체를 currentTask 에 대입ㄴ setTasks({currentTasks}); }; return ( <ThemeProvider theme={theme}> <Container> <Title>To Do List</Title> <StatusBar barStyle="light-content" backgroundColor={theme.background} /> <Input placeholder="작업추가하기" value={newTask} onChangeText={(text) => setNewTask(text)} onSubmitEditing={addTask} /> <List width={width}> {Object.values(tasks) .reverse() .map((item) => ( <Task key={item.id} item={item} deleteTask={deleteTask} /> ))} {/* reverse().map >>> 최근입력자료가 먼저나오게 함 */} </List> </Container> </ThemeProvider> ); } Task.js import React from 'react'; import styled from 'styled-components/native'; import PropTypes from 'prop-types'; import IconButton from '../components/iconButton'; import {icons} from '../components/icons'; import {Text} from 'react-native'; import Input from './input'; const Container = styled.View` flex-direction: row; align-items: center; background-color: ${({theme}) => theme.itemBackGround}; border-radius: 10px; padding: 5px; margin: 3px 0; `; const Contents = styled.Text` flex: 1; font-size: 16px; color: ${({theme}) => theme.text}; `; const Task = ({item, deleteTask}) => { return ( <Container> <IconButton icon={icons.uncheck} /> <Contents>{item.text}</Contents> <IconButton icon={icons.edit} /> <IconButton icon={icons.delete} item={item} onPress={deleteTask} /> </Container> ); }; Task.propTypes = { item: PropTypes.object.isRequired, deleteTask: PropTypes.func.isRequired, }; export default Task; 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, item}) => { const _onPress = () => { onPress(item.id); }; return ( <TouchableOpacity onPress={_onPress}> <View> <Icon source={icon} /> </View> </TouchableOpacity> ); }; IconButton.propTypes = { icon: PropTypes.oneOf(Object.values(icons)).isRequired, onPress: PropTypes.func, item: PropTypes.object, }; export default IconButton;
- 해결됨처음 배우는 리액트 네이티브
IconButton 컴포넌트 만들기에서 ..
전 현재 Android 용 앱을 만들고 있는데요 님의 강의는 IOS 용 아이콘사용법이더군요 안드로이드용 아이콘에 대한 강의는 없는지요 아님 다른 자료라도 추천해주시면 감사하겠습니다 또 질문관련 님의 github 주소도 알려주셨으면 하나이다
- 해결됨처음 배우는 리액트 네이티브
Input 컴포넌트 만들기 - 상세 설정에서 에러 원인에 대해서
- 학습 관련 질문을 impoact from 'react'; // App.js 파일 import {StatusBar} from 'react-native'; import React, {useState} from 'react'; import {Text, View, LogBox} from 'react-native'; import styled, {ThemeProvider} from 'styled-components/native'; import {theme} from './src/theme'; import Input from './src/input'; const Container = styled.SafeAreaView` flex: 1; background-color: ${({theme}) => theme.background}; align-items: center; justify-content: flex-start; padding: 30px; `; 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() { LogBox.ignoreLogs(['Remote debugger']); const [newTask, setNewTask] = useState(''); const addTask = () => { alert(newTask); setNewTask(''); }; return ( <ThemeProvider theme={theme}> <Container> <Title>To Do List</Title> <StatusBar barStyle="light-content" backgroundColor={theme.background} /> <Input placeholder="작업추가하기" value={newTask} onChangeText={(text) => setNewTask(text)} onSubmitEditing={addTask} /> </Container> </ThemeProvider> ); } // 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; font-size: 25px; border-radius: 10px; background-color: ${({theme}) => theme.itemBackGround}; color: ${({theme}) => theme.text}; `; const Input = ({placeholder, value, onChangeText, onSubmitEditing}) => { const {height, width} = useWindowDimensions(); return ( <StyledInput width={width} placeholder={placeholder} maxLength={50} autoCapitalize='none' autoCorrect={false} value={value} onChangeText={onChangeText} onSubmitEditing={onSubmitEditing} /> ); }; // 자동대문자 off // 오타자동수정기능off Input.propTypes = { placeholder: PropTypes.string, value: PropTypes.string.isRequired, onChangeText: PropTypes.func.isRequired, onSubmitEditing: PropTypes.func.isRequired, }; export default Input; 위 파일을 실행하니 아래에러가 뜨는데 원인을 모르겠군요 ... 참고로 전 윈도우10환경에서 expo 로 실행시키고 있습니다 SyntaxError: D:\study\ReactNative\app_expo\src\input.js: Unexpected character ''. (29:43) 27 | autoCorrect={false} 28 | value={value} > 29 | onChangeText={onChangeText} | ^ 30 | onSubmitEditing={onSubmitEditing} 31 | /> 32 | ); . 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결처음 배우는 리액트 네이티브
파이어베이스 데이터 연동 관련 에러 질문 드립니다.
안녕하세요, Chat-App 부분의 회원가입 로그인 기능에서 파이어베이스로 데이터를 연동하기 위해 firebae.js 코드를 작성하고 실행시켜보니 이렇게 에러 메세지가 뜹니다. 제가 판단하기엔 코드보다 모듈과 관련된 에러인 것 같은데 어디가 문제인지, 어떤 해결방안이 있을지 여쭙고 싶습니다.
- 미해결처음 배우는 리액트 네이티브
질문 있습니다.
사진과 같이 name이랑 email부분이 잘려나갔습니다. signup코드는 똑같은데 어디서 문제가 있는 걸까요?
- 미해결처음 배우는 리액트 네이티브
type 에러가 납니다..
TypeError: Cannot read properties of undefined (reading 'background') 라고 뜨는데 이거는 어떻게 해결하면 되나요?
- 미해결처음 배우는 리액트 네이티브
오류가 났는데 babel을 설치를 해도 계속 같은 오류가 나요..
../node_modules/@react-navigation/core/lib/module/types.jsModule not found: Can't resolve '@babel/runtime/helpers/classCallCheck' in 'C:\Users\LG\node_modules\@react-navigation\core\lib\module' 어제 해결 못해서 같은 질문에 질문 댓글 달았는데 혹시나 못 보셨을까봐 다시 여쭈어봅니다.구글링 해서 해결하려고 했더니 babel을 설치하라고 하더라고요. 그래서 설치를 했는데도 같은 오류가 나요.. 어떻게 해결하면 되나요?
- 미해결처음 배우는 리액트 네이티브
6분즈음에서 결과 화면이 나오질 않아요..
../node_modules/@react-navigation/core/lib/module/types.jsModule not found: Can't resolve '@babel/runtime/helpers/classCallCheck' in 'C:\Users\LG\node_modules\@react-navigation\core\lib\module'라고 뜨는데 이건 어떻게 해결하나요?
- 미해결처음 배우는 리액트 네이티브
헤더에 이미지 추가
헤더에 background 로 넣고 싶은 이미지는 어떻게 할 수 있을까요?? 간단에 예제 코드 부탁드려도 될까요??
- 미해결처음 배우는 리액트 네이티브
input 내용 관련 질문
Input에서 안드로이드에서는 add a task가 보이지 않고 또 안드로이드 ios둘다 input에 작성할 때 작성하는 글이 보이지 않는데 이거 이유가 왜그럴까요?