export async function getSearchResult({ queryKey }) { const [_1, _2, searchParams] = queryKey; const res = await fetch(api url, next: { tags: ["posts", "search", searchParams] }, cache: 'no-store' )}next tags를 사용하는이유가 revalidate를 하기 위해서인데fetch 옵션을 'no-store'로 주면 캐시가 되지 않는걸로 알고있어서 tags 사용안해도 되지않나요??

안녕하세요 제로초님! 강의 잘 듣고 있습니다.제가 현재 프론트엔드를 NextJS 14.xx(app router)로 작성하고 있고, 백엔드는 제로초님 강의 따라서 NestJS로 만들고 있는데 현재 연결은 로컬에서 HTTP로 하고 있습니다. 그런데 소켓을 연결하는 과정에서 계속 'WebSocket connection to 'ws://localhost:8080/socket.io/?EIO=4&transport=websocket' failed: WebSocket is closed before the connection is established.' 위와 같은 에러가 뜹니다. 이틀간 계속 검색해봤는데 도대체 왜 연결이 안되는지 모르겠습니다... ㅠㅠ 프론트는 현재 아래와 같이 되어있구요.localhost:3000으로 돌리고 있습니다.  "socket.io-client": "^4.7.4",import io from 'socket.io-client'; useEffect(() => { const options = { auth: `${getCookie('accessToken')}`, extraHeaders: { id: chatRoomId }, }; const socket = io(`http://localhost:8080/chats`, options); console.log(socket); socket.on('connect', () => { console.log('WebSocket connected.'); }); return () => { socket.off(); }; }, []); 백엔드는 아래와 같이 되어있습니다. import { Socket } from 'socket.io'; import { ConnectedSocket, MessageBody, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, } from '@nestjs/websockets'; import { InjectRepository } from '@nestjs/typeorm'; import { Repository } from 'typeorm'; import { Message } from './entity/message.entity'; import { Logger } from '@nestjs/common'; @WebSocketGateway({ namespace: 'chats', cors: true, }) export class ChatsGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect { private logger = new Logger('CHAT-SERVICE'); constructor( @InjectRepository(Message) private readonly messageRepository: Repository<Message>, ) { this.logger.log('constructor'); } afterInit() { this.logger.log('init'); } async handleConnection(@ConnectedSocket() socket: Socket) { this.logger.log(`connected: ${socket.id} ${socket.nsp.name}`); } async handleDisconnect(@ConnectedSocket() socket: Socket) { this.logger.log(`disconnected: ${socket.id} ${socket.nsp.name}`); } @SubscribeMessage('send-message') async handleSubmitChat( @MessageBody() message: string, @ConnectedSocket() socket: Socket, ) {} } chat-service의 main.ts는 아래와 같습니다. import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); const port = 8080; await app.listen(port); console.log(`CHAT-SERVICE listening on ${port}!`); } bootstrap();  app.module.ts는 아래와 같습니다. import { Module } from '@nestjs/common'; import { ChatModule } from './chat/chat.module'; import { ConfigModule, ConfigService } from '@nestjs/config'; import { TypeOrmModule, TypeOrmModuleOptions } from '@nestjs/typeorm'; import jwtConfig from './config/jwt.config'; import mysqlConfig from './config/mysql.config'; import sentryConfig from './config/sentry.config'; @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true, load: [jwtConfig, mysqlConfig, sentryConfig], }), TypeOrmModule.forRootAsync({ inject: [ConfigService], useFactory: async (configService: ConfigService) => { let object: TypeOrmModuleOptions = { type: 'mysql', host: configService.get('mysql.host'), port: configService.get('mysql.port'), database: configService.get('mysql.database'), username: configService.get('mysql.username'), password: configService.get('mysql.password'), autoLoadEntities: true, synchronize: true, }; if (configService.get('STAGE') === 'LOCAL') { object = Object.assign(object, { logging: true, }); } return object; }, }), ChatModule, ], controllers: [], providers: [], }) export class AppModule {}  소켓 객체는 프론트에서 찍어보면 다음과 같이 나옵니다.@WebSocketGateway({ namespace: 'chats', cors: true, }) 에서 cors를 http://localhost:3000으로 설정하고 main에서도 다 열었을때도 안되는걸로 보아 cors 문제는 아닌듯합니다.

안녕하세요. 코드캠프 프론트엔드 고농축 강의 내용 관련하여 질문 드립니다.우선 제가 원하는 내용은리액트 내용의 전반적인 복습타입스크립트 학습넥스트 js 학습이렇게 세 가지를 핵심으로 뽑을 수 있는데요.고농축 커리큘럼 소개에는 위의 내용이 다 적혀있긴 하지만 커리큘럼을 봤을 때 next js는 따로 탭이 분리 되어있지는 않더라구요. 어떤 부분이 next js 관련 부분인지 궁금하고, 또 커리큘럼의 전반적인 수준도 궁금합니다.

안녕하세요. 오늘 next.js 12버전 적용해봤는데요 데이터 변경하고 router.push()로 serversideprops 화면 이동할 때, 변경된 데이터가 바로 적용되지 않고 새로고침 해야 변경되는 현상이 있더라구요.  특이한게 최초진입 할 때는 바로 적용되는데 2번이상 동일한 액션을 취하면 새로고침이 필요했어요. 찾아보니까 next.js api 사이트에 페이지가 아니라 컴포넌트에 넣어야된다는 설명이 초반부에 나오는데요 제가 이해한게 맞는건가요? 한 page에 serversideprops가 필요한 컴포넌트가 많을 경우, 각 컴포넌트 별 로 넣어주는게 맞는지 질문드립니다.

