리액트에서는 이미지 업로드하려고 할때 이미지를 미리보기로 가능한걸로 알고있는데 템플릿엔진 hbs에서도 이미지 파일 선택해서 이미지를 미리 볼수있도록 할수있나요? 

 docker rm `docker ps -a- q'라고 입력했는데 unknown shorthand flag: 'a' in -a- 라고 에러 뜹니다

안녕하세요 원두멘토님ㅎㅎ  이런 에러가 계속 떠서 docs와 스텍오버플로우에 검색을 해보니 Passport-jwt를 import하는 것이 아닌 passport-local을 import하는 것이라해서 했더니 다행히 실행이 됩니다.수업내용에서는 passport-jwt로만 해도 작동이 잘되는 것 같은데 왜 이런 문제가 생기는 것일까요?그리고 passport-local로 하면 실제 배포에서는 사용 못하는 것이 아닌지 질문을 남깁니다.p.s 재작년에 코캠2기 수료하고 백엔드를 많이 기다렸는데 이렇게 인프런에서 다시 인강으로 뵙게 되서 너무 반갑습니다

cheerio로 가져온값을 객체로 만든다음 밖으로 보내서 최종적으로 몽구스로 저장하고싶은데문제가 생겼던게 저상태로 보내면 [object:object] 로 나오므로 JSON.stringfy()작업으로 문자열 형태로 내보내 주었습니다. 하지만 schema부분을 object로 하여도 object가 가장 상위의 데이터 타입으로 string형태로 저장된다고 여겨졌습니다. 그래서 JSON.stringfy()로 빼내고 저장하는 부분에서 JSON.parse로 하여 다시 저장할려 했지만 다시 [object:object]로 나와서 이부분을 어떻게 해결해야할지 잘찾아봐도 모르겠어서 질문 남겼습니다.// siteInfo.js import axios from "axios"; import cheerio from "cheerio"; export class SiteInfo { siteInfo = async (prefer) => { console.log(prefer); const siteData = await axios .get(prefer) .then() .catch((err) => { console.log("서버 데이터 안받아와짐 오류 : " + err); }); const keys = []; const values = []; const $ = cheerio.load(siteData.data); $("meta").each((index, el) => { if ( $(el).attr("property") && ($(el).attr("property").includes("og:title") || $(el).attr("property").includes("og:description") || $(el).attr("property").includes("og:image")) ) { const content = $(el).attr("content"); const title = $(el).attr("property"); keys.push(title); values.push(content); } }); const arr = []; for (let i = 0; i < keys.length; i++) { arr.push({ [keys[i]]: values[i], }); } console.log("여기 테스트 : " + arr); return arr; }; } // signup.controller.js export class SignupController { siteInfoService; isValueService; saveDataService; emailService; constructor(siteInfoService, isValueService, saveDataService, emailService) { this.siteInfoService = siteInfoService; this.isValueService = isValueService; this.saveDataService = saveDataService; this.emailService = emailService; } singUp = async (req, res) => { const name = req.body.name; const email = req.body.email; const personal = req.body.personal; const prefer = req.body.prefer; const pwd = req.body.pwd; const phone = req.body.phone; console.log(req.body); const hasValue = this.isValueService.checkToken(phone); if (hasValue === false) { res.json("isAuth값이 false입니다"); } const siteInfo = await this.siteInfoService.siteInfo(prefer); const ttt = JSON.parse(siteInfo); console.log("여기 문제 발생 : " + typeof ttt); console.dir("여기 문제 발생 22222: " + ttt); const dataSave = await this.saveDataService.dataSave({ name, email, personal, prefer, pwd, phone, siteInfo, }); const isValue = this.emailService.checkMail(email); if (isValue === false) { res.send("이메일 형식이 잘못되었습니다"); } const template = this.emailService.welcomeMessage({ name, phone, prefer }); this.emailService.sendTemplateToEmail({ template, email, }); res.send("_id : " + dataSave); }; userSearch = async (req, res) => { const searchReault = await this.saveDataService.dataSearch(); console.log(searchReault); res.send(searchReault); }; } // index.js import express from "express"; import mongoose from "mongoose"; import cors from "cors"; // import { Token, User } from "./mvc/model/schema.model.js"; import { TokenController } from "./mvc/controller/token.controller.js"; import { SignupController } from "./mvc/controller/signup.controller.js"; // 사이트 정보 가져오기 import { SiteInfo } from "./mvc/controller/service/siteInfo.js"; // 핸드폰 정보 맞는지 boolean으로 import { CheckToken } from "./mvc/controller/service/token.js"; // db저장하고 리턴값 가져오기 import { UserDb } from "./mvc/controller/service/userDb.js"; // 이메일 확인하고 보내주기 import { EmailService } from "./mvc/controller/service/email.js"; // 핸드폰 문자 보내기 import { PhoneService } from "./mvc/controller/service/phone.js"; const app = express(); const corsOptions = { origin: "http://127.0.0.1:5500", }; app.use(cors(corsOptions)); const siteInfo = new SiteInfo(); const checkToken = new CheckToken(); const userDb = new UserDb(); const emailService = new EmailService(); const phoneService = new PhoneService(); app.use(express.json()); const signUpController = new SignupController( siteInfo, checkToken, userDb, emailService ); app.post("/users", signUpController.singUp); app.get("/users", signUpController.userSearch); const tokenController = new TokenController(phoneService, checkToken); app.post("/tokens/phone", tokenController.insertdata); app.patch("/tokens/phone", tokenController.checkToken); mongoose.set("debug", true); mongoose .connect("mongodb://mongodb-file:27017/dockerconnetor") .then(() => { console.log("connect success"); }) .catch(() => { console.log("fail to connect with db"); }); app.listen(3001, () => { console.log("server open"); }); // userDb.js import { User } from "../../model/schema.model.js"; export class UserDb { dataSave = async ({ name, email, personal, prefer, pwd, phone, siteInfo, }) => { const siteInforesult = JSON.parse(siteInfo); console.log("여기 확인 : " + siteInforesult); const data = new User({ name: name, email: email, personal: personal, prefer: prefer, pwd: pwd, phone: phone, siteInfo: siteInfo, }); await data.save(); const idData = await User.findOne({ phone: phone }, { _id: 1 }).exec(); return idData._id; }; dataSearch = async (name) => { console.log("start datasearch"); const result = await User.find().exec(); return result; }; } // schema.model.js import mongoose from "mongoose"; const tokenSchema = new mongoose.Schema({ phone: String, token: Number, isAuth: Boolean, }); export const Token = mongoose.model("Token", tokenSchema); const userSchema = new mongoose.Schema({ name: String, email: String, personal: String, prefer: String, pwd: String, phone: String, siteInfo: { title: String, content: String, image: String, }, }); export const User = mongoose.model("User", userSchema);   

메인화면으로가는 버튼을 빠르게 반복해서 누르면 로딩중만 나오길래 개발자모드에서 network를 보면 (pending)이렇게 나오면서 응답을 못하는상태인데 왜 그러는걸까요? 모든 함수에서 mysql에 연결하고 쿼리문 사용할때 async/await 사용하고있습니다.로그인 미들웨어는 promise로 사용하고있는데 정확히 어떤점때문에 이러한 오류가 발생하는지 모르겠습니다.저pending 오류를 어떻게해야 해결이 될까요?

 docker 빌드하고 이미지를 4시간 전에 만들었는데방금 또 빌드하고 이미지 했더니 4시간 전에 만든거라고 나왔어요.그리고 IMAGES ID도 똑같네요

 지금 nodejs 듣고 있는데제가 중소기업해서 취업해서 나중에 대기업 가고 싶은데일단 중소기업 취업 먼저 생각해보면 node만 공부하는게 낫나요

 vscode에서 명령어 입력하고 docker 실행 명령어도 입력했는데 powershell이나 다른 프로그램에서도 명령어 많이 알아야하나요

홈페이지에서 스크롤 시 콜백함수가 실행되는 과정에서 LOAD_POSTS_REQUEST dispatch 요청을 두 번 보내는 상황이 발생하였는데 해결하지 못해서 올립니다./pages/index.jsconst Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostLoading, retweetError } = useSelector((state) => state.post); useEffect(() => { if (retweetError) { alert(retweetError); } }, [retweetError]); useEffect(() => { dispatch({ type: LOAD_MY_INFO_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !loadPostLoading) { console.log('스크롤 패칭'); const lastId = mainPosts[mainPosts.length - 1]?.id; console.log('lastId', lastId); dispatch({ type: LOAD_POSTS_REQUEST, lastId, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostLoading, mainPosts]); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); };sagas/post.jsfunction loadPostsAPI(lastId) { return axios.get(`/posts?lastId=${lastId || 0}`); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI, action.data); yield put({ type: LOAD_POSTS_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: LOAD_POSTS_FAILURE, error: err.response.data, }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); }reducers/post.jscase LOAD_POSTS_REQUEST: draft.loadPostLoading = true; draft.loadPostDone = false; draft.loadPostError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostLoading = false; draft.loadPostDone = true; draft.mainPosts = draft.mainPosts.concat(action.data); draft.hasMorePosts = action.data.length === 10; break; case LOAD_POSTS_FAILURE: draft.loadPostLoading = false; draft.loadPostError = action.error; break;첫 페이지 로딩 후에 스크롤 시 onScroll 함수의 '스크롤 패칭'이 콘솔에 두 번 찍히고 LOAD_POSTS_REQUEST 요청이 두 번 가는 것을 확인했고 처음 포스트들을 불러온 이후에 lastId가 0으로 요청이 보내져서 mainPosts에 중복된 게시물이 쌓이는 문제가 있습니다.

npm run dev를 하면  Object is not iterabled 이런 에러가 뜹니다제 코드는import React, { useState, useCallback } from "react"; import { Button, Form, Input } from "antd"; import Link from "next/link"; import styled from "styled-components"; import useInput from "../hooks/useInput"; const ButtonWrapper = styled.div` margin-top: 10px; `; const FormWrapper = styled(Form)` padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => { const [id, onChangeId] = useInput(""); const [password, setPassword] = useInput(""); const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, []); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-id">비밀번호</label> <br /> <Input name="user-id" value={password} onChange={onChangePassword} required /> </div> <ButtonWrapper> <Button type="primary" htmlType="submit" loading={false}> 로그인 </Button> <Link href="/signup"> <a> <Button>회원가입</Button> </a> </Link> </ButtonWrapper> </FormWrapper> ); }; export default LoginForm; 이 부분이 문제라곤 하는데 어떻게 하나요?

