투두를 수정, 삭제하는 강의를 보면서버튼을 클릭할 때, 제가 누른 버튼이 어떤 버튼인지 알 수 없기 때문에 이벤트 객체를 이용해야 한다고 생각했습니다.내가 클릭한 버튼의 아이디를 수정, 삭제하는 함수의 인수로 전달해야 한다고 생각해서 아래와 같은 코드로 작성해야한다고 생각했습니다. const onChageCheckBox = (e) => { onUpdate(e.target.id); }; const deleteHandler = (e) => { onDelete(e.target.id); };  하지만 강의에서는 아래 코드처럼 알려주셔서요! const onChageCheckBox = () => { onUpdate(id); }; const deleteHandler = () => { onDelete(id); };이벤트 객체를 사용하지 않고 id만으로 함수가 실행되는 점이 이해가 가지 않아 질문 드립니다.더불어 이벤트 객체를 사용해서 코드를 작성하는 방법도 있는지 질문 드립니다. 항상 좋은 강의해주셔서 감사합니다!

 import { Test } from '@nestjs/testing'; import { UsersService } from '../users.service'; import { IContext } from 'src/commons/interfaces/context'; import { Request, Response } from 'express'; // 주로 DB 작업할 때 가짜DB 만들 때 사용함 class MockUsersService { mydb = []; create({ email, password, name, age }): string { this.mydb.push({ email, password, name, age }); const token = 'token'; return token; } } describe('UsersResolver', () => { let usersService: UsersService; beforeEach(async () => { const usersModule = await Test.createTestingModule({ providers: [ UsersService, { provide: UsersService, useClass: MockUsersService, }, ], }).compile(); usersService = usersModule.get<UsersService>(UsersService); }); describe('fetchUser', () => { it('유저 정보 찾기', () => { const mockRequest: Request & { user?: { id: string } } = { user: { id: '12345' }, } as Request & { user: { id: string } }; const mockResponse: Response = {} as Response; const mockContext: IContext = { req: mockRequest, res: mockResponse, }; expect(mockContext.req.user).toStrictEqual({ id: '12345' }); }); }); describe('createUser', () => { it('유저 등록하기', async () => { const mockToken = 'token'; const mockUser = { email: 'aaa@aaa.com', password: '1234', name: '정중식', age: 12, }; const result = await usersService.create({ ...mockUser }); // 반환 값이 mockToken과 일치하는지 확인 expect(result).toBe(mockToken); }); }); }); 강의에서는 app.controller.spec랑 똑같이하시면됩니다~ 하고 넘어가셔서 챗지피티랑 손잡고 짜봣는데요.. 어떤가요? 맞게했나요?..개념도 생소하고 코드짜는게 넘 어렵네요.. 챗지피티 이자식은 목업클래스 안만들어주고 지름길 같은jest.fn()같은 메서드로 목업함수 만들어주고.... 선생님 답변기다리겠씁니다!

container 중앙으로 이동시킬때.container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; }라고 하셨는데 가운데 정렬하게 될때 ,margin: 0 auto; 하는것과 어떤차이가 있을까요 ??

