묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 - modal에서의 오류
주소입력창 까지 잘 진행되었는데 비밀번호 모달창을 만들면서 부터 오류가 나기 시작했습니다. 어디서부터 잘 못된 것인지 잘 모르겠는데.. 계속 이런 오류가 뜹니다. 어떻게 해결해야 할까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 관계성 맺은 테이블 수정 질문
안녕하세요 선생님.시퀄라이즈에서 모델 끼리 관계성을 맺어서 route에서 const post = await Post.create({'이하 생략'}); 이런 식으로 하면 Post가 Hashtag와 관계성이 있을 때 post.addHashtags를 할 수 있다는건 알겠는데..이건 create시에만 쓸 수 있는 건가요?이런 질문을 드리는 이유는 게시글에서 해시태그를 수정하려 하니까 일단 Post.update를 해야 하는데, 그러면 따로 Hashtag테이블에 있는 해시태그를 수정하려니까 중간 테이블이 있어서 쉽지 않을것 같아 그냥 row query로 Hashtag중간테이블에서 게시글 아이디를 지워버리고 다시 해시태그를 생성하려고 post.addHashtags를 사용하고 싶어서 그렇습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 회원가입 404 (Not Found)
로그인 회원가입시 이런 오류코드가 뜨는데, DB와 백엔드 연결에서 문제가 나는 건가요?
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
파이어스토어에서 db 값 가져오기 테스트 중...에러
코드샌드박스에서 작성중인 데이터입니다.https://codesandbox.io/s/upbeat-jasper-gfb978?file=/src/App.js:0-563 import "./styles.css";import { db } from "./firebase";import { doc, onSnapshot } export default function App() { const unsub = onSnapshot(doc(db, "cities", "SF"), (doc) => { let word = "hsdsi"; console.log("Current data: ", doc.data().name); word = doc.data().name; }); //word = unsub.name; return ( <div> <p> {word} </p> </div> ); // Add a new document in collection "cities"} word 변수를 선언해서 return 값으로 word 변수를 받아서 rendering 하려고 합니다. onSnapshot( ) 안에서 let word = "" ;으로 초기 변수 설정을 해주지 않으면, 에러가 계속 뜨더라구요.어쩔수없이 이렇게 선언해서 return 값에서 불러왔는데, 렌더링은 잘되지만, 코드 자체는 에러가 뜹니다.제가 볼때도 const 내부에서 선언하면 호이스팅이 안되기때문에 변수 초기화가 안되서 이렇게 하면 안될것 같지만, 일단 렌더링이 되긴하네요. 근데 코드상에서는 빨간줄이 밑줄 그어지면서잘못 코드한것처럼 에러가 나는것 같습니다.어떻게 해줘야할까요?
-
미해결누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
firebase에서 db 데이터 값 가져오기 중...
코드샌드박스에서 작성중인 데이터입니다.https://codesandbox.io/s/upbeat-jasper-gfb978?file=/src/App.js:0-563 import "./styles.css";import { db } from "./firebase";import { doc, onSnapshot } export default function App() { const unsub = onSnapshot(doc(db, "cities", "SF"), (doc) => { let word = "hsdsi"; console.log("Current data: ", doc.data().name); word = doc.data().name; }); //word = unsub.name; return ( <div> <p> {word} </p> </div> ); // Add a new document in collection "cities"} word 변수를 선언해서 return 값으로 word 변수를 받아서 rendering 하려고 합니다. onSnapshot( ) 안에서 let word = "" ;으로 초기 변수 설정을 해주지 않으면, 에러가 계속 뜨더라구요.어쩔수없이 이렇게 선언해서 return 값에서 불러왔는데, 렌더링은 잘되지만, 코드 자체는 에러가 뜹니다.제가 볼때도 const 내부에서 선언하면 호이스팅이 안되기때문에 변수 초기화가 안되서 이렇게 하면 안될것 같지만, 일단 렌더링이 되긴하네요. 근데 코드상에서는 빨간줄이 밑줄 그어지면서잘못 코드한것처럼 에러가 나는것 같습니다.어떻게 해줘야할까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
한줄 if 쓸 때 return의 필요성
한줄로 if문을 쓰실 때 return을 붙이시는 이유가 있나요??제가 감히 생각해보면 return을 붙일 필요가 없는 것 같은데코드를 좀 더 명확하게 하시려고 붙이시는 건가요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
시간 오류 - getTime()
안녕하세요. 한국에선 문제 없던 앱이. 미국에서 동작할경우 등록한 날짜보다 하루 전의 날짜로 저장되는문제를 겪었습니다.찾아보니 getTime()도 toISOString 와 마찬가지로 UTC 0+ 시간으로 작동되는 부분이 문제였습니다. 스토리지에 저장되는 타임스탬프가 UTC 기반이였던거죠. 달력에서 날짜를 설정할때 시간은 반영되지않고 12am 즉 00시로 설정되는데, 한국은 UTC +9 이라 날짜에 영향을 주지 않았지만, 제가 있는 지역의 타임존은 UTC -5이기에 하루전날의 타임스탬프가 저장되고 다시 그 타임스탬을 이용해 new Date(date)을 해줄때 전날의 날짜가 불러진다고 결론내렸습니다.이문제를 해결하기위해, 스트로지에 타임스탬프가아닌 getStringDate 으로 뽑아낸 스트링 날짜를 넣어주었고. 다이어리 리스트에서 sort 를 위한 비교를할때만 getTime()을 써주었습니다. 전문가의 의견을 듣고싶습니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
채팅대화에서 시간이 중복될경우 안보이게 하는방법 문의.
안녕하세요. 복습중에 새로운 기능을 넣으려고 하는데 생각보다 잘 안되네요. 카카오톡 메신저처럼. 동일한 시간에 보낸 카톡시간을 안보이게 하려고합니다.서버에서 가져온 현재시간값과 이전 대화시간값(chat.createdAt) 을 비교하면 될것같은데useState 를 이용할때는 무한로딩으로 막혓고 (setState 로 현재값 저장) useRef 를 사용해서 값을 저장하여 비교하고 싶은데. 항상 현재시간값만 이용하게 되네요.어떻게 접근하는것이 좋을까요.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
쿠키에 대해서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.로그인시 아이디와 비밀번호 → 서버(유저의 정보가 맞는지 확인 후 토큰 발급 → 쿠키에 저장 : 하지만 도메인 주소가 다르면 쿠키가 전송이안됨왜 쿠키는 도메인주소가 다르면 쿠키가 전송이 안될까요?과거 강의인 "노드 리액트 기초강의" 에서 Express에서 제공하는 cookie-parser을 이용해서 서버에서 토큰을 쿠키에 저장했었는데 이 방법도 사용해도 될까요?? - 이는 여기 강의에서 설치한 cookie모듈과 비슷한 건가요??토큰발급 후 클라이언트에 보내주고 클라이언트에서 쿠키에 저장하는 방법은?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
화살표 함수 질문드립니다.
화살표 함수 질문드립니다.const a = (a ) => {a *b } 보통 이렇게 가는데 어떤건 const a = (a ) => { ( a* b ) } 으로 괄호가 들어가더라구요 어떤 경우에 괄호가 들어가고 어떤 경우에는 빠지는지가 궁금합니다 .
-
미해결웹 게임을 만들며 배우는 React
hooks 의 특징 (전체가 다 실행된다)
안녕하세요. 강사님.해당 강의에서 1분 20초 경에'hooks의 특징상 전체가 계속 다시 실행된다' 라고 하셨는데.1.state가 바뀌어서 rendering이 될 때, 모든 hooks의 내용이 다시 실행된다. 라는 말씀이 맞으실까요?2.또한 hooks의 개념이functional component 구현 시에useEffect나 useState, setState 등이 쓰이는 부분들이 hooks라고 보면 되나요...?3.그렇다면 컴포넌트가 re rendering 되는 시점에 seEffect나 useState, setState 등이 쓰이는 부분들이 모두 다시 실행된다고 보면 되나요...? 아니면 함수 컴포넌트 안의 모든 내용들이 다시 실행된다는 말씀이실까요...? 2-1.functional conponent 와 hooks의 개념이 조금 혼동이 됩니다. functional component 구현 시 안에 hooks가 쓰이는 건가요..????? 질문 읽어주셔서 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
netlify 배포시 cors 문제
안녕하세요 자유게시판을 어느정도 구현해서 netlify를 통해 배포해보려고 하니 cors 문제로 api가 작동하지 않습니다. 어떻게 해야 해결할 수 있을까요 ? Access to fetch at 'https://backendonline.codebootcamp.co.kr/graphql' from origin 'https://brilliant-rabanadas-0c6769.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
deserializeUser 에서 user 사용 req.user 언디파인드
routes/post.js 게시글 등록 요청시User객체에 id값을 req.user.id로 설정하려하는데에러나서 req.user 콘솔 찍어보면 undefined 가 출력됩니다.passport/index.js 에서 deserializeUser 를 통해 user값이 req.user로 세팅되는걸로 들었는데 반환값이 없네요 ..passport.deserializeUser()에 console.log 찍어보면 아무것도 출력되는게 없습니다.
-
해결됨웹 게임을 만들며 배우는 React
Click Redo 에서 set State 실행 부분 (비동기 관련)
안녕하세요. 강사님.강사님의 높은 퀄리티의 강의를 듣고 열심히 공부중입니다. 감사합니다. 질문 사항은 다음과 같습니다.아래는 로또번호를 다시 추첨하는 '한번 더' 버튼을 누를 때의 함수인데요.보시면 winNumbers와 winBalls 의 setState가 같이 변경이 되고 있습니다.제가 생각할 때에는, winNumbers의 당첨 번호가 모두 다 만들어 진 후에 winBalls의 배열이 [] 으로 되어, runTimeouts() 가 실행되어야 할 것 같은데요.실제로 set State 가 비동기로 실헹되기 때문에, 만약 로직상 번호를 다 만들고 timeouts를 실행해야 한다면, 동기적으로 처리를 하는 것이 맞지 않을까 라는 생각이 들어서 입니다. 혹시 강사님의 생각은 어떠신가요..? 질문 읽어주셔서 감사합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
업로드 후 홈화면에서 이미지가 보이지 않습니다
데이터 베이스에도 기록이 잘 들어가고 사이트 홈화면에도 잘 뜨는데 화면의 이미지가 안뜹니다.uploads파일에도 이미지 다 잘 들어갑니다.인강과 데이터베이스를 비교해봤을 때 경로문제인것같긴한데 어떻게 수정을 해야할까요?근데 DB경로의 역슬래시를 슬래시로 바꾸어도 안뜨고 uploads에는 사진도 잘 들어가고 사진의 경로를 봤을때도 동일해서... 왜 안뜨는걸까요?단순히 한사진의 오류라고생각했었는데 등록한 것 모두 이렇게 되어서...어딜 어떻게 수정해야할지모르겠어서... 일단은 깃허브링크 함께올려봅니다... 홈사이트 화면개발자 툴 상품넣고 난뒤DB데이터 베이스물건 등록 후 vscode에 뜨는것 깃허브 링크: https://github.com/Dalrae03/webstudy/commit/7a5981dafabdbf009b40c0c5814e7e7c6f3ea9dehttps://github.com/Dalrae03/webstudy/commit/c9106654b1d6badba9ae64ce744a11da46b719a5
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
next.js 버전이 12인건가요?
강의에서 사용하고 있는 next 버전이 궁금합니다.12버전인가요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
image 파일에서 vscode로 드래그 앤 드롭을 처리할 수 없다고 합니다
압축을 푼뒤 진행해도 에러가 납니다The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.라고 나오고요 hexeditor를 깔아도 해결이 안됩니다찾아보니 50mb를 넘는 자료를 vs코드에서 지원을 못한다고 하는데요 참고로 집에 컴퓨터가 없어 pc방 컴퓨터로 배우는 중입니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
passport.initialize not function 에러 ..
const express = require('express'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const cors = require('cors'); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); const db = require('./models'); const passport = require('./passport'); const dotenv = require('dotenv'); const passportConfig = require('./passport'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); app.use(cors({ origin: '*', credentials: false, })); app.use(express.json()); app.use(express.urlencoded({extended: true})); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(passport.initialize()); app.use(passport.session()); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('서버 실행 중...'); }); 5년전 누가 같은 질문을 블로그 댓글로 했었는데 수정했다고만 답변을 달아주셔서 ,, 뭐가 문젠지 잘 모르겠습니다.작성된 코드이고 아래와 같이 에러가 발생합니다. /Users/WebstormProjects/nodebird/prepare/back/app.js:36app.use(passport.initialize()); ^TypeError: passport.initialize is not a function at Object.<anonymous> (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/app.js:36:18) at Module._compile (node:internal/modules/cjs/loader:1218:14) at Module._extensions..js (node:internal/modules/cjs/loader:1272:10) at Module.load (node:internal/modules/cjs/loader:1081:32) at Module._load (node:internal/modules/cjs/loader:922:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:82:12) at node:internal/main/run_main_module:23:47Node.js v19.3.0[nodemon] app crashed - waiting for file changes before starting...
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
findOneBy
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. findOneBy 명령어 혹시 자세하게 설명해주실 수 있을까요??User.ts를 이용해서 중복된 아이디와 이름을 찾는 원리가 어떻게 되는건가요??
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
upload 페이지에 아무것도 안 뜨는 현상
안녕하세요. 그랩님매일 같이 열정적으로 댓글 달아주셔서 항상 감사드립니다.모든 것이 그러하듯 강의를 운영하는 것도엄청난 공수가 든다는 것을 깨달았네요.현재 오류가 생겼는데, useHistory를 이용해서 upload페이지로 이동한 후 Upload 클라이언트 쪽에서아무 반응도 일어나지 않고 있습니다.아무리 코드랑 구글링을 해봐도 해결이 안되는데요.upload페이지가 console창을 보면 /upload/index.js의 html 코드가 아무것도 불러와지지 않고 있는 것 같아요.혹시 조언좀 구할 수 있을까요?1. 현상 : 클라이언트에 아무것도 뜨지 않음Elements 창을 클릭해도 upload.js 작성한 HTML이 없습니다.2.App.js에 제가 작성한 코드입니다. History와 import 란에 모두 정확하게 작성하였는데요.3. upload/index.js 파일 코드도 같이 첨부드립니다.한번만 봐주실 수 있을까요? ㅠuseHistory가 만료가 되어서 작동을 안 하는걸까요..https://github.com/promotionX/Grabmarket-clinet