묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
선생님 잘듣고있습니다.
여기 이 강의를 다듣고 회사 및 기업 홈페이지리를만들고,1. FIREBASE 강의도 들어서 로그인 기능 더 추가하면 되는거죠?2. 결제기능도 넣고 싶은데 강의 만들 계획이 있으신가요? 있다면 언제쯤일까요? 3. 카카오지도 API 끌고와서 호갱노노나 부동산지인 같은 홈페이지도 만들어 보고싶습니다. 한국부동산원 API 이런 API를 들고와서 설정하는 방법도 알고싶어요!아마 1,2,3이 합친다면 웬만한건 다 만들 수 있지않을까요?? 감사합니다
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
개발 모드에서 캐시 로깅 사용방법
"4.2) 데이터 캐시" 강의 진행시npm run dev 로 진행시 { cache: "force-cache" } 설정하여도 캐싱이 안되는거 같은데요 npm run buildnpm run start로 진행시에는 캐싱이 동작하고있는걸로 보이나 로깅이 안되는것 같습니다. 강의 영상처럼 캐싱 동작 상태를 로깅을 하려면 어떤 옵션값을 설정 해야하나요 ?제가 놓친거 같아서 돌려보거나 검색을 해봤는데 못찾아서 질문드립니다. 감사합니다.
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
데이터 페칭 로직의 분리 방식이 궁금합니다.
안녕하세요, 강의 잘 듣고 있습니다. 하나의 페이지에서 두 개 이상의 데이터를 불러와야 할 때, 리액트에서 그래왔듯이 자연스럽게 데이터를 페칭하는 api 로직을 services/api 폴더로 분리할 것이라고 생각했는데요, 강의에서는 데이터에 따라 데이터를 페칭하여 렌더링하는 전체 로직을 각각의 컴포넌트로 분리하는 것을 보고 질문 드리게 되었습니다. 데이터를 기준으로 관심사를 분리할지, 기능을 중심으로 분리할지는 선호의 영역인가요? 아니면 어떤 사전 렌더링의 특수성으로 데이터 페칭 로직은 따로 분할하지 않는 것인가요? 그러면서 동시에 각각의 컴포넌트(AllBooks, RecoBooks)를 별도의 components 폴더로 분리하지 않는 이유도 궁금합니다! 곧 넥스트를 사용한 프로젝트에 참여하게 되는데 폴더 구조를 어떻게 가져가야 할지 고민이 많습니다 ㅠㅠ 팀원들이 모두 넥스트는 처음이라 아직 이렇다 할 기준이 없어서요.정답이 있는 문제는 아니겠지만 조언 부탁드립니다!!
-
미해결Next + React Query로 SNS 서비스 만들기
인터셉팅 라우팅 폴더 위치 경로 지정 관련 질문
우선 인터셉팅 라우팅을 버튼, 링크 등을 통해 이동 시 인터셉트된 page를 렌더링하고 새로고침이나 주소창을 통해 이동했을 때 정상(?)적인 page를 렌더링하는 것으로 이해했습니다. 인터셉팅 라우팅 폴더를 만들어야 할 위치가 궁금해서 /test1/test2 에서 Link태그를 통해 /test1 으로 이동할 때 새로고침 시 표시 되는 test1과 intercepted test1을 구분하는 코드를 작성했습니다 "(.)test1" 폴더 위치를 바꿔보면서 어떻게 동작하는 지 확인해보는 과정에서 이해가 되지 않는 부분이 있어서 질문드립니다. 이 폴더구조로 해야 작동하고, 이 폴더 구조는 작동이 안되는게 이해가 안됩니다.뭔가 (.), (..), (..)(..) 이런식으로 경로 지정이 가능하면 인터셉팅 라우팅 폴더는 어디 있든 상관없어도 될 것 같았는데... 아래 폴더구조가 작동을 안되니 디게 혼란스럽네요 ㅠㅠ
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
오픈 그래프 적용이 안되네요..
오픈 그래프가 아무것도 적용이 되지 않는데 문제를 못 찾겠습니다..index.html 에서<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>감정일기장</title> <meta property="og:title" content="감정 일기장" /> <meta property="og:description" content="나만의 작은 감정 일기장" /> <meta property="og:image" content="/thumbnail.png" /> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> 으로 작성을 하고 배포를 했는데 오픈 그래프 3가지 중 아무것도 적용이 안되네요..카톡말고도 티 스토리 블로그 글쓰기에서도 적용이 안 되는걸로 보아 캐시 문제는 아닌 것 같은데.. 오타가 있는지도 다른 분들 코드 보면서 비교해봤고 이미지도 public 폴더에 잘 있습니다..뭐가 문제일까요?..배포링크: https://emotion-diary-dfgr3t44x-watnus-projects.vercel.app/배포링크에서 썸네일 확인:https://emotion-diary-dfgr3t44x-watnus-projects.vercel.app/thumbnail.png
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
9.2 useReducer 체크박스 관련질문입니다.
문제상황: 수정을 위해 체크박스를 체크해도 아무 변화도 생기지 않는 상황reducer 내용 const reducer = (state, action) => { switch(action.type){ case 'CREATE': return [action.data,...state]; case 'UPDATE': return state.map((item) => { console.log(action, item.id, item.isDone) return item.id === action.targetId ? {...item, isDone: !item.isDone} : item }) case 'DELETE': return state.filter((item) => item.targetId !== action.targetId) default: state } } const onUpdate = (targetId) => { dispatch({ type:"UPDATE", targetId }) } 예상 문제: console.log(action.targetId, item.id, item.isDone)을 해본결과action.targetId가 내가 원하는 id값만 가져오는것이 아닌 저렇게 객체 전체를 가져오기 때문에 action.targetId와 item.id가 일치하지 않아 체크가 되지않는 현상인것 같습니다. 어디를 보면 좋을지 및 무엇을 수정해야하는지 알려주시면 감사하겠습니다.
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
공통 인풋 컴포넌트 구현하기에서 variant가 계속 빨간색 오류뜨는데요;
import React from 'react'; import { colors } from "@/constants"; import {StyleSheet, TextInput, View,Text, TextInputProps} from 'react-native'; interface InputFieldProps extends TextInputProps{ label?:string; variant?: "filled" | "standard" | "outlined"; } function InputField({label, variant = "filled", ...props }: InputFieldProps) { return ( <View> {label && <Text style={styles.label}>{label}</Text>} <View style={[styles.container, styles[variant]]}> <TextInput style={styles.input} {...props} /> </View> </View> ); } const styles = StyleSheet.create({ container:{ height:44, borderRadius:8, paddingHorizontal:10, justifyContent:"center", alignItems:"center", }, label:{ fontSize:12, color: colors.GRAY_700, marginBottom:5, }, filled:{ backgroundColor: colors.GRAY_100, }, standard: {}, outline: {}, input: { fontSize:16, padding: 0, flex:1, }, }); export default InputField; 도와주세요,,선생님 ㅠㅠ
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
supabse 연결 불가
npx prisma db push명령어 실행시, 아래와 같은 오류가 발생합니다. Error: P1001: Can't reach database server at aws-0-ap-northeast-2.pooler.supabase.com:`5432`.env 파일 루트 경로에 생성DATABASE_URL, DIRECT_URL 오타 없이 알맞게 입력위의 두 조건 모두 만족하고 있는데,왜 이런 오류가 발생하는 걸까요? 추가로,가이드에 따라 supabase에서 생성한 db가현재 활성화 상태이거나 running상태인지 어떻게 알 수 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
만약 비동기 작업이 완료되었을 때는 넘겨주는 콜백 함수가 없다면 어떻게 되나요?
제가 이해한 내용이 맞는지 궁금하여 질문드립니다! 콜백 함수 없이 비동기 작업을 Web APIs에게 넘겨준다면 비동기 작업이 처리되고 넘겨줄 콜백 함수가 없으므로 아무일도 일어나지 않는다.개발자가 자바스크립트에서 비동기적으로 어떠한 코드를 처리하기 위한 목적으로 비동기 코드와 콜백 함수를 같이 작성한다. 라고 생각해도 될까요?
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
공통버튼 컴포넌트구현하기에서,, srnfc가 안떠요;;
어떻게 해야할까요 ㅠㅠ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Hooks 만들때는 첫 번째 파일명을 대문자로 안해도되나요?
안녕하세요! 질문있습니다.(강의 구간: 10:43초)강사님께서 평소 컴포넌트 파일들을 만들때파일명 첫 번째에는 항상 대문자로 적으셨는데hooks를 만들때는 첫 번째 글자를 소문자로 적어주셨는데hooks만들때는 첫 번째 글자를 소문자로 적는건가요?
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
server 쪽에서 should be a number of seconds or string representing a timespan 에러가 발생합니다
Window, node 22 버전 사용중입니다. 4-5 로그인 연동하기에서 회원가입까진 연동이 되는데 로그인 api 요청시 500에러가 발생합니다. [Nest] 22548 - 2025. 02. 15. 오후 10:00:50 ERROR [ExceptionsHandler] "expiresIn" should be a number of seconds or string representing a timespan Error: "expiresIn" should be a number of seconds or string representing a timespan at D:\project\community\server\node_modules\jsonwebtoken\sign.js:56:15 at Array.forEach (<anonymous>) at validate (D:\project\community\server\node_modules\jsonwebtoken\sign.js:47:6) at validateOptions (D:\project\community\server\node_modules\jsonwebtoken\sign.js:62:10) at module.exports [as sign] (D:\project\community\server\node_modules\jsonwebtoken\sign.js:171:5) at D:\project\community\server\node_modules\@nestjs\jwt\dist\jwt.service.js:56:17 [Nest] 22548 - 2025. 02. 15. 오후 10:00:50 LOG [HTTP] [POST] /auth/signin (500) (okhttp/4.12.0) //axios.ts import axios from "axios"; import {Platform} from "react-native"; const baseUrls = { ios: 'http://localhost:3030', android: 'http://10.0.2.2:3030' } const axiosInstance = axios.create({ baseURL: baseUrls[Platform.OS] ?? 'http://localhost:3030' }); export default axiosInstance //auth.ts import {getSecureStore} from "@/utils/secureStore"; import axios from "@/api/axios"; import {Profile} from "@/types"; interface RequestUser { email: string; password: string } async function postSignup(body: RequestUser): Promise<void> { const {data} = await axios.post('/auth/signup', body); return data; } async function postLogin(body: RequestUser): Promise<{ accessToken: string }> { const {data} = await axios.post('/auth/signin', body); return data; } //useAuth.ts function useLogin() { return useMutation({ mutationFn: postLogin, onSuccess: async ({accessToken}) => { setHeader('Authorization', accessToken) await saveSecureStore('accessToken', accessToken); queryClient.fetchQuery({queryKey: ['auth', 'getMe']}); router.replace('/') }, onError: () => { }, }) }postLogin 에서 엔드포인트만 /auth/signup로 바꾸면 회원가입은 정상적으로 요청이 됩니다.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
npx tailwindcss init 가 안되네요.
강의대로 npx tailwindcss init 을 하게되면 'tailwind'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 라고 뜨네요. 어떻게 해결 방법이 없을까요?vscode 재시작해봐도 똑같네요.구글링 해보니, 환경변수에 nodejs 경로를 path에 추가하라고 하는데, 이미 추가되어있구요.아, node버전이 기존에 18버전이 설치되어 있어서 그건 새로 설치하지는 않았습니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
npm install --save @tinymce/tinymce-react 오류 입니다.
리액트 버젼이 19.0 이상이라서 안된다고하는데 리액트를 다운그레이드해야하나요??...리액트를 다운그래이드 안하고 사용하는 방법은 없을까요?
-
미해결
React 팀 프로젝트 (로그인 검증 기능)
Supabase의 DB로 로그인 검증 기능을 만들려고 해요 그런데 로그인 검증을 하기 위해서 예외처리를 테스트 하는데 error 400 (Bad request) 가 발생 합니다. 데이터 값이 있으면 로그인은 됩니다. 하지만 존재 하지 않는 값의 예외처리를 할려 하는데 무조건 error 400 (Bad request) 가 나타나내요 이 문제를 해결해 줄 수 있는분 답변 부탁 드립니다. const handleLogin = async (e) => { e.preventDefault(); if (!email || !password) { alert('이메일과 비밀번호를 입력해주세요.'); return; } // 이메일 형식 확인 (정규식 사용) const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(email)) { alert('올바른 이메일 형식을 입력해주세요.'); return; } if (password.length < 6) { alert('비밀번호는 최소 6자 이상이어야 합니다.'); return; } try { const { data, error } = await supabase.auth.signInWithPassword({ email, password, }); if (error) { alert('이메일 또는 비밀번호가 잘못되었습니다.'); return; } if (data?.user) { alert('로그인이 완료되었습니다.'); navigate('/'); } else { alert('회원 정보가 존재하지 않습니다.'); } } catch (err) { console.error('오류 발생:', err); alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.'); } };
-
미해결Next + React Query로 SNS 서비스 만들기
마이크로 프론트엔드는 레포가 여러개일까요?
안녕하세요! 강의 잘 듣고 있습니다!강의 도중 마이크로 프론트엔드에 대해 여쭤볼게 있어 질문 드립니다!다름이아니라, 3개의 Next 앱을 같은 도메인 아래 뒤에 주소들로만 구분해서 하나로 묶는 마이크로 프론트엔드는 그렇다면 결국 레포지토리가 3개인가요??
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
outlet을 이용한 서브메뉴 강의에서 질문있습니다.
outlet을 이용한 서브메뉴에서 질문있습니다.main <-이 부분이 부모페이지고list add <-서브페이지면list page component<-자손페이지 인가요?강의에서 IndexPage.js에서 <Outlet/> 부분에 ListPage.js 코드가 들어가 있는 형태인거 같은데요.근데 제가 아래처럼 작동해봤을 떄 Todo List Page Component 이 부분이 안나오는데요.코드 어디가 문제인가요? 코드 복붙했는데요.아래는 IndexPage.js 코드입니다.import { Outlet } from "react-router-dom";import BasicLayout from "../../layouts/BasicLayout";const IndexPage = () => {return (<BasicLayout><div className="w-full flex m-2 p-2 "><div className="text-xl m-1 p-2 w-20 font-extrabold text-center underline">LIST</div> <div className="text-xl m-1 p-2 w-20 font-extrabold text-center underline">ADD</div></div><div className="flex flex-wrap w-full"><Outlet/></div></BasicLayout>);}export default IndexPage;아래는 ListPage.js 코드입니다.import React from 'react'export default function ListPage() {return (<div className="p-4 w-full bg-orange-200 "><div className="text-3xl font-extrabold">Todo List Page Component</div></div>)}
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
자꾸만 이런식으로 에러가나는데 이유점 알려주세요 ㅠㅠㅠ
살려주세요 선생님..ㅠ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
usereducer 투두리스트 업그레이드 질문
usereducer 강의를 들으면서 코드를 바꿨습니다import './App.css' import {useState, useRef,useReducer} from "react"; import Header from './components/Header' import Editor from './components/Editor' import List from './components/List' const mockData = [ { id : 0, isDone : false, content : "react study", date : new Date().getTime(), }, { id : 1, isDone : false, content : "lol", date : new Date().getTime(), }, { id : 2, isDone : false, content : "fifa", date : new Date().getTime(), }, ]; function reducer (state,action) { switch(action.type){ case 'CREATE' : return [action.data,...state]; case 'UPDATE' : return state.map((item)=> item.id === action.targetId ?{...item, isDone : !item.isDone} : item ); case 'DELETE' : return state.filter((item)=> item.id !== action.targetId); default: return state; } } function App() { const [todos, dispatch] = useReducer(reducer,mockData); const idRef = useRef(3); const onCreate = (content) => { dispatch({ type : "CREATE", data : { id : useRef.current++, isDone : false, content : content, date : new Date().getTime(), } }) } const onUpdate = (targetId)=> { dispatch({ type : "UPDATE", targetId : targetId, }); }; const onDelete = (targetId)=> { dispatch({ type : "DELETE", targetId : targetId, }); }; return ( <div className="App"> <Header/> <Editor onCreate = {onCreate}/> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete}/> </div> ) } export default App; 문제는 이렇게 바꾼 후에 초기 mock data는 check box와 삭제가 문제가 없지만새롭게 추가한 리스트에 대해서는 check box와 삭제가 제대로 실행되지 않습니다.강의를 몇번 돌려봐도 app.jsx를 제외한 부분을 고치는 과정은 없었고 usereducer로 바꾸기 직전으로 넘어가서 section 08에서는 새롭게 추가된 리스트에 대하여 check box와 삭제가 문제없는걸 보면 usereducer를 사용하면서 문제가 생긴 것 같은데 뭐가 문제인지 잘 모르겠습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
23-05의 hoc적용시의 렌더링에 대한 질문드립니다.
강의를 너무 잘 듣고 있습니다. 쉽게 설명해주셔서 들으면 이해가 잘되지만, 혼자 코드할때에는 실수나 어림 짐작으로 적용했던 부분이 잘 작동되지 않는데, 이런 저런 시도로도 잘못한 부분을 이해하기 어려워 질문드립니다. 23강의 질문입니다. high-order-function을 진행하면서 hoc로 구분하여 설정하는 경우 렌더링에 대해 질문을 남깁니다. 특히 쿼리에 이름을 주어 작동하는 경우에 대해 질문드립니다. 23-3에서 login-success를 확인하는 쿼리를 제가 짰는데 쿼리에 이름을 주었습니다. 23-3의 login-success화면에서는 오류가 없어서, 해당 코드를 복붙하여 hoc부분에도 적용하였는데 초기 렌더링시에 데이터를 받아오지 못하는 현상이 발생하였습니다. 새로 고침을 해야 데이터가 받아와져서 나타납니다.순서를 붙여 1~4번까지 차례로 진행하였습니다. 23-3 코드의 정상 렌더링 (쿼리 네임을 주어도 정상 렌더링) loginCheck와 mypage로 구분되지 않는 코드에서 graphql에 query를 보내면서 이름을 주었습니다. (hoc가 아닌 전체 로직이 한꺼번에 구성되는 경우 쿼리에 이름을 주는 경우에도 --->정상 렌더링 되었어요. )해당 부분의 쿼리는 아래와 같으며 JWT로서 데이터를 받아와 사용자명이 렌더링 되었습니다.const FETCH_USER_LOGGED_IN = gql` query fetchUserLoggedIn{ fetchUserLoggedIn { email name } } `; 23-5부분에 hoc를 이용하여 loginCheck를 분리한 경우(이 부분은 1번의 (23-3의 코드를 복붙하여 mypage와 logincheck로 분리하였습니다. 오류가 없어서 굳이 수정하지 않아도될것 같아 그냥 두었던 부분입니다) 그런데 사용자명을 받아오지 못한채로 화면이 렌더링이 되었습니다. (graphql이 실패한 것으론 나타납니다. 네트워크를 보면 쿼리를 보내면서 토큰을 첨부하지 못해서 bearer뒷 부분이 없었습니다.) 다만 새로고침을 하면 정상 렌더링이 됩니다. MyPage 코드는 아래와 같습니다. import { gql, useQuery } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; import { loginCheck } from "../../../src/components/commons/hocs/loginCheck"; const FETCH_USER_LOGGED_IN = gql` query fetchUserLoggedIn{ fetchUserLoggedIn { email name } } `; function MyPage() { const { data } = useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN); return <>{data?.fetchUserLoggedIn.name}님, 환영합니다.</>; } export default loginCheck(MyPage); loginCheck는 아래와 같습니다.import { useEffect } from "react"; import { useRouter } from "next/router"; export const loginCheck = (컴포넌트: any) => (프롭스: any) => { const router = useRouter(); useEffect(() => { if (localStorage.getItem("accessToken") === null) { alert("로그인 후 이용가능합니다"); void router.push("/section23/23-05-login-check-hoc"); } }, []); //if return <컴포넌트 {...프롭스} />; }; hoc를 이용하여 loginCheck를 분리한 경우에 작동원리에 대해 여러가지 검색을 하고, 그 결과를 참조하여 loginCheck에서 accessToken을 받아오고, 만약에 토큰이 없으면 myPage를 렌더링하지 않도록 설정했더니 쿼리네임이 있는 경우에도 정상렌더링이 되었습니다.import { useEffect } from "react"; import { useRouter } from "next/router"; export const loginCheck = (컴포넌트: any) => (프롭스: any) => { const router = useRouter(); const accessToken = localStorage.getItem("accessToken"); useEffect(() => { if (localStorage.getItem("accessToken") === null) { alert("로그인 후 이용가능합니다"); void router.push("/section23/23-05-login-check-hoc"); } }, []); if(accessToken == null ) return null; return <컴포넌트 {...프롭스} />; }; 그리고 더불어, 원두님이 하신것처럼 이름이 없는 쿼리로 설정하였을 때는 loginCheck에 토큰 관련 설정을 넣지 않아도 페이지는 정상 렌더링 되었습니다. (이 부분은 수업에서 진행하신 것입니다)const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } `; 인공지능 모델들은 쿼리에 이름이 있는 경우는 cash에 내용을 참조하여 Header에 토큰이 없는 상태의 설정대로 query를 보내고 받아온다고 설명합니다. 그리고 원두님처럼 쿼리명을 주지 않으면 무명쿼리로서 새로 토큰을 붙이고 쿼리를 보내는 과정을 수행한다고 합니다. 그러나 제가 항상 토큰을 지우고 새로 고침한후에 로그인 부분을 확인하므로 기존의 쿼리를 받은 기록이 캐시에 남아서 영향을 미칠것 같지는 않습니다. 그리고, hoc가 아닌 기존의 23-3은 잘 작동했으니, 이 부분의 통신에 대해서 어떤 부분인가 제가 잘 이해하지 못하는 부분이 있는 것 같습니다. 이후 hoc함수를 사용할때에도 유의해야 할것 같아 왜 이러한 현상이 나타나는 것인지에 대해 조언해 주시면 추가적으로 검색을 통해 이해고자 합니다.