썸네일 이미지가 뜨지 않습니다!그리고 css도 안먹힙니다.더불어if (!data) { return <DiaryContainer></DiaryContainer>; } 위의 코드가 없으면 화면이 웹드라우저에 뜨지 않습니다. import { DiaryContainer, ResultTitle, Divider, CardContainer, CardTitle, CardContent, ActionListItem, } from "./CommonStyles"; import { LoadingOutlined, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone, MessageTwoTone, SoundTwoTone, } from "@ant-design/icons"; import { Image } from "antd"; import styled from "styled-components"; const ThumbnailImage = styled(Image)` max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; display: block; `; const DiaryDisplay = ({ data, isLoading }) => { if (isLoading) { return ( <DiaryContainer> 불러오는중... <LoadingOutlined /> </DiaryContainer> ); } if (!data) { return <DiaryContainer></DiaryContainer>; } return ( <DiaryContainer> <ResultTitle>{data.title}</ResultTitle> <Divider /> <CardContainer> <CardTitle> <CheckCircleTwoTone twoToneColor="#FF9AA2" style={{ marginRight: "6px" }} /> 요약 </CardTitle> <CardContent>{data.summary}</CardContent> </CardContainer> <ThumbnailImage src={data.thumbnail} alt="Thumbnail" fallback="데이터:image/png;base64,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" /> <Divider /> <CardContainer> <CardTitle> <HeartTwoTone twoToneColor="#FFB7B2" style={{ marginRight: "6px" }} /> 감성일기장 </CardTitle> <CardContent>{data.emotional_content}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SmileTwoTone twoToneColor="#FFDAC1" style={{ marginRight: "6px" }} /> 내가 느낀 감정 </CardTitle> <CardContent>{data.emotional_result}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <MessageTwoTone twoToneColor={"#B5EAD7"} style={{ marginRight: "6px" }} /> 심리 분석 </CardTitle> <CardContent>{data.analysis}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SoundTwoTone twoToneColor="#C7CEEA" style={{ marginRight: "6px" }} /> GPT 조언 </CardTitle> <CardContent> {data.action_list.map((action, index) => ( <ActionListItem key={index}>{action}</ActionListItem> ))} </CardContent> </CardContainer> </DiaryContainer> ); }; export default DiaryDisplay; 코드는 이렇습니다.썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ어떻게 문제를 해결할 수 있을까요?

백엔드를 "https://api.example.com" 프론트엔드를 "https://example.com"이렇게 배포했습니다. 그런데 백엔드 서버는 example.com 이 주소에서 api 요청만 가능하고, https://api.example.com/graphql 은 주소창에 검색해도 접속 못하게 하고 싶습니다. 어떻게 해야할까요?

지금 "dialogflow-fulfillment": "^0.6.1",얘가 최신버전인데, 얘와 호환되는 에가 node6이라고 합니다. 지금 10버전이상이 나오고 있는데 6버전을 쓸 수는 없는 것 같아요. npm install을 하면 버전이 자꾸 안맞다고 합니다.최신버전에 맞처서 진행을 하고 싶습니다.그렇다고 dialogflow-fulfillment이거를 최신노드버전이랑 호화되는 것을 찾으려고 하니... 저게 최신이라고 합니다. 6년전께요. 얼마전까지 인스톨해서 포스트맨까지확인하고, 채팅까지 했었고 이벤트 적용하다가 자꾸 에러가 처음부터 다시 작업하는데 이번에도 버전문제라고 하네요 모듈의 버전을 현재 안정적인 최신버전으로 (제 컴퓨터에깔린)바뀌어서 인스톨을 진행하지만 자꾸 에러가 납니다   { "name": "chatbot-app", "version": "1.0.0", "description": "chatbot-app", "main": "index.js", "engines": { "node": ">=20.16.0", "npm": ">=10.2.0" }, "scripts": { "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts --openssl-legacy-provider build", "test": "react-scripts test", "eject": "react-scripts eject", "backend": "nodemon index.js", "frontend": "npm run front --prefix client", "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" }, "author": "Jaewon Ahn", "license": "ISC", "dependencies": { "@google-cloud/dialogflow": "^6.8.0", "actions-on-google": "^2.6.0", "body-parser": "^1.18.3", "dialogflow": "^4.0.3", "dialogflow-fulfillment": "^0.6.1", "express": "^4.16.4", "mongoose": "^5.4.20" }, "devDependencies": { "concurrently": "^8.2.2", "nodemon": "^3.1.4" } } C:\project\vswork\chatbot-app> C:\project\vswork\chatbot-app>npm install npm warn EBADENGINE Unsupported engine { npm warn EBADENGINE package: 'dialogflow-fulfillment@0.6.1', npm warn EBADENGINE required: { node: '6' }, npm warn EBADENGINE current: { node: 'v20.16.0', npm: '10.8.2' } npm warn EBADENGINE } npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated npmlog@5.0.1: This package is no longer supported. npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated are-we-there-yet@2.0.0: This package is no longer supported. npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm warn deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm warn deprecated google-p12-pem@1.0.5: Package is no longer maintained npm warn deprecated google-p12-pem@1.0.5: Package is no longer maintained npm warn deprecated google-p12-pem@1.0.5: Package is no longer maintained npm warn deprecated google-p12-pem@1.0.5: Package is no longer maintained npm warn deprecated gauge@3.0.2: This package is no longer supported. npm warn deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm warn deprecated axios@0.18.1: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410 npm warn deprecated grpc@1.24.11: This library will not receive further updates other than security fixes. We recommend using @grpc/grpc-js instead.

