묻고 답해요
147만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
settings.jason 3가지
settings.json 을 검색하면 3가지가 뜹니다. user workspace default 이렇게 3가지 뜨는데, 제가 다 눌러보니 어떤건 영어문장이이 막 나오고, 어떤건 비어있는걸로 나오는데 user 로 하면 될까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다.
안녕하세요 제로초님toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다. saga에서 이런식으로 호출을 해주면action 데이터도 잘 찍힙니다.function* login(action) { try { console.log("saga login"); console.log(action); // const result = yield call(loginAPI, action.data); yield delay(1000); yield put({ type: loginSuccessAction, payload: action.payload, }); } catch (err) { yield put({ type: loginFailureAction, // data: err.response.data, }); } }그다음 리듀서에서const userSlice = createSlice({ name: "user", initialState, reducers: { logIn: (state, action) => { state.isLoggedIn = true; state.me = action.payload; }, logOut: (state) => { state.isLoggedIn = false; state.me = null; }, loginRequestAction: (state) => { console.log("state", state); state.isLoggingIn = true; }, loginSuccessAction: (state, action) => { console.log("reducer login"); console.log("state", state); state.isLoggingIn = false; state.isLoggedIn = false; state.me = action.payload; state.me.nickname = "zzimzzim"; }, loginFailureAction: (state) => { state.isLoggingIn = false; state.isLoggedIn = false; }, logoutRequestAction: (state) => { state.isLoggingOut = true; }, logoutSuccessAction: (state) => { state.isLoggingOut = false; state.isLoggedIn = false; state.me = null; }, logoutFailureAction: (state) => { state.isLoggingOut = false; }, }, extraReducers: (builder) => builder .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.user, })) .addDefaultCase((state) => state), }); 위와같이 코드를 만들고 로그인을 해보면action으로 로그인 정보를 잘 내려줍니다.원래는 이전의 state (현 store데이터)를 받아오고거기서 action데이터를 넣어서 업데이트해줘야하는데,state에서 proxy데이터가 내려와서 업데이트가 안되고 있습니다. ㅠ 리듀서에서 action 데이터 받고, state호출했을때,Proxy(Object) {type_: 0, scope_: {…}, modified_: false, finalized_: false, assigned_: {…}, …}[[Handler]]: null[[Target]]: null[[IsRevoked]]: true이러한 경우에 reducer에서 state를 받아오는 방법이 있을까요? 혹시 코드가 이상하거나 틀렸다면 지적해주시면 감사하겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit을 사용하시면서 redux saga를 사용하시다가 애먹으시는 분들은 참고해주세요
https://choisuhyeok.tistory.com/57 요기에 잘 정리 되어있어서제로초님 강의 보면서 툴킷으로만 작업하거나,thunk로 하지 않아도,toolkit + saga로 작업할 수 있습니다.참고 부탁드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다.
안녕하세요 제로초님깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다.깃헙에는 saga를 대체해서 toolkit에 내장되어있는 redux-thunk를 사용하신걸까요? 그렇다면saga내용을 다 보고 thunk의 모양대로 수정해서 진행하게 되면 될지 궁금합니다.감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
antd ui라이브러리를 사용하니까 Cannot use import statement outside a module 에러가 나옵니다.
안녕하세요 제로초님antd 라이브러리를 사용하니까Server ErrorSyntaxError: Cannot use import statement outside a moduleThis error happened while generating the page. Any console logs will be displayed in the terminal window.Call Stack<unknown>file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/node_modules/rc-util/es/hooks/useMemo.js (1)Next.jsrc-util/es/hooks/useMemofile:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/pages/index.js (8862:18)Next.jseval/node_modules/antd/es/config-provider/index.js./node_modules/antd/es/config-provider/index.jsfile:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/vendor-chunks/antd.js (570:1)Next.jseval/node_modules/antd/es/grid/col.js 이러한 에러들이 나왔고 검색해보니next.config.js 파일에const nextConfig = { /* config options here */ // reactStrictMode: true, swcMinify: true, transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", ], compiler: { styledComponents: true, }, }; module.exports = nextConfig;이런식으로 넣어주면 괜찮다는 것을 보고실행해보니 정상적으로 나오는것을 확인했습니다.그런데 이제는 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:이런 에러가 나오고 있는데요..원래 antd최신버전을 쓰고 있다가깃헙의 제로초님과 동일하게 ^5.8.3" 버전으로 수정해봤는데도 동일한 이슈가 발생하더라구요혹시 다른 부분을 수정해야할지 알 수 있을까해서차장보다 문의 드립니다.참고로 현재 package.json은{ "name": "react-nodebird", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "author": "", "license": "MIT", "dependencies": { "@ant-design/icons": "^5.3.6", "@reduxjs/toolkit": "^2.2.3", "antd": "^5.8.3", "next": "^14.2.3", "next-redux-wrapper": "^8.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.51.3", "react-redux": "^9.1.1", "react-slick": "^0.30.2", "redux": "^5.0.1", "styled-components": "^6.1.8" }, "devDependencies": { "eslint": "^8.57.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.2" } } 이렇습니다.감사합니다.
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
노드 삭제 재설치
그러면 안되지만 잘못 설치했을경우 노드 삭제 재설치 및 버전 업데이트 하는 방법에 대해서 혹시 유튜브에라도 해당 내용이 있을실까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다.
안녕하세요 제로초님어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다.새로고침해도 수정한 로직이 적용되지 않은채여서,처음에는 일시적인 에러인가 해서 그냥 ctr + c 로 껐다가다시 npm run dev로 켜서 수정된것 브라우저에서 확인하고 했는데 이게 지속적으로 진행되다보니 어떤 문제가 있는건지도 모르겠고 답답해서 여쭤봅니다.ㅠ노드모듈, .next파일 을 지웠다 다시 설치해보기도 해도 여전히 그대로라 문의 올려봅니다 ㅠ어떤것 때문인지 짐작도 안가서 코드를 못 올리는점 참고부탁드립니다. 제로초님 코딩으 따라가면서 잘됐는데 이부분만 왜 갑자기 이러는지..;;
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
저는왜 렌더링 화면이 다를까요 ?
저는 이 화면으로만 보이고 domain 적는 구간이없는데.. 왜그럴까요 계속 로그인 상태 알람만 발생합니다. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>API 서버 로그인</title> <style> .input-group label { width: 200px; display: inline-block; } </style> </head> <body> {% if user and user.id %} <span class="user-name">안녕하세요! {{user.nick}}님</span> <a href="/auth/logout"> <button>로그아웃</button> </a> <fieldset> <legend>도메인 등록</legend> <form action="/domain" method="post"> <div> <label for="type-free">무료</label> <input type="radio" id="type-free" name="type" value="free"> <label for="type-premium">프리미엄</label> <input type="radio" id="type-premium" name="type" value="premium"> </div> <div> <label for="host">도메인</label> <input type="text" id="host" name="host" placeholder="ex) zerocho.com"> </div> <button>저장</button> </form> </fieldset> <table> <tr> <th>도메인 주소</th> <th>타입</th> <th>클라이언트 비밀키</th> </tr> {% for domain in domains %} <tr> <td>{{domain.host}}</td> <td>{{domain.type}}</td> <td>{{domain.clientSecret}}</td> </tr> {% endfor %} </table> {% else %} <form action="/auth/login" id="login-form" method="post"> <h2>NodeBird 계정으로 로그인하세요.</h2> <div class="input-group"> <label for="email">이메일</label> <input id="email" type="email" name="email" required autofocus> </div> <div class="input-group"> <label for="password">비밀번호</label> <input id="password" type="password" name="password" required> </div> <div>회원가입은 localhost:8001에서 하세요.</div> <button id="login" type="submit">로그인</button> </form> <script> window.onload = () => { if (new URL(location.href).searchParams.get('error')) { alert(new URL(location.href).searchParams.get('error')); } }; </script> {% endif %} </body> </html> view에 login도 위와 같이 들어가있습니다.const { User, Domain } = require("../models"); const { v4: uuidv4 } = require("uuid"); exports.renderLogin = async (req, res, next) => { try { const user = await User.findOne({ where: { id: res.user?.id || null }, include: { model: Domain } }) res.render("login", { user, domains: user?.Domains }) } catch (err) { console.error(err) next(err); } } exports.createDomain = async (req, res, next) => { try { await Domain.create({ UserId: req.user.id, host: req.body.host, type: req.body.type, client: uuidv4() }) res.redirect("/"); } catch (err) { console.error(err); next(err); } } controller에서도 강의대로 잘 렌더가 들어가있습니다. 그러니 화면이 보이긴하는데 왜 저만안보일까요..- app.js에 passport의 initialize(), session() 함수 선언되어있습니다. - cookie도 있습니다.- db에 user도 있습니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
api호출 제한이 안되는 질문에서 제로초님이 제공해주신 코드중에서의 질문입니다!
해당 질문에서 제로초님이const limiter = rateLimit({ widowMs: 60 * 1000, max: (req, res) => { if (req.user?.type === 'premium') { return 10 } return 1; }, handler(req, res) { res.status(this.statusCode).json({ code: this.statusCode, message: `1분에 ${req.user?.type === 'premium' ? '열' : '한'} 번만 요청 할 수 있습니다...`, }); }, }); exports.apiLimiter = async (req, res, next) => { let user; if (res.locals.decoded) { user = await User.findOne({ where: { id: res.locals.decoded.id } }); } req.user = user; limiter(req, res, next); };이렇게 주셨는데 여기서 limiter을 상수형태로 참조하게끔하면 그럼 다수의 유저가 호출을 하게 될때limiter이 같은 함수를 가르키고있어서 다른 유저가 호출한 api횟수에 영향을 받게 되지않나요? 강의 너무 잘보고있습니다!
-
미해결습관부터 바꿔주는 Node.js & Express 기초
swagger /user/detail/:id 조회시 id로 조회 안됩니다.
스웨거에서/users/detail/:id 조회시 id로 조회가 되지 않습니다. const {id} = req.params;id에 해당 값이 들어오질 않네요.req.params 에id:":id" 이렇게 값이 들어옵니다.id: ':id'} github에서 다운받아서 해도 같은 현상입니다.확인 부탁드립니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
S3에 업로드까지는 성공했는데 사진이 나오지 않습니다.
작성한 코드https://github.com/Parkdev/myfirstnest 업로드 완료 후 결과 링크https://devpark-awsnestcat.s3.ap-southeast-2.amazonaws.com/cat/1713862948347_1.jpeg 업로드 완료까지는 성공하였으나, 업로드 한 사진이 파일이 깨져서 올라가고 있습니다. 어디가 잘못되었는지 잘모르겠네요. 도와주세요.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
서버 배포 후 api 연동 시에 net::ERR_CONNECTION_REFUSED 에러가 나옵니다
안녕하세요 제로초님! 항상 좋은 강의 올려주셔서 감사합니다 제로초님 강의를 그대로 따라하다가 react로 혼자 프론트를 만들어서 api 연동 웹사이트를 만드는 중입니다. 서버 배포까지 마쳐서 pm2 list 해도 재시작 0회로 잘 올라가 있는 상황입니다! 그런데 프론트에 서버 주소를 입력해서 테스트를 해보니 아래와 같은 에러가 나옵니다. (프론트는 아직 localhost를 사용하고 있습니다) 프론트에서는 아래와 같이 주소를 연동해서 사용했습니다export const url = "http://106.10.34.138"; 강의 때 백엔드에 8002 포트 설정을 해줬어서 :8002를 붙여봤지만 동일한 오류가 나왔습니다 프론트, 서버 둘다 cors 에러가 나올까봐 아래처럼 cors 설정도 해줬습니다//프론트 headers: { "Access-Control-Allow-Origin": "*", },app.use( cors({ origin: "*", credentials: true, }) ); 이제 잘 되는지만 테스트 하면 되는 단계인데 여기서 막혀서 도저히 해결이 안되네요 이런 경우에 어떻게 해결할 수 있는지 알려주시면 감사하겠습니다! 늘 좋은 강의 감사합니다
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
CSS 적용 안되는 현상
위와 같이 코드를 작성하였습니다만, body 부분의 css가 적용이 안됩니다.여기서 제가 궁금한 것은 .html 파일 위의 <!DOCTYPE html>을 삭제하면 body값이 100%에 맞게 보여지는데, 왜 이렇게 적용 되는지 잘 모르겠습니다..<!DOCTYPE html>의 태그 같은 경우는 문서 형식을 선언하는것으로 알고있는데..해당 코드의 존재 유무에 따라 CSS 적용이 되다 안되다가 하는지 잘 모르겠습니다.. 답변 주시면 감사드리겠습니다!!
-
미해결
express vercel 배포 500: INTERNAL_SERVER_ERROR
express 서버를 vercel로 배포 하는데 500에러가 뜨는데 왜 뜨는지 어디가 문제인지 모르겠어요... 도움주실수 있으실까요 ㅠㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다.
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다.이런경우는 도대체 뭐때문에 그럴까요? 용량이 커서 그럴까요?백 서버 도메인은 접속이 잘됩니다..vscode에서도 front터미널만 자꾸 렉걸리는 현상이 생겨요 ㅠㅠ
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
socket io 미 연결 문제 (nest & flutter)
안녕하세요! socket관련한 서비스를 진행해보고 싶어서 제로초님의 강의를 들은 수강생입니다.현재 nest & flutter를 이용하고 있는데, flutter에서의 연결 및 다른 tool에서 socket io 연결이 되지 않으며 “외부 사이트로는 접근이 불가능한 오류”가 생겨서 조심스럽게 여쭤봅니다. 현재 로직은 채팅을 생성시, 채팅을 보여주는 리스트가 실시간으로 새로고침이 되는 부분을 작업중입니다.하지만, postman, httpie, hoppscotch의 부분에서 연결이 되지 않는 문제가 발생합니다.많은 방법을 찾아봤지만, 터미널에서 socket io cli를 통해서 로그는 볼 수 있지만, 다른 tool에서는 이용이 불가능한 방법에 대해서 알고 싶어서 질문드립니다!Socket io를 통해서 local, dev서버 연결 완료 하지만 postman의 socket io기능을 통해서 테스트를 진행하려고 할 때,postman으로 연결local에서는 문제가 없이 연길이 되지만, dev서버에서는 이러한 에러가 발생합니다. 또한 flutter 앱에서 연결을 하려면 다음과 같은 에러가 발생합니다.오류 메시지 "WebSocketException: Connection to 'http://~~~~.com:81/socket.io/?EIO=4&transport=websocket#' was not upgraded to websocket"는 클라이언트가 WebSocket 연결을 시도하였으나, 서버가 해당 연결을 WebSocket 프로토콜로 업그레이드하지 않았다는 것을 의미합니다. 이는 여러 가지 원인에 의해 발생할 수 있습니다: upgrade가 되지 않았다고 나와서 ,ngnix의 socket 부분에서 upgrade부분도 잘 넣어줬는데, 오류가 해결되지 않아서... 고민 끝에 질문 올립니다.Ngnix 설정부터 2주정도 시간을 들였지만, 해결이 되지 않아서…여쭤봅니다.방화벽도 해제가 되어 있는데 연결이 안되고 있습니다..다음은 nest에서 작성한 코드 입니다![chat.gateway.ts]import { WebSocketGateway, WebSocketServer, SubscribeMessage, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, ConnectedSocket, MessageBody, } from '@nestjs/websockets'; import { Server, Socket } from 'socket.io'; @WebSocketGateway() export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect { @WebSocketServer() server: Server; afterInit(server: Server) { console.log('WebSocket initialized'); } handleConnection(client: Socket) { console.log(`Client connected: ${client.id}`); // 수정: client 객체 직접 출력 대신 id 출력 } handleDisconnect(client: Socket) { console.log(`Client disconnected: ${client.id}`); } @SubscribeMessage('sendMessage') handleMessage( @ConnectedSocket() client: Socket, @MessageBody() data: { message: string } ): void { console.log(`Received message from ${client.id}: ${data.message}`); this.server.emit('newMessage', data); // 모든 클라이언트에게 메시지 전송 console.log(`Received message: ${data.message}`); } } [main.ts]import { ConfigService } from '@nestjs/config'; import { NestFactory } from '@nestjs/core'; import { NestExpressApplication } from '@nestjs/platform-express'; import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'; import { join } from 'path'; import { AppModule } from './app.module'; import { HttpExceptionFilter } from './common/exceptions/http-exception.filter'; import { SuccessInterceptor } from './common/interceptors/success.interceptor'; import { IoAdapter } from '@nestjs/platform-socket.io'; import { CustomIoAdapter } from './adapters/custom-io.adapter'; async function bootstrap() { const app = await NestFactory.create<NestExpressApplication>(AppModule); app.useWebSocketAdapter(new CustomIoAdapter(app)); const configService = app.get(ConfigService); const port = configService.get('server.port'); const mongoUrl = configService.get('DB.MONGO_URL'); console.log('MongoDB URL:', mongoUrl); app.enableCors({ origin: true, credentials: true, }); app.useStaticAssets(join(__dirname, '..', 'client'), { prefix: '/api/v1/client', }); app.useGlobalInterceptors(new SuccessInterceptor()); app.useGlobalFilters(new HttpExceptionFilter()); app.setGlobalPrefix('api/v1'); const swagger_options = new DocumentBuilder() .setTitle('Nyam-Docs') .setDescription('API description') .setVersion('2.0.1') .addApiKey( { type: 'apiKey', name: 'x-token', in: 'header', description: 'Enter token', }, 'x-token', ) .addApiKey( { type: 'apiKey', name: 'x-type', in: 'header', description: 'Enter type', }, 'x-type', ) .build(); const document = SwaggerModule.createDocument(app, swagger_options); SwaggerModule.setup('api-docs', app, document); await app.listen(port, '0.0.0.0'); console.log(`Application Listening on Port : ${port}`); } bootstrap();다음은 custom한 io입니다[custom.io.adpter.ts]import { IoAdapter } from '@nestjs/platform-socket.io'; import { INestApplication, Injectable } from '@nestjs/common'; import { ServerOptions } from 'socket.io'; @Injectable() export class CustomIoAdapter extends IoAdapter { constructor(app: INestApplication) { super(app); } createIOServer(port: number, options?: ServerOptions): any { const serverOptions: ServerOptions = { ...options, cors: { origin: '*', // 모든 도메인에서 접근 허용 methods: ['GET', 'POST', 'PUT', 'DELETE'], credentials: true }, transports: ['websocket', 'polling'], //pooling 없으면 연결 안 됨(socket) allowEIO3: true // Engine.IO 3.x 버전 클라이언트 허용 }; return super.createIOServer(port, serverOptions); } } 혹시 해결방법을 아시거나, 도움을 주실만한 정보가 있으시다면 알려주시면 정말 감사하겠습니다!
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
map foreach 매개변수 이름은 product, index아니여도 되네요
그냥 첫번째 매개변수가 대상이고 두번째 매개변수는 index취급하는건가요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman으로 만든 주소는 만든사람 본인만 들어가지는건가요
다른 사람은 못보는걸까요
-
미해결Do it! Node.js 프로그래밍 입문
8:34초 간단한 질문있습니다
hashedPassword 부분에서 10이 의미하는 것은 무엇인가요??
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer설정 중 user 초기값이 undefined로 나오는 에러
안녕하십니까 형님진행하다 보니 궁금한게 생겨서 여쭤보려고 합니다. reducer설정 중 초기값이 undefined로 들어오는 에러가 놔왔었는데욥error - Error: The slice reducer for key "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 에러 났던 부분운 default: state 이 부분이고 코드 보고 아래처럼 수정하니 잘 동작했습니다. export const initialState = { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, } const reducer = (state=initialState, action) => { switch(action.type) { default: { return { ...state } } } }default: state vs default: { return {...state}}문법적으로 똑같은 내용이 아닌지...어떤 차이가 있는지를 모르겠어서 질문드립니다!