구구단 부터 똑같이 따라하는 중인데 페이지가 나오는데 계속 무한으로 새로고침해서 나와요 정답을 쓰기도 전에요.. 왜 이런걸까요?

안녕하세요! 현재 몽고DB로 백엔드 설정 중인데 강의를 따라가던중이런한 에러로 진행을 못하고 있습니다. 문제원인은 await가 async함수안에 들어가 한다고 하는데 강의에서는 async를 쓰는걸 본적이 없는데 문제를 어떻게 해결해야하나요?

강의에 나오는 노션 링크는 어디에서 확인할 수 있나요?

//app.js app.use('/', express.static(path.join(__dirname, 'uploads'))); //PostForm.js import { Button, Form, Input } from 'antd'; import React, { useCallback, useEffect, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import useInput from '../hooks/useInput'; import { ADD_POST_REQUEST, REMOVE_IMAGE, UPLOAD_IMAGES_REQUEST, addPost, } from '../reducers/post'; const FormWrapper = styled(Form)` margin: 10px 0 20px; `; const ButtonStyle = styled(Button)` float: 'right'; `; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector( (state) => state.post ); const dispatch = useDispatch(); const imageInput = useRef(); const [text, onChangeText, setText] = useInput(''); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmitForm = useCallback(() => { if (!text || !text.trim()) { return alert('게시글을 작성하세요.'); } const formData = new FormData(); imagePaths.forEach((p) => { formData.append('image', p); }); formData.append('content', text); return dispatch({ type: ADD_POST_REQUEST, data: formData, }); }, [text, imagePaths]); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); const onChangeImages = useCallback((e) => { console.log('images', e.target.files); //배열모양을 띄는 객체 const imageFormData = new FormData(); [].forEach.call(e.target.files, (f) => { imageFormData.append('image', f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); const onRemoveImage = useCallback( (index) => () => { dispatch({ type: REMOVE_IMAGE, data: index, }); }, [] ); return ( <FormWrapper encType='multipart/form-data' onFinish={onSubmitForm}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='어떤 신기한 일이 있었나요?' /> <div> <input onChange={onChangeImages} type='file' name='image' hidden multiple ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <ButtonStyle type='primary' htmlType='submit'> Twit </ButtonStyle> </div> <div> {imagePaths.map((item, i) => ( <div key={item} style={{ display: 'inline-block' }}> <img src={`http://localhost:3065/${item}`} style={{ width: '200px' }} alt={item} /> <div> <Button onClick={onRemoveImage(i)}>제거</Button> </div> </div> ))} </div> </FormWrapper> ); }; export default PostForm; //post.js const multer = require('multer'); const path = require('path'); const fs = require('fs'); const { Post, Image, Comment, User } = require('../models'); const { isLoggedIn } = require('./middlewares'); const router = express.Router(); try { fs.accessSync('uploads'); } catch (error) { console.log('uploads 폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } //이미지나 동영상처리는 웬만하면 프론트에서 클라우드로 바로 올리는게 좋다. const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads'); }, //배포때는 s3로 , 개발에는 드라이브에 filename(req, file, done) { const ext = path.extname(file.originalname); //확장자 추출 const basename = path.basename(file.originalname, ext); done(null, basename + '_' + new Date().getTime() + ext); //이나당151817842.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, //20MB }); router.post('/', isLoggedIn, upload.none(), async (req, res, next) => { // POST /post try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); if (req.body.image) { if (Array.isArray(req.body.image)) { const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { const image = await Image.create({ src: req.body.image }); await post.addImages(image); } } console.log('POST', post); const fullPost = await Post.findOne({ where: post.id, include: [ { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'] }], }, { model: User, //작성자 attributes: ['id', 'nickname'], }, { model: User, //좋아요 누른 사람 as: 'Likers', attributes: ['id'], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); router.post( '/images', isLoggedIn, upload.array('image'), async (req, res, next) => { //POST /post/images try { console.log(req.files); res.json(req.files.map((v) => v.filename)); } catch (error) { console.error(error); next(error); } } );   안녕하세요 제로초님! 질문이 있습니다.. 파일은 제대로 올라가서 uploads 폴더안에 있는데 화면에서 이미지를 가져오지 못하고있습니다.. 프론트-백 api통신도 잘 되는데, 왜 개발자도구-네트워크에서 이미지를 가져올 수 없는지 이유를 모르겠습니다 ㅠㅠ

