묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
PostCreateView 클래스의 get_success_url
강사님 PostCreateView 클래스에 get_success_url 함수로 경로 따로 설정해주지 않아도 디테일뷰로 넘어가는건 왜일까요?
-
미해결처음 만난 리액트(React)
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?
Component 만들때 괄호로 묶는 어떤 의미가 있을까요?괄호를 따로 안써도 되는것 같은데, 어떤 의미인지가 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
프로필 페이지 세로고침 에러
프로필페이지 에서 세로고침을 할때 로그인이 풀리면서 로그인 정보가 사라지면서 에러가 발생하는 현상이 있었습니다const Profile = () => { const { me } = useSelector((state) => state.user); const dispatch = useDispatch(); useEffect(() => { if (!(me && me.id)) { Router.push("/"); } }, [me && me.id]); useEffect(() => { dispatch(loadFollowers()); dispatch(loadFollowings()); }, []); return ( <> <Head> <title>프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm /> <FollowList header="팔로잉 목록" data={me?.Followings} /> <FollowList header="팔로워 목록" data={me?.Followers} /> </AppLayout> </> ); };그런데 이해가 안되는점은 Router.push로 me에 대한 정보가 없으면 루트 페이지로 넘어가게 만들어두었는데도 로그인 정보가 없다고 에러가 발생하고 그래서 로그인 정보를 가져오는 loadMyInfo를 사용해도 계속 에러가 발생한다는 점입니다.이부분이 일단 첫번째로 이해가 안되는 점이고아래 질문자님들이 질문하신 내용으로 me?.Foolowings로 일단 해결하고 넘어갔습니다그런데 또 프로필 페이지에서 세로고침을 해보니까 이번에도 me에 대한 정보가 없다고 나옵니다me에 대한 정보가 없어서 발생하는 에러인데 팔로워에 대한 정보를 불러오는 리듀서에서 에러가 발생합니다 하지만 사진에 state 정보를 보시면 me에 정보가 들어있습니다. 아마 me 정보를 갱신하기 이전에 발생한 action에 대한 에러인거 같은데 어떻게 해결하면 좋을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
ReferenceError: boardId is not defined
안녕하세요 선생님! 전에 Bad request 400 문제로 글 올렸던 사람입니다답변 주신 부분은 잘 확인 했습니다.그런데 variables는 잘 작성했구 연결도 했습니다. 그런데 useEffect로 boardId가 유효하면 실행, 아니면 loading이라는 문구를 내보내게 작성한 후 확인을 해보니 아래와 같은 문제가 있었습니다console.log(router.query.boardId);에서 undefined가 떳길래useRouter가 작성됐는지 import했는지랑 확인했고, 문제 없었습니다. 또, ReferenceError: boardId is not defined 메시지가 떳습니다 . . ] 그래서 다른 방법으로 해결을 해보고자console.log(router.query.boardId);가 담긴 index에서 import를 선언하는 부분 최상위에 "use client"를 작성하고, import { useRouter } from 'next/router' 를 'next/navigation'으로 바꿨더니아래와 같이 오류가 확인 됐습니다.. .아래는 문제가 있는 컴포넌트입니다(useEffect 지움, next/router로 바꿈)"use client" import { useRouter } from "next/router"; import { gql, useQuery } from "@apollo/client"; import { Avatar, AvatarWrapper, Body, BottomWrapper, Button, CardWrapper, Contents, CreatedAt, Header, Info, Title, Wrapper, Writer } from "../../../styles/boardnewpage"; export const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { _id writer title contents createdAt } } `; export default function BoardDetailPage() { const router = useRouter(); console.log(router.query.boardId); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, }); if (!data) { // boardId가 없는 경우에 대한 처리 (예: 로딩 스피너 표시 등) return <div>Loading...</div>; } return ( <Wrapper> <CardWrapper> <Header> <AvatarWrapper> <Avatar src="/images/ic_profile.png" /> <Info> <Writer>{data?.fetchBoard?.writer}</Writer> <CreatedAt> {data?.fetchBoard?.createdAt} </CreatedAt> </Info> </AvatarWrapper> </Header> <Body> <Title>{data?.fetchBoard?.title}</Title> <Contents>{data?.fetchBoard?.contents}</Contents> </Body> </CardWrapper> <BottomWrapper> <Button>목록으로</Button> <Button>수정하기</Button> <Button>삭제하기</Button> </BottomWrapper> </Wrapper> ); } 아래는 위 컴포넌트를 실행하고 나서 뜨는 화면 입니다if문을 지우고 나면 저번에 올렸던 질문 글 처럼 화면은 넘어가는데 varibales 데이터들만 안뜹니다...! + 로딩 뜬 화면의 개발자도구 화면 입니다!! 확인해주시고 답변 주시면 감사하겠습니다.!!!😂🥹
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
혹시나 18분에 나만의 페이지 합칠때 안뜨시는 분들
저의 경우 '나만의 페이지'라고 하지 않고, my_page(소문자)로 해서 실행했는데, 안되더라구요.... 계속 왜 안되지 해메고 있었는데 my_page를 My_page(대문자)로 하니까 실행되는걸 확인했습니다. 혹시나 앞글자를 소문자로 하신분들은 대문자로 바꿔주시면 나올거 같아요~여기서 소문자로 import했을경우엔 왜 나오지 않을까요? react의 규칙인가요?
-
미해결처음 만난 리액트(React)
chapter 05. 댓글 컴포넌트 만들기 오류 질문
댓글 컴포넌트 만들기를 하는데 왜 이렇게 오류가 생기는 건지 잘 모르겠습니다ㅜㅜ..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
auth 미들웨어 관련 질문
const jwt = require("jsonwebtoken"); const User = require("../models/User"); let auth = async (req, res, next) => { // 토큰을 request headers에서 가져오기 const authHeader = req.headers["authorization"]; // Bearer ooerkogkeorkgoek.erogkoerkog.eorgkoerkgoerkgokg const token = authHeader && authHeader.split(" ")[1]; if (token === null) return res.sendStatus(401); try { // 토큰이 유효한 토큰인지 확인 const decode = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findOne({ "_id": decode.userId }); if (!user) { return res.status(400).send("없는 유저입니다."); } req.user = user; next(); } catch (error) { next(error); } }; module.exports = auth;기존에 "_id"로 되어있을 때, C:\Users\zink8060\Desktop\fullstack-app\back\node_modules\express\lib\router\route.js:211 throw new Error(msg); ^Error: Route.get() requires a callback function but got a [object Object] at Route.<computed> [as get] (C:\Users\zink8060\Desktop\fullstack-app\back\node_modules\express\lib\router\route.js:211:15) at proto.<computed> [as get] (C:\Users\zink8060\Desktop\fullstack-app\back\node_modules\express\lib\router\index.js:521:19) at Object.<anonymous> (C:\Users\zink8060\Desktop\fullstack-app\back\src\routes\users.js:7:8) at Module._compile (node:internal/modules/cjs/loader:1246:14) at Module._extensions..js (node:internal/modules/cjs/loader:1300:10) at Module.load (node:internal/modules/cjs/loader:1103:32) at Module._load (node:internal/modules/cjs/loader:942:12) at Module.require (node:internal/modules/cjs/loader:1127:19) at require (node:internal/modules/helpers:112:18) at Object.<anonymous> (C:\Users\zink8060\Desktop\fullstack-app\back\src\index.js:33:19)해당 오류가 있었는데,해당 부분을 _id로 바꿨더니 정상적으로 서버가 동작합니다.const jwt = require("jsonwebtoken"); const User = require("../models/User"); let auth = async (req, res, next) => { // 토큰을 request headers에서 가져오기 const authHeader = req.headers["authorization"]; // Bearer ooerkogkeorkgoek.erogkoerkog.eorgkoerkgoerkgokg const token = authHeader && authHeader.split(" ")[1]; if (token === null) return res.sendStatus(401); try { // 토큰이 유효한 토큰인지 확인 const decode = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findOne({ _id: decode.userId }); if (!user) { return res.status(400).send("없는 유저입니다."); } req.user = user; next(); } catch (error) { next(error); } }; module.exports = auth;하지만 강사님의 코드에는 "_id"로 되어있는데, 버전문제일까요? 아니면 다른 문제가 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
배포관련
프로젝트를 파이어베이스로 배포하려 yarn build 했는데 이런 오류가 뜨는데 도저히 어떤 오류인지 몰라서 글 남깁니다.. edit 페이지에서는 오류가 없는데 어떤 오류일까요.....
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
이미지 업로드시
리액트에서는 이미지 업로드하려고 할때 이미지를 미리보기로 가능한걸로 알고있는데 템플릿엔진 hbs에서도 이미지 파일 선택해서 이미지를 미리 볼수있도록 할수있나요?
-
미해결생활코딩 - React
19.6 create 구현 : contents 변경 강의에서 create가 안됩니다.
create에 title, desc 값을 입력하고 제출 버튼을 클릭하면 개발자도구에 react developement tool에서는 contents에 4번째 값이 추가된게 반영이 되는데 화면상으로는 추가가 안됩니다...제출시 바로 화면에 추가가 되지않고 TOC.js 코드를 조금이라도 변경한뒤 다시 저장하면 그제서야 추가가됩니다.혹시 이유를 알 수 있을까요>
-
미해결처음 만난 리액트(React)
빌드 후 serve가 안됩니다!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 유사한 질문이 있어서 권한 설정도 확인해봤는데 문제없었습니다.문제가 뭘까요?참고로 저는 패키지 매니저를 npm대신에 yarn을 사용했습니다!yarn global add serve 까지 해둔 상태입니다!
-
미해결만들면서 배우는 리액트 : 기초
html 코드 오류
안녕하세요 강의 초반부에script 태그 3개를 추가했는데도 catItem내에서 html 코드를 쓰면 오류가 뜨네요이유가 뭘까요 ㅠㅠUncaught SyntaxError: Inline Babel script: Unexpected token (5:6) (at babel.min.js:7:10099) 3 | 4 | const catItem = { > 5 | < li > | ^ 6 | < img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react" /> 7 | </li > 8 | }<body> 아래는 제가 작성한 코드입니다. 주석 부분은 지웠습니다. <body> <div id="app"></div> <!-- <h1>1번째 고양이 가라사대</h1> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> console.log("야옹"); const catItem = { <li> < img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react" /> </li> } const 여기다가그려 = document.querySelector("#app"); ReactDOM.createRoot(여기다가그려).render(catItem); </script> </body>
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Bad request 400 문제
안녕하세요! 섹션27 포트폴리오 제작에 문제가 있어서 질문 올립니다.위 사진은 등록하기를 누르고 나면 나온 상세페이지 인데요, 다 하고나서 검토 한 뒤에도 varibales한 createBoardInput들만 확인 되지 않습니다..오타도 없고(혹시몰라서 선생님이 작성하신 코드(gql, try~catch부분)를 복사붙여넣기도 해보았습니다), package.json도 확인했고, app.js의 uri에도 문제가 없는데 어떻게 된걸까요.ㅠㅠ아래는 추가 오류상세메시지 입니다확인해주시고 답변해주시면 감사하겠습니다!! + 제 폴더를 복붙해서, 그 복붙한 폴더 안에포트폴리오 자료인 선생님 폴더의 pages-boards 내의 [boardId]와 new의 index.js 를 복사해 붙여넣어봤는데(나머지 파일들은 냅둠)같은 에러가 뜹니다. 그래서 ui와 container의 문제는 아닌 것 같아요..개발자도구 Sources탭에서 cteathttpLink의 currentFetch 부분에 오류가 뜨더라구요그럼 아예 처음에 프로그램들을 설치할 때 잘못설치해서 충돌했을 그런 가능성이 있단건가요??
-
미해결실무 중심! FE 입문자를 위한 React
swr과 recoil을 같이 쓰려면 어떻게 쓰면 될까요?
안녕하세요. 유익한 강의 감사합니다. 강의를 다 듣고나니 recoil 과 swr을 같이 쓰고 싶다는 생각이 들어서 redux를 썼던 admin 페이지를 swr과 recoil 조합으로 만들어보다가 막혀서 질문드립니다.. pages/ListPage.js에서 const { data, error, mutate } = useSWR( "/surveys?_sort_id&_order=desc", fetcher, ); const [survey, setSurvey] = useCurrentQuestion(); // recoil setSurvey(data);이렇게 swr로 불러온 데이터를 set으로 넣어주고 다른 페이지에서 recoil로 데이터를 불러서 써도 되는지 궁금합니다. 아니면 커스텀 훅에서 swr을 사용해도 괜찮을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
비동기 방식에서 콜백함수 사용 이유
강의 10분 경 비동기 방식에서 코드 실행 결과를 확인하기 위해 콜백함수를 사용해야 한다고 하셨는데, 아래와 같이 예시를 들어주신 콜백함수를 사용하는 코드와 그렇지 않는 코드의 다른 점이 무엇인지 궁금합니다. 두 코드의 결과는 똑같이 -1 -> 12 -> 7 순서로 콘솔창에 출력됩니다.첫 번째는 예시를 들어주신 코드이고, 두 번째는 왜 콜백함수를 써서 결과를 봐야하지??라는 궁금증으로 수정해본 코드입니다. function taskA(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskB(a, b, cb) { setTimeout(() => { const res = a * b; cb(res); }, 2000); } function taskC(a, b, cb) { setTimeout(() => { const res = a - b; cb(res); }, 1000); } taskA(3, 4, (res) => { console.log(res); }); taskB(3, 4, (res) => { console.log(res); }); taskC(3, 4, (res) => { console.log(res); }); taskA1(); // 이후 실행 console.log("코드 끝"); // taskA1 를 기다리지 않고 // 먼저 실행function taskA(a, b) { setTimeout(() => { const res = a + b; console.log(res); }, 3000); } function taskB(a, b) { setTimeout(() => { const res = a * b; console.log(res); }, 2000); } function taskC(a, b) { setTimeout(() => { const res = a - b; console.log(res); }, 1000); } taskA(3, 4); taskB(3, 4); taskC(3, 4);
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
NextJS 강의 순서 질문입니다.
안녕하세요. 레딧사이트 프로젝트를 진행하기 앞서 올려주신 NextJS 강의를 먼저 들으려고 합니다.강의 듣는 순서가 부록(섹션11) 먼저 듣고 섹션10(13버전)을 들으면 될까요?아니면 섹션10만 들어도 괜찮을까요?
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
react typescript vite 설치시 오류 질문드립니다.
제목처럼 react typescript vite설치를 하려고 터미널에 yarn create vite를 입력하여 설치를 했습니다.아래 이미지와 같이 typescript를 선택 후, 설치를 완료했는데...아래 이미지들처럼 설치 하자마자 빨간줄들이 난무하고있습니다ㅜㅜ아래 이미지는 package.json 파일입니다.어떻게 해결할 수 있을까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
스크롤 시 dispatch 중복 요청 에러 질문 있습니다.
홈페이지에서 스크롤 시 콜백함수가 실행되는 과정에서 LOAD_POSTS_REQUEST dispatch 요청을 두 번 보내는 상황이 발생하였는데 해결하지 못해서 올립니다./pages/index.jsconst Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostLoading, retweetError } = useSelector((state) => state.post); useEffect(() => { if (retweetError) { alert(retweetError); } }, [retweetError]); useEffect(() => { dispatch({ type: LOAD_MY_INFO_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !loadPostLoading) { console.log('스크롤 패칭'); const lastId = mainPosts[mainPosts.length - 1]?.id; console.log('lastId', lastId); dispatch({ type: LOAD_POSTS_REQUEST, lastId, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostLoading, mainPosts]); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); };sagas/post.jsfunction loadPostsAPI(lastId) { return axios.get(`/posts?lastId=${lastId || 0}`); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI, action.data); yield put({ type: LOAD_POSTS_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: LOAD_POSTS_FAILURE, error: err.response.data, }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); }reducers/post.jscase LOAD_POSTS_REQUEST: draft.loadPostLoading = true; draft.loadPostDone = false; draft.loadPostError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostLoading = false; draft.loadPostDone = true; draft.mainPosts = draft.mainPosts.concat(action.data); draft.hasMorePosts = action.data.length === 10; break; case LOAD_POSTS_FAILURE: draft.loadPostLoading = false; draft.loadPostError = action.error; break;첫 페이지 로딩 후에 스크롤 시 onScroll 함수의 '스크롤 패칭'이 콘솔에 두 번 찍히고 LOAD_POSTS_REQUEST 요청이 두 번 가는 것을 확인했고 처음 포스트들을 불러온 이후에 lastId가 0으로 요청이 보내져서 mainPosts에 중복된 게시물이 쌓이는 문제가 있습니다.
-
미해결처음 만난 리액트(React)
(실습) JSX 코드 작성해보기
이 화면이 나오게 하고 싶습니다. npm start 엔터 이후로 어떻게 해야 하는지 모르겠습니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Object is not iterable
npm run dev를 하면 Object is not iterabled 이런 에러가 뜹니다제 코드는import React, { useState, useCallback } from "react"; import { Button, Form, Input } from "antd"; import Link from "next/link"; import styled from "styled-components"; import useInput from "../hooks/useInput"; const ButtonWrapper = styled.div` margin-top: 10px; `; const FormWrapper = styled(Form)` padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => { const [id, onChangeId] = useInput(""); const [password, setPassword] = useInput(""); const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, []); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-id">비밀번호</label> <br /> <Input name="user-id" value={password} onChange={onChangePassword} required /> </div> <ButtonWrapper> <Button type="primary" htmlType="submit" loading={false}> 로그인 </Button> <Link href="/signup"> <a> <Button>회원가입</Button> </a> </Link> </ButtonWrapper> </FormWrapper> ); }; export default LoginForm; 이 부분이 문제라곤 하는데 어떻게 하나요?
