안녕하세요 제로초님redux-toolkit에 next-redux-wrapper와 redux-persist 연결하는데 질문드립니다.import userReducer from "@slice/userSlice"; import commonSlice from "@slice/commonSlice"; import localSlice from "@slice/locals"; export const persistConfig = { key: "root", version: 0, whitelist: ["locals"], storage, }; export const rootReducer = (state, action) => { if (action.type === HYDRATE) { return { ...state, ...action.payload, }; } return combineReducers({ user: userReducer, common: commonSlice, locals: localSlice, })(state, action); }; export const reducer = persistReducer(persistConfig, rootReducer); 이렇게 초기 셋팅을 해주었고, export const store = configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }).concat(logger), devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production", }); export const persistor = persistStore(store); const setupStore = (context: any): EnhancedStore => store; const makeStore: MakeStore<any> = (context: any) => setupStore(context); export const wrapper = createWrapper<Store>(makeStore); export default wrapper;이렇게 스토어를 만들었습니다.그런데 문제가.. persist에서 rehydrate에서는 저장된 값이 유지 되어있으나.next-redux-wrapper의 hydrate에서 초기 스테이트값을 다시 저장해버리는 문제가 있습니다.둘중 하나를 버려야 할까요? 아니면 셋팅이 잘못된걸까요?

혹시 저처럼 buffuer가 찍히지 않으신 분들은storage에 multer.memoryStage()를 추가하면 buffer가 찍히실 겁니다.https://github.com/expressjs/multer#memorystorage

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 에서 문제가 생긴거 같습니다. ㅠㅠ

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

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

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

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

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"} 이었는데 빈칸으로 나오네요.. 혹시 잘못한 부분이 있을까요?    

  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>

2종류의 user테이블a_user, b_user 테이블을 가지고 있는데 각 유저테이블에 대해 jwt 검증을 나눠서 하고싶은데..아무리해도 안되는데 팁이 있을까요

indexRouter.get('/', (req: Request, res: Response, next: NextFunction) => { console.log(req.cookies); const {name, pwd} = req.cookies; if (!name || !pwd) { res.sendFile(path.join(__viewPath, 'index.html')); } else { res.send(`${name}님 환영합니다!`); }});indexRouter.get('/login', (req: Request, res: Response) => { const {name, pwd} = req.query; const expire = new Date(); expire.setSeconds(30); const cookieOptions = { httpOnly: true, expires: expire, path: '/', }; res.cookie('name', name, cookieOptions) .cookie('pwd', pwd, cookieOptions) .redirect('/');});기존 쿠키서버를 express서버로 적용해보는 과정인데요, /login에서 받은 정보를 쿠키에 담고, redirect로 홈을 호출하고 있는데요,문제는 홈에서 보시면 req.cookies에 쿠키가 담겨있을때가 있고, 없을때가 있습니다."(console.log에서 쿠키값이 없을때: "[Object: null prototype]{}" 쿠키값이 존재할때: "{test:"test"}") 혹시 쿠키가 클라이언트에게 전송되기전에 redirect가 먼저 발생하여 쿠키값이 없어, index.html을 내보내는걸까요?6번 정도 시도한다고 가정할때 두번정도 쿠키값이 정상으로 전송되고, 나머지 4번 정도가 쿠키값이 없는 상태로 index가 호출됩니다;(정상결과와 아닌것은 순서가 없습니다;; 운이 좋으면되고 안좋으면 안되는 느낌입니다...)혹시 비동기 작업이랑 관련이 있을까여?

현재 웹개발중인 초급 개발자입니다. 현재 개발이 마무리 단계에서 웹서버랑 통신?!이 안되는 듯합니다.  로컬서버에서는 오류없이 실행이 되는데 웹서버에서는 현재 실행이 안되고 있습니다.  Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 라고 콘솔창에 이렇게 오류가 표시됩니다. 원인을 모르겠습니다. 어디를 수정해야하는지... 현재 apache2로 웹서버를 연동하고 있습니다.

우선 웹라이브러리 파트의 Link태그 적용 강의에서   후반부에 useParams 를 사용하게 되는데,   이부분부터 무언가 오류가 발생하네요..   1. 메인화면 들어갔을때 오류화면     2. 상품클릭했을때 콘솔로그     상품을 클릭했을때 변경된 주소까지는잘 적용 되고,   useParams 를 사용하기 전까지는 정상 작동 했는데,   product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다   이전에 소스에서는 문제가 안생겼군요 ㅠㅠ   import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage;     오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다...   react-router-dom 설치 할때 버전을 확인 못하고   그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데,       package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데   오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ  

강의를 보며 그대로 따라했는데    const query = req.query;   console.log("QUERY : ", query);   를 추가했을때 터미널에 node server.js를 하면 에러가 납니다ㅜㅜ