수업에서 async await를 쓰게 되면,await 뒤쪽 함수가 실행 된 후, await를 보자마자 어? 오래걸리겟네? 하면서 스레드가 해당 async함수를 통째로 마이크로큐에 넣어버린다고 말씀하셨는데요.만약 await뒤의 함수가 Promise를 반환하게 되면, 해당 Promise를 반환하는 함수가 먼저 큐에 쌓이고, 그 뒤에 async함수가 들어가서 pipo구조에 따라, promise가 반환된 후 async함수가 실행되면서 기다리는것처럼 보인다고 말해주셨습니다. 근데... 이 말 대로라면, await 함수 뒤에 굳이 Promise가 올 필요가 있나요? XMLHttpRequest()가 오더라도, 콜스택에서 해당요청이 실행된 후, 결과값을 가진 상태에서 마이크로큐로 들어가니까, 똑같이 await가 되는게 아닌지요? 분명 순차적으로 수업을 들으면서 다 이해햇다고 생각햇는데갑자기 헷갈립니다.

안녕하세요.데이터 추가 기능 구현 중 오류가 생겼는데, 여러번 들어봐도 어디서 놓쳤는지 알수 없어서 문의드립니다.저장 성공 얼럿이 뜬 후 diaryList.map is not a function 오류가 발생하는데 이유가 뭘까요ㅠㅠ? 올려주신 코드와 비교해봐도 잘못 작성된 부분을 찾지 못해서.. 확인 부탁드립니다!https://codesandbox.io/p/sandbox/dawn-silence-dtzj4w?file=%2Fsrc%2FApp.js%3A5%2C1 감사합니다.

정환님 안녕하세요.지난번에 동일한 문제로 문의 드렸었는데, 아직 해결이 안되서 문제 재현에 대한 구체적인 정보 올립니다. (댓글문의는 알림이 안가서 확인이 늦어지는 것 같아서요) 문제)첫번째 일기를 쓰고, 이후 두번째 일기를 쓰고 나서 두번째 일기를 수정하면수정된 두번째 일기와 동일한 일기가 생성이 됩니다.이후 세번째, 네번째 일기를 쓰고 마찬가지로 수정을 하면 수정된 일기와 동일한 일기가 생성이 됩니다그럼 확인부탁드리겠습니다.🥲  

구글 웹에서 콘솔창을 켜면 계속 이 오류 화면이 뜨는데, 처음에는 무시하고 진행했는데 몇 달간 계속 뜨고 타이머 실습할 때 조금 끊기는 것 같기도 해요ㅜㅠ GPT에 물어보니까 권한이 적절치 않다고 하는데 어떻게 해결할 수 있는 건가요??ㅜㅜ

하단에 다른분이 글 남겨주신것 확인하고cmd 들어가서 node.js가 잘 설치되었는지도 확인했습니다그런데 터미널상에서 node index.js만 연결하려고하면 계속 오류가 뜹니다 ㅠㅠ다시 설치해도 오류는 같습니다...왜그럴까요?ㅠㅠ처음 터미널을 오픈하면 강의에 나오는window powershell ~ 새로운 크로스 플랫폼~이 문장이 나오지 않는데 이부분에서 무언가 누락된것이 있을까요?

