묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
TypeError: Invalid URL
안녕하세요,1) 강사님 깃코드에서 코드 clone해서 가져온 후2) 노션 환경 변수 세팅3) npm run dev 실행하니까 localhost:3000에서 저런 에러가 뜨네요어떻게 해결하면 될까요?
-
미해결처음 만난 리액트(React)
이거 왜 존재하지 않는다고 뜨는건가요
이거 왜 존재하지 않는다고 뜨는건가요
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
JWT 설정 후 JSON 데이터가 문자열로 옵니다...
📤 before requestjwtUtil.ts:30 ✅ Response ReceivedjwtUtil.ts:34 📦 Content-Type: application/jsonjwtUtil.ts:35 🧾 typeof res.data: stringcontent-type은 json 형식으로 맞춰 주었는데 정작 데이터가 String으로 와서 list에 뿌려주지를 못하고 있습니다.Postman으로 확인했을 때는 정상적으로 JSON 데이터를 반환받는데 리액트에서 확인할려면 res.data가 "{\"dtoList\":[{\"tno\":115,\"title\":\"123zzzㅋㅋㅋㅋ\",\"content\":null,\"complete\":false,\"dueDate\":\"2025-08-07\",\"writer\":\"123\"}위와 같이 스트링 형식으로 변환되어서 들어와서 오류가 생깁니다.어디가 문제일까요..ㅠㅠ
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
loginSlice에서 reject가 반환되지 않습니다.
로그인시에 잘못된 아이디 비밀번호를 넣게 되면 콘솔 로그 창에 reject가 반환되어야 하는데 전부 fulfilled로 반환됩니다. 혹시 코드 필요하시면 첨부하도록 하겠습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js
앱라우팅 방식의 네비게이팅 방식
1. 앱 라우터에서는 왜 페이지 이동 전에 프리패칭(prefetching)이 이뤄지지 않는 것처럼 보일까요?페이지 라우터(Page Router) 방식에서는 링크가 뷰에 등장하면 해당 링크의 JS 번들이 자동으로 프리패칭되는 것으로 알고 있습니다.그런데 앱 라우터의 동작 구조를 설명한 도식(2번 사진)에서는, 사용자가 실제로 페이지 이동을 요청한 이후에 JS 번들과 RSC Payload를 받는 것으로 표현되어 있습니다.페이지 라이팅과 달라진 점이 RSC payload를 보내주는 것이라 하셨는데 도식에서는 언제 JS 번들을 보내주는지에 차이가 있어보여서 질문드립니다. 2. 앱라우터 방식에서 클라이언트 컴포넌트만 JS 번들에 포함된다는 설명과 관련해서, 다음 내용이 맞는지 확인 부탁드립니다.초기 접속 시 서버에서 서버컴포넌트를 RSC 페이로드로 해석하고 완성된 HTML을 보내준다.초기 접속 시 브라우저는 해당 페이지의 클라이언트 컴포넌트 JS Bundle만 받는다. 이후, JS Bundle과 HTML을 하이드레이션 한다.페이지 전환 시, 새로 이동하는 페이지의 JS Bundle과 함께 서버 컴포넌트에 대한 RSC Payload도 함께 받아 브라우저에서 조합된다.즉, 페이지 전환 전에 프리패칭이 없다. 이렇게 이해하는게 맞을까요?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
Immer 에서 filter, map 사용
지난강의에서 useImmer에서 활용한 update함수에서는 push, splice와 같은 현재의 객체를 변환시키는 api를 활용했었습니다.그래서 immer 가 적용된 상황에서는, 현재 객체를 변환시키는 것만이 답일것이라 생각해서,오히려 filter api를 써야 코드가 더 간단해지는 상황에서는 useState를 따로 분리해서 써야 고민하고 있었습니다. 그런데 이번 강의에서 useImmerReducer에서 활용하는 것을 보아하니, State가 아니라 Immer 이 적용된 케이스더라도, return으로 새로운 객체를 반환하거나, 직접 객체에 변화를 주거나 하는 방법이 둘다 적용이 되는것으로도 보이는것 같더라구요?case 'deleted':에서도draft.filter에 return 이 적용되면, immerReducer라도 잘 작동하고,return을 없애고, break로 나오게 하면, 변화가 아무래도 적용이 안되더라구요(당연하겠죠... 원래 객체에 변화를 준것이 아니니) 그래서 immer나 immerReducer를 활용한다는 것은 useState을 확장시키는 느낌인건가요? 직접객체에 변화를 주는것 뿐만아니라, useState에서 했던것처럼 새로운 객체를 만들어 return하는 것 '까지' 가능한건가요?만약 immer가 적용된 상황에서, 직접 객체를 변환하는 코드와, 새로운 객체를 만들어 return 하는 코드가 하나에 전부 적용되어 있다면 어떻게 작용하나요?다시 말해, draft.push로 '변경사항이 immer에 반영되고', 동시에return으로 draft.filter한 값을 보내면, 어떻게 작용하며, 어떤 로직이 적용되나요?감사합니다
-
미해결React Native with Expo: 제로초에게 제대로 배우기
새로운 모듈 설치시 모듈 없음.
expo-location 때부터 모듈을 설치를 해도 해당 모듈이 없다는 메시지가 뜹니다.eas build --platform android --profile development 명령어로 새로 빌드하면 되긴 하는데,모듈 하나 설치할 때마다 빌드하면 5분씩 넘게 걸리는데 다른 방법이 있을까요?아니면 제가 놓치고 있는게 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
seo 관련해서 궁금한게 있습니다.seo 최적화라는게 크롤링 봇이 서버에서 렌더링된 html을 크롤링하고 인덱싱하는걸로 알고 있습니다. 만약 서버 fetch 를 했지만 data 자체는 렌더링하지 않은 경우는 크롤링 봇이 어떻게 인식을 하는지 궁금합니다. 예를 들어 서버 fetch를 했지만 아래와 같이 서스펜스 역할하는 로직으로 인해 클라이언트 환경에서 hydrate 된 이후에 데이터가 렌더링된다면 서버에서 fetch는 이루어졌지만 렌더링된건 아니기 때문에 크롤링봇이 데이터를 인식하지 못하게 되는걸까요?? export function ConditionalClientWrapper({ children, fallback, }: ConditionalClientWrapperProps) { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return fallback ?? null; return children; } <ConditionalClientWrapper fallback={<Loading />}> //dataList에서 서버 fetch 가 이루어집니다. <dataList /> </ConditionalClientWrapper> SEO 최적화를 위한 조건이 데이터 렌더링인지 단순 서버 fetch 만하면 되는건지 궁금합니다. 추가로 리액트 쿼리의 prefetch를 사용하면 seo 최적화를 가질 수 있는건가요?? 감사합니다!
-
미해결React Native with Expo: 제로초에게 제대로 배우기
npm run android 실행시 오류가 발생합니다.
처음에 development build로 진행해도 위와 같은 오류가 발생해서, npx rimraf node_modules, npm i, npx rimraf android 순서대로 실행한 후에 다시 npm run android로 빌드하려고 하는데, 다음과 같은 오류가 발생합니다.C:\Users\swu\threads-clone>npm run android > threads-clone@1.0.0 android > expo run:android √ Created native directory √ Updated package.json | no changes √ Finished prebuild TypeError: Cannot read properties of undefined (reading 'android:enabled') TypeError: Cannot read properties of undefined (reading 'android:enabled') at C:\Users\swu\threads-clone\node_modules\@expo\config-plugins\src\android\Manifest.ts:219:20 at Array.filter (<anonymous>) at Object.getRunnableActivity (C:\Users\swu\threads-clone\node_modules\@expo\config-plugins\src\android\Manifest.ts:218:90) at getMainActivityAsync (C:\Users\swu\threads-clone\node_modules\@expo\cli\src\run\android\resolveLaunchProps.ts:36:49) at resolveLaunchPropsAsync (C:\Users\swu\threads-clone\node_modules\@expo\cli\src\run\android\resolveLaunchProps.ts:51:24) at resolveOptionsAsync (C:\Users\swu\threads-clone\node_modules\@expo\cli\src\run\android\resolveOptions.ts:51:9) at runAndroidAsync (C:\Users\swu\threads-clone\node_modules\@expo\cli\src\run\android\runAndroidAsync.ts:30:17)
-
해결됨한 입 크기로 잘라먹는 Next.js
빌드는 잘 되었고 pm2 start를 하는데 typeerror가 발생합니다.
배포를 준비하고 있는데 개발/로컬 환경에서는 문제가 없이 잘 되다가상용 환경에 배포를 하려고하니 에러가 발생하고 있습니다. 빌드는 에러 없이 잘 되었는데 pm2 start를 하니 [TypeError: Cannot read properties of undefined (reading 'filter') 타입에러가 갑자기 나타나버렸습니다. 우선 filter 사용하는 부분에 대한 예외처리들을 넣어주었는데 동일한 에러가 계속 발생하고 있습니다. 어떠한 경우에 이런 에러가 발생하는 것일까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
ios 개발
multi platform 개발하려면 맥은 그럼 필수로 있어야 하는 건가요?근데 그럼 프로젝트를 두 개 만들어야 할까요? 윈도우에 하나 만들고, 맥에 하나 만들고? 그럼 개발할 때 버전 컨트롤이나 이런 건 어떻게 하죠?
-
해결됨타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
auto import했을때에 Dispatch, SetStateAction
import type { Dispatch, SetStateAction } from "react"; 저는 강의와 다르게 이렇게 type이 붙어서 나오는데, 에러는 나지 않지만.. 궁금해서 질문 남깁니다무엇이 다른건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
업데이트 버전 수강
기존에 강의를 구매했었는데 업데이트 버전 수강하려면 재구매 해야 하는 거지요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
.
.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
ch4-5 관리자 계정 로그인, JWT토큰 관련
덕분에 무사히 다음 강의 듣고있는데요또 막혔습니다;;; MongoDB는 연결이 잘되는데요;;{ id : new ObjectId(''''')등등 터미널에 admin과 패스워드 등의 데이터카 안뜹니다;;;
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
ch4-4관리자 계정생성하기 문제 발생
아래와 같은 오류가 발생됩니다.... Error: Cannot find module 'bcrypt'Require stack:- /Users/sungwon/Desktop/Project/Web/company_website/backend/routes/user.js- /Users/sungwon/Desktop/Project/Web/company_website/backend/index.js at Module._resolveFilename (node:internal/modules/cjs/loader:1369:15) at defaultResolveImpl (node:internal/modules/cjs/loader:1025:19) at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1030:22) at Module._load (node:internal/modules/cjs/loader:1179:37) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Module.require (node:internal/modules/cjs/loader:1449:12) at require (node:internal/modules/helpers:135:16) at Object.<anonymous> (/Users/sungwon/Desktop/Project/Web/company_website/backend/routes/user.js:3:16) at Module._compile (node:internal/modules/cjs/loader:1692:14) { code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/sungwon/Desktop/Project/Web/company_website/backend/routes/user.js', '/Users/sungwon/Desktop/Project/Web/company_website/backend/index.js' ]}Node.js v24.4.0[nodemon] app crashed - waiting for file changes before starting... 아래는 index.js 코드입니다.require('dotenv').config(); const express = require('express'); const mongoose = require('mongoose'); const app = express(); const PORT =3000; const userRoutes = require("./routes/user"); app.use('/api/auth',userRoutes); app.get('/', (req, res) => { res.send('Hello World!'); }); mongoose.connect(process.env.MONGO_URI) .then(() => console.log('MongoDB와 연결이 되었습니다.')) .catch((error)=> console.log('MongoDB와 연결이 실패하였습니다:',error)); app.listen(PORT, () => { console.log("Server is running"); })models>User.js 코드입니다.const mongoose = require('mongoose'); const userSchema = new mongoose.Schema( { username:{ type:String, require: true, trim: true, minlength:2, maxlength:30, }, password:{ type:String, require:true, select: false, }, isLoggedIn:{ type:Boolean, default:false, }, isActive:{ type:Boolean, default:false, }, failedLoginAttempts:{ type:Number, default:0, }, lastLoginAttempts:{ type:Date, }, ipAddress:{ type:String, trim:true, }, createdAt:{ type:Date, default: Date.now, } }, { timestamps:true, } ); const User = mongoose.model('User', userSchema); module.exports = User; routes>user.js코드 입니다.const express = require('express'); const router = express.Router(); const bcrypt = require('bcrypt'); const User = require('../models/User'); router.post('/signup', async (req, res) => { try { const {username, password} = req.body; const existingUser=await User.findOne({username}); if(existingUser){ return res.status(400).json({message:'이미 존재하는 사용자 입니다.'}); } const hashedPassword = await bcrypt.hash(password,10); const user = new User({ username, password:hashedPassword, }) await user.save(); res.status(201).json({message:'회원가입이 완료되었습니다.'}); } catch(error){ res.status(500).json({message:'서버 오류가 발생되었습니다.'}); console.log(error); } }); module.exports = router;
-
미해결React Native with Expo: 제로초에게 제대로 배우기
FirebaseApp 초기화 문제가 발생합니다.
[Error: Make sure to complete the guide at https://docs.expo.dev/push-notifications/fcm-credentials/ : Default FirebaseApp is not initialized in this process com.cozyu.threadsclone. Make sure to call FirebaseApp.initializeApp(Context) first.] 처음에 package name을 잘못 입력한 상태에서 등록까지 했었다가 지우고 com.cozyu.threadsclone로 재등록했는데도 계속 같은 오류가 발생합니다... google-services.json의 package_name도 이렇게 되어있고, firebase - 일반에서의 패키지 이름도 동일하게 되어있고,expo dev - credentials에서도 이렇게 되어 있는데 안되네요...폴더에서 json 키 두 개 제거 후에 다시 다운 받았아서 app.json과 동일한 위치에 넣었고, eas credentials부터 다시 했는데 안됩니다.혹시 다른 해결 방법이 있을까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
게시글 post 버튼을 클릭한 후에 화면 이동이 발생하지 않습니다
안녕하세요. 게시글 post 버튼을 클릭한 후에 화면 이동이 발생하지 않습니다... 혹시 제가 코드 작성하면서 누락한 부분이 있는 건가 싶어서 어떤 코드에서 그 부분을 다루고 있는지 잘 모르겠어서 질문드립니다 ㅜㅜ modal.tsx의 handlePost는 동일하게 작성되어 있습니다.post 버튼을 누른뒤에 로그는 아래와 같이 정상적으로 출력되고, cancel 버튼을 눌러서 뒤로 가서 확인해보면 게시글은 잘 작성되어있습니다.. 화면이 자동으로 안넘어가는데 어디를 확인해봐야하나요?? LOG posts [{"content": "dd", "id": "1754381715692", "imageUrls": ["file:///data/user/0/com.cozyu.threadsclone/cache/ImagePicker/b22031f0-a977-4501-86c9-2cbc9cf73ae2.jpeg"], "userId": "cozyu"}] LOG post result [{"content": "dd", "id": "1754381715692", "imageUrls": ["file:///data/user/0/com.cozyu.threadsclone/cache/ImagePicker/b22031f0-a977-4501-86c9-2cbc9cf73ae2.jpeg"], "userId": "cozyu"}]
-
해결됨한 입 크기로 잘라먹는 Next.js
페이지 라우터의 단점을 보완할 방법
안녕하세요. 강의에서 설명해주신 페이지 라우터의 단점 중"불필요한 컴포넌트들도 JS 번들에 포함된다"는 내용에 대해 질문드리고 싶습니다.제가 이해한 바로는, 초기 HTML은 사전 렌더링 시 모든 컴포넌트를 포함하여 만들어지되,실제로 브라우저에서 하이드레이션(클라이언트 측 React 활성화)이 일어나는 컴포넌트는상호작용이 필요한 컴포넌트나 CSR 방식으로 처리된 컴포넌트에 한정되어이들만 JS 번들에 포함되는 것으로 생각했습니다.즉, 단순히 정적인 컴포넌트는 HTML로만 렌더링되고,JS 번들에는 포함되지 않거나 최소화된다고 이해했는데,혹시 이 부분에서 제가 잘못 이해하고 있는 걸까요?초기 렌더링 시 어떤 요소들이 HTML로 렌더링되고,어떤 컴포넌트들이 JS 번들에 포함되는지 기준을 설명해주시면 감사하겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
fetchUser 요청시 userPoint.amount
충전 금액이 balance에 누적되는 것 같은데, userPoint에는 따로 저장되는 것이 아닌가요?아니라면 충전 된 유저의 포인트는 어떻게 가져와야 될까요?그리고, 사진처럼 fetchUser 하면 userPoint.amount 가 non-nullable field 라며 userPoint의 amount를 못가져오는데 혹시 오류일까요?