async existsByEmail(email: string): Promise<boolean> { try { const result = await this.catModel.exists({ email }); return result; } catch (error) { throw new HttpException('db error', 400); } } 에서 return result부분에서 오류가 발생합니다. src/cats/cats.repository.ts:20:7 - error TS2322: Type 'Pick<Document<Cat, any, any>, "_id">' is not assignable to type 'boolean'.   20       return result;          ~~~~~~~~~~~~~~exists() 따라가 보면 리턴타입이 boolean이 아닌거 같은데 어떤 부분을 확인해 보면 좋을까요?   console.log로 result를 찍어보면  { _id: new ObjectId~~~} 가 나옵니다.

import { Injectable, ExecutionContext, HttpException, HttpStatus, } from '@nestjs/common'; import { AuthGuard } from '@nestjs/passport'; import { JwtService } from '@nestjs/jwt'; @Injectable() export class JwtAuthGuard extends AuthGuard('jwt') { constructor( private readonly jwtService: JwtService, // @Inject(forwardRef(() => AdminsService)) // private readonly adminsService: AdminsService, ) { super(); } canActivate(context: ExecutionContext) { const request = context.switchToHttp().getRequest(); const { authorization } = request.headers; if (authorization === undefined) { throw new HttpException('Token 전송 안됨', HttpStatus.UNAUTHORIZED); } //const token = authorization.replace('Bearer ', authorization); const token = authorization.replace('Bearer ', ''); //console.log(token, 'token!!!'); request.user = this.validateToken(token); return true; } validateToken(token: string) { const secretKey = process.env.SECRET ? process.env.SECRET : 'dev'; try { const data = this.jwtService.verify(token, { secret: secretKey, }); console.log(data, '11번가데이터'); return data; } catch (e) { switch (e.message) { // 토큰에 대한 오류를 판단합니다. case 'INVALID_TOKEN': case 'TOKEN_IS_ARRAY': case 'NO_USER': throw new HttpException('유효하지 않은 토큰입니다.', 401); case 'EXPIRED_TOKEN': throw new HttpException('토큰이 만료되었습니다.', 410); default: console.trace(e); // console.log('광섭짱과 함께하는 코딩공부',) throw new HttpException('서버 오류입니다.', 500); } } } }   이부분은 jwt.guard.ts 입니다 저 빨간줄에서   Trace: TypeError: Cannot read properties of undefined (reading 'verify') 이렇게 나오는데 왜 저렇게 나오는건지 도저히 모르겠네요 해당 토큰값도 잘 받아와서 verify 를 이용해 토큰 유효성 검사를 진행하려하는데 그부분에서 에러가 계속 납니다... 도와주세요

안녕하세요! 강의 잘듣고있습니다.!! PositiveIntPipe pipe를 만들때도 의존성 주입을 해야하기 때문에 @Injectable()를 사용하신건가요?? 만약 맞다면 사용한 이유가 궁금합니다.!!( @Injectable 를빼도 작동이 잘되고 파이프도 의존성을 주입해야하나? 라는 궁금증이 있어서 남깁니다!) 감사합니다!

안녕하세요.  .env에 MONGODB_URI를 못 읽어서 계속 mongodb connect 실패가 발생하고 있습니다. 혹시나 하여 app.modules.ts 에서 @Modules 앞 뒤로 MONGODB_URI를 콘솔로 찍어봤는데 @Modules 전에는 값이 안나오고 이후에는 잘 출력되는데요.  혹시 추가로 확인해야할 부분이 있을까요?   감사합니다.

User모델에 Post모델을 넣어서 로그인 오류를 해결한건 이해했습니다. 근데 왜 User모델에 들어간 이름이 Posts인가요..? 아무곳에서도 Posts라고 안쓰지않았나요?

부모컴포넌트에서 리덕스를 사용하지않고 props로 값을 전달할때에 자식 컴포넌트에서 props.state를 사용하여 앞에 프롭스를 항상붙여 써도 동작하는경우가있고 프롭스 없이 state를 바로사용할수있는경우가 있는데 어떤 차이가있고 어떤걸 사용해야하는지 궁금합니다 만약 프롭스를 붙이지않고 정상적으로 동작하여도 props. 형태를 매번 사용하는것이 좋을까요?   아래는 예시 상황입니다   // 부모에게서 randomstate 를 전달받아 바로 사용하는 자식컴포넌트 const Child1 = ( randomstate ) => { console.log(randomstate); return 자식 컴포넌트 ; }; ...   // props를 매번 이용하여 사용하는 컴포넌트   const Child2 = ( props, randomstate ) => { console.log(props.randomstate); return 자식 컴포넌트 ; }; ...