function helloUser() { const username = prompt('What is your name?'); socket.emit('new_user', username, (data) => {drawHelloStranger(data);});}사용자가 처음 화면에 진입했을 때에 사용자가 이름을 입력하고 나면 ‘new_user’에 해당하는 게이트웨이 로직이 실행되는 것으로 알고 있습니다.이 로직 안에서 ‘user_connected’에 대해 브로드 캐스팅을 해주고 있는데요 socket.broadcast.emit('user_connected', username);프론트엔드에서 아래와 같이 connected!라는 채팅글도 화면에 나타나야 할 것 같은데socket.on('user_connected', (username) => { drawNewChat(`${username} connected!`);});화면 진입자 입장에서는 connected!부분이 나타나지 않습니다. 왜 그런지 설명해주실 수 있을까요? 화면 진입자 또한 위 코드를 수행하고 있는데화면 진입자를 제외한 나머지 사용자에게는 connected!가 나타나지만 화면 진입자는 나타나지 않는 이유가 궁금합니다.

안녕하세요.동영상 강의 잘 보고 있는 사람입니다.다름이 아니라Nuxt.js 검색기능 강좌 보고 있는 도중 궁금한 것이 있어 문의드립니다.input 타입 text에서 입력하고 검색하는 것은 어찌 영상 따라하면서 구현은 하였으나..실문에서는 input창 뿐만 아니라 다양한 검색조건이 있지 않습니까?예를 들어 날짜 입력 하거나 라디오, 체크박스, 셀렉트박스에서 검색할 부분 체크 한 다음에 최종 검색 버튼을 누르잖아요.그렇게 여러가지 선택해서 검색하려면 작업을 어떻게 해야할까요?궁급합니다.

cats.service.ts 파일import { Injectable } from '@nestjs/common'; @Injectable() export class CatsService { getAllCats(): string { return 'get all cats1'; } } export const getAllCatsTest = () => { return 'get all cats2'; }; cats.controller.ts 파일import { CatsService } from './cats.service'; import * as catsService2 from './cats.service'; import { Controller, Get, } from '@nestjs/common'; @Controller('cats') export class CatsController { constructor(private catsService: CatsService) {} @Get() getAllCat() { return this.catsService.getAllCats(); } @Get('2') getAllCat2() { return catsService2.getAllCatsTest(); } }   Dependency Injection을 사용해야하는 이유가 명확히 이해가 안됩니다. A라는 클래스에서 B라는 클래스를 인스턴스화 (new 키워드 사용) 했을 때, A클래스가 B클래스에 대해서 의존성이 발생하고만약에 B 클래스의 수정점이 발생한다면, A클래스도 수정해줘야하는 부분은 인지를 했습니다. 그런 경우에 변화를 유연하게 대응하기 위해 A클래스에서 직접 인스턴스화를 하는것이 아니라,인스턴스화된 클래스를 주입받아 사용만 하는걸 Dependency Injection(의존성 주입)으로 이해했습니다. 하지만, import해서 쓰면 되는걸 왜 굳이 의존성주입이라는 형태로 사용해야하는지 이해를 못했습니다. 제가 위에 예시로 작성한 service 파일과 controller를 보시면,getAllCat()는 의존성 주입해서 사용한거고, getAllCat2는 import한 서비스를 사용한겁니다. 어떠한 이유에서 의존성 주입의 개념을 사용해야하는지 명쾌하게 알고 싶습니다.  

nest js와 react로 웹앱을 만들어 aws amplify를 이용해 배포하려고 하는데요. 이런 오류가 발생해서 deploy를 실패하고 있습니다. 제 SSR 코드는 이렇습니다.제가 완전 초보라 SIGNIN 페이지와 소스폴더 깃헙 링크를 첨부합니다. 제발 도와주세요.https://github.com/arty0928/SNS-Community-Instagramimport {getProviders, signIn as SignIntoProvider } from "next-auth/react"; import Header from "../../components/Header"; import Image from "next/future/image"; //Brower... function signIn({providers}){ return ( <> <Header /> <div className="flex flex-col items-center min-h-screen py-2 mt-56 text-center"> <Image className="w-80" src="/img/스쿼드 로고.png" alt="" width={400} height={200}/> <p className="font-xs italic"> SQUARD PROJECT - By EunSeo PARK </p> <div className='mt-20'> {Object.values(providers).map((provider) => ( <div key={provider.name}> <button className="p-3 bg-blue-500 rounded-lg text-white" onClick={() => SignIntoProvider(provider.id, {callbackUrl: "/"})}> Sign in with {provider.name} </button> </div> ))} </div> </div> </> ); } //Server side //export async function getServerSidedProps export async function getServerSideProps() { const providers = await getProviders(); return { props: { providers, }, }; } export default signIn; [WARNING]: Error occurred prerendering page "/auth/signin". Read more: https://nextjs.org/docs/messages/prerender-error Error: Error for page /auth/signin: pages with `getServerSideProps` can not be exported. See more info here: https://nextjs.org/docs/messages/gssp-export at /codebuild/output/src687705454/src/SNS-Community-Instagram/node_modules/next/dist/export/worker.js:218:27 at async Span.traceAsyncFn (/codebuild/output/src687705454/src/SNS-Community-Instagram/node_modules/next/dist/trace/trace.js:79:20)

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

