공유기 한대로컴퓨터 두대를 이용하고 있고,한대는 맥북이고, 코딩용으로 사용하고,다른 한대는 데스크탑이고, 서버용으로 사용하려고 합니다.강의에서 실제 서버사용하는 것과 같은 환경을 만들기 위해지연시간을 뒀다고 하셨는데, 서버 컴퓨터를 따로 두고 있다면지연시간을 지워도 되는 건지 궁금합니다.지운다면 어떤 경로로 들어가서 지워야되는지 알려주시면 감사하겠습니다. 추가로 질문 드릴 사항은 아래 코드에서// localhost const emulatorIp = '10.0.2.2.:3000'; const simulatorIp = '127.0.0.1:3000'; final ip = Platform.isIOS ? simulatorIp : emulatorIp;서버 컴퓨터를 따로 두는 상황에선 위 코드의 ip 주소를 동일하게 둬도 되는건가요?아니면 또 다르게 코드를 짜야하는건가요?

1.<pre>TypeError: Cannot read properties of undefined (reading &#39;create&#39;)const express = require("express"); const cors = require("cors"); const { application } = require("express"); const app = express(); const port = 8080; const models = require("./models"); app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { const query = req.query; console.log("QUERY:", query); res.send({ products: [ { id: 1, name: "농구공", price: 100000, seller: "조던", imgUrl: "images/products/basketball1.jpeg", }, { id: 2, name: "축구공", price: 50000, seller: "메시", imgUrl: "images/products/soccerball1.jpg", }, { id: 3, name: "키보드", price: 10000, seller: "그랩", imgUrl: "images/products/keyboard1.jpg", }, ], }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller } = body; models.Product.create({ name, description, price, seller, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.send("상품 업로드에 문제가 생겼습니다."); }); }); app.get("/products/:id/events/:eventId", (req, res) => { const params = req.params; const { id } = params; res.send(); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공"); }) .catch((err) => { console.error(err); console.log("DB 연결 에러 ㅠ "); process.exit(); }); }); 그 전까진 다 실행 잘되고 테이블도 잘 만들어졌는데 postman 에 send 를 누르면 이렇게 나옵니다body 안에는 잘 들어가는데 create 에서 문제가 생긴거 같습니다. ㅠㅠ

도커 컨테이너도 실행 잘 되고, 서버 연결도 잘되서localhost: 4000에서 서버도 잘 띄워집니다.그런데, 데이터베이스만 연결이 안되는 것 같아요 ㅠㅠnpm run dev 만 하면이런 에러가 납니다.// docker-compose.yml// data-source.ts환경변수로도 해봤는데 안되서,일단은 postgres, password로 입력해 놓은 상태입니당 ㅜDocker Desktop에 컨테이너에서 로그 같은 기능이 있길래 봤는데자꾸 비밀번호 인증에 실패 했다고만 나오고 구글링해도 모르겠어용 ㅠㅠreddit-postgres | 2022-08-28 02:13:17.747 UTC [1] LOG: database system is ready to accept connections reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] FATAL: password authentication failed for user "postgres" reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] DETAIL: Connection matched pg_hba.conf line 100: "host all all all scram-sha-256"

프록시 설정하고 응답요청했는데 console.log(요청)도 안되고 데이터자체가 안 받아와지는데 왜 그럴까요..?

TypeError: dispatch is not a functionat _callee$ (login.tsx?11e1:20:10)at tryCatch (runtime.js?ecd4:45:16)at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)at prototype.<computed> [as next] (runtime.js?ecd4:97:1)at asyncGeneratorStep (_async_to_generator.mjs?949a:3:1)at next (async_to_generator.mjs?949a:25:1)라는 에러가 뜨는데 어디가 문젠지 모르겠습니다.. ㅠ

User가 작성한 Blog를 삭제하게 되면 Blog 내부에 있는 Array도 같이 삭제되지 않나요? Blog를 deleteMany를 통해서 삭제한 이후에 추가로 updateMany를 통해서 Blog에 있는 comment를 pull해주는 이유가 궁금합니다

