작성된 코드는 똑같은데 타이머가 작동하지 않아요 ㅠㅠ min과 sec 두 변수 모두 String으로 감싸줘보기도 하고 min "+" sec 부분을 String으로 감싸주기도 해봤는데 해결이 안돼요 let auth = () => { const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); document.getElementById("number").innerText = token; document.getElementById("number").style.color = "#" + token; let time = 180; setInterval(function () { if (time >= 0) { let min = Math.floor(time / 60); let sec = Stirng(time % 60).padStart(2, "0"); document.getElementById("timer").innerText = min + ":" + sec; time = time - 1; } else { document.getElementById("finish").disabled = true; } }, 1000); };

app.jsconst express = require("express"); const cookieParser = require("cookie-parser"); const morgan = require("morgan"); const path = require("path"); const session = require("express-session"); const nunjucks = require("nunjucks"); const dotenv = require("dotenv"); const { sequelize } = require("./models"); dotenv.config(); const pageRouter = require("./routes/page"); const app = express(); app.set("port", process.env.PORT || 8001); app.set("view engine", "html"); nunjucks.configure("views", { express: app, watch: true, }); //force:true로 할 시 서버 재시작시 모든 데이터베이스 날리고 다시 시작, true는 개발용 sequelize .sync() .then(() => { console.log("데이터베이스 연결 성공"); }) .catch((err) => { console.error(err); }); app.use(morgan("dev")); app.use(express.static(path.join(__dirname, "public"))); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, }, }) ); app.use("/", pageRouter); app.use((req, res, next) => { const error = new Error(`${req.method} ${req.url} no exist router.`); error.status = 404; next(error); }); 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"); }); app.listen(app.get("port"), () => { console.log(app.get("port"), "waiting at the empty port."); }); index.js const Sequelize = require("sequelize"); const fs = require("fs"); const path = require("path"); const env = process.env.NODE_ENV || "development"; const config = require("../config/config.json")[env]; //설정 불러오기 const db = {}; const sequelize = new Sequelize( //불러온 설정을 시퀄라이즈와 연결하는 부분 config.database, config.username, config.password, config ); const basename = path.basename(__filename); //index.js fs.readdirSync(__dirname) .filter((file) => { return ( file.indexOf(".") !== 0 && // .으로 시작하는 파일은 숨김 파일이라는 의미 그래서 제외 file !== basename && //현재 파일인 index.js는 제외 file.slice(-3) === ".js" //마무리로 확장자가 .js인 파일만 불러오기 ); }) .forEach((file) => { const model = require(path.join(__dirname, file)); console.log(file, model.name); db[model.name] = model; //model.name은 model파일에서 class의 이름과 동일함 model.initiate(sequelize); }); Object.keys(db).forEach((modelName) => { //위에서 initiate할 때 같이 associate까지 하면 되지 않냐라고 할 수 있지만 associate는 모든 파일을 initiate해주고 해야함 console.log(db.modelName); if (db[modelName].associate) { db[modelName].associate(db); } }); module.exports = db; //시퀄라이즈와 그의 모델들은 자주 사용하니까 서로 묵어서 exports 해줌 언제어디서든 쓸 수 있게 .sync() ^TypeError: Cannot read properties of undefined (reading 'sync') at Object.<anonymous> (C:\Users\zzan9\OneDrive - dgu.ac.kr\nodejs\nodebirdSNS2\app.js:22:6) at Module._compile (node:internal/modules/cjs/loader:1267:14) at Module._extensions..js (node:internal/modules/cjs/loader:1321:10) at Module.load (node:internal/modules/cjs/loader:1125:32) at Module._load (node:internal/modules/cjs/loader:965:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) at node:internal/main/run_main_module:23:47Node.js v20.1.0  이런 오류가 뜨는데 왜 뜨는지 모르겠습니다.. 검색해도 답이 나오지 않길래 질문드립니다

안녕하세요!배포 강좌를 보면서 궁금한점이 생겨서 질문을 남깁니다.배포를 할때 nest build 명령어로 빌드를 하고 서버에 풀을 받아서 서버를 start를 하게 되는데요그런데 npm run start:dev를 하면 개발시에 dist 파일이 생기는데 왜 한번 더 빌드를 해주는건가요?

12장 프로젝트는 sequelize로도 구현이 가능할 텐데, seqeulize 대신 mongoose를 사용하신 이유가 궁금합니다. mongoose를 사용하는 것이 더 좋은 성능을 보이나요?