try-puppeteer.appspot.com 이 사이트가 현재는 접속이 안되네요이런 기능을 할 수 있는 유사한 사이트가 더 있을까요?

궁금한 점이 있습니다. 지금까지는 다음과 같이 app.use 안에 요청 처리를 위한 미들웨어를 작성했는데, app.use((req, res, next) => { console.log("모든 요청에 실행하고 싶어요"); next(); });다음과 같이 app.use에 다운받은 미들웨어를 장착하는 건 "이 파일에서 특정 미들웨어를 사용하겠다"는 의도로 사용하는 건가요?? 아니면 둘 다 같은 동작을 하는건데 제가 둘을 다르다고 생각하는 걸까요?app.use(morgan("dev")); app.use(cookieParser()); app.use(express.json()); app.use(express.urlencoded({ extended: true }));추가로, 위 미들웨어들로 인해 req이나 res 객체에서 편하게 .cookie나 .body를 사용할 수 있게 되는데 그럼 미들웨어 내에서 미들웨어를 사용하는 건가요 🤔🤔?

피그마에는 startDate, endDate 지정하는게 있는데 playground fetchUseditems에는 날짜 설정이 없네요.다른 방법이 있는건가요?

한입크기로 잘라먹는 리액트 강의 섹션12의 폰트,이미지,레이아웃 설정하기 강의에서처럼 vscode에서 public폴더로 폰트 파일을 드래그해서 넣었는데 public에 파일이 들어가지를 않습니다ㅠㅠ아무 오류창같은것도 뜨지 않고요 public폴더 눌러보면 아무것도 없습니다ㅠㅠctrl+C해서 public폴더에 ctrl+V도 해봤는데 안되고요 구글링한대로 regedit 수정해 재부팅하고 vscode실행하면"Updates are unabled because you are running the user-scope installation of Visual Studio Code as Administrator." 이란 창이 뜹니다ㅠㅠ 드래그해서 파일넣기도 안되고요..그래서 관리자권한설정을 해지하면 이런 창은 안뜨는데 똑같이 드래그해서 파일넣기가 안되는 상황입니다.이에 대한 해결방안이나 드래그해서 파일 넣기를 대신할 수 있는 방법이 있다면 답변 부탁드립니다! 참고로 제 컴퓨터os는 윈도우11 입니다.

7.2) useEffect 사용하기 강의에서 state의 상태 변화 함수는 비동기로 동작하기 때문에 콘솔에 count 값을 출력하면 이전 값이 나온다고 설명하셨습니다. 그런데state의 값이 변경되면 리렌더링 되면서 화면에 count 값이 보여지는 건 setCount인 상태 변화 함수가 실행되고, 완료됐기 때문에 화면에 나타난다고 생각했습니다.그렇기 때문에 콘솔에 이전의 값이 출력 된다는 점이 이해가 가지 않아 질문 드립니다. 버튼을 누르면 onClickButton 함수가 실행된다.setCount 상태 변화 함수가 실행되어 값을 더한다.setCount 함수가 완료되지 않아 콘솔 창엔 이전의 count 값이 출력된다.setCount 함수가 완료되고 state의 값이 변경됐기 때문에 리렌더링이 된다.리렌더링 된 값이 화면에 출력된다.이런 순서로 진행되는 건가요? 코드가 어떻게 동작 되는 건지 이해가 안돼서 질문 남깁니다 ㅜㅜ... 항상 친절하고 자세하게 강의해주셔서 감사합니다!