findone vs findoneorfail무슨차이 인가요?

log를 찍어봤는데 env가 undifine으로 아예 불러오지를 못하는데 제가 간과한게 있을까요?

아랫분들도 설명해주셨다싶이 버전이 바뀌면서 쓰이는 용어가 바뀌었어요! 다만 올려주신부분들이 다 수업끝부분 완성본인것같아서.. 저는 Home() About() Users()함수가 들어가야하는 초반 부분 수정본을 첨부해봅니다!      import React from "react"; import {   Route,   Routes,   BrowserRouter } from "react-router-dom"; function Home() {   return <h2>Home</h2>; } function About() {   return <h2>About</h2>; } function Users() {   return <h2>Users</h2>; } function App() {   return (     <BrowserRouter>       <div>         {/* A <Switch> looks through its children <Route>s and           renders the first one that matches the current URL. */}         <Routes>           <Route path="/about" element={About()}>             <Route />           </Route>           <Route path="/users" element={Users()}>             <Route />           </Route>           <Route path="/" element={Home()}>             <Route />           </Route>         </Routes>       </div>     </BrowserRouter>   ); } export default App;    

안녕하세요 선생님.   질문이 있어요.   그전까지는 이해가 되었는데 Context강의가 유독 어렵네요...   먼저 DiaryStateContext.Provider의 value로 {data, onCreate, onRemove} 이렇게 넣으면 prop이 바뀌면 재생성된다는 것이 이해가 안되요. onCreate랑 onRemove는 useCallback으로 재생성 되는 것을 막아 놓은 것 아니었나요? 헷갈리네요.   두번째로 중첩으로 하는 이유가 잘 이해가 안 됩니다. 왜 중첩으로 하면 이게 해결이 될까요? 어차피 memoizedDispatches로 useMemo를 썼으면 그냥 DiaryStateContext.Provider에 value로 넣으면 안되는 건가요. 중첩으로 하는 이유가 잘 납득이 안됩니다. DiaryStateContext.Provieder value={data, memoizedDispatches} 이렇게 하면 안되나요? 그리고 useMemo로 묶는 부분도 다시 한번 설명해주실 수 있나요? useCallback으로 막아놨는데 왜 useMemo로 다시 묶어야 할까요 그냥 onCreate, onRemove, onEdit을 묶지 말고 따로따로 DiaryStateContext.Provider의 value로 {data, onCreate, onRemove} 이렇게 보내주면 안될까요?   강의를 두번 반복했는데도 잘 이해가 안되네요.. 

그 어디에선가 프론트앤드에서 .env 파일이 build 시 노출된다는 얘기를 들었던 것 같은데 사실인가용 프론트앤드에서 .env 파일을 사용하면 더 효율적으로 처리 할 수 있는 작업이 생겼는데 백앤드로 처리해도 되지만 보안상 괜찮은지 궁금해서 여쭤봅니다   

사진을 등록하고 메인 페이지에서 위와 같이 이미지가 제대로 나오지 않습니다. server.ts 에서 express.static("public") 코드 추가한상태입니다. 해당 커뮤니티 페이지 내에서 사진 업로드는 잘 됩니다. 메인 페이지에서 이미지가 안보이는건 어떻게 해결해야 할까요?

안녕하세요 중첩 Context 관련해서 질문하나 드립니다 <DirayStateContext> 라는 컨텍스트 또한 컴포넌트 이기에 data 값이 바뀌면 하위 컴포넌트 들 또한 재렌더링이 되기에 DirayStateContext 에 상태변경 함수를 넣어주게 되면 함수또한 재생성이되서 전달이 되는것이고 그러면 최적화가 풀려버리기에 그하위에 별도의 컨텍스트를 생성해서 data 라는 상태가 변경되어도 DiaryDispatchContext에 전달한 상태변경 함수는 변동이 없어서 최적화를 유지할 수 있다   제가 이해한게 맞는걸까요? 이부분이 살짝 헷갈립니다.

