176만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
npx react-native init test --version 0.72.6 Expo 아니라면 이렇게 생성해야 하는 거 아닌지요?
미해결
따라하며 배우는 리액트 네이티브 기초
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import React from 'react'; import Home from './src/screens/Home'; import Profile from './src/screens/Profile'; import FriendProfile from './src/screens/FriendProfile'; import EditProfile from './src/screens/EditProfile'; import Search from './src/screens/Search'; import Activity from './src/screens/Activity'; import { NavigationContainer } from '@react-navigation/native'; import Status from './src/screens/Status'; import Ionic from 'react-native-vector-icons/Ionicons'; const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); const getTabBarIcon = (route, focused, size, color) => { let iconName; color = 'black'; if (route.name === 'Home') { iconName = focused ? 'home-sharp' : 'home-outline'; size = focused ? size + 8 : size + 2; } else if (route.name === 'Search') { iconName = focused ? 'search' : 'search-outline'; } else if (route.name === 'Activity') { iconName = focused ? 'heart' : 'heart-outline'; } else if (route.name === 'Profile') { iconName = focused ? 'person' : 'person-outline'; } return <Ionic name={iconName} size={size} color={color} />; }; const BottomTabScreen = () => { return ( <Tab.Navigator screenOptions={({ route }) => ({ tabBarHideOnKeyboard: true, tabBarShowLabel: false, headerShown: false, tabBarStyle: { height: 70, }, tabBarIcon: ({ focused, size, color }) => getTabBarIcon(route, focused, size, color), })} > <Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Search" component={Search} /> <Tab.Screen name="Activity" component={Activity} /> <Tab.Screen name="Profile" component={Profile} /> </Tab.Navigator> ); }; const App = () => { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerShown: false }}> <Stack.Screen name="Bottom" component={BottomTabScreen} /> <Stack.Screen name="Status" component={Status} /> <Stack.Screen name="FriendProfile" component={FriendProfile} /> <Stack.Screen name="EditProfile" component={EditProfile} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; { "name": "ReactNativeInsta", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/material-top-tabs": "^6.6.14", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "react": "18.3.1", "react-native": "0.75.2", "react-native-safe-area-context": "^4.10.9", "react-native-screens": "^3.34.0", "react-native-vector-icons": "^10.1.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.75.2", "@react-native/eslint-config": "0.75.2", "@react-native/metro-config": "0.75.2", "@react-native/typescript-config": "0.75.2", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.3.1", "typescript": "5.0.4" }, "engines": { "node": ">=18" } }
미해결
[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
npx create-react-native-app@latest 요거 터미널에 입력하니까, ⚠ This tool does not initialize new React Native projects. 뜨는데, 어떻게 해결하면 좋을까요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
윈도우 안드로이드 보고있는데 잘 되다가 stack Navigation 공식문서보고 인스톨하고 코드추가 한 후에 yarn start 하고 a 하면 [CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders. [CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders. FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':react-native-screens'. > [CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at h ttps://help.gradle.org 라고 나옵니다
미해결
[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
npx create-expo-app@latest 이렇게 설치했는데 강의랑 설치하는게 다르고 폴더구성도 다르더라구요
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님, 좋은 강의 감사합니다! BE Aws ec2 배포 과정 중에 궁금한 점이 생겨서 질문드립니다. 보통 웹에서는 프론트 주소를 백엔드 ec2 인바운드 규칙에 넣어서 그 주소의 api요청만 허용하게 해, 보안을 강화하는 한편, 앱에서는 웹과 다르게 프론트 배포 주소를 알 수 없는데 이때는 모든 아이피를 허용하게 보안규칙을 넣어야 하나요? 만약 그렇게하면 악성 유저가 서버 주소를 알아서 악용하는 상황에서는 어떻게 보안을 강화해야할까요? 너무 궁금합니다! 이상입니다. 감사합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
isLoggedIn이 false일 때는 Auth네비게이터를 보여주고 이 때는 별 다른 오류가 발생하지 않습니다. 하지만 isLoggedIn을 true로 변경 한 후, Drawer 네비게이터를 보여줄 때는 위와 같은 오류가 계속 발생합니다. 어디서 타입 에러가 발생하는건지 도저히 모르겠어서 질문을 남깁니다... cf) babel 파일 수정, 캐시 삭제 후 재실행, 안드로이드 에뮬레이터 cold boot 다 시도해봤는데 동일한 문제가 계속 발생합니다. import {createDrawerNavigator} from '@react-navigation/drawer'; import React from 'react'; import MapHomeScreen from '../../screens/MapHomeScreen'; import FeedHomeScreen from '../../screens/FeedHomeScreen'; import CalendarHomeScreen from '../../screens/CalendarHomeScreen'; const Drawer = createDrawerNavigator(); const MainDrawerNavigator = () => { return ( <Drawer.Navigator> <Drawer.Screen name="MapHome" component={MapHomeScreen} /> <Drawer.Screen name="FeedHome" component={FeedHomeScreen} /> <Drawer.Screen name="CalendarHome" component={CalendarHomeScreen} /> </Drawer.Navigator> ); }; export default MainDrawerNavigator; import React from 'react'; import {View, Text} from 'react-native'; interface MapHomeScreenProps {} const MapHomeScreen = ({}: MapHomeScreenProps) => { return ( <View> <Text>MapHomeScreen</Text> </View> ); }; export default MapHomeScreen;
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
MAC에서 작성한 코드를 윈도우 환경에서 돌려도 문제가 없을까요?? 서로 환경이 다른 곳에서 작성된 코드들이 문제없이 작동하는지 궁금합니다.
해결됨
배달앱 클론코딩 [with React Native]
node: nvm으로 여러 node버전을 use명령어로 바꿔가면서 프로젝트마다 버전관리를 하면서 사용할 수 있을 것 같습니다. 2. java는 17 버전을 사용합니다 (rn 0.72,0.73 버전과 함께사용할수 있다는 다른분의 질문답변을 봤습니다. ) 3. react-native를 0.72버전으로 시작하고 싶어서 아래의 명령어로 실행했습니다 -react-native라이브러리 설치 E:\RN_PJ>npm i -g react-native E:\RN_PJ>react-native -v 13.6.9 -해당 라이브러리로 프로젝트 생성 E:\RN_PJ>npx react-native init FoodDeliveryApp --version 0.72 --template react-native-template-typescript 프로젝트 생성하는 명령어에서의 에러메세지 - 요약하면 version이랑 template이랑 함께 사용할수 없는 명령어라는 내용같습니다. ⚠️ The `init` command is deprecated. The behavior will be changed on 2024. 12. 31. (131 days). - Switch to npx @react-native-community/cli init for the identical behavior. - Refer to the documentation for information about alternative tools: https://reactnative.dev/docs/getting-started Running: npx @react-native-community/cli init error Passing both "version" and "template" is not supported. The template you select determines the version of react-native used. Please use only one of these options, for example: --template react-native-template-typescript@x.y.z where x.y.z is the release of the template that contains the desired "react-native" version. Check the version tab of https://www.npmjs.com/package/react-native-template-typescript for available versions. info Run CLI with --verbose flag for more details. -chat gpt 는 아래의 명령어를 실행해보라는데 이렇게 시작해도되는지 잘 모르겠습니다. (...) npx react-native init FoodDeliveryApp --version 0.72.0 npx react-native init FoodDeliveryApp --template react-native-template-typescript@X.Y.Z 추가 참고 사항 및 질문사항) 현재 node14, java17로 진행하고있는 프로젝트가 있어서 java를 17버전으로 진행하려고 했습니다. JAVA_HOME을 17버전으로 잡아놔서... 프로젝트 왓다갔다 할 때마다 JAVA_HOME바꾸는 방법밖에는 모르겠어서 그렇게 하고싶지는 않아가지구... os가 windows인데 nvm처럼 java버전관리 할수있는게 없는것 같습니다... 보통 실무에서 java는 버전 관리를 어떻게 하나요? (도커같은 컨테이너로 프로젝트 별 환경관리를 하지 않을까하는 추측을 하고있습니다.) 따로 관리하는 방법이 있는지 궁금합니다.)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강사님이 알려주신 방식을 듣고 다양한 이미지 처리 방식을 공부하기 위하여 Presigned URL 방식을 구현중에 있습니다. Nest.js 백엔드에 요청을 통해 발급받은 S3 url 주소에 RN환경에서 PUT 요청으로 이미지를 업로드하고 있습니다. 이 떄, 일반적인 form-data 형식은 들어가지지 않는 것 같은데, binary 형태는 매우 잘 들어가집니다. 현업에서도 presigned-url을 활용할 떄 binary 형태로만 전달을 해야하나요, 아니면 다른 방식이 있는지 알고 싶어 식견을 구하고자, 질문드립니다!! 또, RN에서 Binary 형태를 만드는 방법이 쉽지 않아보여, 어떻게 하는게 좋은 방식인지 알고싶습니다!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
윈도우 amd 안드로이드 환경입니다 react-native doctor를 했을땐 이상이 없는데 npm start 했을 때 Gradle could not start your build. Could not create service of type ChecksumService using BuildSessionScopeServices.createChecksumService(). java.i o.FileNotFoundException: C:\Users\project\MatzipApp\android.gradle\8.0.1\checksums\checksums.lock (������ �źεǾ����ϴ�) 이런 오류가 자꾸 뜹니다
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
윈도우, 안드로이드 환경입니다. import React from 'react'; import {Pressable, StyleSheet, Text} from 'react-native'; interface CustomButtonProps{ label: string; variant?: 'filled' | 'outlined'; size?: 'large' | 'medium'; } function CustomButton({ label, variant='filled', size='large', }: CustomButtonProps) { return ( <Pressable style={[styles.container, styles[variant], styles[size]]}> <Text style={[styles.text, styles['${variant}Text']]}>{label}</Text> </Pressable> ) } const styles = StyleSheet.create({ container:{ borderRadius: 3, justifyContent:'center', }, filled: { backgroundColor:'#C63B64' }, outlined: { borderColor:'C63B64', borderWidth: 1, }, large: { width: '100%', paddingVertical: 15, alignItems: 'center', justifyContent: 'center', }, medium: { width: '50%', paddingVertical: 12, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 16, fontWeight: '700', }, filledText: { color: 'white', }, outlinedText: { color: '#C63B64', }, }); export default CustomButton; styles['${variant}Text' ]이 부분이 에러가 발생하는데 왜그런 것인가요? 에러메세지는 다음과 같습니다. [{ "resource": "/c:/Users/dcgn6ec/MatzipApp/front/src/components/CustomButton.tsx", "owner": "typescript", "code": "7053", "severity": 8, "message": "Element implicitly has an 'any' type because expression of type '\"${variant}Text\"' can't be used to index type '{ container: { borderRadius: number; justifyContent: \"center\"; }; filled: { backgroundColor: string; }; outlined: { borderColor: string; borderWidth: number; }; large: { width: \"100%\"; paddingVertical: number; alignItems: \"center\"; justifyContent: \"center\"; }; medium: { ...; }; text: { ...; }; filledText: { ...; }; ...'.\n Property '${variant}Text' does not exist on type '{ container: { borderRadius: number; justifyContent: \"center\"; }; filled: { backgroundColor: string; }; outlined: { borderColor: string; borderWidth: number; }; large: { width: \"100%\"; paddingVertical: number; alignItems: \"center\"; justifyContent: \"center\"; }; medium: { ...; }; text: { ...; }; filledText: { ...; }; ...'.", "source": "ts", "startLineNumber": 18, "startColumn": 36, "endLineNumber": 18, "endColumn": 60 }]
해결됨
배달앱 클론코딩 [with React Native]
"dependencies": { "@react-navigation/native": "^6.0.6", "@react-navigation/native-stack": "^6.2.5", "react": "18.3.1", "react-native": "0.75.1", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "3.22.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.75.1", "@react-native/eslint-config": "0.75.1", "@react-native/metro-config": "0.75.1", "@react-native/typescript-config": "0.75.1", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.3.1", "typescript": "5.0.4" }, "engines": { "node": ">=18" } "bubblingEventTypes of null error" 에러가 발생합니다. 버전문제라고 생각해서 버전을 계속 바꿔봤는데도 안되네여..
미해결
따라하며 배우는 리액트 네이티브 기초
이런게 뜨는데 npm라이브러리가 잘못된건가요? react-native-cli라 expo라이브러리를 쓸수도 없고...
미해결
따라하며 배우는 리액트 네이티브 기초
레이아웃 표시를 했을때, 위치는 잡히는 것 같지만 시각적으로 전혀 보이지 않아요. 마치 뒤에 가려진 것 처럼요 // InputForm.js import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native' import React from 'react' const InputForm = () => { return ( <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.addFormContainer}> <TextInput style={styles.inputField} placeholder="할 일을 작성해주세요." /> <Pressable style={styles.addButton}> <Text style={styles.addButtonText} >+</Text> </Pressable> </KeyboardAvoidingView> ) } export default InputForm const styles = StyleSheet.create({ addFormContainer: { flexDirection: 'row', marginTop: 'auto', marginBottom: 30, paddingHorizontal: 20, backgroundColor: '#f7f8fa' }, inputField: { flex: 1, height: 42, padding: 5, marginRight: 25, borderRadius: 4, borderColor: 'rgba(0, 0, 0, 0.2)', borderWidth: 1, color: '#000000', fontSize: 15, textAlignVertical: 'center' }, addButton: { justifyContent: 'center', alignItems: 'center', width: 42, height: 42, borderRadius: 4, backgroundColor: 'rgba(0,0,0,0.7)', shadowColor: '#000000', shadowOpacity: 0.14, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } }, addButtonText: { color: 'white', fontSize: 25 }, }) // MainScreen.js import { SafeAreaView, StyleSheet, Text, View, StatusBar, Platform } from 'react-native' import React from 'react' import InputForm from '../components/InputForm' const MainScreen = () => { return ( <View> <SafeAreaView style={styles.container}> <StatusBar barStyle={'default'} /> <Text style={styles.pageTitle}>ToDo App</Text> <View style={styles.listView}> <Text style={styles.listTitle}>할 일</Text> </View> <View style={styles.separator} /> <View style={styles.listView}> <Text style={styles.listTitle}>완료된 일</Text> </View> <InputForm /> </SafeAreaView> </View> ) } export default MainScreen const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS = 'android' ? 20 : 0, backgroundColor: '#f7f8fa' }, pageTitle: { marginBottom: 35, paddingHorizontal: 15, fontSize: 54, fontWeight: '600', }, separator: { marginHorizontal: 10, marginTop: 25, marginBottom: 10, borderBottomWidth: 1, borderBottomColor: 'rgba(0,0,0,0.2)' }, listView: { flex: 1, }, listTitle: { marginBottom: 25, paddingHorizontal: 15, fontSize: 41, fontWeight: '500', } }) // App.js import { StyleSheet, Text, View } from 'react-native'; import MainScreen from './screens/MainScreen'; export default function App() { return ( <View style={styles.container}> <MainScreen /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'flex-start', justifyContent: 'center', }, }); // package.json { "name": "awesomeproject", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "^51.0.27", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.5" }, "devDependencies": { "@babel/core": "^7.24.0" }, "private": true }
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
deviceHeight > 700 ? .. : .. 강사님께서 700을 분기점으로 잡으셨는데요. 혹시 700인 이유가 있는걸까요? 아니면 700이라는 수치는 의미가 없고, 분기가 가능하다는 걸 가르쳐주시려는 의도인건가요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
프로젝트를 실행했는데 강의와 달리 App.tsx 파일이 없습니다. 다운그레이드를 해서 실행해야 할까요? 만약 그렇다면 버전을 알려주시면 감사하겠습니다.
해결됨
배달앱 클론코딩 [with React Native]
(반갑습니당!!이제 막 개발이뭔지 맛보고있는 개린이입니다ㅋㅋ 학습동기는 주업무는 웹개발이지만 어플만들어보고싶어서이구요...) 질문: 강의 초반 수강중입니다. 초반에 redux가 많은 개발자들이 사용하고 있는 라이브러리라 그걸 먼저 사용할줄 알아야 한다라고 이해했는데용 최근 주변 프론트 개발자로 일하는 지인이 zustant를 추천해서 사실 사이드프로젝트에서 zustant를 사용할 수 있으면 해볼 예정이었는데요. 듣는중에 힙한게 zustant에 해당하는건가 싶어서욬ㅋㅋㅋㅋㅋ redux먼저 배우고 숙련도가 어느정도 올라간후에 zustant를 사용해봐야할까요?? 많은 사람들이 쓰고있는것이 어찌보면 기본이니까 기본부터 시작해야하는 것인가 하는 생각이 들어서 질문드려봅니다
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님. 리액트를 배울때, 컴포넌트 내에서 object를 초기화하면 성능 문제가 생길 수 있다고 배웠습니다. 근데, [2-4] 네비게이션 타이핑 강의(1:29)를 보면, function AuthStackNavigator() { const Stack = createStackNavigator(); return (~~) } 와 같이, 컴포넌트 내부에 Stack이 선언되어 있습니다. 이러면 화면이 재랜더링 될 때 마다, Stack이 선언되어 성능문제가 생기는건 아닌가요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 로그아웃 클릭 후 로그인 및 회원가입 버튼누르면 아래처럼 로그아웃안된것처럼 나오며 아래처럼 Warning로그가나오는데 혹시 이게문제인가요?? 구글찾아봐도 해결이안되서 게시판에 글 올립니다 ㅠㅠ
