inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

TypeError: Cannot read properties of undefined (reading 'findOne') 질문

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님! 현재 백엔드 파트 게시물 좋아요 기능을 구현하다가 갑자기 회원가입과 로그인 기능에서 오류가 떠서 질문드립니다. 회원가입을 하게 되면, TypeError: Cannot read properties of undefined (reading 'findOne') 라는 오류가 발생하면서 데이터베이스에 데이터가 전송되지 않고 있습니다. 제가 생각하기에는 User모델에 문제가 발생하여 데이터가 들어가지 않아 findOne이 에러가 뜨는 것 같은데,,, 문제가 된다고 생각하는 코드 올리겠습니다. models/index.js const Sequelize = require("sequelize"); const env = process.env.NODE_ENV || "development"; const config = require("../config/config")[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config, ); db.Comment = require("./comment")(sequelize, Sequelize); db.Hashtag = require("./hashtag")(sequelize, Sequelize); db.Post = require("./post")(sequelize, Sequelize); db.User = require("./user")(sequelize, Sequelize); db.Image = require("./image")(sequelize, Sequelize); Object.keys(db).forEach((modelName) => { if (db[modelName].associate) { db[modelName].associate(db); } }); // 반복문을 이용하여 각 데이터베이스의 관계를 설정해줌. db.sequelize = sequelize; db.Sequelize = Sequelize; module.exports = db; models/user.js const DataTypes = require("sequelize"); const { Model } = DataTypes; module.exports = (sequelize, DataTypes) => { const User = sequelize.define( "User", // id가 기본적으로 들어가있기 때문에 만들지 않아도 됨. { email: { type: DataTypes.STRING(30), allowNull: false, //필수 unique: true, //고유한 값 }, nickname: { type: DataTypes.STRING(30), allowNull: false, //필수}, }, password: { type: DataTypes.STRING(100), allowNull: false, //필수}, }, }, { charset: "utf8", collate: "utf8_general_ci", // 한글 저장 }, ); User.associate = (db) => { db.User.hasMany(db.Post); db.User.hasMany(db.Comment); db.User.belongsToMany(db.Post, { through: "Like", as: "Liked" }); db.User.belongsToMany(db.User, { through: "Follow", as: "Followers", foreignKey: "FollowingId", }); db.User.belongsToMany(db.User, { through: "Follow", as: "Followings", foreignKey: "FollowerId", }); }; return User; }; routes/user.js const express = require("express"); const bcrypt = require("bcrypt"); const passport = require("passport"); const { User, Post } = require("../models"); const { isLoggedIn, isNotLoggedIn } = require("./middlewares"); const router = express.Router(); router.get("/", async (req, res, next) => { // GET /user try { if (req.user) { const fullUserWithoutPassword = await User.findOne({ where: { id: req.user.id }, attributes: { exclude: ["password"], }, include: [ { model: Post, attributes: ["id"], }, { model: User, as: "Followings", attributes: ["id"], }, { model: User, as: "Followers", attributes: ["id"], }, ], }); res.status(200).json(fullUserWithoutPassword); } else { res.status(200).json(null); } } catch (error) { console.error(error); next(error); } }); router.post("/login", isNotLoggedIn, (req, res, next) => { passport.authenticate("local", (err, user, info) => { if (err) { console.error(err); return next(err); } if (info) { return res.status(401).send(info.reason); } return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ["password"], }, include: [ { model: Post, attributes: ["id"], }, { model: User, as: "Followings", attributes: ["id"], }, { model: User, as: "Followers", attributes: ["id"], }, ], }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); router.post("/", isNotLoggedIn, async (req, res, next) => { // async await을 이용하여 비동기 문제 해결 try { const exUser = await User.findOne({ where: { email: req.body.email, }, }); // 같은 이메일을 사용하고 있는 사람이 있는지 if (exUser) { return res.status(403).send("이미 사용중인 아이디입니다."); } // return이 없으면 아래있는 res도 실행이 됨. const hashedPassword = await bcrypt.hash(req.body.password, 13); await User.create({ email: req.body.email, nickname: req.body.nickname, password: hashedPassword, }); res.send("ok"); } catch (error) { console.error(error); next(error); } }); //post /user/ router.post("/user/logout", isLoggedIn, (req, res, next) => { req.logout(); req.session.destroy(); res.send("ok"); }); module.exports = router; 오류 사진

  • react
  • redux
  • express
  • nodejs
  • Next.js