next.config.js 와 같은 설정파일에서는 commonjs 모듈을 사용하고 src폴더내의 소스파일들은 es6 모듈시스템을 사용하는게, src는 웹팩이 번들링하기 때문에 es6를 사용하는것이고, 그외 파일들은 node 완경이라서 그런건가요??   + 그리구 express를 사용할때, package.json에서 module타입을 es6로 변경해서 사용하시지 않는 이유가 있을까요? express 사용할때도 es6 모듈시스템이 편해서 항상 바꿔서 사용하는게 좋지 않을까 생각했는데, 여러 소스코드를 참고해봐도 굳이 es6모듈로 바꾸지 않고 commonjs모듈을 그대로 사용하는거 같더라구요! 혹시 어떤 단점이 있어서인지 궁금합니다

아래의 사진에서 컴퓨터가 자동적으로 수정하는 것이 아닌 직접 server/index.js로 바꿔줘야 하는 것인가요??

1. Users.ts(엔티티) import { Column, CreateDateColumn, DeleteDateColumn, Entity, Index, JoinTable, ManyToMany, OneToMany, PrimaryGeneratedColumn, UpdateDateColumn, } from 'typeorm'; import { ChannelChats } from './ChannelChats'; import { ChannelMembers } from './ChannelMembers'; import { Channels } from './Channels'; import { DMs } from './DMs'; import { Mentions } from './Mentions'; import { WorkspaceMembers } from './WorkspaceMembers'; import { Workspaces } from './Workspaces'; import { IsEmail, IsNotEmpty, IsString } from 'class-validator'; import { ApiProperty } from '@nestjs/swagger'; @Index('email', ['email'], { unique: true }) @Entity({ schema: 'sleact', name: 'users' }) export class Users { @PrimaryGeneratedColumn({ type: 'int', name: 'id' }) id: number; @ApiProperty({ example: `aaa123@google.com`, description: '이메일', required: true, }) @IsEmail() @IsNotEmpty() @Column('varchar', { name: 'email', unique: true, length: 30 }) email: string; @ApiProperty({ example: `홍길동`, description: '닉네임', required: true, }) @IsString() @IsNotEmpty() @Column('varchar', { name: 'nickname', length: 30 }) nickname: string; @ApiProperty({ example: `123123`, description: '비밀번호', required: true, }) @IsString() @IsNotEmpty() @Column('varchar', { name: 'password', length: 100, select: false }) password: string; @CreateDateColumn() createdAt: Date; @UpdateDateColumn() updatedAt: Date; @DeleteDateColumn() deletedAt: Date | null; @OneToMany(() => ChannelChats, (channelchats) => channelchats.User) ChannelChats: ChannelChats[]; @OneToMany(() => ChannelMembers, (channelmembers) => channelmembers.User) ChannelMembers: ChannelMembers[]; @OneToMany(() => DMs, (dms) => dms.Sender) DMs: DMs[]; @OneToMany(() => DMs, (dms) => dms.Receiver) DMs2: DMs[]; @OneToMany(() => Mentions, (mentions) => mentions.Sender) Mentions: Mentions[]; @OneToMany(() => Mentions, (mentions) => mentions.Receiver) Mentions2: Mentions[]; @OneToMany( () => WorkspaceMembers, (workspacemembers) => workspacemembers.User, ) WorkspaceMembers: WorkspaceMembers[]; @OneToMany(() => Workspaces, (workspaces) => workspaces.Owner) OwnedWorkspaces: Workspaces[]; @ManyToMany(() => Workspaces, (workspaces) => workspaces.Members) @JoinTable({ name: 'workspacemembers', joinColumn: { name: 'UserId', referencedColumnName: 'id', }, inverseJoinColumn: { name: 'WorkspaceId', referencedColumnName: 'id', }, }) Workspaces: Workspaces[]; @ManyToMany(() => Channels, (channels) => channels.Members) @JoinTable({ name: 'channelmembers', joinColumn: { name: 'UserId', referencedColumnName: 'id', }, inverseJoinColumn: { name: 'ChannelId', referencedColumnName: 'id', }, }) Channels: Channels[]; }   2. join.request.dto import { PickType } from '@nestjs/mapped-types'; import { Users } from '../../entities/Users'; export class JoinRequestDto extends PickType(Users, [ 'email', 'nickname', 'password', ] as const) {}   3. user.dto import { JoinRequestDto } from './join.request.dto'; import { ApiProperty } from '@nestjs/swagger'; export class UserDto extends JoinRequestDto { @ApiProperty({ example: `1`, description: '아이디', required: true, }) id: number; }   4. users.controller import { Body, Controller, ForbiddenException, Get, NotFoundException, Post, Req, Res, UseGuards, UseInterceptors, } from '@nestjs/common'; import { UsersService } from './users.service'; import { JoinRequestDto } from './dto/join.request.dto'; import { User } from '../common/decorators/user.decorator'; import { UndefinedToNullInterceptor } from '../common/interceptors/undefinedToNull.interceptor'; import { LocalAuthGuard } from '../auth/local-auth.guard'; import { NotLoggedInGuard } from '../auth/not-logged-in.guard'; import { LoggedInGuard } from '../auth/logged-in.guard'; import { ApiCookieAuth, ApiOperation, ApiResponse, ApiTags, } from '@nestjs/swagger'; import { Users } from '../entities/Users'; import { UserDto } from './dto/user.dto'; @ApiTags('USERS') @UseInterceptors(UndefinedToNullInterceptor) @Controller('api/users') export class UsersController { constructor(private readonly usersService: UsersService) {} @ApiCookieAuth('connect.sid') @ApiOperation({ summary: '내 정보 가져오기' }) @ApiResponse({ type: UserDto, }) @Get() async getMyProfile(@User() user: Users) { return user || false; } @ApiResponse({ status: 500, description: 'Server Error..', }) @ApiResponse({ status: 200, description: '성공!', }) @ApiOperation({ summary: '회원가입' }) @UseGuards(NotLoggedInGuard) @Post() async join(@Body() body: JoinRequestDto) { const user = this.usersService.findByEmail(body.email); if (!user) { throw new NotFoundException(); } const result = await this.usersService.join( body.email, body.nickname, body.password, ); if (result) { return 'ok'; } else { throw new ForbiddenException(); } } @ApiResponse({ status: 200, description: '성공', type: UserDto, }) @ApiOperation({ summary: '로그인' }) @UseGuards(LocalAuthGuard) @Post('login') async login(@User() user: Users) { return user; } @ApiCookieAuth('connect.sid') @ApiOperation({ summary: '로그아웃' }) @UseGuards(LoggedInGuard) @Post('logout') async logout(@Req() req, @Res() res) { req.logOut(); res.clearCookie('connect.sid', { httpOnly: true }); res.send('ok'); } } ---------------------------- 스웨거 문서 1. Dto 관련 스키마   2. usersDto를 사용한 결과   3. joinRequestDto를 사용한 결과 마지막 결과 쪽에 제가 생각한 것은 빈칸이 아니라{       email : "aaa123@google.com"       nickname: "홍길동"       passwork: "123123"} 이었는데 빈칸으로 나오네요.. 혹시 잘못한 부분이 있을까요?    