안녕하세요. nextjs에 typescript를 붙여서 연습중인데요. getServerSideProps 함수에서 axois.defaults.headers.Cookie = ""; 설정을 해주는 것이사용자간의 쿠키가 겹치는것을 방지하는 것이라고 이해를 했는데요. Property 'Cookies' does not exist on type 'HeadersDefaults'. 경고가 발생 하고 있습니다. 그래서 구글링 해보니 axios.defaults.headers.common.Cookies를 사용하라는 내용이 있는데 이게 맞는건가요?

안녕하세요. nextjs에 타입스크립트를 적용하고, eslint를 적용해 연습을 해보려는데 기존에 nodebird에서 작업했던 applayout을 구현하려고 합니다.  import React from "react"; const AppLayout: React.FC = ({ children }: { children: React.ReactNode }) => {   return <div>{children}</div>; }; export default AppLayout; 일단 여기까지는 문제가 없지만 index.tsx에서 에러가 발생합니다. 구글링 해봐도 단순히 children을 넘겨주지 않게 하면 된다고 하는데 이해를 잘 하지못해서 질문드립니다. 감사합니다.

안녕하세요 제로초님 리액트 노드 버드 강의를 통해 배운 내용을 통해 응용하여 개인 프로젝트를 진행해서 알려주신 배포 방법으로 배포까지 진행하였습니다. seo 최적화를 위해 이것저것 알아보다가 google search console을 알게 되었는데 혹시 제로초님께서 사용해보셨을까 해서 질문을 작성하게 되었습니다. 제 사이트를 등록하려고 2번 방법인 meta 태그를 통해 소유권을 확인하려고 _app.tsx에서 next의 Head를 이용해서 그 안에 주어진 meta 태그를 추가하였습니다.  하지만 아래와 같이 계속 실패가 나와서 혹시 방법을 아시나요? ㅠㅠ 제가 의심가는 부분은 next의 Head를 이용해 meta태그를 추가하면 실제 페이지 개발자 도구에서는 html의 head 태그가 아닌 body태그 안에 script NEXT_DATA라는 부분 안에 meta 태그가 들어있어서 그런건가 싶긴 합니다 ㅠ  

안녕하세요 제로초님.   지금 포트폴리오를 만드는김에 빌더까지 확장해서 만들어 볼까 싶은데 힌트를 찾지 못해서 질문 드립니다.   일단 각 게시판 별로 스킨을 만들어서 DB에 스킨명을 저장할 생각입니다. fs으로 스킨명의 js파일을 찾아 저장할 생각인데 문제는 해당 컴포넌트를 어떻게 import해서 가져와서 뿌려주느냐 입니다.     위 스샷처럼 list에 Basic 이라는 리스트 컴포넌트와 Thumbnail이라는 리스트 컴포넌트 2개를 가지고 있습니다. 예를들어서 notice게시판과 photo게시판 2개의 게시판이 있고, db에 게시판 설정 테이블을 만들고 notice 게시판은 리스트 스킨을 Basic으로 저장하고, photo게시판은 Thumbnail로 저장합니다. notice라는 게시판에서는 Basic 컴포넌트를 , photo라는 게시판에서는 Thumbnail컴포넌트를 불러와 사용하게 하려 하는데   제가 node를 다루기 전엔 php만 다뤄봐서 php에선 그냥 단순히 스킨명을 string으로 가져와서 include로 가져왔으면 됐는데 node에서는 어떻게 하면 따로 불러와서 사용할수있는지 궁급합니다.   혹시나 제가 만들려는 접근방식이 틀렸다면, 검색 키워드좀 부탁드리겠습니다. 감사합니다

안녕하세요 제로초님 ! 강좌잘보고있습니다.     npm run dev 를 실행하면 아래와같은 오류가뜨네요....   코드는 다음 캡처와같습니다. {   "name": "react-nodebird-front",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "dev": "next"   },   "author": "Jeonga Kim",   "license": "ISC",   "dependencies": {     "next": "^9.5.5",     "react": "^16.14.0",     "react-dom": "^16.14.0"   } }  

 이게 대체 무슨 에러인지 모르겠습니다... 검색도해보고에러메시지에서시킨대로도해봤는데 아무리해도없어지지가않아요ㅠㅜ   도와주십숑..

안녕하세여 저기 궁금한게 있는데여/ 자바 백엔드에 프론트 리액트로 연동하는 프로젝트를 한다고 치면 next js 로 개발 환경을 설치할수 있으면 되나여? 아니면 웹팩 같은것도 잘알아야 되나여? 강의에서처럼 웹팩 설정이나 최적화는 나중에 해도 되나여?????? 알려주시면 감사여  또 타입 스크립트는 기초 문법 정도만 알고 있고 프로젝트에 적용해본적이 없는데  타입 스크립트는 필수인가여?? 아닌가여?? 또 백엔드와 프론트 엔드간의 api 정보를 어떤식으로 주고받는게 좋나여??  문서로 주고 받나여? 슬랙이 좋나여? 자바 리액트 기반의  crud 기본 프로젝트도 해보지 않았지만  프로토 타입 형식으로 뭔가 만들어 보려면 어떤걸 만들어 봐야 되나요 간단한 todo 웹어플리케이션이 좋을까여?혹시 그에 관한 자료를 알고 계시면 알려주시면 감사여