제가 아래 순서대로 진행하여 해결했습니다.https://www.npmjs.com/package/typeorm-extension 의 스크립트를 참고하였는가MySQL hosts파일에 ::1이 localhost로 바인딩되어있는 부분을 주석처리하기이게 어려우면 localhost대신 루프백주소를 넣으세요이래도 안되면 에러 코드 다시 읽어보기그래도 안되면 chatGPT한테 물어보기참고로, 강사님이 쓰는 extension이랑 최신버전이랑 사용법이 약간 다른 것 같은데 자세히는 아직 안봤지만 각자 1번은 무조건 확인하십쇼 

넥스트 서버사이드렌더링 까지 다한상태인데 getStaticProps는 정말 빨리 넘어갑니다 하지만 getServerSideProps으로 만든 페이지는 정말 3초? 이상 걸립니다. 서버도 다 한국으로 시작했고 GCP 쓰고 있습니다서버속도 문제가 아니라면 속도를 줄일수있는방법이 머가있을까요.. ㅜㅜbuild 시에 페이지 용량도 높지 않습니다. 정적페이지랑 차이도 별루 없구요 ㅜㅠ2.back 에서 데이터를 가져올 때 시간이 많이 걸리는거 같은데 페이지 이동이라도 빠르게 진행하고 그다음 데이터를 불러오는 방법을 어떻게 깔삼하게 구현할 수 있을까요..

 구글 앱 비밀번호 설정 떄문에 막힙니다 2단계 인증했고 앱 비밀번호 생성해서 그걸 구글 비밀번호로 바꾸고 선생님 코드를 잘 따라해서 적었는데 Error: Invalid login: 535-5.7.8 Username and Password not accepted.라고 에러 납니다혹시 방법 없을까요?

