노드버드 깃허브 코드를 봤습니다 redux-saga와 redux 툴킷을 사용하신 프로젝트에서는 getServersideProps를 주로 쓰시고 react-query에서는 getstaticProps를 쓰셨던데 어째서 이런 차이가 있는건지 궁금합니다

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. node가 V18.14.2 버젼이고, npm이 9.5.0 버전인데 zsh: killed npx create-react-app ReactTest 라고 뜹니다 ㅠㅠ

 파이어베이스에서 업데이트나 삭제를 할때 그 문서의 id?(위의 사진의 글자)를 가져와서 변경을 해줘야하잖아요그런데 저 id를 어떻게 데이터와 함께 가져오는거죠..? const [boardsData, setBoardsData] = useState<DocumentData[]>([]); const [boardId, setBoardId] = useState<string[]>([]); const onClickShowBoards = async () => { const myBoard = collection(getFirestore(firebaseApp), "MyBoard"); const result = await getDocs(myBoard); const data = result.docs.map((el) => el.data()); setBoardsData(data); const dataId = result.docs.map((el) => el.id); setBoardId(dataId); }; 위와같이 배열을 생성해서 각각의 아이디를 불러오긴했는데 어떻게 연결시킬지 모르겠네요ㅜ

강좌에서는 backend 서버와 프론트 서버를 인스턴스를 2개를 사용해서 배포하는데혹시 인스턴스 1개에서 둘다 배포하는건 불가능한건가요? 가능하다면 어떤식으로 해야할까요?

aleecture 폴더로 이동한뒤 npm run dev 를 실행할시 이렇게 오류가 발생하여서 webpack 설정이 잘못된것 같아서 구글링을 통해 재설치를 하여도 이렇게 오류가 발생하여서 질문 남깁니다! 오류 텍스트[webpack-cli] Failed to load '/home/kang/Desktop/sleact/alecture/webpack.config.ts' config [webpack-cli] webpack.config.ts:5:38 - error TS2307: Cannot find module 'webpack-bundle-analyzer' or its corresponding type declarations. 5 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; ~~~~~~~~~~~~~~~~~~~~~~~~~