강사님 안녕하세요!다름이 아니라 firebase 데이터 업데이트 하는 부분이 막혀 질문하려고 합니다.아래 사진은 Firebase 데이터 업데이트 함수와 발생하는 에러 사진입니다.해당 문제를 해결할 수 있게 도움 부탁드립니다 ㅠㅠ해당 오류 해결하기 위해 firebase 룰을 변경했는데도 해결되지 않았습니다.  

선생님, 안녕하세요! 좋은 강의 정말로 감사드립니다!이번 강의를 보면서, 궁금한 게 생겼는데요.이번강의에서 인덱스를 생성하면서, 탐색속도가 훨씬 빨라진다는 걸 알게되었습니다. 기존에 생성되어있는 (인덱스가 걸려있지 않은)데이터들에도 인덱스를 걸어주면 더 빨라지는 걸로 보이는데요. 그런데, 이번 강의에서 인덱스를 걸고 데이터를 생성하면, 인덱스를 걸지않았을 때보다 생성시간이 오래걸리는 부분이 있었습니다. 그렇다면 기존에 인덱스가 걸려있지않은 데이터들에 새로 인덱스를 걸 때는 기존 데이터들에 인덱스를 새로 걸어주는 건가요?

http://localhost:3000/에 뜬 오류Server ErrorTypeError: Cannot read properties of undefined (reading 'user')This error happened while generating the page. Any console logs will be displayed in the terminal window.Sourcecomponents/AppLayout.js (15:52) @ eval 13 | 14 | const AppLayout = ({ children }) => { > 15 | const isLoggedIn = useSelector((state) => state.user.isLoggedIn); | ^ 16 | // const { isLoggedIn } = useSelector(state => state.user); 17 | 18 | return (Call StackAppLayoutcomponents/AppLayout.js (15:36)Show collapsed frames  터미널에 뜬 오류TypeError: Cannot read properties of undefined (reading 'user')at eval (webpack-internal:///./components/AppLayout.js:32:101)at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/react-redux/lib/hooks/useSelector.js:67:26 npm run dev를 하고http://localhost:3000/ 들어갔더니이런 오류가 뜨면서 안됩니다.유저를 왜 읽지 못하는 걸까요?오류 해결하고 싶습니다 ㅠ 

강사님 안녕하세요, 혹시 밑에 질문했는데 제가 잘못 말을 전달한것 같아서요비로그인일때는 피그마에서 작성자, 비밀번호를 입력하게 나타나는데로그인일때는 작성자, 비밀번호를 입력 못하게 나타나더라고여 근데 playground 가보면 파라미터를 받는곳을 보면 user 정보를 받는 파라미터가 없더라구요그래서 fetchBoard를 들어가서 user정보를 가져와도 null값이 나옵니다.그럼 피그마에 있는 저거는 로그인유저도 비로그인유저 화면으로 만들어야하나요?

제가 이번에 loadPosts를 createAsyncThunk로 구현하면서 createAsyncThunk의 진행 순서가 궁금해서 질문 드립니index.js useEffect(() => { console.log("dipathch hi"); dispatch(loadPosts(10)); }, [dispatch]);reducers/post.js export const loadPosts = createAsyncThunk(LOAD_POST, async (data) => { trottle(); return data; }); const trottle = () => listenerMiddleware.startListening({ type: LOAD_POST, effect: async (action, listenerApi) => { listenerApi.unsubscribe(); console.log("Original state ", listenerApi.getOriginalState()); await listenerApi.delay(5000); console.log("Current state ", listenerApi.getState()); listenerApi.subscribe(); }, }); const postSlice = createSlice({ name: "post", initialState, extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.post, })) // loadPosts .addCase(loadPosts.pending, (state, action) => { state.loadPostsLoading = true; state.loadPostsDone = false; }) .addCase(loadPosts.fulfilled, (state, action) => { action.payload = generateDummpyPost(action.payload); state.mainPosts = action.payload.concat(state.mainPosts); state.hasMorePost = state.mainPosts.length < 50; state.loadPostsLoading = false; state.loadPostsDone = true; }) .addCase(loadPosts.rejected, (state, action) => { state.loadPostsLoading = false; state.loadPostsError = action.error; }) .addDefaultCase((state) => state), });제가 하나하나 console.log를 찍어서 확인한 진행 순서를 얘기해 드리겠습니다일단 화면을 처음 랜더링할때 index.js에서 dispatch가 제일 먼저 실행됩니다 그리고 post.js로 넘어와서 loadPost.pending -> loadPosts.fulfilled ->loadPosts = createAsyncThunk(LOAD_POST) 이 순서대로 진행이 됩니다 그래서 loadPosts.fulfilled에 generateDummpyPost()함수를 작성한 것입니다그래서 마지막에 createAsyncThunk가 실행이 되니 return이 필요없지 않나? 라는 생각에 return을 지워봤더니 post가 하나만 작성되고 그 이후는 작성되지 않았습니다제가 궁금한 부분은 세개입니다createAsyncThunk의 정확한 진행순서가 궁금합니다generateDummpyPost()함수를 저렇게 작성하는게 맞는지 궁금합니다https://blog.logrocket.com/redux-toolkits-new-listener-middleware-vs-redux-saga/ 에서 Throttling관련 얘기가 있어서 똑같이 따라 해봤는데 쓰로틀링을 createAsyncThunk에 장착하는 방법을 잘 모르겠습니다 쓰로틀링이 없어도 윈도우 이밴트로 요청이 한번에 많이 오는 현상은 없지만 그래도 궁금해서 질문 드립니다 