질문입니다type Mutation {createBoard(createBoardInput: CreateBoardInput!):String } 에서맨 마지막에 왜 createBoard는 String이 붙고type Query{fetchBoards: [MyResult]}에서 fetchBoards는 맨 마지막에 String이 안 붙나요?fetchBoards: [MyResult]:String 이렇게 될수도 있지 않나요 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ const typeDefs = `#graphqltype Query{fetchBoards: [MyResult]}type Mutation {createBoard(createBoardInput: CreateBoardInput!):String } `;const resolvers = {Query: {fetchBoards: (parent, args, context, info) => {const result = [ { number: 1, writer: "철수", title: "제목입니다", contents: "내용이에요", },{number: 2,writer: "영희", title: "제목입니다",contents: "영희이에요",},{ number: 3, writer: "훈이", title: "제목입니다",contents: "훈이이에요", },];return result;} },Mutation: { createBoard: (_, args) => { console.log(args); onsole.log("========================="); console.log(args.createBoardInput.writer);console.log(args.createBoardInput.title);console.log(args.createBoardInput.contents);return "게시물 등록에 성공하였습니다"; }, }, };   

안녕하세요 선생님 ! 강의 정말 잘 보고 있습니다 ! 다름이 아니라 현재 Node Js 교과서를 참고해서 웹 프로젝트를 진행 중입니다. AWS를 이용해 lightsail과 도메인을 구입해 실제 배포를 하려 하는데요. 큰 프로젝트가 아니라 사용자가 100~200명쯤 되는 블라인드 매칭 서비스입니다. 무료로 진행하는 프로그램이라 큰 걱정은 없지만, 실제 서버 배포를 함에 있어 15장에 나오는 서비스 운영을 위한 패키지 만으로 보안이 가능할까 걱정이 돼서 글을 작성합니다. 추가 적으로 추천하시는 패키지들이 있으시면 추천 받고 싶습니다 !

