묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Hook useMemo has a missing dependency
강사님 강사님의 강의를 들으며 진행하고 있는데 아래와 같은 경고 메시지가 계속 나와 경고 메시지를 받지 않으려면 어떻게 코드를 작성해야 하는지 궁금해서 질문 드립니다!아래는 제가 작성한 코드입니다https://codesandbox.io/s/youthful-glitter-6thymf?file=/src/App.js:0-2523Line 54:8: React Hook useMemo has a missing dependency: 'data'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 58:51: React Hook useMemo has missing dependencies: 'addDiary', 'deleteDiary', and 'editDiary'. Either include them or remove the dependency array react-hooks/exhaustive-deps
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
배포하고 나서는 visual studio code에서는 실행못하나요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. AWS로 배포하고나면 visual studio code에서 npm으로 로컬실행을 할 수 없을 까여?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
타입스크립트 활용 질문
controllers/auth.ts의 passport.authenticate("local", (authError, user, info) => { ...부분에서 콜백함수의 매개변수들에 "매개 변수에는 암시적으로 'any' 형식이 포함됩니다.ts(7006)" 이런 에러가 발생해서const callback: AuthenticateCallback = (authError, user, info) => { ...이렇게 분리해서 타입을 붙여줬고, 매개변수 에러는 없어졌지만 밑에if (!user) { // 로직 실패 (유저가 없을 때) return res.redirect(`/?loginError=${info.message}`); }여기에서 info에선 "(parameter) info: string | object | (string | undefined)[] | undefined개체가 'undefined'인 것 같습니다.ts(2532)" 에러가 뜨고 message에선 "'string | object | (string | undefined)[]' 형식에 'message' 속성이 없습니다.'string' 형식에 'message' 속성이 없습니다.ts(2339)"에러가 떠서if (!user) { // 로직 실패 (유저가 없을 때) const infoWithMessage = info as { message: string }; return res.redirect(`/?loginError=${infoWithMessage.message}`); }이런식으로 타입에러 처리를 해줬습니다.그런데 테스트 코드 짤 때 100%가 나왔다 하더라도 의미없는 테스트 코드를 짤 수 있다고 경고하신 것처럼 이것도 타입스크립트 에러 처리를 해도 타입스크립트를 제대로 활용해서 타입 명시를 한 것인지, 아니면 그냥 에러 지우기만을 위해서 꼼수를 부린 것인지 어떻게 판단해야 할 지 모르겠습니다. 위 경우에 제대로 사용한 것이 맞는지, 어떤 기준으로 제대로 TS를 사용했다 판단하는 것인지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
has,is 통일성
트루,펄스를 논하는 불리안 형태의 변수인 has,is을 한 api안에 has,is을 번갈아 써도 괜찮을까요?is으로만 써야 되거나 has로만 써야 되거나 그런 규칙은 없나요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
에러처리 미들웨어 타입 에러
질문1)app.use((err, req, res, next) => { res.locals.message = err.message; res.locals.error = process.env.NODE_ENV !== "production" ? err : {}; res.status(err.status || 500); res.render("error"); });이 부분에서 err, req, res, next 매개변수에 각각 "매개 변수에는 암시적으로 'any' 형식이 포함됩니다.ts(7006)" 에러가 떠서const errorHandler: ErrorRequestHandler = (err, req, res, next) => { console.error(err); res.locals.message = err.message; res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; res.status(err.status || 500); res.render('error'); }; app.use(errorHandler);이런식으로 타입을 달아줬는데 깃허브에선 errorHandler 분리까지만 되어있고 따로 타입을 달아놓지 않았더라고요. 이건 다른 방법으로 처리하셨나요?질문2) @types/express 설치했는데 왜 해당 에러처리 미들웨어에서만 타입 적용이 되지 않은 것이죠?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
<코멘트달기 section> boardId 오류
import { useState } from "react"; import CommentPageUi from "./BoardCommentWrite.presenter"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT } from "./BoardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/BoardCommentList.queries"; export default function CommentPage () { const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [contents, setContents] = useState(""); const [createBoardComment] = useMutation(CREATE_BOARD_COMMENT) const router = useRouter; const onChangeWriter = (event) => { setWriter(event.target.value) } const onChangePassword = (event) => { setPassword(event.target.value) } const onChangeContents = (event) => { setContents(event.target.value) } const onClickSubmit =async() => { try { await createBoardComment ({ variables : { createBoardCommentInput: { writer : writer, password : password, contents : contents, rating: 0, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId : router.query.boardId}, }, ], }); } catch (error) { alert(error.message); } alert("정상적으로 댓글이 달렸습니다.") } return ( <CommentPageUi onChangeWriter = {onChangeWriter} onChangePassword ={onChangePassword} onChangeContents ={onChangeContents} onClickSubmit = {onClickSubmit} contents={contents} > </CommentPageUi> ) }comment write import { gql } from "@apollo/client"; export const CREATE_BOARD_COMMENT = gql` mutation createBoardComment( $createBoardCommentInput: CreateBoardCommentInput! $boardId: ID! ) { createBoardComment( createBoardCommentInput: $createBoardCommentInput boardId: $boardId ) { _id } } `;comment write queryimport { gql } from "@apollo/client"; export const FETCH_BOARD_COMMENTS = gql` query fetchBoardComments($boardId: ID!) { fetchBoardComments(boardId: $boardId) { _id writer contents createdAt rating } } `;comment list queryimport { useQuery } from "@apollo/client" import { FETCH_BOARD_COMMENTS } from "./BoardCommentList.queries" import { useRouter } from "next/router" import BoardCommentListUI from "./BoardCommentList.presenter" export default function BoardCommentList() { const router = useRouter() const {data} = useQuery(FETCH_BOARD_COMMENTS, { variables: {boardId : router.query.boardId} }) return ( <BoardCommentListUI data={data} /> ) }comment list폴더명 에러1에러2둘 다 boardId와 관련있고, 내용으로 봐서는 boardId에 값이 없는 것 같은데, 코드를 아무리 봐도 문제점을 모르겠네요.. 문제가 뭘까요 ???
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
설명하시는 소스 git 주소 어디에 있을까요
설명하시는 소스 git 주소 어디에 있을까요커뮤니티 검색해 봤는데 안나오네요...
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
12.4 room.find is not a function/room.create is not a function 이 출력됩니다.
몽구스 연결하고, 실행하면, 연결성공 메시지까지 뜨는데, 접속하면 room.find is not a function이 출력됩니다. const Room = require('../schemas/room")을 const {Room}이나 const {Room, roomSchema}로 바꾸는 걸 해봐도 해결되진 않습니다.제 생각으로는 schemas/room 과 controller의 index가 제대로 연결되지 않는것으로 보이는데 어떻게 접근하면 좋을까요?
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
typeorm 설치하고 설정하는 강의가 어떤건지 알려주세요!
안녕하세요. 제로초님의 강의를 다 들었었는데요.typeorm 설치하고 설정하는 강의가 있었던 것 같은데 어떤 강의인지 알려주실 수 있나요??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
posts.js 라우터 파일에 문제가 생겼습니다
const express = require('express'); const { User, Post, Image, Comment } = require('../models'); const router = express.Router(); console.log(Post); // undefined router.get('/', async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, order: [ ['createdAt', 'DESC'], [Comment, 'createdAt', 'DESC'], ], include: [{ model: User, attributes: ['id', 'nickname'], }, { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'], }], }, { model: User, as: 'Likers', attributes: ['id'], }], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router;posts.jsconst express = require('express'); const cors = require('cors'); const passport = require('passport'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const morgan = require('morgan'); const db = require('./models'); const passportConfig = require('./passport'); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); const postsRouter = require('./routes/posts'); dotenv.config(); db.sequelize.sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); const app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cors({ origin: true, credentials: true, })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, })); app.use(passport.initialize()); app.use(passport.session()); app.use(morgan('dev')); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('3065포트 서버실행중'); });app.js(node:4192) Warning: Accessing non-existent property 'User' of module exports inside circular dependency (node:4192) Warning: Accessing non-existent property 'Post' of module exports inside circular dependency // 생략영상보면서 코딩중에위 문구와 함께 ../models에서 require한 것이존재하지 않는 문제가 발생했습니다.const { Post } = require('../models')console.log(Post) 출력결과 undefined 입니다이 문제가 posts.js 파일에서만 발생했습니다.(user.js, post.js는 정상)그래서 postss.js 라는 이름이 다르고 코드만 옮긴 파일을 만들어서 다시 시도해보았습니다.(rename시 module not found 에러 발생)그랬더니 ../models에서 require 한것이 존재했습니다.근데 요청시라우터(method: get, url: /posts)의 미들웨어가 실행이 안되는 문제가 있었습니다.상태코드는 300 Multiple Choices 였습니다이번에는 url를 바꿔서 요청을 보냈습니다ex) /posts/test그랬더니 성공했습니다.왜 이런 현상이 발생했는지어떻게 해결할 수 있는지 모르겠어서 질문남깁니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
node server.js 실행 시 오류 발생
Express에서 데이터 처리하기 강의 수강 중에 생긴 오류 입니다. 이후에 포스트맨에서 body 수정 후 send 시에도 Error: connect ECONNREFUSED이 오류가 떳습니다.index.js를 실행 후에 웹 브라우저에 http://localhost:8080/products 입력하면 [{"name":"농구공","price":5000}] 이렇게 웹 화면에 뜨면서 node:events:492 thorw er;도 같이 뜨면서 서버 에러가 납니다 database.sqlite3을 vs코드 열었을 때는 위 사진처럼 뜨고sqllite로 열었을 때는 읽을 수 없다고 뜹니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정하기 뮤테이션
안녕하세요 선생님 !하나 궁금한 점이 있어서 질문 드려요.게시물 수정할 때, 기존에 입력한 값이 사라지고 수정한 내용만 남는 문제가 발생해, 수정하기 버튼을 눌렀을 때 기존 값도 남아있고, 수정한 내용도 체인지 돼서 나오게끔 하는 부분을 공부중입니다.(이미지는 강의내용 캡쳐입니다)궁금한 게, 이렇게 코드를 적용하고 게시물을 수정하면 바뀐 내용들만 뮤테이션이 날라간다는 건 이해 하겠는데 기존에 입력한 값들이 안 사라지고 출력되는 건 이해가 쉽지 않네요.. !! 어차피 writer,title,contents 스테이트는 수정된 게 없으니 빈 값 아닌가요 ? 빈 값인데 초기값이 나온다는 게 ..ㅠㅠ 미리 답변 감사합니다 선생님.
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
ES모듈 전환 질문
제가 지금까지 이해한 바로는, esModuleInterop를 true로 설정하면 CommonJS모듈에서 내보내기 한 것들을 ES모듈의 내보내기 한 것으로 변환 시켜주는데 CommonJS에선 module.exports나 exports.변수 나 둘 다 하나의 객체로 담겨져 보내지니 ES모듈의 내보내기로 전환될 땐 무조건 Default Export 방식으로 전환되는 것으로 알고있습니다. 그래서 ES모듈로 가져오는 것으로 바꿔줄 때에도 그냥 Default Export 를 가져오는 방식으로만 변환해주면 되는 것으로 아는데 const { Strategy: LocalStrategy } = require("passport-local"); 이 부분을import { Strategy as LocalStrategy } from "passport-local"이렇게 Named Export를 가져오는 방식으로 바꾸는 것이 가능한 게 이해가 되질 않습니다.import Strategy as from "passport-local" 이렇게 가져와서 따로 구조분해를 해야 하는 것이 아닌가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useState() 데이터 추가 성능 질문
안녕하세요! React에서 useState()를 사용하여 배열과 같은 데이터 구조에서 자료를 추가하는 경우,다른 언어같은 경우 원소 하나만 추가하는 시간복잡도가 O(1)으로 수행하는 함수가 있는데(C++의 append 혹은 push) React에서는 항상 [newItem,...data] 이런 식으로 원소 하나 추가할 때마다, 배열의 값을 모두 새로 만드는데, 데이터가 많아질 경우 시간복잡도가 O(n)으로 비효율적일 것 같습니다. 그래서 React에는 push()같은 방식으로 데이터를 추가하는 방법이 있나요? 없다면 없는 이유가 무엇인가요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
비지니스 로직 과 서비스
비지니스 로직 과 서비스가 같은 말인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
vscode 복사 단축키
파일 여러개 선택해서 다른 폴더에 복사 붙여넣기하는 단축키가 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
과제부분에 조건2에 대한 질문이요
freeboard_frontend 랜딩페이지를 만들어보세요 ( 접속 시 첫 화면 )라고 나와있는데 이 조건이 무엇을 의미하나요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
TS7016에러 질문
노드 모듈을 import할 때 발생하는 TS7016에러는 @types를 설치하니 사라졌는데 import pageRouter from "./routes/page"; import authRouter from "./routes/auth"; import postRouter from "./routes/post"; import userRouter from "./routes/user"; import passportConfig from "./passport";부분은 error TS7016: Could not find a declaration file for module './models'. 'C:/Users/mikg2/Desktop/project-ts/models/index.js' implicitly has an 'any' type. 에러가 발생하는데 이것도 나중에 ts파일로 바꿔주면 사라지는 에러인가요? 그리고 제로초님 영상과는 달리 제 컴퓨터에서만 왜 해당 에러가 뜨는 건지 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
npm run dev 실행시 오류
boiler plate가 설치된 폴더경로가 지정된 상태에서npm run dev를 입력했고 아래와 같은 오류가 뜹니다npm ERR! Missing script: "dev"npm ERR!npm ERR! To see a list of scripts, run:npm ERR! npm runnpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\user\AppData\Local\npm-cache\_logs\2023-08-17T13_33_04_142Z-debug.logconcerently 도 설치했고 package.json에 아래 처럼스크립트 dev 설정도 잘 되어 있는데 왜 에러가 뜨는건가요 "scripts": { "start": "node server/index.js", "backend": "nodemon server/index.js", "frontend": "npm run start --prefix client", "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" },
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
한국어 글자
안녕하세요. 변수명에 한국 글자로 데이터를 저장하고 브라우저에서 보여 주려면 이상하게 보이고 있어여. 어떻게 하면 보여요?