댓글 2 좋아요 0 조회수 2016

css 시작하면서 "오늘의 감정점수 : " 가 추가되었네요

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

기본적인 CSS를 추가하실 때 갑자기 <select> 옆에 "오늘의 감정점수 : " 가 추가되어서 제가 놓쳤나 싶었네요 ㅎㅎ.. 다른 분들도 헷갈리시지 않게 강의 밑 소스코드를 참고하시거나 아래 코드를 넣어주시면 편하게 하실듯합니다~ < div > < span > 오늘의 감정점수 : </ span > < select name = " emotion " value = { state . emotion } onChange = { handleChangeState } > < option value = { 1 } > 1 </ option > < option value = { 2 } > 2 </ option > < option value = { 3 } > 3 </ option > < option value = { 4 } > 4 </ option > < option value = { 5 } > 5 </ option > </ select > </ div >

  • javascript
  • react
  • nodejs
tkddyd420 댓글 1 좋아요 4 조회수 343

useSwrInfinite 질문입니다.

미해결

Slack 클론 코딩[실시간 채팅 with React]

안녕하십니까 제로초님 슬랙 클론코딩 강의를 보고 실시간 챗을 구현해보고 있습니다. useSwrInfinite를 사용하여 구현하고 있고, 요청주기에 대해 궁금한점이 생겼습니다. useSwr은 DedupingInterval을 사용해서 설정한 주기 동안은 탭 변환이 일어나도 재요청을 보내지않고 캐시된 값을 그대로 사용하는 것으로 이해하고 있습니다. 그런데 useSwrInfinite의 요청 주기를 잘 모르겠어서 공식문서를 읽어보니 initialSize = 1 : 초기에 로드해야 하는 페이지의 수 revalidateAll = false : 항상 모든 페이지의 갱신 시도 revalidateFirstPage = true : always try to revalidate the first page persistSize = false : 첫 페이지의 키가 변경될 때, 페이지 크기를 1( initialSize 가 설정된 경우 initialSize )로 초기화하지 않음 챗을 쳐서 실시간으로 채팅이 화면에 그려질 수 있는이유는 초기에 initialSize = 1 로 설정되어 있어서 이차원 배열의 첫번째 배열이 갱신되어서 그런 것일까요? 챗을 칠때마다 갱신된 데이터를 get 할 수 있어서 좋지만 서버에 얼마만큼(어느주기로) 요청을 보내는지 알고 싶습니다.

  • swr
  • react
  • 웹팩
  • typescript
  • Socket.io
  • babel
  • react
  • 클론코딩
김동영 댓글 1 좋아요 0 조회수 711

쇼핑 크롤링 응용 질문 드립니다.

해결됨

일잘하는 마케터, MD에게 꼭 필요한 파이썬 데이터 분석

선생님께서 수업에서 보여주신 여러가지 크롤링을 응용해서 네이버 많이 구매하는 쇼핑 카테고리 크롤링 코드를 짜보았습니다. 그런데 해당 순위 100개까지 있는데, 현재 순위 15순위까지만 해서 나옵니다. 16위부터는 소스 자체에서 변화되는 것이 있을수 있는데 저로서는 한계네요 ;;; 리뷰 다음 페이지것까지 가져오기처럼 이것도 방법이 있을 것 같은데 혹시 알려주실 수 있을까요

  • 크롤링
  • 웹-크롤링
  • 네이버쇼핑
  • python
cat 댓글 1 좋아요 0 조회수 789

삭제한 아이템까지 id를 카운트 하는게 정상인가요?

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

