안녕하세요..강의 자료나 강의 때 사용하는 소스는 어디서 받을 수 있을까요?아무리 찾아봐도 없네요.알려주세요 ^^감사합니다.

const products 에서 products는 result.data.products를 담기 위해 선언한 products 이므로 위에서 선언한const [products, setProducts] 에서의 products 와 다른 것이 맞나요?또 setProducts() 안에 들어가는 products를 넣은 것은 const[products, setProducts] 에서의 products에 const products에서의 products를 대입하기 위해 넣은 것으로 보면 되나요?즉, const products = result.data.products;setProducts(products); 를 setProducts(result.data.products); 라고 해도 문제가 없는 건가요?

main/index.js에서 컴포넌트 함수명(MainPage)와 App.js에서 import 하는 함수명(MainPageComponent)가 달라도 괜찮은 이유가 뭔가요?혹시 한 js파일에서는 export를 한 개의 컴포넌트만 할 수 있어서 그런건가요?(컴포넌트는 여러개 만들어도 문제가 괜찮던데 export를 2번 쓰니까 빨간줄이 생겨요.)

useEffect의 두번째 파라미터에는 useState로 인해 할당된 변수인 time만 쓸 수 있는건가요?function TimerComponent() { const [time, setTime] = React.useState(0); const cnt = 0; React.useEffect(function() { setTime(time+1); }, [cnt]); return ( <div> <h3>{time}초</h3> <button onClick={function() { cnt++; }}>1씩 올려주세요.</button> </div> ); }이런식으로 사용이 안되는건가요?

안녕하세요. 항상 좋은 강의를 해주셔서 감사합니다.다름이 아니라 글 작성시 콘솔에 ADD_POST_REQUEST에 대한 리듀서 작동은 확인했으나 그 뒤에 addPost 사가가 작동하지 않는 것에 대해 질문이 있습니다.위 문제는 watchAddPost()가 정상적으로 ADD_POST_REQUEST에 대한 이벤트를 캐치하지 못 해서 다음 과정이 진행되지 않는 것이라고 생각합니다. 다만 콘솔에서는 이에 대한 것도 뜨지 않아 해당 오류를 해결하기 어려워 질문 드립니다.다음은 제가 작성한 코드입니다. ()@/component/PostFrom.jsconst PostForm = () => { const dispatch = useDispatch(); const { imagePaths, addPostDone } = useSelector((state) => state.post); const [text, onChangeText, setText] = useInput(""); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); ... }@/reducer/post.jsexport const initialState = { mainPosts: [...], ... addPostLoading: false, addPostDone: false, addPostError: null } export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); const dummyPost = (data) => ({ id: 2, content: data, User: { id: 1, nickname: "윤섭", }, Images: [], Comments: [], }); const reducer = (state: initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log("REDUCER: ADD_POST_REQUEST"); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: console.log("REDUCER: ADD_POST_SUCCESS"); return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; ... } }@/sagas/post.jsimport { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE, } from "@/reducers/post"; // add post function addPostAPI(data) { return axios.post("/api/post"); } function* addPost(action) { try { // const result = yield call(addPostAPI); yield delay(1000); console.log("SAGA: addPost"); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchAddComment)]); }아래는 ADD_POST_REQUEST 이후 아무런 반응이 없는 스크린샷입니다.

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 파일이 생기는데 왜 한번 더 빌드를 해주는건가요?

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/ 들어갔더니이런 오류가 뜨면서 안됩니다.유저를 왜 읽지 못하는 걸까요?오류 해결하고 싶습니다 ㅠ 

제가 이번에 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를 사용하는 것이 일반적인지 의견을 듣고싶습니다. 

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란 함수를 어떻게 설정하는지 잘 이해가 안되서 질문드립니다

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> )}

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

"multer-s3": "^2.10", "@types/multer-s3": "^2.7.12",  버전은 위처럼 깔아주셔야 강의와 호환될것같습니다.

안녕하세요 json부하테스트중에 에러표시나서 방화벽들어가서 mysql포트 확인하고 3306설정했는데 안되서 포트80도해보고 했는데 에러표시만뜹니다https://binshuuuu.tistory.com/m/214제가 따라한 설정입니다

 refreshToken 은 DB에 저장을 따로 안해도 되나요?

안녕하세요 제로초님 강의 잘 듣고 있습니다 .제가 댓글 구현하기까지 잘 진행하던중 Comment가 antd에서 지원을 안해준다는 error가 발생하여 antd 버전을 강의와 맞게 다운그레이드 (npm i antd@4.16.1) 했습니다.근데 그 때 이후로 화면에 antd가 제대로 적용이 되지않은 상태가 되었습니다 . 다시 원래버전을 설치해도 같은 결과입니다 . Comment문제보단 화면에 antd가 다시 제대로 적용됬으면 합니다 . 혹시 해결방안이 있을까요?화면이 이런형식으로 바뀌였습니다. 코드는 지금까지 강의와 똑같이 진행하였습니다package.json