묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Nuxt.js 시작하기
마지막 강의까지 작성된 코드
안녕하세요.강의 정말 잘 들었습니다.혹시 마지막 강의까지 작성이 완료된 코드가 있는 브랜치가 따로 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
Next.js, 서버컴포넌트에서 ssr로 데이터 패칭할 때 토큰 도 같이 보내기
next.js에서 서버컴포넌트에 데이터 패칭할 때 13버전 이후부터는 const fetchPosts = async () => { const response = await fetch("URL", { cache: "no-store", }); return response.json(); }; cache설정으로, ssr, ssg를 한다고 들었습니다. 이때, 궁금한게 있어요.1. get방식, post방식 등, 어떻게 구별하나요?2. 만약 보낼때, header에 토큰값을 보내거나 할 때, 서버컴포넌트에서 어떻게 처리하나요? 그때도 cache설정만 해주면, ssr이 적용 되나요??
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
lightSail배포와 https port 소켓이슈!!!
안녕하세요! 선생님!선생님의 강의를듣고nest프로젝트를 lightsail에 배포성공하였습니다.헌데 별도의 인증서를 적용해주지 않으면http 프로토콜로 api서버가 만들어져서https를 적용하기위해 인증서를 발급받고적용하니 https로도 서버를 접근할수있게되었습니다. 근데 여기서 문제가 생겼습니다.저는 nest 프로젝트에서서버는 80 포트를 열고소켓은 8181포트를 열었습니다. lightsail에서 방화벽으로http 80https 443 으로 등록해놓았기때문에 프로젝트에서서버가 80번포트로 열렸던것은 문제가 되지 않았으나프로젝트에서소켓이 8181번포트로 열어놓았던것은cors문제가 생겨 소켓연결이 안되더라구요 그래서 lightsail에서https로 8181 등록해주면되는건가?했는데 https로 8181등록되지 않아서 custom으로 8181포트를 열어주면 되는건가?싶어서 8181포트도 방화벽에서 열어주었는데http에서만 8181포트가 open되는거지https에서는 8181포트가 여전히 허용되지 않더라구요ㅜㅜ 어찌하면 이문제를 해결할수있을까요? 참고로현재 프론트 프로젝트를 amplify에 호스팅해놓아서프론트웹서버의 static ip를 알수없는상황입니다!!
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
HTTP API 사용 시 MVC 패턴의 V가 궁금합니다.
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]강의 잘 보고 있습니다! HTTP API로 데이터를 주고 받을 경우 JSON 형태의 데이터만 내려주게 되는데 이럴 땐 MVC 패턴을 사용할 수 있나요 ?MVC 패턴은 SSR 방식에서만 적용되어 VIEW가 타임리프,JSP형태로 내려가는건지 만약 CSR형태도 MVC패턴이 적용된다고 한다면 CSR의 형태일때는 VIEW가 JSON 자체인지가 궁금합니다.번외로 클라이언트 서버 아키텍쳐의 경우 클라이언트가 WS,서버가 WAS로 불러도 되나요 ? 느낌은 비슷한 거 같아서..
-
미해결Vue로 Nodebird SNS 만들기
실습 환경 문의(Node 버전)
안녕하세요.실습을 위해서 Node 버전은 어떤 버전을 설치 해야 할까요 ?최신 버전을 받아서 설치하니 에러가 있어서, 답변바랍니다.
-
해결됨Next.js 필수 개발 가이드 3시간 완성!
소스 코드
현재 API 부분까지 잘 들었습니다.내용이 길지 않은데 핵심 부분을 잘 이야기 해주셔서 너무 좋습니다. 그런데 소스 코드가 없다는 것이 너무 아쉽습니다.내용이 정말 좋지만 소스 코드가 없으면 이해하기까지 시간이 많이 걸리기 때문에 강의를 듣는 것이 쉽지가 않습니다. 혹시 깃허브나 소스 코드가 제공될 수 있을까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
ValidationPipe DTO 변환 대신 JS Object 로 변환되는 이유
DTO 변환이 잘 되다가 다른 테스트 케이스 작성중에 아래 처럼 SignInUserRequest DTO 로 변환이 안되는 경우를 겪었습니다. ValidationPipe 옵션 transform: true 임에도 불구하고, 이런 현상이 일어나는 이유를 알 수 있을까요?아래는 잘되는 경우입니다.읽어주셔서 감사합니다.
-
미해결Nuxt.js 시작하기
JSON Server Operator 링크에 Operator 가 없습니다.
안녕하세요.서치 기능 구현 실습중입니다.nuxt3로 강의 실습 진행 중인데 Operator 가 없는데 어떻게 하면 좋을까요?이미지 url 에 들어가는 사이트도 없어져서 picsum.photos 로 하는데 여긴 랜덤 이미지 경로가 없네요..ㅠㅠ
-
해결됨Next.js 필수 개발 가이드 3시간 완성!
SSR CSR
질문이 있습니다.page 같은 경우는 최대한 SSR로 하고 page 하위에 사용되는 컴포넌트 같은 경우는 브라우저 API 사용한다면 CSR로 하는게 맞나요? ( 하이브리드 렌더링 방식 ) app/page.tsx 파일 상단에 "use client" 선언하면 페이지 전체가 CSR로 된다고 생각하는데 네트워크 창에 localhost에 preview를 보면 빈 페이지가 아닌 렌더링된 내용이 보이는데 왜 그런걸까요?
-
미해결Nuxt.js 시작하기
Vue2 EOL 관련해서..
안녕하세요, 강의 수강 중 궁금한 점이 있어 여쭤보게 되었습니다. Vue2가 '23년 12월 31일 부로 EOL되었는데, Vue3를 이용한 강좌도 오픈할 예정인지 궁금합니다. 감사합니다.
-
미해결Vue로 Nodebird SNS 만들기
로그인 새로고침시 풀림
안녕하세요~현재 4-10까지 수강 완료 했습니다~프론트에서 새로고침시 로그인이 풀리는 부분에 대한처리를 뒤 수업에서 다루는지,필요하다면 스스로 해봐야하는건지,궁금합니다~답변 주시면 감사하겠습니다~
-
해결됨Next.js 필수 개발 가이드 3시간 완성!
Dynamic Routes GET 메소드 만들기 질문 있습니다!
안녕하세요 ! APIs 생성하기 섹션을 들으며 연습하고 있는데요.사용자 ID 값이 10 보다 큰 경우에는 404 에러를 출력하고 나머지 경우에는 사용자 정보를 반환하도록 작성해주신 GET 메서드 코드를 따라 작성했고, 포스트맨에서 정상 작동함을 확인하였습니다.강사님 코드import { NextRequest, NextResponse } from "next/server"; export function GET( request: NextRequest, { params }: { params: { id: number } } ) { // 사용자 ID 값이 10보다 큰 경우 404 오류 출력 if (params.id > 10) { return NextResponse.json({ error: "USER NOT FOUND" }, { status: 404 }); } // 사용자 정보를 응답으로 전달 return NextResponse.json([ { id: 1, name: "Jieun" }, { id: 2, name: "Hansol" }, ]); }따라하다가 문득, 전체 사용자 정보가 아니라 해당 id 에 해당하는 사용자 정보를 출력하고 싶어, 아래와 같이 코드를 수정하였습니다. 코드에 문제가 없다 생각했는데 에러를 출력하더라구요 ㅠㅠ에러 코드import { NextRequest, NextResponse } from "next/server"; export function GET( request: NextRequest, { params }: { params: { id: number } } ) { const userData = [ { id: 1, name: "Jieun" }, { id: 2, name: "Hansol" }, ]; const user = userData.find((user) => user.id === params.id); if (!user) { return NextResponse.json( { error: "사용자를 찾을 수 없습니다" }, { status: 404 } ); } return NextResponse.json(user); }`user` 를 잘 찾지 못하는 것 같아서 혹시 id 타입 문제인가 해서 params.id 의 타입을 바꾸고 실행하였더니 정상 작동 하였습니다.정상 작동했던 코드 1import { NextRequest, NextResponse } from "next/server"; export function GET( request: NextRequest, { params }: { params: { id: string } } ) { const userData = [ { id: 1, name: "Jieun" }, { id: 2, name: "Hansol" }, ]; const requestedId = parseInt(params.id); const user = userData.find((user) => user.id === requestedId); if (!user) { return NextResponse.json( { error: "사용자를 찾을 수 없습니다" }, { status: 404 } ); } return NextResponse.json(user); }정상 작동했던 코드 2import { NextRequest, NextResponse } from "next/server"; export function GET( request: NextRequest, { params }: { params: { id: number } } ) { // Mock user data const userData = [ { id: 1, name: "Jieun" }, { id: 2, name: "Hansol" }, ]; const requestedId = typeof params.id === "string" ? parseInt(params.id, 10) : params.id; const user = userData.find((user) => user.id === requestedId); if (!user) { return NextResponse.json( { error: "사용자를 찾을 수 없습니다" }, { status: 404 } ); } // Return the user information return NextResponse.json(user); }질문입니다!API 호출 시 전달되는 매개변수 params.id 의 타입은 GET 메소드 매개변수 선언시 지정해주는 타입으로 정해지는건가요?string 타입인거라면 강사님 코드가 실행되지 않았어야 하고, number 타입이라면 저의 에러코드 또한 실행되었어야 하는데 왜 정상적으로 작동하지 않았는지 궁금합니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
Auth 모듈에서 JwtAuthGuard 가 아닌, JwtStrategy 를 provider 하는 이유?
import { Module, forwardRef } from '@nestjs/common'; import { AuthService } from './auth.service'; import { PassportModule } from '@nestjs/passport'; import { JwtModule } from '@nestjs/jwt'; import { CatsModule } from 'src/cats/cats.module'; import { JwtStrategy } from './jwt/jwt.strategy'; @Module({ imports: [ PassportModule.register({ defaultStrategy: 'jwt', session: false }), JwtModule.register({ secret: 'secret', signOptions: { expiresIn: '1y' }, }), forwardRef(() => CatsModule), ], providers: [AuthService, JwtStrategy], exports: [AuthService], }) export class AuthModule {} auth.module.ts 에서 JwtAuthGuard를 provider 에 추가하지 않고, JwtStrategy를 제공하는 이유가 궁금합니다. 실제로 Cat controller 에서는 authService의 JwtAuthGuard를 통해 호출되는거 아닌가요? JwtAuthGuard & JwtStrategy 둘다 provider 에 추가하라고 하면 그것대로 이해가 되는데, JwtStrategy만 추가하는게 이해가 잘 안되어서요ㅠㅠ
-
미해결Nuxt.js 시작하기
env.baseUrl 문제
nuxt.config.js // env config env: { // baseUrl: process.env.NODE_ENV === 'production' ? null : 'http://localhost:3000' baseUrl: process.env.BASE_URL || 'http://localhost:3000' } }api/index.jsconst instance = axios.create({ baseURL: process.env.BASE_URL, }) 에러nuxt 서버가 localhost:5000 입니다백엔드 서버가 localhost:3000 입니다인강처럼 해보고 안되서 이것 저것 해봐도 똑같은 에러가 뜹니다.. 하지만 api/index.js 에서 바로 baseURL : '경로' 적으면 에러가 나지 않습니다.원인을 알려주세요
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
Schema에서 DTO로 상속하는 과정에서 Decorator와 required 초기화 관련 질문입니다.
안녕하세요, 강의에서는 Cat 클래스에서 정의한 스키마를 이용해 requestDTO, responseDTO 등으로 상속해서 확장하셨습니다. 검색해보니 이때 원래 파일에 있던 Decorator 등의 메타데이터는 그대로 남아있다고 하는데요, Response 상황에서 어차피 Validation이나 API Property 같은 내용을 신경쓰지 않아도 되니까 상속해도 별 문제가 없긴할거고 강의에서도 그 부분은 크게 신경쓰지 않으신것 같습니다. 혹시 현업에서나 개발 과정에서 저렇게 PickType으로 기존 클래스를 재사용하는 과정에서 기존 클래스에 있던 여러 Decorator 들을 초기화하고 다시 세팅하려면 어떻게 해야할까요? PartialType으로 래핑하는 방법을 사용하면 required 필드는 사라집니다.상속을 하니까 API 문서에 표시되는 순서가 id가 가장 나중에 표시가 됩니다. 순서를 바꾸는 방법을 찾지못했는데 방법이 있을까요?그래서 저는 아예 schema 파일에 id까지 넣은 후에 PickType에서 id 까지 가져오는 방법을 사용해봤습니다.
-
미해결Nuxt.js 시작하기
블로그 기능 질문입니다!
https://joshua1988.github.io/vue-camp/nuxt/data-fetching.html#asyncdata%E1%84%8B%E1%85%B4-%E1%84%91%E1%85%A1%E1%84%85%E1%85%A1%E1%84%86%E1%85%B5%E1%84%90%E1%85%A5쌤이 주신 블로그 보고있다가 갑자기 오른쪽 밑부분이 경고창으로 무슨 내용이 추가되었다고 새로고침을 유도하는 기능이 있는데 좋은 기능인 것 같아 질문드립니다!1. 관리자가 게시글 수정하면 그 사이트 사용자들 한테 메시지를 보내는 기능이 맞는 걸까요?어떤 식으로 구현 되있는지 학습하실 때 예제 혹은 설명해주시면 감사하겠습니다!
-
미해결Nuxt.js 시작하기
node 버전 문제 질문입니다.
https://stackoverflow.com/questions/74726224/opensslerrorstack-error03000086digital-envelope-routinesinitialization-e이런 이슈 때문에처음에 빌드 시 에러가 나서 진행을 못하다가 버전을 20 -> 18 -> 16 하니까 이제되더라고요 혹시 어떤 문제인지 알수있을까 궁금합니다.
-
미해결Nuxt.js 시작하기
폴더구조 다른것 안내 부탁드려요
다른분이 문의하신것 처럼 파일 구조가 다르게 생성되어서 수업 중간부터 default.vue도 없고 앞으로 수업을 따라가기가 걱정되네요. 아무래도 초보인데 폴더구조부터 달라버리면 막히거든요….이런 혼동이 생기지 않도록 강의 초반에 안내를 해주셨으면 좋겠습니다. 그리고 추가 강의도 올려주신다고 댓글 달아주신거 같은데 어디서 확인할수있는지 안내 부탁드려요 ㅜㅜ
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
[건의사항] tsc 패키지가 더 이상 관리되지않아(deprecated) 디펜던시에서 삭제하는 것이 어떨까 싶습니다.
[건의사항] tsc 패키지가 더 이상 관리되지않아(deprecated) package.json의 디펜던시에서 삭제하는 것이 어떨까 싶습니다.
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
AlreadyHasActiveConnectionError 에러 발생
에러 해결하였습니다..app.module.ts > typeOrmModuleOptions에keepConnectionAlive: true 옵션이 빠져있어 발생한 에러였습니다. 검색해보니 '어플리케이션 종료 시 DB 연결 유지'에 대한 내용인데제가 다른 옵션과 착각하고 주석 처리했었습니다. 현재 옵션 활성화 하였고 e2e 테스트 정상적으로 진행되는거 확인했습니다.const typeOrmModuleOptions = { useFactory: async ( configService: ConfigService, ): Promise<TypeOrmModuleOptions> => ({ namingStrategy: new SnakeNamingStrategy(), // ... keepConnectionAlive: true, }), 검색해보니 beforeEach에 있는 app.init() 메소드에서 어플리케이션을 초기화하며 DB 연결도 초기화되는데,어플리케이션을 재초기화하는 것이지 종료한 적은 없었기에 여전히 'default'라는 이름으로 활성화된 DB 연결이 존재하였고,DB 연결 재초기화 중 'default라는 이름으로 새로운 DB 연결이 실패하였다' 에러가 발생한 것이며 keepConnectionAlive: true 옵션을 줌으로써DB 연결은 어플리케이션의 생명주기와는 별도로 존재하게 되고, 이미 활성화된 DB 연결이 존재하므로 새로운 DB 연결을 시도하지 않는다 라고 합니다..공부가 되었네요. app.e2e-spec.ts의 afterEach 메소드는 제거하였습니다. ============================================================= 안녕하세요 강사님강의따라 진행하다 에러가 발생하여 질문글 남깁니다. 에러 메세지는 아래와 같습니다.[Nest] 26544 - 2023. 11. 25. 오후 11:01:36 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)... AlreadyHasActiveConnectionError: Cannot create a new connection named "default", because connection with such name already exist and it now has an active connection session. at AlreadyHasActiveConnectionError.TypeORMError [as constructor] (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\src\error\TypeORMError.ts:7:9) at new AlreadyHasActiveConnectionError (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\src\error\AlreadyHasActiveConnectionError.ts:8:9) at ConnectionManager.Object.<anonymous>.ConnectionManager.create (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\src\connection\ConnectionManager.ts:57:23) at C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\src\globals.ts:77:35 at step (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\tslib\tslib.js:143:27) at Object.next (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\tslib\tslib.js:124:57) at C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\tslib\tslib.js:117:75 at new Promise (<anonymous>) at Object.__awaiter (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\tslib\tslib.js:113:16) at createConnection (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\typeorm\globals.js:55:20) [Nest] 26544 - 2023. 11. 25. 오후 11:01:39 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (2)... AlreadyHasActiveConnectionError: Cannot create a new connection named "default", because connection with such name already exist and it now has an active connection session. at AlreadyHasActiveConnectionError.TypeORMError [as constructor] (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\src\error\TypeORMError.ts:7:9) at new AlreadyHasActiveConnectionError (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\src\error\AlreadyHasActiveConnectionError.ts:8:9) at ConnectionManager.Object.<anonymous>.ConnectionManager.create (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\src\connection\ConnectionManager.ts:57:23) at C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\src\globals.ts:77:35 at step (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\tslib\tslib.js:143:27) at Object.next (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\tslib\tslib.js:124:57) at C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\tslib\tslib.js:117:75 at new Promise (<anonymous>) at Object.__awaiter (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\tslib\tslib.js:113:16) at createConnection (C:\Users\admin\OneDrive\바탕 화면\typeorm-in-the-nest\node_modules\typeorm\globals.js:55:20) FAIL test/app.e2e-spec.ts (10.952 s) AppController (e2e) √ / (GET) (845 ms) hello jest × two plus two is four (5014 ms) ● AppController (e2e) › hello jest › two plus two is four thrown: "Exceeded timeout of 5000 ms for a hook. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test." 7 | let app: INestApplication; 8 | > 9 | beforeEach(async () => { | ^ 10 | const moduleFixture: TestingModule = await Test.createTestingModule({ 11 | imports: [AppModule], 12 | }).compile(); at app.e2e-spec.ts:9:3 at Object.<anonymous> (app.e2e-spec.ts:6:1) Test Suites: 1 failed, 1 total Tests: 1 failed, 1 passed, 2 total Snapshots: 0 total Time: 11.106 s Ran all test suites. Jest did not exit one second after the test run has completed. This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot 읽어보니 이미 'default'라는 이름의 연결이 존재하고, 현재 활성화 중이므로 같은 이름의 연결을 또 생성할 수 없다는 것 같고,검색해보니 beforeEach 메소드 안에 Test.createTestingModule이 매 테스트마다 DB 연결을 시도하는 상황이라고 나왔습니다.. 하여 아래와 같이 afterEach 메소드를 사용하여 매 테스트마다 어플리케이션을 종료해주도록 코드를 수정하였습니다.describe('AppController (e2e)', () => { let app: INestApplication; beforeEach(async () => { const moduleFixture: TestingModule = await Test.createTestingModule({ imports: [AppModule], }).compile(); app = moduleFixture.createNestApplication(); await app.init(); }); // 테스트 2개 이상 사용할 경우 필요한 메소드 afterEach(async () => { await app.close(); }); it('/ (GET)', () => { return request(app.getHttpServer()) .get('/') .expect(200) .expect('typeorm in nest, just coding'); }); describe('hello jest', () => { it('two plus two is four', () => { expect(2 + 2).toBe(4); }); }); // 생략 수정 후 강의에서 진행했던 내용은 모두 완료가 되었는데..이제 궁금한 점은강사님과 코드 내용이 같고 도커나 DB 연결에 대하여 특별히 수정한 내용이 없는데왜 이런 상황이 발생하는 것인지. 버전이 달라 발생한 상황인 것인지.. 그리고 afterEach를 사용하였을때 당장 테스트 진행은 가능하지만 이대로 사용해도 괜찮을지 안좋은 것은 아닌지가 궁금합니다..