묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결React Native with Expo: 제로초에게 제대로 배우기
eas update:configure
eas configure 성공하려면app.config.js 가 아니라 app.json으로 있어야하나요 ?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
MODULE_NOT_FOUND 오류
code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\CompanyWebsite\\backend\\index.js' ] } Node.js v22.17.0 [nodemon] app crashed - waiting for file changes before starting... app.use("/api/auth", userRoute); 라우트 구성 후 thunder client로 apt 테스트 시 발생하는 오류입니다.
-
미해결만들면서 배우는 리액트 : 기초
npx 명령어 사용 불가
안녕하세요.ls를 할 경우 소스파일들이 보이지 않습니다.혹시 어떤 경로로 이동하면 될까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
자바스크립트 이해도
자바스크립트 부분이 끝났는데, 혹시 자바스크립트에 대한 이해도는 어느 정도로 되어야 하나요,테스트 해볼 수 있는 방법이 있을까요?(미션 퀴즈를 혼자 처음부터 못 풀면 다시 복습하고 혼자 할 수 있을때까지 하는게 답 안 보고 하는게 맞을까요?)다음 챕터로 넘어가기전에 확인하고 싶어서 질문합니다 🙂 !
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.
그랩 선생님, 좋은 강의 만들어 주셔서 잘 듣고 있습니다.그런데 아무리 해도 에러가 나는 것을 해결하지 못하고 있어 2주 이상 진도를 나가지 못하고 있어 부득이하게질문을 여러번 올리게 됩니다. 현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요,1.그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요,실행하면,1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이에러가 발생 합니다.이 에러는 어떻게 해결 할 수 있을까요?--------2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다.현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁드립니다 위에는 mock 서버인 postman(포스트맨) 화면이고요,아래는 크롬 브라우저 에러 메시지를 첨부합니다. 참고> app.js 소스 첨부합니다.import logo from './logo.svg'; import './App.css'; import MainPage from "./main/index.js" function App() { return ( <div> <MainPage /> </div> ); } export default App; 또한 만약 그랩님께서 제 소스를 보시고 수정하여 에러가 해결된 완성된 index.js 소스가 있다면요,최종 완성된 수십 줄의 소스 코드를 아래 답변 댓글에 길더라도 다 첨부해주시면 완성된 소스 코드를 그대로 복사하여 vs code에 붙여 넣기 하고 싶은데요, 아래 답변 글에 남겨주시면 감사하겠습니다.-------------------------------------------------------------------------------------------------그리고, 아래 글에 나와 있는 답변데로,TypeError: Cannot read properties of undefined (reading ‘map’) 해결 방법서버 데이터 문제로 인한 map 함수 에러 고치기React 데이터 바인딩과 undefined 에러 처리위 해결책의 코멘트와 답변 대로 수정해 보아도 에러가 해결 되지 않았습니다.어떻게 해결 해야 하는지요? 빠른 답변 부탁 드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
context를 사용하니 Editor 컴포넌트 최적화가 풀리는 이유
안녕하세요. 강의 잘 듣고 있습니다.context 를 사용하기 전 코드에서 export default memo(Editor);Editor 컴포넌트에도 memo 를 사용해서 TodoItem의 수정/삭제로 인해 계속 리렌더링되는 것을 막는 최적화를 했었는데요. context를 사용하고 나니까 Editor 컴포넌트의 최적화가 풀리는 이유가 궁금합니다.useCallback과 useMemo를 사용해서 함수를 App 컴포넌트가 마운트 될 때 한번만 생성하고 3개의 함수를 묶은 객체도 다시 생성되지 않도록 만들었는데, Editor 컴포넌트는 컨텍스트에서 onCreate 함수만 받아서 사용하고 있는데, 왜 리렌더링이 발생하나요?챗지피티에 질문을 했더니,"props가 없는 상태에서 useContext만 쓰고 있으면 memo는 props 비교를 하지 못해서 무조건 리렌더링 발생한다" 라고 하는데맞는 말인가요?맞는 말이라면 설명 좀 부탁드립니다.ㅠㅠ
-
미해결React Native with Expo: 제로초에게 제대로 배우기
react expo 윈도우에서는 로컬 빌드 해서 apk 못 뽑나요??
윈도우에서 react expo로 앱을 만든 후 애뮬에 배포하는거말고 윈도우 하드디스크에 apk를 받고싶어서 npx eas build -p android --profile preview --local 이라고 명령어 실행하면 Unsupported platform, macOS or Linux is required to build apps for Android Error: build command failed. 이렇게 뜨는데 제가 잘못한게 있을까요? 아니면 맥북에서만 로컬 빌드가 가능한건가요?? eas 온라인 빌드는 한달 30회 제한도 있고 큐에 쌓이고 기다리는 시간이 너무 길어서 apk 추출해서 실기기에 넣고싶은데 윈도우에서는 방법이 없을까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
nativeAppKey 인식 안되는 이유로 eas build 실패
✘ chaejinjeong😝 ~/Desktop/lukas/Study/reactnative/zerocho/threads ↱ main ± eas build --profile development --platform android ★ eas-cli@16.17.0 is now available. To upgrade, run: npm install -g eas-cli Proceeding with outdated version. Failed to read the app config from the project using "npx expo config" command: npx expo config --json exited with non-zero code: 1. Falling back to the version of "@expo/config" shipped with the EAS CLI. [@react-native-kakao/core] 'nativeAppKey' missing in expo config plugin value Error: build command failed.현재 강의 따라하다가 app.config.js 로 app.json이 바뀌어있는 상태인데 config.js 에서는 환경변수로 값이 인식이 안되나요 ? Expo 프로젝트에 환경변수는 등록이 되어있는 상태입니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
위 링크에서 modal.tsx 만 다음 코드로 바꾼 후 실습 진행하시면 됩니다.
https://github.com/ZeroCho/threads-clone/tree/9313da137d2520c8a336e9add8ec61a776bca4e4/app위 링크에서 modal.tsx 만 다음 코드로 바꾼 후 실습 진행하시면 됩니다.이렇게 되어 있을 때, 해당 링크에 있는 파일을 다운로드 할 수 있나요?아니면 해당 링크에 들어가서, 파일 하나하나 접근해서 파일 하나씩 다운로드를 하는건가요?죄송합니다. 무슨 말인지 모르겠어요.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
이미지 파일의 경로 설정에 대한 질문입니다.
src 폴더 안에 pages폴더와 assets폴더가 있는데 왜 경로를 ../../assets 이렇게 잡아야 하는 거죠? .. 을 두 번 쓰면 두 번 위로 올라가는 거니까 src 폴더 밖에서 assets 폴더를 찾겠다는 거 아닌가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vite 리액트 설치에 대해 질문있습니다.
안녕하세요 리액트 설치 에러에 대해 질문이 있습니다. 원래 vite로 리액트를 설치해서 잘 사용하고 있었는데 어제 새로운 프로젝트를 할려고 vite로 리액트를 설치했고 npm i 명령어로 node_modules를 받은 후 npm run dev로 실행을 하니 이미지처럼 오류가 계속 나더라구요. 그래서 저 에러에 대해 이것저것 찾아보니 node버전 문제라고 나오는데 현재 버전은 v20.11.1 인데 뭐가 문제인건지 모르겠습니다.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
17강 강의중 문의드립니다.
안녕하세요 강의 실습중 문의드립니다. 강의랑 똑같이 하던중에 저에게만 에러가 나는부분이 있어 문의드립니다.@Override public Long register(TodoDTO todoDTO) { Todo todo = dtoToEntity(todoDTO);dtoToEntity에서 에러가 발생합니다.Cannot invoke "java.lang.Long.longValue()" because the return value of "com.project.reactserver.dto.TodoDTO.getTno()" is null에러가 발생하는데 당연히 tno값을 안넣었으니 null인데 강사님 강의에서는 잘 진행이 되는데뭐가 문제인지.. 물론 TodoDTO에는 @Data 어노테이션도 작성했고 Setting에서 어노테이션 활성도 확인했습니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
faker 라이브러리 설치 후 오류 발생
'c:/Users/swu/threads-clone/node_modules/@faker-js/faker/tsconfig.json' 구성 파일에서 입력을 찾을 수 없습니다. 지정된 '포함' 경로는 '["src/**/*"]'이고 '제외' 경로는 '["node_modules"]'이었습니다. 처음에 오류가 발생해서 npm uninstall @faker-js/faker 로 한 번 지웠다가 다시 npm i @faker-js/faker 로 설치했는데 이런 오류가 발생합니다 ㅜㅜ 지웠다가 설치해서 이런 오류가 발생하는 걸까요?
-
해결됨React Native with Expo: 제로초에게 제대로 배우기
카카오 로그인이 안됨
LOG key: Xo8WBi6jzSxKDVR4drqm84yr9iU= ERROR [Error: invalid android_key_hash or ios_bundle_id or web_site_url]key는 잘 받아오는데 로그인이 안됩니다.. const onKakaoLogin = async () => { try { console.log("key: ", await getKeyHashAndroid()); const result = await kakaoLogin(); console.log(result); const user = await me(); console.log(user); // TODO: save the token to server } catch (error) { console.error(error); } };현재 사용 중인 코드입니다.
-
해결됨React Native with Expo: 제로초에게 제대로 배우기
npm run android 시 에러
reactive kakao login docs를 보고 설치하고 강의따라 kakako core,user 설치했는데, 아래와같은 에러가 계속 발생합니다> Configure project :react-native-reanimated Android gradle plugin: 8.8.2 Gradle: 8.13 [Incubating] Problems report is available at: file:///Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/android/build/reports/problems/problems-report.html 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.kakao.sdk:v2-common:2.20.1. Searched in the following locations: - file:/Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/node_modules/react-native/android/com/kakao/sdk/v2-common/2.20.1/v2-common-2.20.1.pom - https://dl.google.com/dl/android/maven2/com/kakao/sdk/v2-common/2.20.1/v2-common-2.20.1.pom - https://repo.maven.apache.org/maven2/com/kakao/sdk/v2-common/2.20.1/v2-common-2.20.1.pom - https://www.jitpack.io/com/kakao/sdk/v2-common/2.20.1/v2-common-2.20.1.pom - https://central.sonatype.com/repository/maven-snapshots/com/kakao/sdk/v2-common/2.20.1/v2-common-2.20.1.pom Required by: project :app > project :react-native-kakao_core > Could not find com.kakao.sdk:v2-user:2.20.1. Searched in the following locations: - file:/Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/node_modules/react-native/android/com/kakao/sdk/v2-user/2.20.1/v2-user-2.20.1.pom - https://dl.google.com/dl/android/maven2/com/kakao/sdk/v2-user/2.20.1/v2-user-2.20.1.pom - https://repo.maven.apache.org/maven2/com/kakao/sdk/v2-user/2.20.1/v2-user-2.20.1.pom - https://www.jitpack.io/com/kakao/sdk/v2-user/2.20.1/v2-user-2.20.1.pom - https://central.sonatype.com/repository/maven-snapshots/com/kakao/sdk/v2-user/2.20.1/v2-user-2.20.1.pom Required by: project :app > project :react-native-kakao_user * 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. Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. For more on this, please refer to https://docs.gradle.org/8.13/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation. BUILD FAILED in 6s 33 actionable tasks: 5 executed, 28 up-to-date Error: /Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/android/gradlew app:assembleDebug -x lint -x test --configure-on-demand --build-cache -PreactNativeDevServerPort=8081 -PreactNativeArchitectures=arm64-v8a exited with non-zero code: 1 Error: /Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/android/gradlew app:assembleDebug -x lint -x test --configure-on-demand --build-cache -PreactNativeDevServerPort=8081 -PreactNativeArchitectures=arm64-v8a exited with non-zero code: 1 at ChildProcess.completionListener (/Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/node_modules/@expo/spawn-async/src/spawnAsync.ts:67:13) at Object.onceWrapper (node:events:622:26) at ChildProcess.emit (node:events:507:28) at maybeClose (node:internal/child_process:1101:16) at Process.ChildProcess._handle.onexit (node:internal/child_process:305:5) ... at spawnAsync (/Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/node_modules/@expo/spawn-async/src/spawnAsync.ts:28:21) at spawnGradleAsync (/Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/node_modules/@expo/cli/src/start/platforms/android/gradle.ts:134:28) at assembleAsync (/Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/node_modules/@expo/cli/src/start/platforms/android/gradle.ts:83:16) at runAndroidAsync (/Users/chaejinjeong/Desktop/lukas/Study/reactnative/zerocho/threads/node_modules/@expo/cli/src/run/android/runAndroidAsync.ts:62:24)node_modules 모두 삭제하고 설치해도 똑같습니다npx expo install --fix 로도 호환이 안맞춰지는 것 같습니다.패키지는 설치되어있는 것 확인했습니다.제 진행중인 코드입니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
props 에 불이 안켜지죠...?
불이 왜 안켜지는거죠...?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
17강 질문
강의 17 부터는 서버와 데이터베이스가 따로 필요한걸까요?서버를 따로 구축해야 되는지, 데이터베이스를 추가로 설치해야 되는건지 궁금합니다
-
미해결Next.js App router 기반 Chat GPT 만들기
섹션6 헤더 마크업 - zustand 적용에 오류가 발생합니다
// model.ts import { create } from 'zustand'; type State = { model: string; }; type Action = { updateModel: (model: State['model']) => void; }; const useModelStore = create<State & Action>((set) => ({ model: 'gpt-3.5-turbo', updateModel: (model) => set(() => ({ model })), })); export { useModelStore }; // ModelSelect.tsx 'use client'; import { useModelStore } from '@/store/model'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'; const MODELS = ['gpt-3.5-turbo', 'gpt-4', 'gpt-4o']; export default function ModelSelect() { const { model: currentModel, updateModel } = useModelStore((state) => ({ model: state.model, updateModel: state.updateModel, })); const handleChange = (selectModel: string) => { updateModel(selectModel); }; return ( <Select value={currentModel} onValueChange={handleChange}> <SelectTrigger className="w-[180px] border-none focus:ring-transparent"> <SelectValue placeholder="모델 선택" /> </SelectTrigger> <SelectContent> {MODELS.map((model) => ( <SelectItem key={model} value={model} disabled={currentModel === model}> {model} </SelectItem> ))} </SelectContent> </Select> ); } 위 코드 적용 결과 아래와 같은 무한반복 에러가 발생합니다. 강의 내용과 비교해 보아도 문제를 찾지 못했습니다 ㅜㅜ
-
해결됨한 입 크기로 잘라먹는 Next.js
[Next.js] 데이터 스트리밍에 대한 문의드립니다.
페이지단위, 컴포넌트 단위로 스트리밍은 이해되는데, 만약 테이블에 데이터를 불러오는데, 데이터가 100만개 이럴때 테이블의 첫 페이지에 20개만 불러오고 이런 식으로 동작하게 할 수 있는 스트리밍 방식이 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
day17과제중 Context 객체생성 오류발생했습니다.
day17과제하던중에, Context 객체 생성하는데 오류가 발생했습니다.export를 붙여서 진행하면 화면과 같이 오류가 발생하고, export를 제외하면 랜더링할때 빈화면이 나옵니다. 다른컴퍼넌트에는 useContext이용해서 함수 공급받는거 작성했습니다.import "./App.css" import Header from "./components/Header" import ContactEditor from "./components/ContactEditor" import List from "./components/List" import {useState, useRef, useCallback, createContext, useMemo} from 'react' const mockData = [ //임시데이터라는 뜻(mockData) { id: 0, name: "이정환", email: "king32@gmail.com" }, { id: 1, name: "김정환", email: "queen25@gmail.com" }, { id: 2, name: "하정환", email: "prince13@gmail.com" }, ] export const ContactStateContext = createContext(); export const ContactDispatchContext = createContext(); function App() { const [contact, setContact] = useState(mockData); const idRef = useRef(3) const onCreate = useCallback((name,email)=>{ const newContact = { id: idRef.current++, name: name, email: email, }; setContact([newContact, ...contact ]); },[]); const onDelete = useCallback((targetId) => { setContact(contact.filter((it) => it.id!== targetId)); },[]) const memoizedDispatch = useMemo( ()=>({onCreate, onDelete}),[] ); return( <div className="App"> <Header /> <ContactStateContext.Provider value={contact}> <ContactDispatchContext.Provider value={memoizedDispatch}> <ContactEditor /> <List /> </ContactDispatchContext.Provider> </ContactStateContext.Provider> </div> ) } export default App;