npm -v , node -v 로 버전 확인 후 package.json의 engine에서 node, npm 버전 수정파이썬을 설치.- 설치시 ADD PATH 인가에 체크packge.json > dependencies에서 bcrypt 삭제npm install 설치 후 bcryptjs 추가 설치npm install bcryptjs --save 

안녕하세요 강사님혹시 메뉴가 한개만 있는데도 불구하고 "..." 이라는 메뉴 아래에 "나의 favorite" 으로 생겼습니다.굳이 "..." 라는 메뉴 아래에 "나의favorite"이 생기지 않고, "Home" 오른쪽에 "나의 favorite" 을 바로 생성하고 싶은데, 이런경우 어떻게 해결 하면 될까요?  [NavBar] [NavBar][NavBar.js]import React, { useState } from 'react'; import LeftMenu from './Sections/LeftMenu'; import RightMenu from './Sections/RightMenu'; import { Drawer, Button } from 'antd'; import Icon from '@ant-design/icons'; import './Sections/Navbar.css'; function NavBar() { const [visible, setVisible] = useState(false) const showDrawer = () => { setVisible(true) }; const onClose = () => { setVisible(false) }; return ( <nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}> <div className="menu__logo"> <a href="/">Logo</a> </div> <div className="menu__container"> <div className="menu_left"> <LeftMenu mode="horizontal" /> </div> <div className="menu_rigth"> <RightMenu mode="horizontal" /> </div> <Button className="menu__mobile-button" type="primary" onClick={showDrawer} > <Icon type="align-right" /> </Button> <Drawer title="Basic Drawer" placement="right" className="menu_drawer" closable={false} onClose={onClose} visible={visible} > <LeftMenu mode="inline" /> <RightMenu mode="inline" /> </Drawer> </div> </nav> ) } export default NavBar[LeftMenu.js]import React from 'react'; import { Menu } from 'antd'; function LeftMenu(props) { return ( <Menu mode={props.mode}> <Menu.Item key="mail"> <a href="/">Home</a> </Menu.Item> <Menu.Item key="favorite"> <a href="/favorite">나의 Favorite</a> </Menu.Item> </Menu> ) } export default LeftMenu

현재 개정3판 노드 강의를 듣고 있는데 강의에서 사용하시는 js파일들 받을수있을까요?아니면 이미 올려두신곳이 있다면 알려주세요!

몽고db질문입니다. 코드를 따라해보는중 몽고DB에서 데이터부분이 안들어 왔습니다. 어떤부분이 문제인지 궁금합니다.

logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?handleLogout function에서 local storage의 accessToken을 삭제시키고, store의 user 정보만 initial state, 그리고 isAuth 등을 false로 바꾸면 그만일텐데, 왜 server에 요청을 보내는 과정이 필요할까요!?

질문 있어서 남깁니다.메인페이지에서 Link를 타고 upload, list 들어가서 화면이 로드 돼야하는데 돼지 않고 하얀바탕으로 돼면서 Error표시 없이 No routes matched location "/list" Error Component Stack가 표시 됍니다. 어떤문제이고 해결 방법이 무엇인지 궁금합니다.Ps. 질문이 이해 안가실것 같아서 스샷 올려놨습니다.

왜 이러는지 알 수 있을까요? 찾아봐도 모르겠습니다... '-webkit-text-size-adjust' is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+.

제가 mysql연동이 잘 되지 않아 건너뛰고 보려고 하는데express라우터부터 그냥 봐도 크게 영향받지않고 진행할 수 있을까요??

안녕하세요. 강의를 듣고 있는 고등학생입니다. 학교 프로젝트로 강의 하천이나 수질을 나타내는 지도 서비스를 만들려고 하는데 강의 길이에 따라 마커의 크기를 바꾸고 강의 수질에 따라 마커의 색을 바꾸고 싶습니다. css 파일 자체에서 index.js에서 선언된 변수에 따라 마커의 크기를 바꿀 수는 없나요??

does not provide an export named 'userReducer'라는 에러가 뜹니다.맞게 작성한거 같은데...설정을 잘못했을까요?

