묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 게임을 만들며 배우는 React
tries 안에 value와 result차이
안녕하세요 강의 잘 듣고있습니다.강의듣는도중 궁금한게 생겨서요!!위의 사진에서 보면 value는 tries의속성값으로 사용하셨고 원래 코드라면 result : "홈런!!" 이렇게 되어있어서 위의 사진처럼 바꾸면되지않을까해서 바꾸고 인덱스에맞게 답을맞추고 출력해봤는데 오류가 뜨더라구요. 왜그런거죠?? 리액트18말고 강의기준으로 질문드립니다(usecallback , 의존성배열없는코드). 리액트가 { } 블럭단위로 변화점을 다 찾은다음에 한번에 리렌더링시켜서 그런것인가요?
-
미해결웹 게임을 만들며 배우는 React
끝말잇기
-> 똑같이 따라하며 끝말잇기를 실행했을 때, 화면에 아예 아무것도 뜨지 않고, 다음과 같은 오류가 뜨는데, 무엇이 문제일까요? 서버이면 package.json 파일에 문제가 있는걸까요?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
닉네임 중복검사 시 404 에러
서버 주소도 제대로 전달한 것 같은데 404 에러가 뜨는데 뭐가 잘못된걸까요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
votes기능 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.1.위 이미지처럼 comments.votes를 했는데 저렇게 Array만 뜨는데 값을 가져올 수 있는 건가요?? 위 이미지 처럼 postId와 commentID를 넣은게 아닌 comment 객체와 Post 객체를 넣었는데 어떻게 DB에는 postID와 CommentId가 들어간건지 알 수 있을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
GraphQL $boardId: ID! 오류
안녕하세요! 강의듣는데 혼자서는 오류를 해결하지 못 할것 같아서 질문드립니다!오류뜨는 부분은 freeboard_frontend > boards > [_id] > index.js (상세페이지) 입니다. 글 작성 -> 상세페이지로 이동 -> 상세페이지에서 수정 버튼 누르면 수정페이지로 이동 -> 수정페이지에서 수정하고 수정버튼 누르면 다시 상세페이지로 이동 > 상세페이지에서 삭제버튼 클릭하면 삭제후 리스트로 이동제가 의도한 기능들은 모두 정상작동은 하는데 상세페이지에만 접속하면 해당 오류가 발생합니다..! (상세페이지 query 코드입니다) -> $boardID: ID! 이부분에서 오류가 나는것 같은데 강의 자료실에 올라온 코드와 비교해봤지만 같게 작성된걸 확인했습니다! (상세페이지 접속했을때만 NetWork에 이렇게 뜹니다ㅠㅠ) 한가지 더 궁금한 점이 있습니다!타입 지정해줄때 Docs 보고 그대로 적으면 된다고 하셨는데 ($boardId: [ID!]!) 이렇게 적으니까 오류가 나서 ($boardId: ID!) 이렇게 적으니까 작동이되더라구요.. 제가 강의 들으면서 빼먹은 부분이 있는걸까요ㅠㅠ?이럴땐 어떻게 적어야 할까요ㅠ??export const DELETE_BOARD = gql` mutation deleteBoard($boardId: ID!){ deleteBoard (boardId: $boardId) } `;
-
미해결Slack 클론 코딩[실시간 채팅 with React]
settings/ts npm i 실행 후 npm run dev 실행 시 오류
구글링 해보니 다른 웹팩 버전이 설치된 경우 발생할 수 있는 에러라고 해서 웹팩 재설치 및 node_dodules, package-lock.json 삭제 후 npm i, npm run dev 해도 해결이 안되네요확인 부탁드리겠습니다======== 에러메시지 ========[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation at Function.getCompilationHooks (C:\Users\SJ\documents\sleact\front\ts\node_modules\webpack\lib\NormalModule.js:227:10) at C:\Users\SJ\documents\sleact\front\ts\node_modules\webpack\lib\HotModuleReplacementPlugin.js:767:18 at Hook.eval (eval at create (C:\Users\SJ\Documents\sleact\front\ts\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:104:1) at Hook.CALL_DELEGATE [as call] (C:\Users\SJ\Documents\sleact\front\ts\nodemodules\tapable\lib\Hook.js:14:14) at Compiler.newCompilation (C:\Users\SJ\Documents\sleact\front\ts\node_modules\webpack\lib\Compiler.js:1122:26) at C:\Users\SJ\Documents\sleact\front\ts\node_modules\webpack\lib\Compiler.js:1166:29 at Hook.eval [as callAsync] (eval at create (C:\Users\SJ\Documents\sleact\front\ts\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at Hook.CALL_ASYNC_DELEGATE [as callAsync] (C:\Users\SJ\Documents\sleact\front\ts\nodemodules\tapable\lib\Hook.js:18:14) at Compiler.compile (C:\Users\SJ\Documents\sleact\front\ts\node_modules\webpack\lib\Compiler.js:1161:28) at C:\Users\SJ\Documents\sleact\front\ts\node_modules\webpack\lib\Compiler.js:524:12
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드 샌드박스처럼 코드를 받을 수 있나요?
섹션6 페이지구현-홈 수강중인데제가 코드 쳤을때18:29 오늘의일기1~5가 아에 안 나타나서 프롭으로 빈배열로 보내도안보여서 18분까지 다시 3번 들었는데ㅠㅠ 제가 실수한 곳을 아무리 찾아봐도 안보여서혹시 코드를 따로 받을 수 있을까요???
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
수정 버튼 눌렀을 때 이전 이미지 경로
const [Image, setImage] = useState(PostInfo.image); <ImageUpload Image={Image} /> 이처럼 state값에 PostInfo.image를 해주어서 이미지 경로 값을 지정해주고 props로 넘긴 뒤 <Form.Control type="file"accept="image/*"src={props.Image}onChange={(e) => FileUpload(e)}/>이런식으로 해주었는데 안떠서 그런데 어떤식으로 해야 수정할 때 이전의 이미지 경로가 뜨게 될까요 ??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
GET http://localhost:4000/images/null 404 (Not Found)
안녕하세요.이미지 업로드 부분을 다 작성하고 이미지까지 잘 올라가지는데console을 보니null:1 GET http://localhost:4000/images/null 404 (Not Found)이런 오류가 뜨는데 무시해도 상관 없는건가요?
-
미해결처음 만난 리액트(React)
npm start 후 빈화면
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. npm start 후 작성한 코드가 실행되지 않고 빈화면 띄는데 어떻게 해야할까요?구글링 해본 결과 package.json 파일에 "homepage="." 추가하면된다고하는데,,,(제가 참고한 블로그입니다.리액트 빌드 결과 빈화면만 보일때 - 상대경로 설정하기 (tistory.com))일단 index.html 파일에 있는 내용 첨부해드립니다.. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
loading의 상태 변화에 따라 컴포넌트 렌더링시 무한렌더링이 발생합니다.
안녕하세요. 도움을 요청할 데가 없어서 혹시 원인을 알고 계실까하여 글을 작성합니다.우선 nodebirdSNS 가 아닌 개인 프로젝트에서 발생한 문제라는 점 양해 부탁드립니다.공공API를 사용하여 데이터를 불러오기 위해 Redux Toolkit 을 사용하여 extraReducers로 pending, fulfilled, rejected 일 때 각각 loading의 상태를 변경시켜준 후 loading이 true일 때는 <Loader /> 컴포넌트를, false 일때는 데이터를 그려줄 컴포넌트가 열리도록 코드를 짰습니다.pending 일 때, loading = truefulfilled 일 때, loading = false 값이 잘 들어갔고 데이터도 잘 받아와지는데.. 문제는 이렇게 loading 을 보여주려고만 하면 무한렌더링에 걸려버립니다...ㅠ ㅠ분명 fulfilled일 때 false로 변경되었는데도 말이죠... 삼항연산자를 제외하고 실행시켜보면 원하는 대로 데이터를 불러올 때 딱 한번만 렌더링이 되는 것을 확인했습니다. 값은 잘 들어가놓고 왜 로딩의 값에 따라 컴포넌트를 보여주려고만 하면 무한렌더링에 걸리는 지 뭐가 문제인 건지 조금만 알려주시면 정말 감사할 것 같습니다 ㅠㅠ 아무리 찾아봐도 비슷한 케이스를 찾지 못했고, 많은 블로그와 유투브 영상을 참고해도 원인을 알 수가 없었습니다.. [삼항연산자 추가 시][삼항연산자 제거시]해당 코드는 이렇습니다.[API][Reducer][Component]
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
댓글 리스트 불러오는 핸들러에서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이 부분에서 Comment DB에 postID가 언제 저장된 것일까요??댓글 생성 부분에서는 Post 정보만 저장하지 않았나요?? Post정보를 저장하면 postId가 자동저장되는건가요??댓글을 생성하면 해당 댓글의 postId는 Null값이 아닌가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
express redirect
client 주소: http://localhost:3000server 주소: http://localhost:5000현재 저는 쿠키 공유 잘 되며 글 작성도 잘 됩니다. 그런데 client에서 server로 요청을 보내고 요건에 부합하지 않으면 client측 화면을 redirect 시키려는데 cors 오류가 발생합니다. 어떤부분을 보면 좋을까요?server에서 redirect 주소는 http://localhost:3000/login 이런식으로 client 주소 작성했습니다.추가적으로 client 측에서 router.push로 서버 주소로 요청보내고 로직 수행 후 응답 결과로 res.redirect는 cors 오류 없이 잘 동작합니다. 이건 또 왜 잘 되는걸까요.?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
reaxt router npm 설치
안녕하세요~섹션6 페이지 라우팅1-React Router기본 편 듣고 있는데강의에 나오는 React Router 사이트에 들어가면 Installation 이라는 카테고리가아에 없는데.. 혹시 2023년 3월8일 기준으로 방법이 있나요?ㅠㅠ 홈페이지 다 눌러봐도안보이네요ㅠㅠㅠ
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
폴더 속 폴더에 있는 소스 배포
강사님 제가 넷플릭스 소스를 [git아이디/Repositories폴더/하위a폴더/하위b폴더]b폴더에 저장을 했다면homepage경로와 base경로를 어떻게 설정해야하나요?혹시 배포를 할땐 Repositories 폴더에 있는 소스들만 배포가 가능한건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
오류 질문이요!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 터미널과콘솔에 이렇게 오류가 뜨는데 원인을 모르겠습니다ㅜㅜ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
npm run dev시 localhost가 자꾸 3000으로 연결됩니다
이렇게 찾을 수 없다는 에러가 뜨는데 어떻게 해야되나요? 다른 분이 질문하신거 보고 package.json에 proxy도 추가해봤는데 안됩니다.
-
해결됨따라하며 배우는 리액트 네이티브 기초
리덕스 참고강의 도표자료 링크 요청드립니다.
안녕하세요 강사님, React Native 강의를 듣던 중에 참고강의로 리덕스를 수강하고 있습니다.혹시 강사님이 diagram으로 설명하시는 자료 링크를 따로 추가해주실 순 없으실까요? 감사합니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
passport로 로그인하기에서 passport로그인 이라는게 무슨 말인가요??
router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { // done에서 넣은값들이 순서대로 전달되는곳 if (err) { console.error(err); next(err); } if (info) { return res.status(401).send(info.reason); } })(req, res, next); // middleware 확장하는 express의 기법 // (req, res, next)를 붙히면 그냥 함수를 전달하는것과 똑같은 기능을 하게 된다. return req.login(user, async (loginErr) => { // 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 하는데 에러발생시 핸들 if (loginErr) { console.error(loginErr); return next(loginErr); } return res.json(); }); });return req.login(user, async (loginErr) => {여기서 우리 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 한다고 하셧는데 이게 무슨 의미 인가요?? 우리 서비스에서 로그인을 하면 끝 아닌가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql fetBoard 재질문
import {Bigframe, ResultWrapper, UserBox, UserInfo, Boundary } from "@/styles/emotion"; import { gql,useQuery } from "@apollo/client" import { useRouter } from "next/router" import{useState} from 'react' const FETCH_PRODUCT = gql` query fetchBoard($boardId: ID!){ fetchBoard(boardId:$boardId){ writer title contents createdAt } } ` export default function BulletinBoardFetch() { const router = useRouter() const[writer,setWriter]=useState("") const[creatDt,setCreatDt]=useState("") const{data}=useQuery(FETCH_PRODUCT,{ variables:{ boardId: router.query.qqq } }) console.log(data?.fetchBoard?.createdAt) setCreatDt(data?.fetchBoard?.createdAt) setWriter(data?.fetchBoard?.writer) return( <div> <Bigframe> <div> banner1 </div> <div> banner2 </div> <ResultWrapper> <UserBox> <img src="../../../public/userpic.png" alt=""/> <UserInfo> {/* <Writer>{writer}</Writer> <CreateDate>{createDt}</CreateDate> */} </UserInfo> <img src="../../../public/clip.png" alt=""/> <img src="../../../public/location.png" alt=""/> <Boundary></Boundary> </UserBox> </ResultWrapper> </Bigframe> </div> ) }너무 많이 루프했다고 뜹니다 ㅠㅠ