안녕하세요 선생님.일단 우분투에서 백서버 실행을 하면 sudo npx pm2 reload all Use --update-env to update environment variables [PM2] Applying action reloadProcessId on app [all](ids: [ 0 ]) [PM2] [app](0) ✓이렇게 실행은 되는데 주소로 접근하면 자꾸 에러가 나서 로그를 보니까/root/.pm2/logs/app-error.log last 15 lines: 0|app | at Module._compile (internal/modules/cjs/loader.js:1114:14) 0|app | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10) 0|app | at Module.load (internal/modules/cjs/loader.js:979:32) 0|app | at Function.Module._load (internal/modules/cjs/loader.js:819:12) 0|app | code: 'MODULE_NOT_FOUND', 0|app | requireStack: [ 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/@aws-sdk/lib-storage/dist-cjs/Upload.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/multer-s3/index.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/routes/post.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/app.js' 0|app | ] 0|app | }이렇게 나오는데, 이건 routes/post.js 에서 aws-sdk를 적용한 뒤에 나온 에러라서 이 부근이 문제인건 알겠지만 어디를 봐야할지 모르겠어서 질문 드립니다. const multerS3 = require('multer-s3'); const AWS = require('aws-sdk'); AWS.config.update({ accessKeyId: process.env.S3_ACCESS_KEY_ID, secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, region: 'ap-northeast-2', }); const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'fashionary-s3', key(req, file, cb){ cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: {fileSize: 20 * 1024 * 1024} //20MB }) router.post('/images', isLoggedIn, upload.array('image'), async(req, res, next) => { console.log("req.files:::::::" + req.files); res.json(req.files.map((v) => v.location)); });문제의 코드는 위와 같은데,버켓명도 일치하고, 리전도 서울(아시아 태평양(서울) ap-northeast-2)이고vim .env해서 S3_ACCESS_KEY_ID와 S3_SECRET_ACCESS_KEY도 넣고,(cat .env로 확인하였습니다)npm uninstall multer-s3 aws-sdk 후, npm install multer-s3 aws-sdk 도 해보았는데같은 에러가 떠요. 어디를 봐야 하나요 선생님..?          

강의 열심히 듣고 있습니다.Row.js에서 사용하고 있는 isLargeRow에 관해 질문드립니다. isLargeRow는 부모 컴포넌트에서 boolean값을 설정하지 않고 단지 문자열로 props로 보내지는데 Rows.js에서는 true 값을 가지게 되는게 잘 이해가 안가네요props로 문자열을 내려주면 자식 컴포넌트에서는 그 문자열이 내려오면 true로 없으면 false로 인식을 하는건가요?바쁘시겠지만 답변 부탁 드리겠습니다.

선생님 안녕하세요.저는 사용자 정보를 websocket에서 받아 사용을 해야 하는데요, 아무리 해도 웹소켓에서 리턴한 데이터를 화면에 뿌려줄수가 없습니다..대략적인 코드는 이렇습니다.  const ws = new WebSocket("wss://localhost:8080"); ws.onopen = () => ws.send('{"rqtype": "0000", "token": ""}'); ws.onmessage = (e) => { // e.Data를 Box안에 뿌리고 싶어요. }; return ( <Box> <Header emp_no={""} name={"유저"} /> </Box> );제 짐작으로는 ajax로 Django로 e.Data를 보낸 다음 화면에 뿌려주는 방법을 찾아야 할것 같은데.. 혹시 다른 방법이 있다면 조언 부탁드립니다.감사합니다.#react #websocket #Django

<Comment name={"이인제"} comment={"안녕하세요, 스필입니다."}/> 이렇게 전달하는데 {}을 쓰거나 쓰지않거나 정상적으로 포트 화면에 출력이 되는데 둘의 차이가 무엇인지 궁금합니다.

채용공고에서 많이들 리덕스 사용 경험을 물어서 리덕스로 해보고 싶은데 리덕스와 타입스크립트를 연계하는게 어려워보여서 혹시 관련 소스코드는 없을지 궁금하여 여쭤봅니다. 이 부분이 공부하기가 어렵네요.

안녕하세요 리엑트 강의 수강생입니다~!과제내어주신 부분에, "디스코드에 선택자과제 html 공유해 드립니다." 라고 되어 있는데요.어떻게 들어갈 수 있나요? 

안녕하세요.지뢰찾기 학습을 하고 있습니다.Context.Provider를 설정한 후시작 버튼을 눌렀을 때 dispatche가 선언 안 되어 있다는 오류가 나는데,코드를 한 번 봐 주실 수 있나요?감사합니다. https://drive.google.com/file/d/1BaP1l60kFetjxsPqJlHnxXltmRO0LJt0/view?usp=sharing ==========================================================코드 첨부 합니다.MineSearch.jsx Form.jsxStart 버튼을 누를 때 발생하는 에러 입니다.

typesciprt 였나 antd 였나 설치하고 부터 자주 밑에 그림처럼 뜨네요. 구글링으로 ctrl + f8로 일시적으로 문제를 해결할 수 있었으나 계속 오류가 반복되어 질문드립니다.혹시 어떤 부분에서 잘못 되었을지 ... 알수있을까요밑에 부분은 소스에서 빨간줄 뜨는 부분입니다.추가로 이런 오류도 자주 뜹니다 ...

안녕하세요!yarn add -D @graphql-codegen/cliyarn add -D @graphql-codegen/typescript 설치 후 yml 파일 생성하는데 빨간줄이 발생하고 이후 단계로 넘어가지 못합니다.마우스 오버 후 에러 메세지잘못 설치했나 싶어 node-modules 삭제 package.json 에서 codegen 지우고 재설치 해보아도 같은 에러가 나타납니다.확인 부탁드립니다.

Try.jsx 에서 {this.props.value}를 사용하는데 이때 this는 Try컴포넌트에 바인딩 된다고 생각하는데 NumberBaseball.jsx 컴포넌트의 render함수에서 상위로 스코프가 체이닝 되나요? 정리하면 컴포넌트를 import 해서 사용할 때 this바인딩이 <Try />컴포넌트의 this는 어떻게 바인딩 이루어져서 props를 받을 수 있는지 궁금합니다 ㅠ

콜백함수에서 첫번째 함수 선언했을때 나중에 그냥 sayHello()로 호출하면안되나요? 굳이 함수를 새로 만들어서 거기 인자에 콜백함수 넣고, 함수이름(sayHello)를 실행시키는 이유가 궁금해요~~

포스트맨에서 success: true는 뜨는데 막상 DB로 들어가면 토큰이 여전히 남아있습니다.findOneAndUpdate가 콜백함수를 지원하지 않아 then. catch로 수정해서 사용했는데 혹시 문법적 오류가 있어서 안 되는걸까요? app.get('/api/users/logout', auth, (req, res) => { User.findOneAndUpdate({ _id: req.user._id }, { token: "" }) .then(() => { console.log(req.user._id); res.status(200).send({success: true}) }) .catch((err)=>{ res.json({ success: false, err }); }) })이렇게 수정을 했는데 토큰을 지우지 못합니다... 그리고 혹시나 해서console.log(req.user._id')를해서 id를 읽어올 수 있는지 확인해봤는데 undefined라고 뜨더라고요... 어디서 오류가 나는 걸까요?

30분전 까지만 해도 됐었는데데이터베이스도 켜져있고클라이언트랑 서버도 켜져있는데 안되는 이유가 뭘까요 ㅠㅠ코드 수정하고 git pull 하고pm2 restart all 한번 했습니다.

import { useQuery } from "@apollo/client" import {useState} from 'react' import {useRouter} from "next/router" import {Fetch_List} from './BoardList.query' import BulletinBoardListUI from './BoardList.presenter' export default function BulletinBoardListFetch(){ const [page,setPage]=useState(1) const router = useRouter() const{data}=useQuery(Fetch_List,{ variables:{ page } }) function MoveIndex(){ console.log("dfgd") return true } return( <BulletinBoardListUI MoveIndex={MoveIndex}/> ) }  import * as S from './BoardList.style' export default function BulletinBoardListUI(props){ console.log(props) return( <S.TableWraper> <S.TableTop> <S.ColumnHeaderBasic>번호</S.ColumnHeaderBasic> <S.ColumnHeaderTitle>제목</S.ColumnHeaderTitle> <S.ColumnHeaderWriter>작성자</S.ColumnHeaderWriter> <S.ColumnHeaderDate>날짜</S.ColumnHeaderDate> </S.TableTop> {props.data?.fetchBoards?.map( (el,i)=>{ i++ return(<S.Column key={el._id}> <S.RowNum>{i}</S.RowNum> <S.RowTitle onClick={props.MoveIndex}>{el.title}</S.RowTitle> <S.RowWriter>{el.writer}</S.RowWriter> <S.RowDate>{el.createdAt.substring(0,10)}</S.RowDate> </S.Column> )})} </S.TableWraper> ) } props.MoveIndex가 실행이 안돼요...

수업시간 5분 50초때 설명해주시기로는ssr방식은 첫 페이지는 전통적인 방식으로 seo를 가능하게 하고, 이후 페이지 전환시에는 react방식으로 하신다고 하셨는데, 이게 next.js에서 구현된 ssr에 한하여 설명해주신건가요?? 아니면 next가 아니더라도 보편적인 ssr방식을 설명해주신건가요 ?? 동아리 면접 대비로 ssr, csr, spa, mpa 개념이 헷갈려서 공부하고있는데,제가 이해하기로는 ssr은 브라우저의 요청시마다 페이지 전체를 데이터까지 적용하여 서버에서 전달받아 렌더링하는걸로 이해했는데, 6분때 설명해주시는것은 csr방식이 섞인것 같은데, 혹시 제 이해가 잘못되었나 싶어서 여쭤봅니다.. + 수업 1분20초에 ssr의 전체 과정이 길어서 로딩속도가 많이걸려 느리게 그려준다고 하셨는데, 다른 관련 블로그 글에선 오히려 csr방식이 서버에 첫 요청시 전체 페이지에 대한 문서파일을 받아오니 ssr보다 첫페이지 로딩속도가 느리다고 하더라고요.그러면 첫페이지 로딩속도는 ssr이 csr보다 빠르고,페이지 전환 속도는 csr이 ssr보다 빠르다고 정리하면 될까요?? 답변해주시면 감사하겠습니다 !