body { padding: 0px !important; margin: 0px !important; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } a { color: #00B7FF; } ul { list-style-type: none; margin: 0px; padding: 0px; overflow: hidden; background: #333; position: fixed; width: 100%; z-index: 1001; } li { float: left; } li a { display: block; color: white; text-decoration: none; text-align: center; padding: 14px 16px; } .active { background-color: #0322AB; } li a:hover:not(.active) { background-color: #111; } .infow .body { position: relative; overflow: hidden; } .info .desc { position: relative; margin: 8px 0 0 90px; height: 75px; display: block; } .map .wrap, .map_wrap * { margin: 0; padding: 0; font-size: 12px; } #menu_wrap { position: absolute; top: 0; left: 0; bottom: 0; width: 200px; margin: 50px 0 30px 10px; padding: 5px; overflow-y: auto; background: rgba(255, 255, 255, 0.7); z-index: 1; font-size: 12px; border-radius: 10px; } #menu_wrap hr { display: block; height: 1px; border: 0; border-top: 2px solid #5f5f5f; margin: 3px 0; } #placesList .item { position: relative; border-bottom: 1px solid #888; overflow: hidden; cursor: pointer; width: 100px; } #placesList .item span { display: block; margin-top: 4px; } #placesList .item .info { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 20px; } #placesList .item .active .info_title { font-weight: bolder; }인포윈도우에서 제목에 볼드 처리가 되지 않고, 검색결과 간의 구분이 표시되지 않습니다...

보일러플레이트 코드 수업 자료 관련해서 다운받았는데 빈폴더라고 저번 질문에 문의드렸는데 사용중인 os만 물어보시고 답변이 없으셔서 다시 질문드려요 사용중인 os는 윈도우입니다.

 #!/usr/bin/env node /** * Module dependencies. */ var app = require('../app'); var debug = require('debug')('suzil:server'); var http = require('http'); const mongoose = require("mongoose"); const userConfig = require("../config/userConfig.json"); let db = mongoose.connection; db.on("error",console.error); db.once("open",()=>{ console.log("Connected to mongo Server"); }); mongoose.connect( `mongodb+srv://wiyuchan1021:${userConfig.PW}>@suzilo.i1je5.mongodb.net/suzilo?retryWrites=true&w=majority`, {useNewUrlParser: true, useUnifiedTopology: true} ) /** * Get port from environment and store in Express. */ var port = normalizePort(process.env.PORT || '3000'); app.set('port', port); /**f * Create HTTP server. */ var server = http.createServer(app); /** * Listen on provided port, on all network interfaces. */ server.listen(port); server.on('error', onError); server.on('listening', onListening); /** * Normalize a port into a number, string, or false. */ function normalizePort(val) { var port = parseInt(val, 10); if (isNaN(port)) { // named pipe return val; } if (port >= 0) { // port number return port; } return false; } /** * Event listener for HTTP server "error" event. */ function onError(error) { if (error.syscall !== 'listen') { throw error; } var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port; // handle specific listen errors with friendly messages switch (error.code) { case 'EACCES': console.error(bind + ' requires elevated privileges'); process.exit(1); break; case 'EADDRINUSE': console.error(bind + ' is already in use'); process.exit(1); break; default: throw error; } } /** * Event listener for HTTP server "listening" event. */ function onListening() { var addr = server.address(); var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port; debug('Listening on ' + bind); } 코드 실행하면PS C:\Users\yuchan\suzil> npm start> suzil@0.0.0 start> nodemon ./bin/www[nodemon] 3.1.7[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: js,mjs,cjs,json[nodemon] starting node ./bin/www(node:13580) [MONGODB DRIVER] Warning: useNewUrlParser is a deprecated option: useNewUrlParser has no effect since Node.js Driver version 4.0.0 and will be removed in the next major version (Use node --trace-warnings ... to show where the warning was created)(node:13580) [MONGODB DRIVER] Warning: useUnifiedTopology is a deprecated option: useUnifiedTopology has no effect since Node.js Driver version 4.0.0 and will be removed in the next major versionMongoServerError: bad auth : authentication failed at Connection.sendCommand (C:\Users\yuchan\node_modules\mongodb\lib\cmap\connection.js:289:27) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Connection.command (C:\Users\yuchan\node_modules\mongodb\lib\cmap\connection.js:312:26) at async continueScramConversation (C:\Users\yuchan\node_modules\mongodb\lib\cmap\auth\scram.js:131:15) at async executeScram (C:\Users\yuchan\node_modules\mongodb\lib\cmap\auth\scram.js:80:5) at async ScramSHA1.auth (C:\Users\yuchan\node_modules\mongodb\lib\cmap\auth\scram.js:39:16) at async performInitialHandshake (C:\Users\yuchan\node_modules\mongodb\lib\cmap\connect.js:104:13) at async connect (C:\Users\yuchan\node_modules\mongodb\lib\cmap\connect.js:24:9) { errorResponse: { ok: 0, errmsg: 'bad auth : authentication failed', code: 8000, codeName: 'AtlasError' }, ok: 0, code: 8000, codeName: 'AtlasError', connectionGeneration: 0, [Symbol(errorLabels)]: Set(2) { 'HandshakeError', 'ResetPool' }}node:internal/process/promises:391 triggerUncaughtException(err, true /* fromPromise */); ^MongoServerError: bad auth : authentication failed at Connection.sendCommand (C:\Users\yuchan\node_modules\mongodb\lib\cmap\connection.js:289:27) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Connection.command (C:\Users\yuchan\node_modules\mongodb\lib\cmap\connection.js:312:26) at async continueScramConversation (C:\Users\yuchan\node_modules\mongodb\lib\cmap\auth\scram.js:131:15) at async executeScram (C:\Users\yuchan\node_modules\mongodb\lib\cmap\auth\scram.js:80:5) at async ScramSHA1.auth (C:\Users\yuchan\node_modules\mongodb\lib\cmap\auth\scram.js:39:16) at async performInitialHandshake (C:\Users\yuchan\node_modules\mongodb\lib\cmap\connect.js:104:13) at async connect (C:\Users\yuchan\node_modules\mongodb\lib\cmap\connect.js:24:9) { errorResponse: { ok: 0, errmsg: 'bad auth : authentication failed', code: 8000, codeName: 'AtlasError' }, ok: 0, code: 8000, codeName: 'AtlasError', connectionGeneration: 0, [Symbol(errorLabels)]: Set(2) { 'HandshakeError', 'ResetPool' }}Node.js v20.17.0[nodemon] app crashed - waiting for file changes before starting...이러한 오류가 터미널에 뜨는데 왜 그런걸까요?

 Drivers를 선택해서 나온 url주소로도 MongoDB for VS Code를 선택해서 나온 url주소로도 접속이 실패합니다.Node.js 코드는 다음과 같이 작성했습니다.const mongoose = require("mongoose"); const MONGODB_URL = "mongodb+srv://root:1234@education.sidnf.mongodb.net/"; mongoose .connect(MONGODB_URL) .then(() => console.log("Connected to database!")) .catch(() => console.log("Connection failed..."))Connection failed... 라고 나옵니다.Network Access에서도 0.0.0.0으로도 해보고, 제 컴퓨터의 IP주소로도 해보았습니다.전부 접속 실패가 뜹니다.이유를 알 수 있을까요?!

보일러플레이트 코드 소개에 있는 수업자료를 다운받았는데 압축해제하려고 보니까 해제도 안되고 압축폴더에는 파일이 아무것도 없네요

안녕하세요 강사님 !쇼핑몰 만들기 강의 빌드 배포과정에서 헤매는 수강생들이(저 포함) 많은 것 같은데 혹시 빌드 배포과정까지 영상으로 올려주실 계획은 없으실까요??

몽고디비에 회원가입하고, 이제 js코드를 작성해(vscode에서) 몽고디비에서 데이터베이스 및 컬렉션을 생성시키는 과정을 따라가고 있었습니다. 강의 내용과 동일한 구조를 가지고 있고, 코드 작성은 똑같이 index.js에서 진행했습니다.(또 패키지를 확인해본 결과 몽고디비는 잘 설치되어 있었구요)const express = require("express");const MongoClient = require("mongodb").MongoClient;const app = express();const port = 5000;const MongoURL="mongodb+srv://아이디:비밀번호@chaehyun.f26fr.mongodb.net/Express?retryWrites=true&w=majority&appName=Chaehyun";var db, post;app.use(express.static("public"))app.use(express.urlencoded({extended: false}))//app.set( 'view engine' , 'pug' )app.set('view engine' , 'ejs' )app.get("/", (req, res) => {  post.insertOne({    제목 : "test",    내용 : "test",    날짜 : new Date(),  })  res.render("index")}); app.post('/calculator', function(req,res){  let result = Number(req.body.num1) + Number(req.body.num2);  res.render("result", {result:result})}) app.all("*", function(req,res){  res.status(404).send("찾을 수 없는 페이지")})MongoClient.connect(MongoURL, (err, database) => {  if(err){    console.log(err);    return;  } else{    app.listen(port, () => {      console.log(`Example app listening on port ${port}`);    });    db = database.db("Express");    post = db.collection("posts")  }})이처럼 입력하였는데몽고디비에선 데이터베이스와 컬렉션이 생성되지 않습니다...그런데 수업에선 localhost:5000을 통해 -> 몽고디비의 데이터베이스 생성을 하시는 듯 해 보였습니다만, 애초에 app.get( )에서의 내용 때문에 웹사이트는 작동되지 않는게 맞지 않나요...?

안녕하세요! 강의 잘 듣고 있는 수강생 입니다!제로초님 강의를 보면 다음과 같은 코드가 있을 때const express = require('express'); const path = require('path'); const app = express(); app.get('/',(req,res)=>{ res.sendFile(path.join(__dirname,'index.html')); console.log('GET / '); })app에 대한 HTTP METHOD 를 지원하는 라우팅 함수 및 req, res 에서 사용할 수 있는 함수들에 대해 자동 완성 되는 부분을 봤는데요. (예:`app.get()`,`res.writeHead()` 등) vscode의 각종 extensions 들을 설치해보고 vscode 자체의 옵션도 찾아봤지만 도저히 제로초님 처럼 자동 완성 되지가 않네요ㅜㅜ제가 이클립스를 사용하다가 이번에 노드 공부해보려고 다른 IDE를 사용해서 그런지 자동완성이 되지 않는 부분이 매우 불편한데 혹시 강사님 개발 환경 공유 가능할까요?강의와는 상관이 없는 질문인 점 죄송합니다

안녕하세요 강사님,proxy 설정을 하면 이렇게 오류가 뜨면서 서버 시작이 안돼요.프록시 부분을 지우면 잘 작동하는데어디가 잘못된걸까요? 

await mongoose.connect(MONGO_URL); // 제거 하시고 사용 하세요 // 버전6부터 해당 옵션을 사용하지 않아도 돼요https://mongoosejs.com/docs/migrating_to_6.html(공식문서) 보세요. 참고하세요