묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
tfjs-node 안깔려서
tfjs-node 안깔려서 해보라고 하는거 해보다가잘 되던 nodemon server.js 도 안되고 뭐가 잘못됐는지 모르겠습니다.빨리 마무리하고 싶은데 답답하네요강의 업데이트 좀 해주셨으면 좋겠는데 생각 없으신가요
-
미해결핸즈온 리액트 네이티브
!! 의미를 모르겠습니다.
강의중 코드 <View style={[defaultStyles.container, styles?.container]}> <View style={[defaultStyles.line, styles?.line]}></View> {!!text && <Text style={[defaultStyles.text, styles?.text]}>{text}</Text>} </View>!!text 여기 !! 의 의미를 모르겠습니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
flyctl 관련 재문의 드립니다.
flyctl deploy가 진행이 안돼서제 컴퓨터에 있는 도커를 삭제하고 다시 실행했더니아래와 같은 상태에서 멈췄습니다.구글링 해봐도 잘 모르겠어요 ㅠㅠ어떻게 해결하면 될까요? C:\Users\dahye\Documents\react-project\d-market-server>flyctl deploy ==> Verifying app config--> Verified app config==> Building imageRemote builder fly-builder-quiet-sunset-984 ready==> Building image with Buildpacks--> docker host: 20.10.12 linux x86_6420: Pulling from heroku/buildpacksDigest: sha256:1dd1a9c5f291b47fed1aed3f4c348fdc878380319c15f0e09753a5898482554eStatus: Image is up to date for heroku/buildpacks:2020-cnb: Pulling from heroku/herokuDigest: sha256:c9d053a463c7cd81672a3b0d5d5e26bdcbdffe2782565ccbedc15867b8cddfb9Status: Image is up to date for heroku/heroku:20-cnbWarning: Platform requested deprecated API '0.6'===> DETECTINGWarning: Buildpack 'heroku/ruby@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/python@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/scala@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/php@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/go@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/gradle@0.0.0' requests deprecated API '0.4'2 of 3 buildpacks participatingheroku/nodejs-engine 0.8.16heroku/nodejs-npm 0.5.2===> ANALYZINGPrevious image with name "registry.fly.io/d-market-server:cache" not found===> RESTORING===> BUILDING[Heroku Node.js Engine Buildpack][Checking Node.js version]Detected Node.js version range: *Resolved Node.js version: 19.7.0[Installing Node.js distribution]Downloading Node.js 19.7.0Extracting Node.js 19.7.0Installing Node.js 19.7.0[INFO] Installing toolbox[INFO] - yj[INFO] Using npm v9.5.0 from Node[INFO] Installing node modules from ./package-lock.jsonnpm WARN config production Use --omit=dev instead.WARN failed to finish build in graphql: Post "https://api.fly.io/graphql": context canceledOops, something went wrong! Could you try that again?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
flyctl 배포 관련 에러 문의드립니다.
cmd창에서 flyctl deploy를 실행하면 아래와 같은 에러가 뜹니다.도커 빌더 이미지 관련 오류인것 같은데 어떻게 해결해야 하나요?urce: failed to fetch builder image 'index.docker.io/heroku/buildpacks:20': resolve auth for ref index.docker.io/heroku/buildpacks:20: error getting credentials - err: exec: "docker-credential-desktop": executable file not found in %PATH%, out: ``
-
해결됨배달앱 클론코딩 [with React Native]
npm i 한 후 saveToPhotos 적용 안됨
PS C:\Users\user\fooddeliveryapp\front> npm i --force > fooddeliveryapp@0.0.1 postinstall > patch-package patch-package 6.5.1 Applying patches... react-native-image-crop-picker@0.39.0 ✔ up to date, audited 1395 packages in 3s 125 packages are looking for funding run `npm fund` for details found 0 vulnerabilitiespatch-package 적용이 됐다고 하는데 다시 실행해도 사진 저장이 안됩니다또한 option 타고 들어갔을 때 saveToPhotos 검색 결과가 안나왔습니다그럼 적용이 안 된건가요??
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
업로드 후 홈화면에서 이미지가 보이지 않습니다
데이터 베이스에도 기록이 잘 들어가고 사이트 홈화면에도 잘 뜨는데 화면의 이미지가 안뜹니다.uploads파일에도 이미지 다 잘 들어갑니다.인강과 데이터베이스를 비교해봤을 때 경로문제인것같긴한데 어떻게 수정을 해야할까요?근데 DB경로의 역슬래시를 슬래시로 바꾸어도 안뜨고 uploads에는 사진도 잘 들어가고 사진의 경로를 봤을때도 동일해서... 왜 안뜨는걸까요?단순히 한사진의 오류라고생각했었는데 등록한 것 모두 이렇게 되어서...어딜 어떻게 수정해야할지모르겠어서... 일단은 깃허브링크 함께올려봅니다... 홈사이트 화면개발자 툴 상품넣고 난뒤DB데이터 베이스물건 등록 후 vscode에 뜨는것 깃허브 링크: https://github.com/Dalrae03/webstudy/commit/7a5981dafabdbf009b40c0c5814e7e7c6f3ea9dehttps://github.com/Dalrae03/webstudy/commit/c9106654b1d6badba9ae64ce744a11da46b719a5
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
image 파일에서 vscode로 드래그 앤 드롭을 처리할 수 없다고 합니다
압축을 푼뒤 진행해도 에러가 납니다The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.라고 나오고요 hexeditor를 깔아도 해결이 안됩니다찾아보니 50mb를 넘는 자료를 vs코드에서 지원을 못한다고 하는데요 참고로 집에 컴퓨터가 없어 pc방 컴퓨터로 배우는 중입니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
upload 페이지에 아무것도 안 뜨는 현상
안녕하세요. 그랩님매일 같이 열정적으로 댓글 달아주셔서 항상 감사드립니다.모든 것이 그러하듯 강의를 운영하는 것도엄청난 공수가 든다는 것을 깨달았네요.현재 오류가 생겼는데, useHistory를 이용해서 upload페이지로 이동한 후 Upload 클라이언트 쪽에서아무 반응도 일어나지 않고 있습니다.아무리 코드랑 구글링을 해봐도 해결이 안되는데요.upload페이지가 console창을 보면 /upload/index.js의 html 코드가 아무것도 불러와지지 않고 있는 것 같아요.혹시 조언좀 구할 수 있을까요?1. 현상 : 클라이언트에 아무것도 뜨지 않음Elements 창을 클릭해도 upload.js 작성한 HTML이 없습니다.2.App.js에 제가 작성한 코드입니다. History와 import 란에 모두 정확하게 작성하였는데요.3. upload/index.js 파일 코드도 같이 첨부드립니다.한번만 봐주실 수 있을까요? ㅠuseHistory가 만료가 되어서 작동을 안 하는걸까요..https://github.com/promotionX/Grabmarket-clinet
-
미해결배달앱 클론코딩 [with React Native]
윈도우 사용자 android, ios
윈도우 사용자입니다.수업에서 android와 ios 파일 두가지를 수정하는데,윈도우 사용자는 android 파일만 수정해도 되는지 ios 파일도 수정해야하는지 궁금합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman invalid url 질문드립니다.
1. 질문은 문제 상황을 최대한 표현해주세요.postman 에서 send 버튼을 누르면 아래와 같이 invalid URL 오류가 뜹니다. 어느 부분이 잘못된 걸까요?ㅠㅠ2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ구글에 검색해봤는데 해결책이 딱히 나오지 않았어요3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결배달앱 클론코딩 [with React Native]
이미지 촬영 후 완료 버튼 반응 없음
LOG {"addListener": [Function addListener], "canGoBack": [Function canGoBack], "dispatch": [Function dispatch], "getId": [Function getId], "getParent": [Function getParent], "getState": [Function anonymous], "goBack": [Function anonymous], "isFocused": [Function isFocused], "jumpTo": [Function anonymous], "navigate": [Function anonymous], "pop": [Function anonymous], "popToTop": [Function anonymous], "push": [Function anonymous], "removeListener": [Function removeListener], "replace": [Function anonymous], "reset": [Function anonymous], "setOptions": [Function setOptions], "setParams": [Function anonymous]} LOG {"end": {"latitude": 37.577, "longitude": 127.045}, "orderId": "DXCbe0Q55", "price": 6000, "rider": "LlnQ3qTJvU", "start": {"latitude": 37.516999999999996, "longitude": 126.944}} LOG 960 1280 {"DateTime": "2023:02:23 18:11:22", "DateTimeDigitized": "2023:02:23 18:11:22", "ExposureTime": "0.01", "FNumber": "2.8", "Flash": "0", "FocalLength": "5000/1000", "GPSAltitude": null, "GPSAltitudeRef": null, "GPSDateStamp": null, "GPSLatitude": null, "GPSLatitudeRef": null, "GPSLongitude": null, "GPSLongitudeRef": null, "GPSProcessingMethod": null, "GPSTimeStamp": null, "ISOSpeedRatings": "100", "ImageLength": "1280", "ImageWidth": "960", "Make": "Google", "Model": "sdk_gphone_x86", "Orientation": "1", "SubSecTime": "063", "SubSecTimeDigitized": "063", "SubSecTimeOriginal": "063", "WhiteBalance": "0"} LOG orientation 1 LOG file:///data/user/0/com.zzz.fooddeliveryapp/cache/2dfe7384-6463-4c9c-b07a-e86a4184388b.JPEG 2dfe7384-6463-4c9c-b07a-e86a4184388b.JPEG원래는 완료버튼을 누른 후 내 정보로 가야하고 수익금이 정산되어야하는데,일단 완료버튼을 눌러도 아무런 반응이 없습니다Complete.tsx import React, {useCallback, useState} from 'react'; import { Alert, Dimensions, Image, Pressable, StyleSheet, Text, View, } from 'react-native'; import { NavigationProp, RouteProp, useNavigation, useRoute, } from '@react-navigation/native'; import {LoggedInParamList} from '../../AppInner'; import ImagePicker from 'react-native-image-crop-picker'; import ImageResizer from 'react-native-image-resizer'; import axios, {AxiosError} from 'axios'; import Config from 'react-native-config'; import {useSelector} from 'react-redux'; import {RootState} from '../store/reducer'; import orderSlice from '../slices/order'; import {useAppDispatch} from '../store'; function Complete() { const dispatch = useAppDispatch(); const route = useRoute<RouteProp<LoggedInParamList>>(); const navigation = useNavigation<NavigationProp<LoggedInParamList>>(); const [image, setImage] = useState<{uri: string; name: string; type: string}>(); const [preview, setPreview] = useState<{uri: string}>(); const accessToken = useSelector((state: RootState) => state.user.accessToken); // { uri: '경로', name: '파일이름', type: '확장자' } // multipart/form-data 통해서 업로드 const onResponse = useCallback(async (response: any) => { console.log(response.width, response.height, response.exif); setPreview({uri: `data:${response.mime};base64,${response.data}`}); const orientation = (response.exif as any)?.Orientation; console.log('orientation', orientation); return ImageResizer.createResizedImage( response.path, // 파일 경로 (file:///안드로이드 경로) 600, // width 600, // height response.mime.includes('jpeg') ? 'JPEG' : 'PNG', // format 100, // quality 0, // rotation ).then(r => { console.log(r.uri, r.name); setImage({ uri: r.uri, name: r.name, type: response.mime, }); }); }, []); const onTakePhoto = useCallback(() => { return ImagePicker.openCamera({ includeBase64: true, includeExif: true, // saveToPhotos: true, }) .then(onResponse) .catch(console.log); }, [onResponse]); const onChangeFile = useCallback(() => { return ImagePicker.openPicker({ includeExif: true, includeBase64: true, mediaType: 'photo', }) .then(onResponse) .catch(console.log); }, [onResponse]); const orderId = route.params?.orderId; const onComplete = useCallback(async () => { if (!image) { Alert.alert('알림', '파일을 업로드해주세요.'); return; } if (!orderId) { Alert.alert('알림', '유효하지 않은 주문입니다.'); return; } const formData = new FormData(); formData.append('image', image); formData.append('orderId', orderId); try { await axios.post(`${Config.API_URL}/complete`, formData, { headers: { authorization: `Bearer ${accessToken}`, }, }); Alert.alert('알림', '완료처리 되었습니다.'); navigation.goBack(); navigation.navigate('Settings'); dispatch(orderSlice.actions.rejectOrder(orderId)); } catch (error) { const errorResponse = (error as AxiosError).response; if (errorResponse) { Alert.alert('알림', (errorResponse.data as any).message); } } }, [dispatch, navigation, image, orderId, accessToken]); return ( <View> <View style={styles.orderId}> <Text>주문번호: {orderId}</Text> </View> <View style={styles.preview}> {preview && <Image style={styles.previewImage} source={preview} />} </View> <View style={styles.buttonWrapper}> <Pressable style={styles.button} onPress={onTakePhoto}> <Text style={styles.buttonText}>이미지 촬영</Text> </Pressable> <Pressable style={styles.button} onPress={onChangeFile}> <Text style={styles.buttonText}>이미지 선택</Text> </Pressable> <Pressable style={ image ? styles.button : StyleSheet.compose(styles.button, styles.buttonDisabled) } onPress={onComplete}> <Text style={styles.buttonText}>완료</Text> </Pressable> </View> </View> ); } const styles = StyleSheet.create({ orderId: { padding: 20, }, preview: { marginHorizontal: 10, width: Dimensions.get('window').width - 20, height: Dimensions.get('window').height / 3, backgroundColor: '#D2D2D2', marginBottom: 10, }, previewImage: { height: Dimensions.get('window').height / 3, resizeMode: 'contain', // cover(꽉 차게), contain(딱 맞게), stretch(비율 무시하고 딱 맞게), repeat(반복되게), center(중앙 정렬) }, buttonWrapper: {flexDirection: 'row', justifyContent: 'center'}, button: { paddingHorizontal: 20, paddingVertical: 10, width: 120, alignItems: 'center', backgroundColor: 'yellow', borderRadius: 5, margin: 5, }, buttonText: { color: 'black', }, buttonDisabled: { backgroundColor: 'gray', }, }); export default Complete; 중간에 이 에러가 나는데 혹시 관련이 있나요? WARN SerializableStateInvariantMiddleware took 123ms, which is more than the warning threshold of 32ms. If your state or actions are very large, you may want to disable the middleware as it might cause too much of a slowdown in development mode. See https://redux-toolkit.js.org/api/getDefaultMiddleware for instructions. It is disabled in production builds, so you don't need to worry about that.
-
미해결핸즈온 리액트 네이티브
8.5 :: 로그인 후 화면 이동 만들기 모듈 에러 질문드립니다
1. 코드에 질문이 있다면 코드를 깃헙(https://github.com/)에 올리고 주소 링크를 남겨주세요. https://github.com/anjigu/react_native_photo.git2. 문제 발생 상황 등, 내용을 자세히 작성해주세요.안녕하세요 강사님위와 같은 에러를 해결하기 위해 올려주신 깃헙 코드도 확인하고 구글링을 해서 모듈을 삭제하고 다시 설치하고 재실행 하는 등 여러가지 방법을 시도했으나 몇시간 째 해결되지 않아 질문 드립니다.어떻게 해결해야할까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
API 보안 관련 질문입니다!
안녕하세요!현재 올려주신 강의 내용을 바탕으로 쇼핑몰 상품의 정품 등록을 하는 서비스를 구현하려고 하고 있습니다.정품 등록 과정에서 사용자가 정품 인증 코드를 입력하면, API 서버를 통해 데이터베이스에 해당 코드가 존재하는지 찾은 후, 존재한다면 해당 코드와 사용자를 매칭시키는 방식으로 우선 구현하고자 합니다. (약간 문화상품권 등록 같기도 하네요 ㅎㅎ)물론 위 내용에 관련된 코드 질문은 아니구요 ㅎㅎ 위와 같은 내용이 구현되었을 때 악의를 가진 사용자가 postman 등 툴을 통해 API 서버에 무작위로 정품 인증 코드를 보낸 후, 정말 우연히 존재하는 코드를 찾은 경우에 그 코드를 사용해서 정품 등록을 할 수 있을 것 같은데, 이를 어떻게 대비하는게 좋을지 궁금합니다. rate limit이 생각나긴 하지만... 그리 완벽한 방법은 아닐 것 같아서요..!!그리고 API 서버 주소가 외부에 노출이 되지 않는 경우엔 무차별 대입 공격을 하기도 힘들텐데, 개발자도구에서 소스를 확인하면 결국 API 서버 주소가 나오잖아요~ 그래서 API 서버 주소를 쉽게 알아내지 못하게 하는 방법이 있을지도 궁금합니다.또 하나 구현해야 하는 기능이 사용자 본인이 정품 등록한 제품을 조회할 수 있도록 하는 기능인데요, userID가 API 서버에 전송되면 데이터베이스에서 해당 userID로 등록된 제품들을 찾아서 보여주도록 구축하려고 합니다. 다만 이 경우에도 위와 비슷하게 API 서버 주소를 알고있는 사람이 다른 사람 ID를 API 서버에 전송해서 그 사람의 정품 등록된 제품을 조회할 수 있는 문제점이 있을 것 같은데요, 이를 어떻게 해결하는게 좋을지도 의견 여쭤보고 싳습니다.요약하자면 다음과 같습니다.:API 서버에 무작위 정품인증 코드를 보내는걸 어떻게 막는게 좋을까요? 제가 생각한 방법은 rate limit인데, 더 좋은 방법이 있을까요?API 서버 주소를 개발자도구 등을 통해 쉽게 알아내지 못하게 하는 방법이 있을까요?userID를 통해 API 서버에서 해당 사용자의 정보를 가져오는 경우, 타인이 API 서버와 통신해서 다른 사용자의 정보를 가져오는걸 어떻게 막을 수 있을지 궁금합니다. 제 짧은 생각으로는 ID를 암호화해서 API 서버와 통신해야 될 것 같은데, 조금 막막한 감이 있네요.. 현재 제가 사용하는 프론트엔드가 react가 아니라 순정 html+JS인지라...약간 질문이 두서없고 강의 주제랑 조금 벗어난 것 같지만... 잘 부탁드리겠습니다..ㅎㅎ지금 질문드리는 내용이 결국 API 서버 보안과 관련된 내용인 것 같은데, 혹시나 해당 내용과 관련해서 말씀해주고 싶으신 내용이 있으시다면 설령 TMI라고 생각드실지라도 얼마든 알려주세요!! 열심히 배우겠습니다. 💪좋은 강의 감사드립니다. 좋은 하루 되세요!
-
해결됨배달앱 클론코딩 [with React Native]
_BUCK 파일
3분 10초쯤에 나오는 _BUCK 파일이 없습니다파일이 없을 시 따로 추가해주어야하나요??
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
웹페이지에서 상품 정렬 혹은 조건을 정하여 보여주려면 어떤 방법을 사용해야할까요?
예를들어서 웹페이지에서 select나 checkbox를 통하여 값을 정했을 때 선택한 값에 따라 정렬이나 조건에 맞게 화면에 보여줄 방법은 없을까요?
-
미해결배달앱 클론코딩 [with React Native]
데이터 사용량 질문드립니다!
react-native-nmap 라이브러리를 사용해서 지도를 출력할때와 naver map sdk를 native로 직접 호출해서 지도를 출력할때 각각 사용되는 모바일 데이터(4G)의 사용량이 꽤 차이가 납니다.react-native-nmap가 상황에 따라 (3~6mb)정도 사용된다면 native에서 sdk를 이용해 바로 출력할때는 많아야 2mb정도 사용되는것 같습니다. 해당 문제는 라이브러리 자체의 성능이슈일까요?..지도에서 상황에따라 핀 데이터를 업데이트해야하는데 이때마다 지도가 렌더링되면서 데이터가 꽤 많이 소모되어서 개선 방법이 있는지 궁금합니다.
-
미해결배달앱 클론코딩 [with React Native]
안녕하세요 제로초님 Mac Flipper 설정 질문드립니다!
일단 문제는 Flipper DevTools에서 아래 오류가 발생하는 것 입니다.Mac에서 Flipper 설정 중인데, 버전은 따로 명시하지 않고 설치하였습니다.Setup Doctor에서 오류나는 부분은 구글링하여 해결하여서 전부 체크 상태입니다.혹시 제가 체크하지 못 한 부분이 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
데이터베이스 다중값
데이터베이스 한 칼럼에 다중 값을 넣으려면 어떻게 해야 할까요? 예를 들어서 월, 화, 수, 목, 금, 토, 일을 체크박스로 만들고 여러 개의 값을 체크하면 그 값이 한칼럼에 다 들어간다고 가정했을 때 어떤 방법을 사용해야 할까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
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에 비해 적다보니 관련 자료나 의견도 찾기 어려웠습니다.혹시 이 부분에 대해서 제로초님의 생각은 어떠한지 듣고 싶습니다.