inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

제가 뭐 건들었는지 안되네요 이유를 알 수 있을까요?

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

// CssModulePage.jsx import styles from "./styles.module.css"; export default function CssModulePage() { return ( <> <button className={styles.버튼스타일}>버튼</button> <div className={styles.네모상자스타일}>네모상자</div> </> ); } .버튼스타일 { background-color: yellow; } .네모상자스타일 { width: 200px; height: 200px; } Server Error Error: The default export is not a React Component in "/section04/04-03-css/page"

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
이 규성 댓글 5 좋아요 0 조회수 315

강의 타임 질문입니다

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

영상이 18분쯤 마무리 되는 것 같은데 영상길이가 87분으로 검은화면만 노출됩니다 확인 부탁드려요!

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
baby4 댓글 2 좋아요 0 조회수 96

윈도우에서 cli 이용해서 ios개발이 가능한가요?

미해결

따라하며 배우는 리액트 네이티브 기초

react native cli로 개발할때 mac에서는ios,and 2가지가 있는데 윈도우에서는 android만 되는건가요? ios는 안되는건가요?

  • react
  • react-native
  • expo
정근혁 댓글 2 좋아요 0 조회수 734

react-native-safe-area-context & react-native-screens 에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

이러한 오류가 계속뜨는데 다른 질문에서 버전을 바꾸라고햇을떄 react-native-safe-area-context랑 react-native-screens 이것들의 버전을 바꾸는 방법을 모르겠습니다 오늘 몇시간넘게 해결이 안돼 너무 답답해서 도와주시면 감사하겠습니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
kjm010629 댓글 2 좋아요 0 조회수 251

[2-3]에뮬레이터 실행 오류

미해결

맛집 지도앱 만들기 (React Native & NestJS)

질문을 계속해서 죄송합니다 네비게이션 설치후 로그인스크린 구현후 에뮬레이터를 실행하려고하니 전까지 잘되던데 계속 에러가 뜨면서 실행이 안됩니다 ㅠㅠ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 244

[2-0] front파일로 옮길떄 에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

말씀드린대로 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
  • typescript
  • nestjs
  • react-query
  • zustand
kjm010629 댓글 3 좋아요 0 조회수 149

강사님의 계획?

미해결

맛집 지도앱 만들기 (React Native & NestJS)

선생님 준비중인 강의가 혹시 있으실까요? 선생님같은분이 강의를 안한다는건 정말 재능 낭비인것 같습니다. 만족도가 이렇게 높은 강의는 첨음이거든요 그래서 혹시 다른 준비중인 강의가 있는지 묻고싶습니다. 계속 기다리고 있어서 두통이 생깁니다. ㅎㅎ 개인적으로는 next 실무강의를 해주시면 좋겠지만 ㅎㅎ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
호갱 댓글 1 좋아요 1 조회수 147

03-02 회원가입 질문

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
한혜원 댓글 2 좋아요 0 조회수 161

03-02 회원가입 피그마에 나온거 처럼 만드는문제

미해결

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

섹션 03-02 마지막 부분에 나오는 회원가입 피그마 화면처럼 만들기 문제에 대한 답은 업로드 되어있나요? 답을 확인할수 없을까요??

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
한혜원 댓글 2 좋아요 0 조회수 175

오류ㅠㅠ

미해결

맛집 지도앱 만들기 (React Native & NestJS)

윈도우-안드로이드로 수강하는 중인데 이전 강의까지 잘 되다가 navigation 설치하고나서 이런 오류가 떠서 구글링도 해봤는데 해결이 잘 안되네요 (yarn이 잘 안돼서 npm 설치과정 따라서 설치했습니다.) 이런 오류가 뜨길래 구글링을 통해 android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_11 targetCompatibility JavaVersion.VERSION_11 } kotlinOptions { jvmTarget = "11" } } 이렇게 해보라길래 해봐도 오류가 뜨네요 ㅠㅠ node -v : v20.18.1 java --version : openjdk 11.0.25

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 227

react native와 spring boot 연결

해결됨

배달앱 클론코딩 [with React Native]

안녕하세요. 제로초님! 현재 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
예진안 댓글 1 좋아요 0 조회수 375

npm start (android) 에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다 . IOS는 잘 동작합니다. android 에뮬레이터 실행을 위해 'a'를 누르면 아래와 같은 에러가 발생합니다. . android studio에서 gradle 버전을 8.9로 올리라고 해서 올린후 실행한 결과입니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
박경수 댓글 2 좋아요 0 조회수 247

yarn start 오류

미해결

맛집 지도앱 만들기 (React Native & NestJS)

제가 윈도우라서 열심히 1-5과정 따라가고 있는데 밑에 과정까지는 완료했는데 yarn start부분에서 오류가 뜨네요(안드로이드,ios 다 오류떠요) 정말 죄송하지만 해결법을 알려주실 수 있으실까요? yarn start - a눌렀을때 yarn start - i 눌렀을때 doctor 2가지 문제가 있는 것 같네요..

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 227

마우스이벤트 형식이 제네릭이아닙니다 오류 해결 못하고 있습니다 어떤 거 인지 알 수 잇을까여?

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

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
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
이 규성 댓글 2 좋아요 0 조회수 140

마우스이벤트 형식이 제네릭이아닙니다 오류 해결 못하고 있습니다 어떤 거 인지 알 수 잇을까여?

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

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
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
이 규성 댓글 1 좋아요 0 조회수 77

useAuth logout 401에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요 강사님! 강사님께서 해당 강의에서 작성해주신대로 우선 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.ts const 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.ts import axios from 'axios'; const axiosInstance = axios.create({ baseURL: 'http://localhost:3030', withCredentials: true, }); export default axiosInstance; src/utils/header.ts import 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.tsx import 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;

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
gga01075 댓글 2 좋아요 0 조회수 176

create-react-app my app 실행 시 에러

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

create-react-app my app 실행 시 아래와 같은 에러가 뜹니다. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-eresolve-report.txt npm 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.log npm 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

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
댓글 2 좋아요 0 조회수 375

java가 아닌 .kt에서 code push 에러가 발생합니다.

미해결

배달앱 클론코딩 [with React Native]

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.fooddeliveryapp import com.facebook.react.ReactActivity import com.facebook.react.ReactActivityDelegate import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled import com.facebook.react.defaults.DefaultReactActivityDelegate import android.os.Bundle; import com.microsoft .codepush.react.CodePush class 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() } }

  • react-native
최우뚝 댓글 2 좋아요 0 조회수 230

flipper 239 에러가 발생합니다.

미해결

배달앱 클론코딩 [with React Native]

많은 시도를 해봤지만 계속 안되더라구요 ㅠㅠ 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.

  • react-native
최우뚝 댓글 2 좋아요 0 조회수 190

package.json에 /lib/panino.js 문제입니다.

미해결

배달앱 클론코딩 [with React Native]

해당에러가 뜹니다 무시해도되는걸까요? 비밀@비밀-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 author POD ERR unknown command install

  • react-native
최우뚝 댓글 2 좋아요 0 조회수 497

인기 태그

인프런 TOP Writers

주간 인기글