묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 타임 질문입니다
영상이 18분쯤 마무리 되는 것 같은데 영상길이가 87분으로 검은화면만 노출됩니다확인 부탁드려요!
-
미해결따라하며 배우는 리액트 네이티브 기초
윈도우에서 cli 이용해서 ios개발이 가능한가요?
react native cli로 개발할때mac에서는ios,and 2가지가 있는데 윈도우에서는 android만 되는건가요? ios는 안되는건가요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
react-native-safe-area-context & react-native-screens 에러
이러한 오류가 계속뜨는데 다른 질문에서 버전을 바꾸라고햇을떄 react-native-safe-area-context랑 react-native-screens 이것들의 버전을 바꾸는 방법을 모르겠습니다오늘 몇시간넘게 해결이 안돼 너무 답답해서 도와주시면 감사하겠습니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[2-3]에뮬레이터 실행 오류
질문을 계속해서 죄송합니다네비게이션 설치후 로그인스크린 구현후 에뮬레이터를 실행하려고하니 전까지 잘되던데 계속 에러가 뜨면서 실행이 안됩니다 ㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[2-0] front파일로 옮길떄 에러
말씀드린대로 front파일을 만들고 그 안에 전부 프로그램을 옮겻을떄Parsing error: No Babel config file detected for C:\Users\user\Documents\react native-study\MatzipApp\front\index.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.이러한 에러가 거의 모든 파일에 계속 나는데 왜그러는 걸까요.. ㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강사님의 계획?
선생님 준비중인 강의가 혹시 있으실까요?선생님같은분이 강의를 안한다는건 정말 재능 낭비인것 같습니다.만족도가 이렇게 높은 강의는 첨음이거든요그래서 혹시 다른 준비중인 강의가 있는지 묻고싶습니다.계속 기다리고 있어서 두통이 생깁니다. ㅎㅎ 개인적으로는 next 실무강의를 해주시면 좋겠지만 ㅎㅎ
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
03-02 회원가입 질문
왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
03-02 회원가입 피그마에 나온거 처럼 만드는문제
섹션 03-02 마지막 부분에 나오는 회원가입 피그마 화면처럼 만들기 문제에 대한 답은 업로드 되어있나요? 답을 확인할수 없을까요??
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
오류ㅠㅠ
윈도우-안드로이드로 수강하는 중인데 이전 강의까지 잘 되다가 navigation 설치하고나서 이런 오류가 떠서 구글링도 해봤는데 해결이 잘 안되네요(yarn이 잘 안돼서 npm 설치과정 따라서 설치했습니다.)이런 오류가 뜨길래 구글링을 통해android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_11 targetCompatibility JavaVersion.VERSION_11 } kotlinOptions { jvmTarget = "11" } } 이렇게 해보라길래 해봐도 오류가 뜨네요 ㅠㅠnode -v : v20.18.1java --version : openjdk 11.0.25
-
해결됨배달앱 클론코딩 [with React Native]
react native와 spring boot 연결
안녕하세요. 제로초님!현재 react native(cli)와 spring boot로 프로젝트를 진행하고 있습니다. (기본적인 환경설정은 제로초님 RN 강의를 보고 세팅했습니다.) 프런트 역할을 맡은 제가 axios를 사용해서 spring boot와 연결하려고 하고있습니다. 여기서 문제가 생겼는데요!아래 코드처럼 백에서 간단하게 값을 받아와서 return 값을 받아오는 것만 확인하고자 아래 코드를 사용해봤습니다.... const [hello, setHello] = useState(''); ... //API_URL=http://10.0.2.2:3105 로 설정해서 .env 파일에 넣어놨습니다. useEffect(() => { axios .get(`${Config.API_URL}/api/hello`) .then(response => setHello(response.data)) .catch(error => console.log(error)); }, []); .... <Text>백엔드에서 가져온 데이터입니다 :{hello}</Text>이 때 [AxiosError: Network Error] 에러가 생겨서 에러확인부터 해결방법까지 아래 블로그에 작성해뒀습니다. 여기서 궁금한 부분은 이런 에러가 왜 생기는지 의문입니다.. 제로초님 강의에서 초반에 다뤘던 aixos를 참고하고 작성해본 거라 왜 안되는지 모르겠더라구요. (제로초님 영상보고 만들었을 때는 잘돌아갔던 기억이 있습니다.)https://velog.io/@foreveryejin/react-native-axios-get%EC%9D%B8%EC%88%98-%EC%97%90%EB%9F%AC 그래서 일단 아래 코드로 백에서 데이터를 받아와보자 했습니다!... const [hello, setHello] = useState(''); ... useEffect(() => { axios .get(`http://10.0.2.2:3105/api/hello`) .then(response => setHello(response.data)) .catch(error => console.log(error)); }, []); .... <Text>백엔드에서 가져온 데이터입니다 :{hello}</Text>코드 변경 후에는[AxiosError: Network Error] 해당 에러는 콘솔에서 생기지 않았고 리액트네이티브 디버거에도 에러는 따로 생기지 않았습니다. 에러는 생기지 않는데 백에서 return 해주는 값은 나오지 않더라구요. 백에서도 기본적인것만 만들어놔서 안되는 이유를 모르겠다고 하네요.이렇게 백이랑 연결할 때 또 확인해야하는 부분이 있을까요?백을 실행해 놓고 axios코드만 작성한다고 프런트랑 백이랑 연결이 되는 건지도 헷갈립니다..!포트 번호를 확인해봐야할까요?처음으로 프런트와 백이 있는 프로젝트를 시작하느라 무엇을 모르는지를 몰라서 어떤 걸 질문해야할지 막막했습니다..어떤 공부를 해야할지도 모르겠습니다ㅜㅜ감사합니다..!
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
npm start (android) 에러
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.IOS는 잘 동작합니다.android 에뮬레이터 실행을 위해 'a'를 누르면 아래와 같은 에러가 발생합니다. .android studio에서 gradle 버전을 8.9로 올리라고 해서 올린후 실행한 결과입니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
yarn start 오류
제가 윈도우라서 열심히 1-5과정 따라가고 있는데 밑에 과정까지는 완료했는데 yarn start부분에서 오류가 뜨네요(안드로이드,ios 다 오류떠요) 정말 죄송하지만 해결법을 알려주실 수 있으실까요?yarn start - a눌렀을때yarn start - i 눌렀을때 doctor2가지 문제가 있는 것 같네요..
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
마우스이벤트 형식이 제네릭이아닙니다 오류 해결 못하고 있습니다 어떤 거 인지 알 수 잇을까여?
import { ChangeEvent, useState } from "react"; // 리팩토링 const Board = () => { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [isActive, setIsActive] = useState(false); const onChangewriter = (event:ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); if (event.target.value !== "" && title && content) return setIsActive(true); setIsActive(false); }; const onChangeTitile = (event:ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); if (writer && event.target.value && content) return setIsActive(true); setIsActive(false); }; const onChangeContent = (event:ChangeEvent<HTMLInputElement>) => { setContent(event.target.value); if (writer && title && event.target.value) return setIsActive(true) setIsActive(false); }; const onClickSubmit = (event:MouseEvent<HTMLButtonElement>) => [ console.log(writer), console.log(title), console.log(content), alert("게시물 등록이 완료되었습니다"), ]; return ( <> 작성자 : <input type="text" onChange={onChangewriter} /> <br /> 제목 : <input type="text" onChange={onChangeTitile} /> <br /> 내용: <input type="text" onChange={onChangeContent} /> <br /> <button onClick={onClickSubmit} style={{ backgroundColor: isActive === true ? "yellow" : "none" }} > 등록 </button> </> ); }; export default Board;
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
마우스이벤트 형식이 제네릭이아닙니다 오류 해결 못하고 있습니다 어떤 거 인지 알 수 잇을까여?
import { ChangeEvent, useState } from "react"; // 리팩토링 const Board = () => { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [isActive, setIsActive] = useState(false); const onChangewriter = (event:ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); if (event.target.value !== "" && title && content) return setIsActive(true); setIsActive(false); }; const onChangeTitile = (event:ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); if (writer && event.target.value && content) return setIsActive(true); setIsActive(false); }; const onChangeContent = (event:ChangeEvent<HTMLInputElement>) => { setContent(event.target.value); if (writer && title && event.target.value) return setIsActive(true) setIsActive(false); }; const onClickSubmit = (event:MouseEvent<HTMLButtonElement>) => [ console.log(writer), console.log(title), console.log(content), alert("게시물 등록이 완료되었습니다"), ]; return ( <> 작성자 : <input type="text" onChange={onChangewriter} /> <br /> 제목 : <input type="text" onChange={onChangeTitile} /> <br /> 내용: <input type="text" onChange={onChangeContent} /> <br /> <button onClick={onClickSubmit} style={{ backgroundColor: isActive === true ? "yellow" : "none" }} > 등록 </button> </> ); }; export default Board;
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
useAuth logout 401에러
안녕하세요 강사님!강사님께서 해당 강의에서 작성해주신대로 우선 Database와 백엔드서버를 구동시킨 채로 프론트엔드 서버를 npx react-native run-ios로 어플을 빌드하고로그아웃 버튼을 클릭했을때 위의 이미지와 같이 401에러가 발생합니다.제가 작성한 코드를 보여드리면src/hooks/queries/useAuth.ts function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: logout, onSuccess: () => { console.log('useLogout onSuccess'); removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); }, onSettled: () => { // auth에 해당하는 쿼리들을 캐시 무효화해서 업데이트 queryClient.invalidateQueries({queryKey: [queryKeys.AUTH]}); }, ...mutationOptions, }); } function useAuth() { const logoutMutation = useLogout(); return { logoutMutation, }; } export default useAuth; src/api/auth.tsconst logout = async () => { console.log('logout API call'); try { await axiosInstance.post('/auth/logout'); } catch (err) { console.error(`logout api err :::: ${err}`); } }; export { logout };3. src/api/axios.tsimport axios from 'axios'; const axiosInstance = axios.create({ baseURL: 'http://localhost:3030', withCredentials: true, }); export default axiosInstance;src/utils/header.tsimport axiosInstance from '../api/axios'; function setHeader(key: string, value: string) { axiosInstance.defaults.headers.common[key] = value; } function removeHeader(key: string) { if (!axiosInstance.defaults.headers.common[key]) { return; } delete axiosInstance.defaults.headers.common[key]; } export {setHeader, removeHeader}; src/screens/map/MapHomeScreen.tsximport React from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; import useAuth from '../../hooks/queries/useAuth'; const MapHomeScreen = () => { const {logoutMutation} = useAuth(); return ( <View> <Text>맵 스크린</Text> <Button title="로그아웃" onPress={() => logoutMutation.mutate(null)} /> </View> ); }; const styles = StyleSheet.create({}); export default MapHomeScreen;
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
create-react-app my app 실행 시 에러
create-react-app my app 실행 시 아래와 같은 에러가 뜹니다. Installing template dependencies using npm...npm error code ERESOLVEnpm error ERESOLVE unable to resolve dependency treenpm errornpm error While resolving: my-app@0.1.0npm error Found: react@19.0.0npm error node_modules/reactnpm error react@"^19.0.0" from the root projectnpm errornpm error Could not resolve dependency:npm error peer react@"^18.0.0" from @testing-library/react@13.4.0npm error node_modules/@testing-library/reactnpm error @testing-library/react@"^13.0.0" from the root projectnpm errornpm error Fix the upstream dependency conflict, or retrynpm error this command with --force or --legacy-peer-depsnpm error to accept an incorrect (and potentially broken) dependency resolution.npm errornpm errornpm error For a full report see:npm error C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-eresolve-report.txtnpm error A complete log of this run can be found in: C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-debug-0.lognpm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed
-
미해결배달앱 클론코딩 [with React Native]
java가 아닌 .kt에서 code push 에러가 발생합니다.
error Failed to install the app. Command failed with exit code 1: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * Where:Build file '/Users/wootukchoi/FoodDeliveryApp/node_modules/react-native-code-push/android/build.gradle' line: 17 * What went wrong:A problem occurred evaluating project ':react-native-code-push'.> Could not find method android() for arguments [build_2tl5hzetictwda5fo4twhoyrv$_run_closure1$_closure2@6264dc0a] on project ':react-native-code-push' of type org.gradle.api.Project. * Try: package com.fooddeliveryappimport com.facebook.react.ReactActivityimport com.facebook.react.ReactActivityDelegateimport com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabledimport com.facebook.react.defaults.DefaultReactActivityDelegateimport android.os.Bundle;import com.microsoft.codepush.react.CodePushclass MainActivity : ReactActivity() { /** * Returns the name of the main component registered from JavaScript. This is used to schedule * rendering of the component. */ override fun getMainComponentName(): String = "FoodDeliveryApp" /** * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] */ override fun createReactActivityDelegate(): ReactActivityDelegate = DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) override fun getJSBundleFile(): String { return CodePush.getJSBundleFile() }}
-
미해결배달앱 클론코딩 [with React Native]
flipper 239 에러가 발생합니다.
많은 시도를 해봤지만 계속 안되더라구요 ㅠㅠ error Failed to install the app. Command failed with exit code 1: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong:Could not determine the dependencies of task ':app:processDebugResources'.> Could not resolve all dependencies for configuration ':app:debugRuntimeClasspath'. > Could not find com.facebook.flipper:flipper:0.239.0. Searched in the following locations: - https://oss.sonatype.org/content/repositories/snapshots/com/facebook/flipper/flipper/0.239.0/flipper-0.239.0.pom - https://repo.maven.apache.org/maven2/com/facebook/flipper/flipper/0.239.0/flipper-0.239.0.pom - https://dl.google.com/dl/android/maven2/com/facebook/flipper/flipper/0.239.0/flipper-0.239.0.pom - https://www.jitpack.io/com/facebook/flipper/flipper/0.239.0/flipper-0.239.0.pom Required by: project :app > project :react-native-flipper * 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 https://help.gradle.org. BUILD FAILED in 1s.
-
미해결배달앱 클론코딩 [with React Native]
package.json에 /lib/panino.js 문제입니다.
해당에러가 뜹니다 무시해도되는걸까요? 비밀@비밀-ui-MacBookPro node_modules % npx pod install(node:21857) [DEP0060] DeprecationWarning: The util._extend API is deprecated. Please use Object.assign() instead.(Use node --trace-deprecation ... to show where the warning was created)(node:21857) [DEP0128] DeprecationWarning: Invalid 'main' field in '/Users/비밀/.npm/_npx/a0ca5f5666585aa2/node_modules/pm2/node_modules/isbinaryfile/package.json' of './lib/panino.js'. Please either fix that or report it to the module authorPOD ERR unknown command install
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
[js section07-2-2] 타이머 값 변경에 대해서
if(타이머 === "아직실행안함") 상태에서스크롤퍼센트가 >= 0.7 이면 타이머 값을 다른 값으로 변경해주어야타이머 = setTimeout(()=>{타이머="아직실행안함"},1000)이 코드로 스로틀링 되는게 아닌가요?영상에서는 타이머 값을 다른 값으로 변경해주지 않는데 이러면 타이머 = setTimeout(()=>{타이머="아직실행안함"},1000)이 코드를 추가하기 전과 같지 않나요?