안녕하세요. 강사님 좋은 강의 감사드립니다.로그인 시 인증 방법에 대하여 질문있습니다. 1. 로그인 할때 session 식별자를 쿠키와 함께 클라이언트에 전해주는 코드가 어떤 것인지 궁금합니다.로그인시 local-strategy가 실행되면 맨 마지막에 serializeUser에 user.id만 세션에 저장해 놓고 필요할때마다deserializeUser에서 userid를 뽑아올 수 있잖아요? 여기까지는 이해했습니다.그런데 로그인을 성공하면 어떤 코드에서 cookie가 session식별자를 프론트에 전달해주는지 궁금합니다.main.ts에서 app.use(cookieParser()); app.use( session({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, }, }), ); app.use(passport.initialize()); app.use(passport.session());이 코드를 설정했기 때문에 로컬 전략 후 자동으로 쿠키를 통해 세션을 프론트에 전달해주는 것인지 궁금합니다.2. 웹이 아닌 모바일 앱에서 인증 시 백앤드 서버쪽에서 express-session과 passport를 사용하여 인증하는 것이 일반적인지 궁금합니다.모바일은 쿠키가 없기 때문에 쿠키세션은 사용하지 못하더라도 쿠키말고 body에 session 식별자를 보내주어서인증이 가능하지 않을까 라는 의문이 들었습니다.구글 검색결과 "된다 or 안 된다. 모바일앱에서는 passport나 session을 사용하지 않는 것이 좋다." 라는 의견이 있어서 헷갈립니다.모바일앱에서는 passport와 session을 사용하지 않고 jwt를 사용하는 것이 일반적인지 의견을 듣고싶습니다. 

4분 15초경부터 25초까지 잡음이 들려서 강의 소리가 잘 안들리네요참고하시면 좋을 것 같습니다.

안녕하세요 강의 재밌게듣고있습니다.섹션34 강의 전부듣고 rest, graphql, nginx에서 각각 실습했는데 문제가 생겨 질문드립니다.일단 도커 빌드와 실행은 3개다 정상적으로 되지만 포스트맨과 크롬에서는 아예 접속이 안됩니다.포트를 확인해봤는데 rest는 정상적으로 포트연결이 되어있고 graphql과 nginx는 포트도 안 잡힙니다.코드도 강의랑 같고 버전도 강의대로 했는데 뭐가 문제인지 모르겠네요...뭘 확인해봐야할까요..?? 

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.- options.allowedHosts[0] should be a non-empty string.client 부분에서 실행시 요런오류가나옵니다.1. 시도해본것allowedHosts 옵션관련을 찾기위해 client node_modules./webpackDevServer.config.jsallowedHosts: disableFirewall ? 'all' : [allowedHost], ->확인했을떄 빈문자열이아닌데 왜 이런오류가나오는지..?해결책이궁금합니다.2. 시도해본것 ...client 단 proxy 설정을 지워주면 동작함.->해결.혹시에러원인이 무엇이엿을지 궁금합니다.

초반에 npm install을 할 때 ERR가 떴었는데, 이 부분 찾아보니 모듈 다운 승인을 해줘야 하기 때문에 앞에 sudo를 입력하고 하면 된다고 해서 그 부분은 해결을 하였습니다! 그런데 중간 중간 Install 과정에서 계속해서 ERR가 떠서 그때마다 sudo를 입력하고 하고 있는데, 제목처럼 이런 승인 절차 없이 강사님처럼 바로바로 인스톨 되게 하는 방법을 알 수 있을까요??(강의와 똑같이 진행이 안되는 느낌이 들어서 괜히 불안해서 질문 남겼습니다!! 감사합니다!)

