묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
매장 데이터 json 파일
안녕하세요, 강사님 강의 잘 수강하고 있습니다!3-2 매장 데이터 불러오기 강의에서매장 정보가 담긴 json 파일은어디서 구해오는 파일인지 궁금합니다.올려주신 json파일로 강의 수강 진행하고 있지만, 원하는 다른 매장 데이터로 이용하고 싶을 경우 어디에서 이 json 파일을 얻어와야 하는 것인가요? 감사합니다!
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
Cannot set headers after they are sent to the client
Cannot set headers after they are sent to the client에러를 구글링해보니 중복처리할 경우 발생한다하던데 이게 뭔 말인지도 잘 모르겠고 코드도 똑같이 따라쳤는데..ㅜㅜ 도와주세요 어떻게 해결해야할까요..몇시간째 붙잡고 있어요
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
populate 문제(cats schema 오류) 해결법
강의대로 따라 했으나, 아래와같은 오류 나는경우 해결법 입니다.ERROR [ExceptionsHandler] Schema hasn't been registered for model "comments".Use mongoose.model(name, schema)다른 문의글 보면 답변으로 버전 문제라고 버전을 내리라고 하시는데 , 좀 이상한 답변이라는 생각에진짜 몇시간동안 헤매다가 해결했습니다. 현재기준 최신버전"@nestjs/common": "^9.0.0", "@nestjs/mongoose": "^9.2.1", "mongoose": "^6.9.0",에서 아래와 같이 해결 했습니다. 주석참조.export class CatsRepository { constructor( @InjectModel(Cat.name) private readonly catModel: Model<Cat>, // 해당 라인 추가, 참고로 강의에선 Comments 인데 저는 Cat과 같이 단수형으로 만들어서 Comment 입니다. @InjectModel(Comment.name) private readonly commentModel: Model<Comment>, ) {} async findAll() { const result = await this.catModel .find() // populate 파라미터 변경 .populate({ path: 'comments', model: this.commentModel }); return result; } ... }다른 누군가에게 도움이 되기를
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
SSG 설명에서 나온 Disable cache 의 다른 렌더링방식들과 비교
안녕하세요!SSG 관련 설명해주실 때 개발자도구에서 Disable cache를 하면서static 데이터가 이미 들어와있고 etag가 여전히 그대로인 것으로 캐시와 상관 없이 해당 static 데이터가 영향을 주는 것을 확인해주셨는데요. 그렇다면 SSR, CSR에서 Disable cache 했을시 위의 현상과 다른게 있나요 ... ?SSR은 서버에서 계속 보낼테니 cache랑 상관 없을 것 같고 ... CSR도 JS 파일을 들고 있을테니 이 역시 상관 없을 것 같아서요...!혹시 CSR 특징에서 언급해주신 'JS 캐시 가능' 과 관련이 있다면 브라우저가 JS 캐시를 어떻게 활용하는지도 궁금합니다!감사합니다!
-
미해결Nuxt.js 시작하기
API 테스트하려고 search 버튼을 눌렀는데 console 창에 아무 반응이 없어요 ㅜㅜ
API테스트를 위하여 메인창에 chicken이라고 치고 search 버튼을 눌렀는데 console창에 아무 것도 안뜨네요 ㅜㅜ영상보면서 몇번 보고있는데 안되네요 무슨 문제 일까요??search 버튼을 누르면 api 터미널창은 반응을 안합니다.이전영상 서치 텍스트박스에 aaa라고 치면 vue개발자 화면에서는 실시간으로 값은 변해요이전 내용들은 모두 문제 없이 따라서 구현하였습니다. ㅜㅜ
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
AbortSignal 오류 해결 방법 공유드립니다.
해당 오류 발생 시 컨트롤 + 파란색 부분 클릭하셔서 편집기 이동합니다. 압축 풀고 실행시키면 abort 구문과 timeout 구문이 누락되었습니다. 형식에 맞게 작성해주시면 됩니다.이후 정상 동작하였습니다.
-
미해결Nuxt.js 시작하기
설치가 되지 않습니다..
npm init nuxt-app learn-nuxt를 입력했으나 에러가 뜨네요 ㅠ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps.tsx 에서 getStaticProps함수 질문
안녕하세요!getStaticProps.tsx 에서 데이터 모킹에 사용하는 getStaticProps함수에서 질문입니다.getStaticProps함수에서 return 하는 props 값과 위에 있는 Example 함수가 어떻게 연결이 되는지 궁금합니다. export 가 그 기능을 하는거 같은데(export를 지우니 연동이 안되는거 같아서...) import 문도 따로 없는데 이게 어떻게 가능한가요 ???
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps.tsx 의 회색 표시
안녕하세요! 현재 강의 내용을 따라 학습을 재밌게 진행하고 있습니다.회색 네모난 표시의 정체를 알 수 있을까요 ???data 옆에 있는 ': number'(resolve) 옆에 있는 'executor:' 등등등 ...
-
미해결Nuxt.js 시작하기
설치하다가 멈춰서 다시 설치하는데 아예 설치가 안되네요 ;;;
설치하다가 멈춰서 ctrl+c 로 멈추고 다시 설치하는데 아예 설치가 안되네요 ;;;
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
MongoParseError: options usernewurlparser, userunifiedtopology are not supported
2023.01.05 기준몽고디비 설정할때, 기본으로 다 지원하기 때문에 추가 설정을 할 필요가 없다고 하네요!https://hyeon-gomi.tistory.com/6아래와 같이 그대로 놓는 것만으로 충분하다고 합니다MongooseModule.forRoot(process.env.MONGODB_URL),
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
타입을 지정해 줄 때
3번째 줄에서 app 위에 커서를 올려보면const app:Express 이런식으로 타입스크립트가 올바르게 추론해준 것을 알 수 있습니다.이런 경우에도 강의에서처럼const app: express.Express 이런식으로 작성하는 것이 더 나은 방법일까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
프론드엔드 파일 관련 질문드립니다! ( 오류 )
안녕하세요 고양이 CRUD 프로젝트 듣고있는 학생입니다. 프론트 엔드 파일을 받아서 npm i 후 서버를 키려 하는데 npm run build : 에러 미 발생 ( .next 파일에 아무것도 없어요 ㅠ)npm run start : npm run dev:이렇게 에러 메시지가 노출됩니다npm run dev의 에러메시지에 react 버전 업데이트 필요해 보여서 npm install react 하면은 package.json의 정해진 버전보다 상위로 올라가서 그런가 설치가 안되더라구요 ㅠㅠ 어떻게 하면 해결이 될까요 ㅠㅠ
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
database 생성
MongoDB가 업데이트가 되어서 DB생성시에 권한이 있어야지만 생성이 됩니다. 전 강좌에서 Mongodb Atlas 에서 사용자를 만들때 Database Access 에서 본인에게 권한을 주어야 Database 를 만들고 CollectionName 을 넣을 수 있습니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
채팅앱 만들기 - 이벤트 설계와 기본 서비스로직 완성 에서 질문 있습니다
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!가 나타나지만 화면 진입자는 나타나지 않는 이유가 궁금합니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
DI(의존성 주입)을 왜 해야하나요?
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한 서비스를 사용한겁니다. 어떠한 이유에서 의존성 주입의 개념을 사용해야하는지 명쾌하게 알고 싶습니다.
-
미해결
AWS 배포 시 getServerSideProps 오류 (Next js)
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)
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
혹시 저처럼 s3에 업로드할 때 아무 이미지도 안 올라시는 분들이 있으면 봐주세요
혹시 저처럼 buffuer가 찍히지 않으신 분들은storage에 multer.memoryStage()를 추가하면 buffer가 찍히실 겁니다.https://github.com/expressjs/multer#memorystorage
-
미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
SSR axios를 하는 과정에서 401 에러가 떠요..
getServerSideProps를 이용해서 SSR을 할 때axios에서 계속 401 Unauthorized 에러가 발생하네요...혹시몰라서 CSR로도 시도해봤는데 이때는 잘 되구요...혹시 SSR에서 header 설정을 추가로 해주어야한다거나 하는 경우가 있는건가요...? 어떻게 시도를 해도 에러가 없어지지 않네요ㅠㅠㅠ
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
왜 env파일을 읽어오지 못하는지 모르겠습니다.
log를 찍어봤는데 env가 undifine으로 아예 불러오지를 못하는데 제가 간과한게 있을까요?