node_modules 폴더 삭제 package-lock.json 파일 삭제 package.json 파일 아래 내용으로 대체 대체 후 npm i 명령어 입력 macOS 기준입니다.     { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12", "@testing-library/user-event": "^13.5.0", "bootstrap": "^5.2.0", "connected-react-router": "^6.9.3", "dotenv": "^16.0.1", "react": "^17", "react-dom": "^17", "react-redux": "^8.0.2", "react-router-dom": "^5.3.3", "react-scripts": "5.0.1", "reactstrap": "^9.1.3", "redux": "^4.2.0", "redux-saga": "^1.1.3", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

ilerplate-mern-stack-master\boilerplate-mern-stack-master> npm install npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an old version of npm,npm WARN old lockfile so supplemental metadata must be fetched from the registry.npm WARN old lockfilenpm WARN old lockfile This is a one-time fix-up, please be patient... npm WARN old lockfilenpm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issuenpm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecatednpm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependenciesnpm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecatednpm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecatednpm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated bcrypt@3.0.8: versions < v5.0.0 do not handle NUL in passwords properlynpm WARN deprecated node-pre-gyp@0.14.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the futurenpm ERR! code 1npm ERR! path C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! command failednpm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\SAMSUNG\AppData\Local\Temp\install-ca11b823.cmdnpm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v102' (1)npm ERR! node-pre-gyp info it worked if it ends with oknpm ERR! node-pre-gyp info using node-pre-gyp@0.14.0npm ERR! node-pre-gyp info using node@17.4.0 | win32 | x64npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https downloadnpm ERR! node-pre-gyp info check checked for "C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node" (not found)npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v102-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v102-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v102-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@17.4.0 (node-v102 ABI, unknown) (falling back to source compile with node-gyp)npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v102-win32-x64-unknown.tar.gznpm ERR! gyp info it worked if it ends with oknpm ERR! gyp info using node-gyp@9.0.0npm ERR! gyp info using node@17.4.0 | win32 | x64npm ERR! gyp info oknpm ERR! gyp info it worked if it ends with oknpm ERR! gyp info using node-gyp@9.0.0npm ERR! gyp info using node@17.4.0 | win32 | x64npm ERR! gyp info find Python using Python version 3.10.2 found at "C:\Users\SAMSUNG\AppData\Local\Programs\Python\Python310\python.exe"    npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! find VS msvs_version not set from command line or npm confignpm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Promptnpm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more detailsnpm ERR! gyp ERR! find VS looking for Visual Studio 2015npm ERR! gyp ERR! find VS - not foundnpm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! find VS **************************************************************npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studionpm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.npm ERR! gyp ERR! find VS For more information consult the documentation at:npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windowsnpm ERR! gyp ERR! find VS **************************************************************npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! configure errornpm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to usenpm ERR! gyp ERR! stack     at VisualStudioFinder.fail (C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47)npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16   npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14)npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14   npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16  npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:406:5)npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:520:28) npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1090:16)npm ERR! gyp ERR! System Windows_NT 10.0.19044npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\SAMSUNG\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v102"npm ERR! gyp ERR! cwd C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! gyp ERR! node -v v17.4.0npm ERR! gyp ERR! node-gyp -v v9.0.0npm ERR! gyp ERR! not oknpm ERR! node-pre-gyp ERR! build errornpm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v102' (1)npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29)npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:520:28)npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1090:16)npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.19044npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build"npm ERR! node-pre-gyp ERR! cwd C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! node-pre-gyp ERR! node -v v17.4.0npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.14.0npm ERR! node-pre-gyp ERR! not ok npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\SAMSUNG\AppData\Local\npm-cache\_logs\2022-08-08T08_26_57_475Z-debug-0.log   vscode는 최신버전을 사용중이고 node -v    v17.4.0 npm -v     8.16.0 를 사용하고 있습니다.  