인강 40분짜리 3개 듣고 복습해서 총 5시간을 소비했는데 잘 하고 있는 건지 궁금해요

console.log로 action과 post를 찍어봤는데 post의 값이 이상합니다redux dev tools도 확인해보면 제가 지금 넣은 데이터의 형식이 content만 들어가 있습니다 어떻게 해야하나요?

프로필 탭 들어갈 시  Button is not defined 이라는 오류가 뜹니다 제 코드는 import React from "react"; import PropTypes from "prop-types"; import { List } from "antd"; import Item from "antd/lib/list/Item"; import { StopOutlined } from "@ant-design/icons"; import { isStyledComponent, keyframes } from "styled-components"; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: 20 }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={ <div style={{ textAlign: "center", margin: "10px 0" }}> <Button>더 보기</Button> </div> } bordered dataSource={data} renderItem={(Item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={Item.Nickname} /> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowList; 입니다 무엇이 문제 일까요?

강의 하나 들을 때마다 에러가 너무 많이 떠서 진도가 안나가서 미칠 지경이네요 ㅠㅠdocker-compose.yaml 파일을 아래와 같이 설정하고 docker-compose build를 하니 services.mydb.environment.0 must be a string 라는 에러가 떠서 구글링을 하니 environment: - MYSQL_DATABASE: 'dockerProject' - MYSQL_ROOT_PASSWORD: 'root'여기서 띄어쓰기를 없애보라고 하길래 아래와 같이 띄어쓰기를 없앤채로 .yaml파일을 변경하였습니다. version: '3.7' services: mybackend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 3000:3000 env_file: - ./.env.docker mydb: # platform: linux/86_64 image: mysql:8.0.34 environment: - MYSQL_DATABASE:'dockerProject' - MYSQL_ROOT_PASSWORD:'root' ports: - 3306:3306그리고는 docker-compose build 이후 up을 실행했으나 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...에러가 계속 발생합니다.(docker 말고 내 로컬컴퓨터에서는 mysql 연결 잘 되었음) 다른 질문자 분들 내용을 참조하여 package.json 파일의 mysql2와 typeorm의 버전을 아래와 같이 바꾸었고, .yaml 파일에서도 mysql 버전을 latest에서 8.0.34로 지정해주었습니다.  { "name": "graghql", "version": "0.0.1", "description": "", "author": "", "private": true, "license": "UNLICENSED", "scripts": { "build": "nest build", "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "start": "nest start", "start:dev": "nest start --watch", "start:debug": "nest start --debug --watch", "start:prod": "node dist/main", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json" }, "dependencies": { "@apollo/server": "^4.9.0", "@nestjs/apollo": "^12.0.7", "@nestjs/common": "^10.0.0", "@nestjs/config": "^3.0.0", "@nestjs/core": "^10.0.0", "@nestjs/graphql": "^12.0.8", "@nestjs/platform-express": "^10.0.0", "@nestjs/typeorm": "^10.0.0", "graphql": "^16.7.1", "mysql2": "3.2.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.1", "typeorm": "^0.3.12" }, "devDependencies": { "@nestjs/cli": "^10.0.0", "@nestjs/schematics": "^10.0.0", "@nestjs/testing": "^10.0.0", "@types/express": "^4.17.17", "@types/jest": "^29.5.2", "@types/node": "^20.3.1", "@types/supertest": "^2.0.12", "@typescript-eslint/eslint-plugin": "^5.59.11", "@typescript-eslint/parser": "^5.59.11", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "jest": "^29.5.0", "prettier": "^2.8.8", "source-map-support": "^0.5.21", "supertest": "^6.3.3", "ts-jest": "^29.1.0", "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "^5.1.3" }, "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "testRegex": ".*\\.spec\\.ts$", "transform": { "^.+\\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" } }그런데도 똑같이 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...에러가 발생하여 node_modules 파일 및 dist 파일을 삭제 후 다시 yarn install을 했는데,이제는 import도 되지 않습니다....에러 때문에 진도가 나가질 않아, 중간중간에 강의를 멈춰가며 강의와 똑같이 따라가고 있는데 왜 이런 에러가 계속 발생할까요 ㅠㅠ

 객체로 나타낼 떄 따옴표 쓰는 거 하고 쌍따옴표 쓰는 거 하고 뭔 차이인가요? 그리고 따옴표 쓰면 계속 따옴표 쓰고, 쌍따옴표 쓰면 계속 쌍따옴표로 써야하나요?