묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
데이터베이스 다중값
데이터베이스 한 칼럼에 다중 값을 넣으려면 어떻게 해야 할까요? 예를 들어서 월, 화, 수, 목, 금, 토, 일을 체크박스로 만들고 여러 개의 값을 체크하면 그 값이 한칼럼에 다 들어간다고 가정했을 때 어떤 방법을 사용해야 할까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
React key prop 오류 케이스 나오시는 분들 보세요
존경하는 그랩님Warning: Each child in a list should have a unique "key" prop 오류 케이스에 대해서 조언좀 구할 수 있을까요? ReactDOM.render 방식이 React 18에서 지원하지 않으면서 오류들을 수정했습니다.//[AS-IS] import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root') //[TO-BE] import * as ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode>); 다만 아래와 같은 오류들이 발생을 하였는데요.구글링에서 찾아보니 각 엘리먼트에 key값을 주는 것으로 해결하라고 하는데요.- 그렇다면 src > main > index.js 에서 각 엘리먼트들에 key 값을 설정해줘야 하나요?- 각 엘리먼트들에 map으로 되어있는 함수를 지우고.. (product, index) 형태를 key={product.id}>{product.imageUrl}key={product.id}>{product.name} 형태로 바꾸어 주어야 하나요?- 조금 어렵게 느껴지네요. 해당 부분처럼 바꾸는게 맞는지 조금 조언 부탁드립니다.현재 제 깃 레파지토리 참조로 첨부드립니다. 도와주세요 ㅠㅠhttps://github.com/promotionX/Grabmarket-clinet
-
미해결배달앱 클론코딩 [with React Native]
RN에서 스타일 관련 라이브러리 사용 질문입니다.
React 개발을 할 때는 scss나 emotion, tailwind, chakra-ui와 같은 라이브러리를 사용했었던 기억이 납니다.RN도 대응되는 emotion 라이브러리나 tailwind 관련된 라이브러리들, react native paper와 같은 라이브러리가 있는걸 알게되었는데요. 이 라이브러리들이 실무 환경에서도 충분히 사용할 수 있을정도로 검증이 되었는지 판단 하는법을 모르겠습니다.사용하고 나서 먼 나중에서야 치명적인 에러나 충돌이 발생하면 어쩌지 하는 걱정이 드네요.사실 react에서는 단순 사용 수가 많다보니 비교적 선택을 하기 쉬운데, rn에서는 사용 빈도 자체가 react에 비해 적다보니 관련 자료나 의견도 찾기 어려웠습니다.혹시 이 부분에 대해서 제로초님의 생각은 어떠한지 듣고 싶습니다.
-
미해결배달앱 클론코딩 [with React Native]
로그인 보안 관련 궁금한 점이 있습니다.
수업과 관련된 내용은 아닐 수도 있는 것 같지만 로그인 할 때 백에서 jwt로 보안 처리하는 부분은 있지만 react native 단에서는 따로 없는 것 같은데 실무에서도 보통 프론트 단에서는 따로 처리를 해주지 않나요? 아니면 해주는 다른 방식이 있는 것일까요? 데이터 저장할 때 아닌 통신할 때가 궁금합니다!
-
미해결핸즈온 리액트 네이티브
8.5 로그인 후 화면이동이 안됩니다..
강사님 안녕하세요 이메일과 패스워드를 정확히 입력하여도 다음과 같은 에러가 뜹니다.. 해결방법을 몰라서 문의드립니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Github 인증 에러 뜨시는 분들 참고해주세요.
Github에서 레지토리에 등록하실 때 아래와 같이 인증오류 뜨시는 분들 참고해주시면 좋을 것 같아요.remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.해당 오류는 Github에서 2021년 Aug 13일부터 인증 방식이 비밀번호에서 토큰값을 입력하는 방식으로 변경이 되었는데요.해결방법은 비밀번호를 쓰지 않고, 토큰 값을 입력하시면 간단하게 해결이 가능합니다.Username : Github ID (이름이 아닌 로그인 할 때 적는 ID 입력)Password : 토큰 값 입력 그렇다면 토큰이 뭐냐? 개개인의 인증에 쓰이는 고유한 값인데요 (ex. ghp_tA0QVuK5zoectiJ6bgbD...) 등토큰은 어떻게 만들어서 입력하는데요? 아래 링크를 확인해주세요.https://dev.classmethod.jp/articles/resolving-github-token-authentication-errors/그리고 Password에 토큰값을 입력해주시면 정상적으로 push가 됩니다.끝.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
4092 Error
8080으로 안되서 검색해서 이것저것 해봐도 안되길래 8090으로 하니까 되는데 8090을 써도 상관 없나요?
-
미해결배달앱 클론코딩 [with React Native]
푸시 알림 받은 후 조건부 렌더링일때 Navigation.navigate 문제
안녕하세요.조건부 렌더링일때 푸시 알림을 받은 후 Navigation.navigate('Home')을 하면 오류가 발생합니다.해결 방법 있을까요?
-
해결됨배달앱 클론코딩 [with React Native]
빌드 에러
Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at stableHash (C:\Users\user\Food-Delivery-App\front\node_modules\metro-cache\src\stableHash.js:19:8) at Object.getCacheKey (C:\Users\user\Food-Delivery-App\front\node_modules\metro-transform-worker\src\index.js:593:7) at getTransformCacheKey (C:\Users\user\Food-Delivery-App\front\node_modules\metro\src\DeltaBundler\getTransformCacheKey.js:24:19) at new Transformer (C:\Users\user\Food-Delivery-App\front\node_modules\metro\src\DeltaBundler\Transformer.js:48:9) at C:\Users\user\Food-Delivery-App\front\node_modules\metro\src\Bundler.js:22:29 at runNextTicks (node:internal/process/task_queues:60:5) at process.processTimers (node:internal/timers:504:9) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }파일을 옮기다가 에러가 났는데 몇 시간째 해결 못해서 결국 여기서 여쭤봅니다ㅠㅠnpm run android 실행 결과 이 에러가 발생했습니다.서칭 결과, 이 에러가 node 버전 문제라고 해서 다운그레이딩 시켜서 해봤으나 해결되지 않았어요이 전에 다른 에러로 찾고 있다가 npm install -g npm@latest 로 했더니 해결 됐었거든요 그래서 npm이랑 node 버전을 다 다운그레이딩 했는데 안됐습니다혹시 다른 방법이 있을까요???
-
미해결배달앱 클론코딩 [with React Native]
티맵 패키지 오류
티맵 모듈을 설정하고 androidManifest.xml 에 readme에 나온 것과 공식 문서에 나온 것을 모두 적용시켜주었고 커뮤니티에 있는 글 따라 안드로이드 스튜디오에서 jar 파일을 추가했으나 여전히 error: package com.skt.Tmap does not existimport com.skt.Tmap.TMapTapi; 다음과 같은 오류가 발생합니다. 검색을 해보아도 별다른 얘기가 나오질 않아 여쭤봅니다. 혹시 왜 그런지 아실까요?
-
해결됨배달앱 클론코딩 [with React Native]
패키지명 변경 시 오류
안녕하세요.현재 패키지명을 바꾸려고 하고 있는데 다른 파일들은 다 있는 buck 파일이 없어서 패키지명을 바꾸는데 애를 먹고 있습니다. 혹시 buck 파일이 없는 이유를 아실까요? 처음부터 보면서 따라갔고 다시 돌려보았으나 혹시 제가 놓친 부분이 있어서 그러한 것인지 알고 싶습니다.
-
미해결배달앱 클론코딩 [with React Native]
Android 앱 이름 변경
앱 이름을 바꿀때 app.json 파일을 건들지 않고, 다시 프로젝트를 만드는게 좋다고 하셨는데, 혹시 실제로 사용자들이 보는 앱 이름이랑 Play Store에 올라간 이름만 바꾸고 싶더라도 프로젝트를 새로 만드는것이 낫나요? https://marsland.tistory.com/515아니면 새로 프로젝트를 만들지 않고 위 링크처럼 disPlayName이랑 strings.xml에 app_name만 바꿔도 될까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
해당 오류 ERROR in ./src/index.js 5:0-40 를 아실까요 ..?
제가 axios 설치 이후 npm start에서 지속적으로 오류가 나길래 stackflow를 보고 -i npm ~... 무엇을 터미널에서 진행시키고.node_modules 폴더와 package.json & lock.json 파일 삭제후 npm start 다시 했는데 아래와 같이모듈 오류가 지속적으로 뜨네요.모듈 파일명들이 전에는 @로 시작하는 파일들이 다 날라간 것 같구요.모듈 중 Axios 폴더에서 index.d.ts 파일에서 오류가 발견되고 있는 상황입니다.그랩님 조금만 도와주실 수 있을까요
-
미해결배달앱 클론코딩 [with React Native]
typescript 에러
errorResponse 에서 타입 에러가 납니다.이것 저것 다 넣어봤는데 타입스크립트는 처음이라 뭘 고쳐야할 지 잘 모르겠어요ㅜㅜ SignIn.tsximport React, {useCallback, useRef, useState} from 'react'; import { ActivityIndicator, Alert, Pressable, StyleSheet, Text, TextInput, View, } from 'react-native'; import {NativeStackScreenProps} from '@react-navigation/native-stack'; import {RootStackParamList} from '../../AppInner'; import DismissKeyboardView from '../components/DismissKeyboardView'; import { useAppDispatch } from '../store'; import axios, { AxiosError } from 'axios'; import Config from 'react-native-config'; import userSlice from '../slices/user'; import EncryptedStorage from 'react-native-encrypted-storage'; type SignInScreenProps = NativeStackScreenProps<RootStackParamList, 'SignIn'>; function SignIn({navigation}: SignInScreenProps) { const dispatch = useAppDispatch(); const [loading, setLoading] = useState(false); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const emailRef = useRef<TextInput | null>(null); const passwordRef = useRef<TextInput | null>(null); const onChangeEmail = useCallback((text: string) => { setEmail(text.trim()); }, []); const onChangePassword = useCallback((text: string) => { setPassword(text.trim()); }, []); const onSubmit = useCallback(async() => { if (!email || !email.trim()) { return Alert.alert('알림', '이메일을 입력해주세요.'); } if (!password || !password.trim()) { return Alert.alert('알림', '비밀번호를 입력해주세요.'); } try { setLoading(true); const response = await axios.post(`${Config.API_URL}/login`, { email, password, }); console.log(response.data); Alert.alert('알림', '로그인 되었습니다.'); dispatch( userSlice.actions.setUser({ name: response.data.data.name, email: response.data.data.email, accessToken: response.data.data.accessToken, refreshToken: response.data.data.refreshToken, }), ); await EncryptedStorage.setItem( 'refreshToken', response.data.data.refreshToken, ); } catch (error) { const errorResponse = (error as AxiosError).response; if (errorResponse) { Alert.alert('알림', errorResponse.data.message); } } finally { setLoading(false); } }, [loading, dispatch, email, password]); const toSignUp = useCallback(() => { navigation.navigate('SignUp'); }, [navigation]); const canGoNext = email && password; return ( <DismissKeyboardView> <View style={styles.inputWrapper}> <Text style={styles.label}>이메일</Text> <TextInput style={styles.textInput} placeholder="이메일을 입력해주세요." placeholderTextColor="#666" value={email} onChangeText={onChangeEmail} importantForAccessibility="yes" autoComplete="email" textContentType="emailAddress" // IOS keyboardType="email-address" returnKeyType="next" clearButtonMode="while-editing" onSubmitEditing={() => { passwordRef.current?.focus(); }} blurOnSubmit={false} ref={emailRef} /> </View> <View style={styles.inputWrapper}> <Text style={styles.label}>비밀번호</Text> <TextInput style={styles.textInput} placeholder="비밀번호를 입력해주세요(영문,숫자,특수문자)" placeholderTextColor="#666" importantForAutofill="yes" value={password} onChangeText={onChangePassword} importantForAccessibility="yes" autoComplete="password" textContentType="password" // IOS // keyboardType="decimal-pad" secureTextEntry returnKeyType="send" clearButtonMode="while-editing" // IOS onSubmitEditing={onSubmit} ref={passwordRef} /> </View> <View style={styles.buttonZone}> <Pressable onPress={onSubmit} style={ !canGoNext ? styles.loginButton : StyleSheet.compose(styles.loginButton, styles.loginButtonActive) } disabled={!canGoNext || loading}> {loading ? ( <ActivityIndicator color="white" /> ) : ( <Text style={styles.loginButtonText}>로그인</Text> )} </Pressable> <Pressable onPress={toSignUp}> <Text>회원가입하기</Text> </Pressable> </View> </DismissKeyboardView> ); } const styles = StyleSheet.create({ textInput: { padding: 5, borderBottomWidth: StyleSheet.hairlineWidth, }, inputWrapper: { padding: 20, }, label: { fontWeight: 'bold', fontSize: 16, marginBottom: 20, }, buttonZone: { alignItems: 'center', }, loginButton: { backgroundColor: 'gray', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 5, marginBottom: 10, }, loginButtonActive: { backgroundColor: 'blue', }, loginButtonText: { color: 'white', fontSize: 16, }, }); export default SignIn;
-
미해결배달앱 클론코딩 [with React Native]
앱을 실행하면 즉시 꺼집니다.
우와요기이츠 배달앱을 누르자마자그 즉시 꺼집니다.이유를 알고 싶습니다.
-
미해결핸즈온 리액트 네이티브
AuthRoutes 부분을 못 읽는것 같습니다.
AuthRoutes 부분을 못 읽는것 같습니다. 깃허브에 코드올린거 그대로 복붙해도 에러가 납니다.AuthRoutes 에 있는 SIGN_IN SIGN_UP 이부분이 에러가 납니다.에러 메세지는 undefined is not an object (evaluating'_routes.AuthRoutes.SIGN_IN') 입니다.
-
해결됨처음 배우는 리액트 네이티브
안녕하세요! 강의 Chat App - Part 1 회원가입 부분에서 firebase 관련 에러가 납니다.
app.storage가 정의되어있지 않다고 뜨면서 Sign up이 되지 않습니다.처음에 Firebase 버전이 안맞아서 계속 에러가 떠서 게시판에 검색 한 후에 강사님이 올려주신 코드를 참고하여 강의 코드와는 약간 다르게 수정하였는데, 그것때문인지는 몰라도 계속 같은 에러가 발생합니다. <2023.02.07 22:05 수정>const ref = app.storage().ref(`/profile/${user.uid}/photo/png`);위 부분에 오타가 있어서const ref = app.storage().ref(`/profile/${user.uid}/photo.png`);이렇게 수정하였는데도 똑같이 오류가 납니다. 아래는 깃헙 주소입니다.https://github.com/frica12/React-native/tree/main/rn-chat 아래는 firebase.js 코드입니다.import { initializeApp } from "firebase/app"; import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, } 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; }; const uploadImage = async (uri) => { if (uri.startsWith("https")) { return uri; } const blob = await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function () { resolve(xhr.response); }; xhr.onerror = function () { reject(new TypeError("Network request failed")); }; xhr.responseType = "blob"; xhr.open("GET", uri, true); xhr.send(null); }); const user = auth.currentUser; const ref = app.storage().ref(`/profile/${user.uid}/photo/png`); const snapshot = await ref.put(blob, { contentType: "image/png" }); blob.close(); return await snapshot.ref.getDownloadURL(); }; export const signup = async ({ name, email, password, photo }) => { const { user } = await createUserWithEmailAndPassword(auth, email, password); const photoURL = await uploadImage(photo); await user.updateProfile({ displayName: name, photoURL }); };
-
미해결배달앱 클론코딩 [with React Native]
javac의 위치가 잘못된 건가요??
javac의 위치가 잘못된건가요??
-
미해결배달앱 클론코딩 [with React Native]
Device Manager를 통해 생성한 android에 FoodDeliveryApp이 존재하질 않습니다.
FoodDeliveryApp에 들어간 후 npm run android를 통해 실행했지만 FoodDeliveryApp이 없습니다.
-
미해결배달앱 클론코딩 [with React Native]
파일 생성이 되지 않습니다.
npx react-native init FoodDeliveryApp --template react-native-template-typescript를 치면 계속 이러한 에러메세지가 뜨면서 생성이 되지 않습니다. Command failed: yarn add react-nativeUsage Error: The nearest package directory (C:\Users\USER\AppData\Local\Temp\rncli-init-template-IJ9QGa) doesn't seem to be part of the project declared in C:\Users\USER.- If C:\Users\USER isn't intended to be a project, remove any yarn.lock and/or package.json file there.- If C:\Users\USER is intended to be a project, it might be that you forgot to list AppData/Local/Temp/rncli-init-template-IJ9QGa in its workspace configuration.- Finally, if C:\Users\USER is fine and you intend AppData/Local/Temp/rncli-init-template-IJ9QGa to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.$ yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ... 않습니다.