만든걸로 이것저것 해보다가 알게되었는데요. 21번째 아이템을 삭제한 후 다시 아이템을 추가하면 22번째 아이템이라고 뜹니다. chapt 15 소스코드는 아예 콘솔에 출력이 안되서 chapt14 소스코드에서 해보니 제목과 같은 현상이 발생해서요. 21번째 아이템을 삭제한후 다시 아이템을 추가하면 21번째 아이템이어야 되는거 아닌가요?

  • react
  • javascript
  • nodejs
앤디 댓글 2 좋아요 1 조회수 561

robomongo설치 관련 질문

미해결

남박사의 파이썬으로 실전 웹사이트 만들기

선생님 안녕하심까 지금 강의를 보면서 설치중인데 mongodb는 설치 완료 했습니다만 robomongo 설치과정에서 저는 선택지가 Studio 3T 밖에 없는데 이걸로 설치해도 될런지요?

  • python
김민수 댓글 2 좋아요 1 조회수 391

화면에 콘솔이 두개씩 찍히는 상황

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

화면에 새로고침 할때마다 콘솔 찍은 부분들이 2개씩 항상 찍히던데.. 뭔 이유인지를 모르겠네요..

  • react
  • javascript
  • nodejs
이성찬 댓글 1 좋아요 1 조회수 581

강의 재생 오류

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

The media could not be loaded, either because the server or network failed or because the format is not supported. 이런 에러가 나오는데 어떻게 해야하나요? 앞부분 이미 들었는데 이러네요.

  • react
  • javascript
  • nodejs
hahaha 댓글 3 좋아요 1 조회수 955

10분 즈음에 더미데이터 filter 안 되시는 분

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

diaryList[0].filter 이렇게 하시면 콘솔창에서 필터가 되어 있는 모습을 볼 수 있습니다. 한 30분동안 왜 필터가 안 되는지 forEach로 찍어봤는데 배열 하나 안에 객체가 여러개 있는거기 때문에 저렇게 해야하는거 같긴 한데, 또 강사님은 그냥 하셔도 출력이 되시네요. 무튼 저는 위의 방식으로 해결했습니다.

  • react
  • nodejs
  • javascript
Anfield 댓글 2 좋아요 1 조회수 496

HOC auth.js에 관한 오류 발생 시 참고 사항

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

