묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
노드 삭제 재설치
그러면 안되지만 잘못 설치했을경우 노드 삭제 재설치 및 버전 업데이트 하는 방법에 대해서 혹시 유튜브에라도 해당 내용이 있을실까요?
-
미해결[개정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횟수에 영향을 받게 되지않나요? 강의 너무 잘보고있습니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
jwt의 payload에 넣는 정보
안녕하세요 강사님 좋은 강의를 제공해주셔서 감사합니다.JWT는 header, payload는 base64 방식으로 인코딩 되는데 이 방식은 쉽게 복호화가 가능한 것으로 알고 있습니다.그렇기 때문에 JWT를 클라이언트로 보내줄 때 payload에 mongodb의 _id, rdb의 primary key를 넣어주는 것은 좋지 않다고 생각합니다. 물론 강의는 학습을 위한 프로젝트이기 때문에 payload에 그런 것들을 노출 시킨 것은 알고있습니다.그렇다면 실무에서는 payload에 어떤 값을 넣어주는 것이 적절한지 궁금해서 질문을 남깁니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Encountered two children with the same key
Multer 이용하여 이미지 업로드 하면 다음 오류가 뜹니다 import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> {images.map((image, index) => ( <div key={image+index}> {/* image 이름과 index를 조합하여 고유한 키를 생성 */} <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[오류] Each child in a list should have a unique
Multer 이용하여 파일 업로드할떄Each child in a list should have a unique 오류가자꾸 뜹니다.. import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> <div className='flex-grow h-[300px] border flex items-center justify-center overflow-x-scroll overflow-y-hidden'> {images.map(image => ( <div key={image}> <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload
-
미해결파이썬 Streamlit 활용한 웹 자동화 업무, 데이터 검색 및 시각화
강의 자료는 어떻게 볼 수 있어요?
강의 자료 링크를 눌러도 어떤 링크도 보이지를 않는데 어떻게 볼 수 있나요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
S3에 업로드까지는 성공했는데 사진이 나오지 않습니다.
작성한 코드https://github.com/Parkdev/myfirstnest 업로드 완료 후 결과 링크https://devpark-awsnestcat.s3.ap-southeast-2.amazonaws.com/cat/1713862948347_1.jpeg 업로드 완료까지는 성공하였으나, 업로드 한 사진이 파일이 깨져서 올라가고 있습니다. 어디가 잘못되었는지 잘모르겠네요. 도와주세요.
-
미해결Do it! Node.js 프로그래밍 입문
8:34초 간단한 질문있습니다
hashedPassword 부분에서 10이 의미하는 것은 무엇인가요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[ 오류 NotAuthRoutes ] error 'isAuth' is missing in props validation react/prop-types
ProtectedRoutes & NotAuthRoutes 에서 지속적으로 해당 에러가 뜹니다error 'isAuth' is missing in props validation react/prop-types구글링해서 여러 방법들을 동원햇지만 어떻게 해야될지 모르겟습니다
-
미해결Do it! Node.js 프로그래밍 입문
delete 부분에서 13:28 질문있습니다
13:28 delete 부분에서 강의를 보면 const contact = await Contact.findById(id);를 통해서 정보를 contact 변수에 할당하고막상 deleteOne함수는 Contact에서 합니다 contact에서 deleteOne을 사용하면 안되나요?Contact에서와 contact에서 deleteOne을 사용했을 때의 차이가 궁금하고 Contact에서 delete를 할 것이면 왜 굳이 새로운 변수에 할당을 해주는 것인지 궁금합니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작 에러
Failed to parse source map from 'C:\Users\user\Desktop\boilerplate-mern-stack-master\client\node_modules\mutationobserver-shim\dist\mutationobserver.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\user\Desktop\boilerplate-mern-stack-master\client\node_modules\mutationobserver-shim\dist\mutationobserver.map' [1][1] ERROR in ./node_modules/antd/es/version/index.js 2:15-22[1] Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)이런 에러가 뜨는데 어떻게 해결하나요...도와주세요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작 에러
ERROR in ./node_modules/antd/es/version/index.js 2:15-22[1] Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) 이런 에러가 뜨는데 어떻게 해결하나요...
-
미해결Do it! Node.js 프로그래밍 입문
에러 도와주세요
6:26 기준 똑같이 따라했는데 TypeError: Cannot use 'in' operator to search for 'pluralization' in undefined at Mongoose._model (/Users/leooh/Desktop/doit-node-main/myContacts/node_modules/mongoose/lib/mongoose.js:612:43) at Mongoose.model (/Users/leooh/Desktop/doit-node-main/myContacts/node_modules/mongoose/lib/mongoose.js:581:27) at Object.<anonymous> (/Users/leooh/Desktop/doit-node-main/myContacts/models/contactModel.js:20:26) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) at require (node:internal/modules/helpers:176:18) at Object.<anonymous> (/Users/leooh/Desktop/doit-node-main/myContacts/controllers/contactController.js:2:17) 오류가 나옵니다 무엇이 문제일까요??
-
미해결Do it! Node.js 프로그래밍 입문
status 작성 이유가 궁금합니다
controller1을 참고하라고 하셔서 혼자 코드를 작성한 후 코드를 봤는데 원래는 없는 status함수가 추가 되어 있습니다 서칭을 해본결과 status(200)은 request가 완료된 것을 알리는 상태 코드라고 하는데 그 목적으로 사용한 것인가요? status 함수 없이 작성해도 상관없던데 추가하신 이유가 궁금합니다!
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
React나 Vue 사용 시 렌더링 질문
서버 사이드 렌더링은 넌적스나 도그스 보니까 이해가 됩니다.React,Vue를 원래 실무에서 사용한다는 뜻은 혹시 클라이언트 사이드렌더링에 관점에서 말씀하신건지 궁금합니다. 서버사이드렌더링 처럼 데이터를 넣어서 static 파일 전달하는 형태를 말씀하신거라면 방법이 궁금합니다 !
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
노드 비동기 동작 질문
0. 대부분 무거운 연산이나 오래걸리는 일들을 비동기로 보내는 것으로 이해했습니다. 그런데 결국 비동기요소들이 Background 대기 후 Task Queue으로 이동 후 Stack이 비었는지 확인 하고 Stack에 이동하여 진행되는 것일 텐데 이것들이 동시에 처리되는 것이라고 볼 수 있나요 ? 아니면 Background에 있는 동안 Promise와 같은 비동기 요소들이 백그라운드에서 동시에 Logic이 처리되고 Queue로 resolve혹은 reject의 값이 Stack으로 넘어가나요 ? 구체적인 동작방식이 궁금합니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
넌적스로 {% include .html} 시 template not found 오류
안녕하세요, 변수에 할당되는 값에 따라서 html 파일을 다르게 include 하고 싶은데,template not found 오류가 뜹니다. 처음에 변수에 값을 넘기고 app.js에서 렌더링할 때 하기와 같이 설정했습니다. 그 뒤, index.html 에해당 코드를 추가하여 viewAlimtalk에 값이 있다면 test.html을 include할 수 있도록 하였습니다. 그런데 오류는 index 템플릿을 찾을 수 없다고 뜹니다. Error: template not found: index at Object._prettifyError (C:\alimtalk\node_modules\nunjucks\src\lib.js:32:11) at C:\alimtalk\node_modules\nunjucks\src\environment.js:464:19 at eval (eval at compile (C:\alimtalk\nodemodules\nunjucks\src\environment.js:527:18), <anonymous>:22:11) at C:\alimtalk\node_modules\nunjucks\src\environment.js:471:11 at eval (eval at compile (C:\alimtalk\nodemodules\nunjucks\src\environment.js:527:18), <anonymous>:16:11) at createTemplate (C:\alimtalk\node_modules\nunjucks\src\environment.js:238:11) at next (C:\alimtalk\node_modules\nunjucks\src\lib.js:260:7) at handle (C:\alimtalk\node_modules\nunjucks\src\environment.js:267:11) at C:\alimtalk\node_modules\nunjucks\src\environment.js:276:9 at next (C:\alimtalk\node_modules\nunjucks\src\lib.js:258:7) index.html에 {% include "test.html" %} 코드를 지우고 실행하면 해당 오류는 없이 index.html이 잘뜨게됩니다 .. 파일구조는 views index.htmltest.html로 되어있고, 넌적스 configure도 views 파일로 설정하였습니다. 왜이런 오류가 뜨게 되는걸까요?? if 값에 따라 html을 동적으로 삽입할 수 있는 다른 방법이 있을까요? 혹은, 버튼 클릭 시 router 을 통한 render가 아닌 바로 넌적스 변수를 변경할 수 있는 코드를 작성할 수는 없을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
학습 로드맵
안녕하세요. 좋은 강의 만들어주셔서 감사합니다.이번에 강의 업데이트가 된 김에 미뤄왔던 공부를 하려고 하는데요.가지고 있는 강의는 이정도가 있고,리액트 훅 정도는 알고 사용할 수 있는 정도인데, 공부 순서를 어떻게 하면 좋을까요? [보유 강의]따라하며 배우는 노드, 리액트 시리즈 - 기본 강의따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 (리뉴얼)따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기 (리뉴얼)따라하며 배우는 TDD 개발 (리뉴얼)따라하며배우는 도커와 CI환경 (리뉴얼)
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
ws 프로토콜 연결시 사이트 연결할 수 없음 메세지가 나오고 페이지 호출이 되지 않습니다.
브라우저 사파리에서는 정상동작 합니다참고로 크롬 버젼은 123.0.6312.107(공식 빌드) (arm64)맥에서 실행했습니다.