강사님께서 강의에서 쓰신 보드말고, 제가 보유하고있는 아두이노 wifi 보드를 사용하여 진행해도 괜찮을까요 ? 달라지는게 많이 있을지 궁금합니다.

 ***질문은 아니고 해결 방법 공유합니다!***docker-compose.yml 파일에서백엔드 service를 올리기 전에 데이터베이스부터 먼저 올리면 됩니다! 아래처럼version: '3.7' # "컴퓨터들" services: # 컴퓨터 이름 my-database: image: mysql:8.0 environment: MYSQL_DATABASE: 'myproject' MYSQL_ROOT_PASSWORD: 'root' ports: - 3306:3306 # 컴퓨터 이름 my-backend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 3000:3000 env_file: - ./.env.dockermy-database랑 my-backend 서로 순서만 바꿔주면 됩니다.저는 그렇게 해서 됐습니다..! 조금이나마 도움이 되길 바랍니다.

여러 챕터에서 객체의 on 메서드를 사용하는 코드가 자주 보여서 개념에 대해 알아보았습니다.const fs = require("fs"); console.log("before:", process.memoryUsage().rss); // 메모리 체크 // 스트림 방식으로 파일 읽고 보내기 const readStream = fs.createReadStream("./big.txt"); const writeStream = fs.createWriteStream("./big3.txt"); readStream.pipe(writeStream); readStream.on("end", () => { console.log("stream: ", process.memoryUsage().rss); });그런데 이렇게 이벤트가 발생하는 객체의 종류를 모두 외우고 있어야 하나요? 아니면 이 객체가 이벤트를 발생시키는지 예상(?), 판단할 수 있는 기준이 있나요?

데이터통신 실습을 위해서 스웨거하고 graphql을 접속하려고하는데 접속이안돼요..

앞에 질문에 답변을 받았지만 링크로 참조하라는 답변이었는데 저는 그걸로는 해결을 할 수 없었습니다. 혹시 괜찮으시면 직관적인 해결법을 알려주실 수 없나요?send를 누르면 터미널에 이렇게 뜹니다. Server Running at 5000 C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193 throw new Error('The incoming JSON object does not contain a client_email field'); ^ Error: The incoming JSON object does not contain a client_email field at JWT.fromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193:19) at GoogleAuth._cacheClientFromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:313:16) at ReadStream.<anonymous> (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:347:36) at ReadStream.emit (node:events:519:28) at endReadableNT (node:internal/streams/readable:1696:12) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) Node.js v20.16.0 PS C:\project\vswork\chatbot-app-master> 아래와 같이 값이 입력이되어있는데도말입니다. 루트파일에다가 구글 인증json을 위치를 끌어다 넣어도 그렇습니다. 가르쳐줘서 고맙습니다. 근데 이렇게 문제가 생겨서 이 구간을 벗어나고 싶습니다 ㅠㅠ

 import { useEffect } from "react"; declare const window: typeof globalThis & { kakao: any; }; export default function KakaoMapPage(): JSX.Element { useEffect(() => { const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new window.kakao.maps.Map(container, options); console.log(map); }, []); return ( <> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키" ></script> <div id="map" style={{ width: 500, height: 400 }}></div> </> ); }  Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <div>.See more info here: https://nextjs.org/docs/messages/react-hydration-error 카카오 맵 하는데 오류 왜 뜨는건가요??

본 강의와 관련이 없을 수 있는데,크롤링 공부를 하는 중에 궁금한게 생겨 질문드립니다.puppeteer로 생성한 브라우저에서 크롬 확장프로그램을 설치할 수 있는 방법이 있나요?있다면 어떤 키워드로 검색을 해서 찾아봐야하는지 알려주시면 감사하겠습니다.

강의내용에 추가내용으로 환경설정 업데이트가 되어야할것 같습니다....  환경설정으로 시간을 허비하는군요. 연결 관련으로const pool = new Pool({ host: "", user: "", port: , password: "",});ssl 인증서 허용 옵션을 풀어야 연결이 되었습니다. const pool = new Pool({ host: "", user: "", port: , password: "", ssl: { rejectUnauthorized: false, },}); 

포트폴리오 과제중 BoardDetail 작성글 페이지에서 패치보드가 안불러와져서 계속 코드 고쳐보다가결국 강사님이 올려주시는 포트폴리오리뷰 파일 불러와서 코드보고 똑같이 따라쳐도 제 파일에서만 패치보드가 안불러와져서 오류가 계속나네요..혹시 좀 봐주실수 있을까요?(_app.js에서 아폴로 주소 확인도 했습니다)아래는 패치보드 로드 실패로 나오는 창입니다