묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결탄탄한 백엔드 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를 사용하였을때 당장 테스트 진행은 가능하지만 이대로 사용해도 괜찮을지 안좋은 것은 아닌지가 궁금합니다..
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?
선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다. 클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
수업을 듣다가 SSR에 관하여..
안녕하세요, 실무에서 next.js를 이번에 사용할려고 강의를 듣고있습니다.강의 초반부에 SSR의 경우 (getServerSideProps) API 응답 속도에 따라 렌더가 되지않아 가급적 자제하라고 본 것 같은데,실무에선 사실 컴포넌트 내에서 API요청량이 많을텐데 보통 어떤식으로 구현하시는지 궁금합니다보통 getServerSideProps 에서 API 통신을 하고 props로 넘겨줘서 쓰는지 ? 아니면 CSR방식으로 일반 컴포넌트 내에서 API통신을 하는지 ? 도 궁금합니다.2번 질문에서 CSR방식으로 컴포넌트 내에서 API통신을 한다면 next.js를 쓰는 장점은 비동기 데이터 dom들을 제외한 html을 서버에서 렌더링해준다는게 장점일까여?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
AWS-SDK를 사용하여 S3에 이미지를 저장할때 이 경로를 DB에 저장하려면 어떻게 해야하나요?
강의 따라 진행하며 프론트엔드에서 Image Upload 버튼을 눌러서 이미지를 선택하였을때AWS S3에 저장되는 것까지는 확인이 되었습니다. 다만 DB에서는 기존 이미지 경로 그대로여서 업데이트한 이미지가 적용되지 않고 있는데, 여기서는 어떻게 진행하면 좋을까요? S3 사용 전에는 cats.repository에서 save 메소드 사용하여 새로 갱신된 이미지 파일 경로를 저장하는 과정이 있었듯이async findByIdAndUpdateImg(id: string, fileName: string) { const cat = await this.catModel.findById(id); cat.imgUrl = fileName; const newCat = await cat.save(); // DB에 내용 저장 console.log(newCat); return newCat.readOnlyData; } aws.service의 S3 저장하는 구간 중간에 db에 저장하는 과정을 추가해주면 될 것 같은데..언어 실력이 부족하여 어떻게 시도를 해야할지 감이 잡히질 않습니다.async uploadFileToS3( folder: string, file: Express.Multer.File, ): Promise<{ key: string; s3Object: PromiseResult<AWS.S3.PutObjectAclOutput, AWS.AWSError>; contentType: string; }> { try { const key = `${folder}/${Date.now()}_${path.basename( file.originalname, )}`.replace(/ /g, ''); const s3Object = await this.awsS3 .putObject({ Bucket: this.S3_BUCKET_NAME, Key: key, Body: file.buffer, ACL: 'public-read', ContentType: file.mimetype, }) .promise(); return { key, s3Object, contentType: file.mimetype }; } catch (error) { throw new BadRequestException(`File upload failed : ${error}`); } } 조언 부탁드립니다..
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
interface 와 type
선생님, 안녕하세요. 좋은 강의 너무 감사해요. 답변도 잘해주셔서 너무 감사해요. 선생님은 천재에요. 강의를 보다보니 (보통 prop을 받을 때)어떤때는 type을 사용하시고, 어떤때는 interface를 사용하시던데, 각각 어떤 경우에 사용하시는 지 설명해주실수있을까요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.
선생님 안녕하세요. 좋은강의 너무 감사드립니다!다름이 아니라 이번 강의에서MapSection.tsx에서const MapSection = () => { const { initializeMap } = useMap(); const onLoadMap = (map: NaverMap) => { initializeMap(map); }; return ( <> <Map onLoad={onLoadMap} /> // 이부분 <Markers /> // 이부분 </> ); }; export default MapSection; 이런식으로 return값에 위에 Map 컴포넌트, 아래에 Markers컴포넌트가 왔잖아요.그래서 저는 맵위에 마커들을 덮어씌우는(?)형식으로 나오게 될 줄 알았습니다. 그런데 결과를 보니, 이렇게 map div밑에 자식으로 들어가있더라구요. 어떻게 이렇게 되는지 설명해주시면 감사하겠습니다!!
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
onLoad함수 (script태그의 onLoad X)
Map.tsx에서//Map.tsx if (onLoad) { onLoad(map); }이 구문은 왜 쓰인걸까요??MapSection.tsx 에서 Map을 부르는 부분을 봐도// MapSection.tsx import Map from "./Map"; const MapSection = () => { return ( <Map onLoad={() => { console.log("load!"); }} /> ); }; export default MapSection; 별다른 기능을 하는 것 같지는 않아서요.onLoad를 정의하고 있는 Map.tsx의 Props에서도type Props = { mapId?: string; initialCenter?: Coordinates; initialZoom?: number; onLoad?: (map: NaverMap) => void; }; 변수로 NaverMap을 받기만 하고 별다른 기능은 하는 것 같지가 않은데,혹시 onLoad가 어떤 기능을 하고있는지 알려주실 수 있을까요?? ++ 추가로, const map = new window.naver.maps.Map(mapId, mapOptions);이렇게 했을 때, 어떻게 <div id={mapId} style={{ width: "100%", height: "100%" }} />이 태그에 Map이 들어가는지 궁금합니다!