localhost에 대한 액세스가 거부됨이 페이지를 볼 수 있는 권한이 없습니다.이런 에러페이지가 나옵니다. 그대로 따라 했는데..

getServerSideProps를 이용해서 SSR을 할 때axios에서 계속 401 Unauthorized 에러가 발생하네요...혹시몰라서 CSR로도 시도해봤는데 이때는 잘 되구요...혹시 SSR에서 header 설정을 추가로 해주어야한다거나 하는 경우가 있는건가요...? 어떻게 시도를 해도 에러가 없어지지 않네요ㅠㅠㅠ

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

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

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~~~} 가 나옵니다.

안녕하세요, 제로초님 강의 잘 들었습니다. 강의를 듣고 혼자서 프로젝트를 진행하는데 너무 막히는점이 있어서 질문드립니다. 마이페이지에서 유저 정보를 불러오는 작업을 하고 있습니다. 토큰을 받아서 쿠키에 저장하여 사용하고 있는데.. 배포시에 저 말고 다른 사람도 저의 토큰으로 요청을 보내는 모습이 발견되었는데 해결을 못하고 있어요ㅠ 로초님 강의 후반부에서 보긴봤었는데 상황이 약간 다른거 같아서 질문드려요ㅠ saveCookies는 쿠키를 받아서 디스패치하여 스토어에 저장하는 함수이고 createCustomHeader는 Authorization : {`Bearer ${token}`}을 리턴하는 함수입니다. export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { saveCookies(store, context); const rootState: RootState = store.getState(); const user_id = rootState.loginState.user_id; axiosInstance.interceptors.request.use( async function (config) { try { config.headers = null; if (context.req && context.req.headers.cookie) { const allCookies = cookies(context); const accessToken = allCookies.accessToken; config.headers = createCustomHeader(accessToken); } return config; } catch (error) { console.log(error); } }, function (error) { return Promise.reject(error); }, ); store.dispatch(getUserInfoInMypageRequest(user_id)); store.dispatch(END); await store.sagaTask.toPromise(); return { props: {}, }; }, );

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

안녕하세요. 문제 어떤 UI가 모바일용과 데스크탑용의 구성이 너무 달라서 모바일용 컴포넌트 / 데스크탑용 컴포넌트로 개발되어있습니다. 이걸 미디어쿼리처럼 사용자의 device width에 따라 모바일/데스크탑용 UI를 각각 뿌려주고 싶지만, SSR에서는 javascript의 window 객체는 만들어져 있지 않기 때문에 접근은 불가능하므로 javascript로는 사용자 device의 width를 가져오는건 불가능에 가까운것 같고 대신에 request의user-agent를 이용해 사용자 device의 정보를 가져오면 판별은 할 수 있을꺼 같은데 미디어 쿼리같이 실시간으로 사용자 device의 width에 따라 UI를 나누는건 어려운 상황 질문 보통 모바일용과 데스크탑용 컴포넌트를 가지고 있을때 SSR에서는 어떻게 모바일과 데스크탑을 구분하시나요?

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

강의 진행하다가 앞부분 개념이 헷갈려 다시 듣고 왔는데 궁금한 점이 있어 여쭤 봅니다. ssr시 첫 번째 로딩만  브라우저 -> 프론트 서버 -> 벡엔드 -> 디비  이런식으로 전통적인 방법으로 데이터를 받아오고 이후에는 그냥 spa 방식으로 동작한다 라고 이해했는데  질문 1. 그럼 저희 프로젝트에서 saga에서 api 요청을 보내고 받아오는건 브라우저에서 벡엔드로 요청을 보내고 받아오는 것이라고 이해하는 게 맞는지 궁금합니다. 2. 저희 프로젝트에서 npm run dev 로 프론트 서버 실행후localhost:3060 이런 주소로 프론트 서버에 요청을 보내면 벡엔드에서 데이터 요청 후 데이터가 들어있는 정적 파일을받아 오는게 CSR 와의 차이라고 이해했는데 이 데이터를 받아온다는게 pages 폴더 안에 있는 index.js말하는 건가요? 아님 front 단에 작성된 모든 coponent들과 page들을 전부 들고와서 메모리에 캐싱 한다는 말인가요?   나름 구글링하고 찾아 봤는데 명쾌하게 이해되지가 않네요 혹시 강의 뒷부분에 다루어지는 내용이라면 죄송합니다.. 매번 감사드려요

안녕하세요 강사님 궁금하게 생겨 문의 드립니다.     다음 사진처럼 항상 파일을 클릭하면 상단 import줄이 저렇게 변하는데요 파일을 다시 닫으면 빨간줄이 사라집니다.   깃허브에 있는 tsconfig.json과 .eslintrc.js는 그대로 복붙했습니다. 제가놓친게있을까요?