안녕하세요. 진행하신 강의는 웹팩4이므로 저는 웹팩5로 진행하면서 정말 많은 공부가 되었습니다!   한 가지만 빼고 강의 코드를 웹팩5으로 변환시키는 것을 성공하였는데요. BannerPlugin을 사용하기 전에 직접 번들링 코드에 배너를 넣는 부분은 실패했습니다ㅠ 웹팩5에서는 더 이상 assets['main'js].source 함수를 사용하지 않는 것 같았습니다. 해당 함수를 재정의해봤지만 배너가 붙지 않더라구요.   공식문서를 뒤져보면서 이것저것 시도해봤지만 성공하지 못했습니다ㅠ 혹시 여기에 대한 해답이 있으시다면 공유 가능할까요?

  let ps = new naver.maps.service.Piaces(); Places(); 이부분이 안돼요. 검색 기능이 안되요. ㅠㅠ 도와주세요. <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <meta       name="viewport"       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"     />     <title>myfirstmap</title>     <link rel="stylesheet" href="/stylesheets/style.css" />     <script       type="text/javascript"       src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=x8m68jepl8"     ></script>     <script       src="https://code.jquery.com/jquery-3.6.0.min.js"       integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="       crossorigin="anonymous"     ></script>     <script       type="text/javascript"       src="//dapi.kakao.com/v2/maps/sdk.js?appkey=08431822c52c7e66355e30a38ecf97bc&libraries=services"     ></script>   </head>   <body>     <div id="navbar">myfirstmap</div>     <div id="infoBox">       <div id="infoTitle">현재날짜</div>       <div id="infoConent">2022.08.10</div>     </div>     <div id="search">       <input id="search_input" placeholder="목적지를 입력해주세요" />       <button id="search_button">검색</button>     </div>     <div id="current">현재 위치</div>     <div id="map" style="width: 100%; height: 100vh"></div>     <script type="text/javascript" src="/data/data.js"></script>     <script>       var mapOptions = {         center: new naver.maps.LatLng(37.3595704, 127.105399),         zoom: 10,       };       var map = new naver.maps.Map("map", mapOptions);       var markerList = [];       var infowindowList = [];       for (var i in data) {         var target = data[i];         var latlng = new naver.maps.LatLng(target.lat, target.lng);         marker = new naver.maps.Marker({           map: map,           position: latlng,           icon: {             content: "<div class='marker'></div>",             anchor: new naver.maps.Point(12, 12),           },         });         var content = `<div class='infowindow_wrap'>           <div class='infowindow_title'>${target.title}</div>           <div class='infowindow_content'>${target.content}</div>           <div class='infowindow_date'>${target.date}</div>         </div>`;         var infowindow = new naver.maps.InfoWindow({           content: content,           backgroundColor: "#00ff0000",           borderColor: "#00ff0000",           anchorSize: new naver.maps.Size(0, 0),         });         markerList.push(marker);         infowindowList.push(infowindow);       }       for (var i = 0, ii = markerList.length; i < ii; i++) {         naver.maps.Event.addListener(map, "click", ClickMap(i));         naver.maps.Event.addListener(           markerList[i],           "click",           getClickHandler(i)         );       }       function ClickMap(i) {         return function () {           var InfoWindow = infowindowList[i];           infowindow.close();         };       }       function getClickHandler(i) {         return function () {           var marker = markerList[i];           var InfoWindow = infowindowList[i];           if (infowindow.getMap()) {             infowindow.close();           } else {             infowindow.open(map, marker);           }         };       }       let currentUse = true;       $("#current").click(() => {         if ("geolocation" in navigator) {           navigator.geolocation.getCurrentPosition(function (position) {             const lat = position.coords.latitude;             const lng = position.coords.longitude;             const latlng = new naver.maps.LatLng(lat, lng);             if (currentUse) {               marker = new naver.maps.Marker({                 map: map,                 position: latlng,                 icon: {                   content:                     '<img class="pulse" draggable="false" unselectable="on" src="https://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png" >',                   anchor: new naver.maps.Point(11, 11),                 },               });               currentUse = false;             }             map.setZoom(14, false);             map.panTo(latlng);           });         } else {           alert("위치정보 사용 불가능");         }       });       let ps = new kakao.maps.services.Places();       $("#search_input").on("keydown", function (e) {         if (e.keyCode === 13) {           let content = $(this).val();           ps.keywordSearch(content, placeSearchCB);         }       });       function placeSearchCB(data, status, pagination) {         if (status === kakao.maps.services.Status.OK) {           let target = data[0];           const lat = target.y;           const lng = target.x;           const latlng = new naver.maps.LatLng(lat, lng);           marker = new naver.maps.Marker({             position: latlng,             map: map,           });         } else {           alert("검색결과가 없습니다.");         }       }     </script>   </body> </html>