안녕하세요! 강의에서는 const getPost = (id) => {} 이거나 getPost(id) 이렇게 작성하셨던데 아래 제 코드랑 문법적으로 어떤 차이가 생기는지, 제 코드로 인해 문제가 발생할 일은 없는지 궁금합니다!const ShowPage = () => { const { id } = useParams(); const [post, setPost] = useState({}); const getPost = () => { axios.get(`http://localhost:3001/posts/${id}`).then((res) => { setPost(res.data); }) } useEffect(()=>{ getPost(); },[]) return ( <div> <div>{post.title}</div> <div>{post.body}</div> </div> ) };

ctrl+s 누를때마다 자바스크립트를 실행하도록 설정하고 싶은데 어떻게 해야할까요?

안녕하세요 선생님현재 chapter_03 진행 중인데요,jsx 실습 진행중인데,제 코드는 이렇구요, jsx는 이렇게 작성하였습니다. 그리고 npm start로 react-app 실행 시 요렇게 한글이 깨지는데요 혹시 해결 방안을 알 수 있을까요? 

import { useRouter } from 'next/router'; const Profile = () => { ... const router = useRouter(); if (!me) { router.push('/'); return null; } ... }이런식으로 하면 잘 동작해요~

input checkbox 에서onChange={() => this.handleCompleChange(data.id)}함수를 실행하게끔하는데 () => 는 왜들어가는걸까요? 예를들어 같은 방식의 함수중에 onChange={this.handleChange} 함수의경우엔 () => 가 없더라구요. 구현 부분은 똑같이 함수이름 = (파라미터) => {} 로 구현되어 있습니다.

8분 47초 까지 따라했는데, 오류가 뜹니다.import React, { useEffect } from 'react' import axios from '../api/axios' export default function Row({ isLargeLow, title, id, fetchUrl }) { useEffect (() => { fetchMovieData(); }, []); const fetchMovieData = async () => { const request = await axios.get(fetchUrl); console.log('request', request); }; return ( <div> </div> ) }  터미널에서는 아래와 같은 오류가 뜨고,WARNING in ./src/components/Banner.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/components/Banner.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (75:5) autoprefixer: start value has mixed support, consider using flex-start instead WARNING in [eslint] src/components/Row.js Line 7:8: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps webpack compiled with 2 warnings  아래는 크롬에서 뜨는 오류입니다.Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10290:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10334:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10391:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30265:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10290:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10334:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10391:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30265:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30243:18) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) at renderRootSync (http://localhost:3000/static/js/bundle.js:29408:11) at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:28900:24) at performConcurrentWorkOnRoot (http://localhost:3000/static/js/bundle.js:28812:26)

라우터 돔 사이트에서 베이직이 안보이는데 어떤걸 복사하면되는건가요?

타입스크립트 본수업은 문제없이 진행했는데 freeboard 부분을 진행하다가 api 관련 타입스크립트 설치 과정을 하는데 에러가 보입니다.. 이부분 혹시 뭐때문에 발생하는건지 확인 해주실 수 있으실까요ㅠㅠ

안녕하세요 수업 잘 듣고 있습니다!그런데 노션에 올려주신 수업자료 수강생들에게만 공개하신다고 하셨는데 제가 학습방법까지 들었는데 어떻게 접근하는지를 잘 모르겠어서 질문드립니당!

todo 앱에 대해 momo를 적용하기 전에, rendering 상태를 확인하는 것에서,강의화면상에서, 신규 문자 타이핑시에 전체(app, lists.list, form) 모두 컴포넌트가 랜더링이 되던데요. 저는 lists 컴포넌트만 랜더링이 됩니다.순차적으로 코드를 계속 따라서 하고 있었는데요.차이가 뭔지 모르겠습니다.[app.js][Lists.js][List.js][Form.js] ㅇ 새로고침시 디버그 콘솔화면ㅇ 텍스트 타이핑시 콘솔화면ㅇ '입력' 버튼 클릭 시 콘솔화면=>> 모두 Lists 컴포넌트만 랜더링이 표시됨.  

모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성 이 강의에서 useOnClickOutside custom hooks부분에서 event listener해제하는 부분이 addEventListener로 잘못되어 있내요