안녕하세요 강사님 cats.module.ts 파일에서  import: [MongooseModule.forFeature([{ name: Cat.name, schema: CatSchema }]),이부분에서 빨갛게 해논부분에 왜 Cat.name , name이 붙어있는 이유가 뭔지 알고싶습니다. 저기서 name에 할당한 값으로 Service에서 생성자 주입 받을때? Cat.name 으로 @InjectModel(Cat.name) 하는걸로 보이는데 왜 ".name" 이 붙은건가요?..  

이런 경고가뜨는데 왜 뜨는걸까요? RootStoreProvider 쪽에서 문제가 되는것같아서 찾아봤는데 RootStoreProvider에서 경고가 뜨는데 저게 찾아보니 스택오버플로에 hooks 쓸때 16버전 부터는 useEffect() 로 감싸라는것같은데 서버사이드렌더링은 클라이언트에서 화면그리기전에 먼저 store 세팅하는거라 어떻게 해야될까요?

11:37 에 getStaticProps 가 이벤트페이지 같은거에 적합하다 하셨는데  getStaticProps 라는게 npm build 를 하거나 npm run dev 를해서 서버를 키면  getStaticProps가 html 을 정적으로 만드는것까지 이해가 가는데 만약 이벤트 페이지를 변경하거나 삭제하고싶을때  이벤트 정보가 담긴 DB 는 삭제 또는 수정해도 이미 html 로 만들어놔서 그대로 보여주고 서버를 껏다 켜야지만 삭제 또는 수정한 내용이 적용되는건가요?

저는 passport-jwt를 사용하여 로그인을 구현하였는데, 소셜 로그인을 위해 passport-apple 를 사용하여 유저 정보를 받아오려고하는데 막혔습니다.  https://github.com/ananay/passport-apple/issues/30 nest.js에서 passport-apple사용시 Strategy 클래스의 validate함수에 인자가 제대로 들어오지않는 이슈가 있는것같습니다. 제가 유저정보를 받아온후 그것을 db에 저장후 jwt를 발행하여 다음요청부터는 애플을 거치지않고 제 서버로 jwt를 보내면 제가 유저정보 주는방식으로 구현하려고하는데, 유저 정보를 어떻게 받아와야하는지 모르겠습니다.   구글링해보니 idToken을 decode하면 유저정보가 들어있다고하는데, import { Injectable } from '@nestjs/common'; import { JwtService } from '@nestjs/jwt'; import { PassportStrategy } from '@nestjs/passport'; import { DecodedIdToken, Strategy, VerifyCallback } from 'passport-apple'; @Injectable() export class AppleStrategy extends PassportStrategy(Strategy, 'apple') { constructor(private jwtService: JwtService) { super({ clientID: process.env.APPLE_CLIENT_ID, teamID: process.env.APPLE_TEAM_ID, callbackURL: process.env.APPLE_CALLBACK_URL, keyID: process.env.APPLE_KEY_ID, privateKeyString: process.env.APPLE_KEY.replace(/\\n/g, '\n'), passReqToCallback: false, }); } async validate( accessToken: string, idToken: string, profile: any, done: VerifyCallback, ) { const decodedIdToken: DecodedIdToken = this.jwtService.verify(idToken); console.log(decodedIdToken); const user = { provider: 'apple', snsId: decodedIdToken.sub, password: decodedIdToken.sub, }; console.log(user); done(null, user); } } 이렇게 코드를 짜니 [Nest] 31  - 02/06/2022, 8:41:18 AM   ERROR [ExceptionsHandler] jwt malformed JsonWebTokenError: jwt malformed     at Object.module.exports [as verify] (/usr/src/app/node_modules/jsonwebtoken/verify.js:63:17)     at JwtService.verify (/usr/src/app/node_modules/@nestjs/jwt/dist/jwt.service.js:37:20)     at AppleStrategy.validate (/usr/src/app/src/auth/strategies/apple.strategy.ts:25:60)     at AppleStrategy.<anonymous> (/usr/src/app/node_modules/@nestjs/passport/dist/passport/passport.strategy.js:20:55)     at Generator.next (<anonymous>)     at /usr/src/app/node_modules/@nestjs/passport/dist/passport/passport.strategy.js:8:71     at new Promise (<anonymous>)     at __awaiter (/usr/src/app/node_modules/@nestjs/passport/dist/passport/passport.strategy.js:4:12)     at AppleStrategy.callback [as _verify] (/usr/src/app/node_modules/@nestjs/passport/dist/passport/passport.strategy.js:17:45)     at /usr/src/app/node_modules/passport-oauth2/lib/strategy.js:205:24 이러한 에러가 뜹니다. idToken을 어떻게 해독해야하는지 알수있을까요..? 혹시 실무에서 애플로그인 서비스를 구현해보셨다면 이방법말고 다른방법이라도 있다면 알려주시면 감사하겠습니다!