아래 질문(reduxjs/toolkit 에서 loadPost 한번만 가게하기)에서 비슷한 내용의 질문이 올라왔는데delay란 함수를 어떻게 설정하는지 잘 이해가 안되서 질문드립니다

선생님, 안녕하세요. 좋은 강의 너무 감사드립니다. 답변도 잘해주셔서 너무 감사드려요!이번 강의를 들으면서,Blog.updateMany( { "comments.user": userId }, { $pull: { comments: { user: userId } } } )이 구문이 나왔는데요. 여기서 updateMany의 첫번째 변수인{ "comments.user": userId },는 comments배열의 user가 userId인 객체를 찾는거고,{ $pull: { comments: { user: userId } } }여기서도 comments배열안의 user가 userId인 객체를 찾는 거라서, 사실상 같은거를 두번 써준 게 아닌가요??그래서 const [user] = await Promise.all([ User.findOneAndDelete({ _id: userId }), Blog.deleteMany({ "user._id": userId }), Blog.updateMany( { "comments.user": userId } // { $pull: { comments: { user: userId } } } ), Comment.deleteMany({ user: userId }), ]);이런식으로 updateMany의 두번째 변수만 Blog.updateMany( { "comments.user": userId } // { $pull: { comments: { user: userId } } } ),이런식으로 주석처리를 해줬습니다. 그러자 { "err": "Cast to ObjectId failed for value \"2023-07-03T10:17:04.313Z\" (type Date) at path \"user\" because of \"BSONError\"" }이런 에러가 나왔어요. 그래서 확인해보니, User.findOneAndDelete({ _id: userId }), Blog.deleteMany({ "user._id": userId }), Comment.deleteMany({ user: userId }),updateMany말고 다른 구문들은 다 실행이 됬더라구요. 그래서 user도 삭제되고 블로그도 삭제되고, comment도 삭제되었지만 blog안의 user가 작성한 comment는 pull되지 않아서 그대로 남아있었습니다. 그런데 여기서 궁금한게, promise.all로 묶어서 같이 실행하면, 하나라도 에러가 나면 바로 실행을 중단하고 에러를 배출한다고 배운 것 같은데, Blog.updateMany의 아래 구문인, Comment.deleteMany가 실행됬더라구요. 트랜잭션까지는 아니더라도 updateMany에서 에러가 나면 Comment.deleteMany는 실행이 안될 줄 알았는데, 이거까지 실행된 거를 보면, Promise.all에서는 전부 순서없이 비동기로 동시에?실행되는 걸까요?

useEffect(() => { function onScroll() { console.log( window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight ); if ( window.scrollY + document.documentElement.clientHeight === document.documentElement.scrollHeight ) if (hasMorePost) { const dummypost = generateDummpyPost(10); dispatch(loadPost({ dummypost })); } } window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, [hasMorePost]);useEffect를 이런 식으로 작성하면 hasMorePost의 값이 변경되기 전까지 useEffect는 처음 단한번만 실행된후 그후에는실행되지 않아야 하는데 왜 계속 console.log가 실행되는건가요?

댓글 구현하기 수강 중에 제로초님께서 antd의 <Comment />를 import 하여 적용하는데 안 되시는 분들은 List.Item과 List.Item.Meta를 이용해서 만들어보세요. 제 경우 antd를 최신버전으로 사용하고 있는데 공식문서를 보니 Comment는 없습니다. 대신 List 컴포넌트에 List.Item과 List.Item.Meta가 있는데 이걸 이용해 댓글 컴포넌트를 만들 수 있습니다. {commentFormOpened && ( <div> <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( // 강의에서는 <li></li>로 사용하고 있습니다. <List.Item> {/* 강의에서는 <Comment />로 사용하고 있습니다. */} <List.Item.Meta // author => title로, content => description으로 적용하면 강의에서 보는 UI와 똑같아요. title={item.User.nickname} avatar={<Avatar>{item.User.nickname[0]}</Avatar>} description={item.content} /> </List.Item> )} /> </div> )}

강사님 안녕하세요, 혹시 로그인 유저가 자유게시판 작성하기 할때작성자, 비밀번호등... 필요하잖아요근데 비밀번호는 로그인 유저가 한 비밀번호를 가져와야 하는데 이걸 localStorage, session에해버리면 보안상 문제가 생기지않나요? 지금은 그냥 localStroage, session 이런곳에 유저 비밀번호를 저장해놓을까요?

레인지피커의 값을 받아오려는데 e.target.value를 하면 Cannot read properties of undefined (reading 'value')이런 오류가 떠요구글링도 해봤는데 어떻게 알수 있는 방법 없을까요?레인지피커는 파란색 박스에요