강사님 강의 내용과 똑같은 코드를 작성했으나 오류가 계속 생성됬는데 어찌저찌 풀어서 참고하실 분들을 위해 남깁니다 제가 오류가 발생한 상황(hoc/auth.js) [강사님과 같은 코드를 작성 후 서버/클라이언트 실행 시 빈 화면이 나옴] (오류 내용 : unctions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.) - 해결책 : AuthenticationCheck 리턴 시 함수로 리턴하는 것이 아닌 JSX 컴포넌트로 리턴하라고 합니다 (참고 : https://www.inflearn.com/questions/357383) - 실제로 auth.js의 마지막 부분인 을 return AuthenticationCheck -> return < AuthenticationCheck />로 변경 시 정상적으로 작동함을 확인할 수 있었습니다. [hoc/auth.js 코드] import React, { useEffect } from "react"; import { useDispatch } from "react-redux"; import { auth } from "../_action/user_action"; import { useNavigate } from "react-router-dom"; export default function (SpecificComponent, option, adminRoute = null) { //option : null = anyone, true = login user only, false = logout user only function AuthenticationCheck(props) { const dispatch = useDispatch(); const navigate = useNavigate(); useEffect(() => { dispatch(auth()).then((response) => { console.log("auth? ", response); if (!response.payload.isAuth) { // login yet if (option) { navigate("/login"); } } else { // login if (adminRoute && !response.payload.isAdmin) { navigate("/"); } else { if (option === false) { navigate("/"); } } } }); }, []); return ( <SpecificComponent /> // component return이 없으면 React 실행이 안됨. ); } return <AuthenticationCheck />; }

  • hoc
  • nodejs
  • react
류지혜 댓글 2 좋아요 6 조회수 831

배운 내용을 토대로 swr을 이용하여 프로젝트를 하고 있는데요!

해결됨

Slack 클론 코딩[실시간 채팅 with React]

const {data, error, revalidate}=useSWR(주소, fetcher) -> 주소: fetcher 함수 실행을 요청할 주소 fetcher: 어떤 기능을 수행할 지 정의해 둔 함수 요청이 성공되면, revalidate 함수가 실행된 뒤, data로 응답을 받아와서 응용할 수 있다. 이렇게 이해했는 데 맞을까요? 그리고, fetcher는 하나가 아니라 여러가지를 만들어도 괜찮을까요? get을 할 수 있는 fetcher, post를 할 수 있는 fetcher 등 나눠서 사용할 수 있을까요? 그리고 프로젝트를 함께 진행하고 있는 친구가 회원가입을 하기 위해 post를 해줬고, 성공 시 response로 관련 데이터를 보내주는데 /api/user에 굳이 userData를 넣어서 또 get으로 받아볼 수 있도록 해야 하냐고 물어보던데 당연히 필요한 거 아닌가..? 라는 생각이 들지만 명확한 근거를 모르겠어서 질문드립니다.

  • 웹팩
  • react
  • babel
  • typescript
  • Socket.io
  • 클론코딩
ssez 댓글 1 좋아요 0 조회수 219

모킹에서 계속 오류가 납니다

미해결

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

모든 과정을 세번씩 돌려보면서 따라했는데도 안되네요... queryClient는 위와 같이구성하였고 BASE_URL은 '/'으로 설정하였습니다. 위와같은 오류가 발생합니다 어떻게 해결하여야할까요? https://github.com/shinwonse/shopping-mall 깃 주소 첨부드립니다

  • graphql
  • firebase
  • react
신원세 댓글 1 좋아요 0 조회수 454

안녕하세요 useEffect deps질문입니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. 10분28초쯤 일기 수정 중에 useEffect에서 isEdit과 originData를 배열에 넣어주는데요 isEdit과 originData는 바뀌지 않는 값인데 추가하는 이유가 있을까요?

  • nodejs
  • react
  • javascript
댓글 1 좋아요 0 조회수 318

Localstorage에 정상적으로 저장되었지만 새로고침시 로딩되지 않습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

다른기능들은 모두 정상적으로 작동을하는데 새로고침시 Localstorage에 저장된 값을 불러오지 못합니다. 정상적으로 Localstorage에 저장되는것으로 보여지는데 id값의 문제인지 date의 문제인지 아님 리스트렌더링 문제인지 아무리보아도 어떤부분에서 문제가 발생하는지 찾지 못하겠어서 질문남깁니다. https://codesandbox.io/s/currying-bash-b45zku?file=/src/App.js 코드샌드박스 링크 첨부합니다. (Edit페이지의 emotion이 깨지는 문제는 VScode에서는 발생하지 않는문제입니다. 무시해주세요) 정말 좋은강의 만들어 주셔서 감사합니다.

  • javascript
  • nodejs
  • react
종섭 댓글 1 좋아요 1 조회수 529

eslint의 extends쪽 질문이 있습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 현영님. 에러는 해결을 한 상태인데 궁금한 점이 생겨 질문드립니다. const fs = require ( ' fs ' ); 백쪽에 fs모듈을 쓰면서 부터 시작됐는데, 강의 마지막 부분에 와서 프론트 서버를 새로고침하니 저런 에러가 발생했습니다. 스택오버플로우를 찾아보니, https://github.com/vercel/next.js/issues/7755 프론트쪽에 next.config.js라는 폴더를 생성한 후 module . exports = { webpack : ( config , { isServer } ) => { // Fixes npm packages that depend on `fs` module if ( ! isServer ) { config . node = { fs : 'empty' } } return config } } 이런식으로 넣어주라는데, 프론트 서버에서는 fs모듈에 관련된 작업을 한 게 없어 여러가지 테스트를 하다가, 프론트 폴더의 .eslintrc파일에 extends를 airbnb가 아닌 주석처리된 부분으로 바꾸니 또 해결이 되었습니다. (다른 프론트나 백쪽의 코드는 수정이 없었습니다) 1. 혹시 extends랑 상관이 있는건지? 아니면 그냥 일시적인 에러라고 생각을 하면 될까요? 2. 관련이 없다고 하면 혹시나 알 수 없는 에러가 나올 경우 현영님의 경우 어떻게 대처를 하시나요? (에러가 생길 때마다 기록을 해두는 편인데 생각보다 찾기가 힘든? 에러들이 종종 나오더라고요.. 짬의 차인지..?) ++ 어제 업데이트 하신 정보들 확인했습니다. 바로바로 업데이트 해주셔서 불편함이 없네요 감사합니다

  • nodejs
  • express
  • redux
  • react
  • Next.js
손서연 댓글 2 좋아요 0 조회수 301

IsPrime 함수에서 for문 범위 질문 드립니다.

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

def isPrime ( x ): ''' 소수인지 판별하는 함수 ''' if x == 1 : return False for i in range ( 2 , x // 2 + 1 ): if x % i == 0 : return False else : return True 위 for문에서 범위가 2부터 x를 2로나눈 몫까지 반복되는데, 예시로 들어주신 16의 경우, i가 2,3,4,5,6,7,8까지 반복문이 돌게 됩니다. 그런데 마지막 8의 경우는 2로 나눴을 때 이미 2*8=16으로 한번 나눠지게 되니 for문에 포함이 안되어도 될 것 같은데 아닌가요? range의 범위가 range(2,x//2) 로 수정되어야 할 것 같은데, 맞는건지 궁금합니다.

  • python
  • 코테 준비 같이 해요!
임나래 댓글 3 좋아요 0 조회수 372

react-redux 버전 관련 질문입니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

리덕스로 로그인을 구현한 후 로그인 되지않는 문제가 생겼었습니다. dispatch 함수가 실행되지만 rootReducer에서 LOG_IN 부분이 실행이 안됐습니다(console.log로 확인) 그래서 useDispatch를 불러온 부분이 문제라고 생각해, react-redux버전을 강의에 맞게 7로 바꾸니 문제가 해결됐습니다. 왜 이런 문제가 발생한건가요..? 추가로 이 강의를 다 들은 후, react-redux를 8버전으로 올리고 싶으면 어디서 변경내역을 확인해야 하나요..?

  • Next.js
  • express
  • redux
  • react
  • nodejs
댓글 1 좋아요 0 조회수 337

프론트, 백엔드 서로 다른 도메인 간 쿠키 공유

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요. 현재 프론트는 mysiteurl.site 라는 도메인으로 firebase 호스팅을 하고 있고 백엔드는 mysiteurl.shop 으로 다른 도메인으로 정할 예정인데요. 강의에선 프론트와 백엔드가 동일하게 nodebird.com 이 들어가 있고 route53에서 서로 다른 ip를 가르키게 했는데 제가 하려고 하는 방식에도 쿠키가 전달이 가능할까요? (nginx proxy_set_header 세팅은 동일하다는 가정)

  • Next.js
  • express
  • react
  • redux
  • nodejs
지비 댓글 1 좋아요 0 조회수 356

console.log(counter); 가 handleFormSubmit 함수 내부에 있을 때 동작이 잘 이해가 안됩니다.

해결됨

만들면서 배우는 리액트 : 기초

안녕하세요! Form 컴포넌트 내부를 작성해보다 실수로 아래와 같이 작성하였는데요 function handleFormSubmit(event) { event.preventDefault(); console.log('submit'); setCounter(100); console.log(counter); } 이런식으로 작성을 했더니 처음 submit 시에는 console 에 1이 찍히고 그 다음에 100이 찍혔습니다. 이 동작이 잘 이해가 되지 않는데 이유를 알 수 있을까요?!

  • javascript
  • react
댓글 2 좋아요 1 조회수 322

자바스크립트 오타 검사 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 vscode 설정 관련 질문입니다. 지금 막 vscode를 설치했는데 js파일에서 오타 검사가 안되는데 그 이유를 알 수 있을까요???

  • 오타
  • react
  • 자바스크립트
  • javascript
  • vscode
  • nodejs
휴식중인너구리 댓글 1 좋아요 0 조회수 603

인기 태그

인프런 TOP Writers

주간 인기글