173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
제가 mysql연동이 잘 되지 않아 건너뛰고 보려고 하는데 express라우터부터 그냥 봐도 크게 영향받지않고 진행할 수 있을까요??
미해결
코로나맵 개발자와 함께하는 지도서비스 만들기 2
안녕하세요. 강의를 듣고 있는 고등학생입니다. 학교 프로젝트로 강의 하천이나 수질을 나타내는 지도 서비스를 만들려고 하는데 강의 길이에 따라 마커의 크기를 바꾸고 강의 수질에 따라 마커의 색을 바꾸고 싶습니다. css 파일 자체에서 index.js에서 선언된 변수에 따라 마커의 크기를 바꿀 수는 없나요??
미해결
코로나맵 개발자와 함께하는 지도서비스 만들기 2
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; } 인포윈도우에서 제목에 볼드 처리가 되지 않고, 검색결과 간의 구분이 표시되지 않습니다...
미해결
코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
보일러플레이트 코드 수업 자료 관련해서 다운받았는데 빈폴더라고 저번 질문에 문의드렸는데 사용중인 os만 물어보시고 답변이 없으셔서 다시 질문드려요 사용중인 os는 윈도우입니다.
미해결
코로나맵 개발자와 함께하는 지도서비스 만들기 2
#!/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 version 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: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... 이러한 오류가 터미널에 뜨는데 왜 그런걸까요?
미해결
코로나맵 개발자와 함께하는 지도서비스 만들기 1
강의를 통해 만든 웹사이트를 다른 사람들도 이용할 수 있도록 호스팅하는 방법과 도메인을 연결하는 방법은 어떻게 되나요??
미해결
코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
보일러플레이트 코드 소개에 있는 수업자료를 다운받았는데 압축해제하려고 보니까 해제도 안되고 압축폴더에는 파일이 아무것도 없네요
미해결
코로나맵 개발자와 함께하는 지도서비스 만들기 1
content: '<img class="pulse" draggable="false" unselectable="on" src=" https://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png ">' , 아무리 봐도 주소가 잘 입력된 것 같은데 마커가 깨져서 보입니다 ㅠㅠ 대체이미지 링크 넣었을 때는 잘 되는 걸로 보아 문제는 없어 보이는데 주소 문제인 것 같습니다...
미해결
Express 튜토리얼 : 웹 서비스를 위한 핵심 API
몽고디비에 회원가입하고, 이제 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( )에서의 내용 때문에 웹사이트는 작동되지 않는게 맞지 않나요...?
해결됨
Slack 클론 코딩[백엔드 with NestJS + TypeORM]
이렇게 성공 메세지는 뜨는데 테이블 조회를 해보면 데이터 삽입이 안되어 있습니다. 어떤부분에서 오류를 해결해야 할까요?....
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요! 강의 잘 듣고 있는 수강생 입니다! 제로초님 강의를 보면 다음과 같은 코드가 있을 때 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를 사용해서 그런지 자동완성이 되지 않는 부분이 매우 불편한데 혹시 강사님 개발 환경 공유 가능할까요? 강의와는 상관이 없는 질문인 점 죄송합니다
해결됨
Slack 클론 코딩[백엔드 with NestJS + TypeORM]
제목처럼 명령어 실행시 아래와 같은 오류가 발생했습니다. Decorating class property failed. Please ensure that transform-class-properties is enabled and r uns after the decorators transform. 이 오류는 타입스크립트 데코레이터와 클래스 필드초기화 문제로 보입니다. 엔티티를 처리하는 과정에서 데코레이터가 클래스 필드와 충돌을 일으키는 것으로 보입니다. 갑자기 생긴 오류에 tsconfig.ts 파일도 수정해보고 엔티티를 다시 점검해봐도 오류가 해결이 안되서 질문드립니다. 오류가 발생하는 부분입니다. at _initializerWarningHelper (src/entities/DMs.ts:12:964) at DMs.<instance_members_initializer> (src/entities/DMs.ts:58:286) at new DMs (src/entities/DMs.ts:58:270) at EntityMetadata.create (node_modules/src/metadata/EntityMetadata.ts:568:23) at EntityMetadataValidator.validate (node_modules/src/metadata-builder/EntityMetadataValidator.ts:211:47) at node_modules/src/metadata-builder/EntityMetadataValidator.ts:43:18 at Array.forEach (<anonymous>) at EntityMetadataValidator.validateMany (node_modules/src/metadata-builder/EntityMetadataValidator.ts:42:25) at DataSource.buildMetadatas (node_modules/src/data-source/DataSource.ts:730:33) at processTicksAndRejections (node:internal/process/task_queues:95:5) error Command failed with exit code 1. DMs 엔티티의 문제인가 싶어서 제로초님의 코드를 다시 작성해보고 살펴보아도 문제가 해결되지 않습니다. 추가로 yarn seed명령어도 안됩니다,,,
미해결
코로나맵 개발자와 함께하는 지도서비스 만들기 1
이러한 오류가 뜨는데 어떻게 해결할 수 있을까요? 개발환경은 windows입니다.
미해결
Slack 클론 코딩[백엔드 with NestJS + TypeORM]
cli 통해서 db생성을 하면 migration 테이블이 생기지 않아서 오류를 들여다 봤더니 아래와 같은 오류가 생겼습니다. ERROR Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform. 데코레이터를 적용하는 과정에서의 이슈로 보이는데 수업 과정을 이수하는 시점까지 별다른 문제나 별개의 코드를 작성하지 않았기에 의문점이 있는 상태입니다. 오류가 발생하는 구간은 아래 코드와 같습니다. at _initializerWarningHelper (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:12:1005) at Mentions.<instance_members_initializer> (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:61:291) at new Mentions (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:61:270) at EntityMetadata.create (node_modules\src\metadata\EntityMetadata.ts:568:23) at EntityMetadataValidator.validate (node_modules\src\metadata-builder\EntityMetadataValidator.ts:211:47) at node_modules\src\metadata-builder\EntityMetadataValidator.ts:43:18 at Array.forEach (<anonymous>) at EntityMetadataValidator.validateMany (node_modules\src\metadata-builder\EntityMetadataValidator.ts:42:25) at DataSource.buildMetadatas (node_modules\src\data-source\DataSource.ts:730:33) at processTicksAndRejections (node:internal/process/task_queues:95:5) Mentions만에 문제인가 싶어서 Entities를 제거하고 다른 특정 하나(Users)의 Entity만 포함시켜서 실행했을 때도 동일한 오류를 뱉고 있어요. tsconfig가 컴파일될 때, 제 때 동작이 안되는가 싶어 바벨을 설치해서 플러그인을 주입해도 동일한 현상이 발생되네요 ㅠㅠ 물론 tsconfig에 데코레이터 관련 옵션이 true이긴 합니다. emitDecoratorMetadata: true experimentalDecorators : true script "db:create": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs db:create -d ./dataSource.ts", "db:drop": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs db:drop -d ./dataSource.ts", 참고로 db:drop시에는 오류가 없이 잘 동작합니다.
미해결
이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
안녕하세요 강사님, proxy 설정을 하면 이렇게 오류가 뜨면서 서버 시작이 안돼요. 프록시 부분을 지우면 잘 작동하는데 어디가 잘못된걸까요?
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
// socket.js socket.on('disconnect', async () => { console.log('chat 네임스페이스 접속 해제'); // /room/방아이디 => URL에서 가져오기. const { referer } = socket.request.headers; const roomId = new URL(referer).pathname.split('/').at('-1'); const currentRoom = chat.adapter.rooms.get(roomId); // 현재 방의 인원이 0이면(방장도 나감) 자동삭제. const userCount = currentRoom?.size || 0; if (userCount === 0) { await removeRoom(roomId); room.emit('removeRoom', roomId); // room 네임스페이스에 이 방이 제거됬다고 알려서 실시간으로 제거할 것임. console.log('방 제거 요청 성공'); } else { // 시스템 메시지 DB 저장 const systemChat = `${socket.request.session.color}님이 퇴장하셨습니다.`; await createChat(roomId, 'system', systemChat); const memberList = [...currentRoom].map((socketId) => { return { color: chat.sockets.get(socketId).request.session.color, socketId, }; }); // 누군가 나가면 그 방의 모든 사람에게 시스템 메시지 및 정보 전달. socket.to(roomId).emit('exit', { user: 'system', chat: systemChat, memberList, }); } }); }); }; 여기서 chat.adapter.rooms.get(roomId) = currentRoom이 Set객체인데 여기 쌓이는 socketId들은 접속한 순서대로 쌓이나요? 그러니까, 시간순 정렬이 되어있는 건가요? 방장 위임하는 기능 구현 중인데 '방에 방장 정보를 저장한다' 이걸 어떻게 해야할 지 모르겠습니다 🤔
미해결
Slack 클론 코딩[백엔드 with NestJS + TypeORM]
안녕하세요. 제로초님 제가 좀 질문이 많은 것 같은데, 항상 친절하게 답변해주셔서 감사합니다. 다름이 아니라, 개발하면서 IDE의 디버깅 모드를 이용해본적이 거의 없고, 항상 값의 흐름과 변화를 콘솔로 찍어서 디버깅을 하곤 했는데, 디버깅 모드를 사용하면 좀 더 편하게 확인이 가능 한 것 같더라구요. 그래서 한번 사용해보려고 했는데, 그냥 일반적인 crud api를 만들어서 중단점 찍고 디버깅을 돌려봤을때는 요청이 가다가 멈추고 값이 잘 나타나는걸 확인 할 수 있었습니다. 하지만, MSA로 구성되어있는 프로젝트에서 디버깅을 실행해보니까 중단점을 설정해놔도 걸리지가 않더라구요. 요청과 응답은 다르지 않을텐데 MSA라서 안되는건가 싶기도 해서 좀 찾아보니까 RxJS에서 디버깅 중단점이 잘 안된다는 글을 발견했습니다. 혹시 제로초님께서도 Observable같은 RxJS를 사용하시면서 디버깅에 어려움을 겪으셨던 경험이 있으신가요? 웹스톰 사용하시는걸로 알고있는데, 디버깅 어떻게 진행하시는지 공유해주시면 정말 도움이 많이 될 것 같습니다! 매번 콘솔로 확인하려니까 생산성이 너무 떨어지네요 ㅠ
미해결
Slack 클론 코딩[백엔드 with NestJS + TypeORM]
안녕하세요. 최근에 게시물 조회수 카운팅 작업을 하고 있습니다. 어떻게 구성을 할 지 생각을 좀 해보다가, `CacheManger ( https://docs.nestjs.com/techniques/caching ) 를 사용해서 (entity-id-ip):(timestamp) 이렇게 key-value 형태로 담아서 메모리에 저장하고, ttl을 1시간으로 설정해서 만약에 키가 존재하면 조회수가 오르지 않고, 값을 현재 시간으로 업데이트 해주고, 키가 없으면 값을 넣어주고 조회수 +1을 해주게 로직을 설정했습니다. 그런데 이게 로컬환경에서는 잘 되는데, 이상하게 배포환경에서는 정상적으로 작동하지 않습니다. 그래서 Redis를 설치해서 해보자니 제가 NestJS 10버전을 사용하고 있는데 쉽게 도와주는 라이브러리가 9버전까지만 지원해서 버전을 낮추기도 좀 그렇고, 얘도 어쨌든 메모리를 사용하는 거라 똑같을 것 같아서 우선 보류해뒀습니다. 마지막으로 쿠키를 사용해서, entity키에 값으로 게시물의 id를 담아 해당 게시물이 값에 존재하면 조회수가 올라가지 않도록 해봤는데, 이건 로컬 환경에서도 잘 안먹히고있어서 도통 어떻게 해야할지 감이 안와 막혀있습니다 ㅜㅜ CacheManger를 사용해서 해결하면 좋을 것 같은데, 배포 환경에서는 왜 작동이 안되는지 혹시 원인을 아시나요? 그리고 제로초님께서 추천해주시는 방법도 궁금합니다 ㅠ 달성하고자 하는 목적은 일정 기간동안 같은 방문자의 게시글 조회수 카운팅을 +1 만 하는 것입니다!
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Error: Route.post() requires a callback function but got a [object Undefined] at Route.<computed> [as post] (C:\nodeSns\sns\node_modules\express\lib\router\route.js:216:15) at proto.<computed> [as post] (C:\nodeSns\sns\node_modules\express\lib\router\index.js:521:19) at Object.<anonymous> (C:\nodeSns\sns\routes\auth.js:13:8) at Module._compile (node:internal/modules/cjs/loader:1358:14) at Module._extensions..js (node:internal/modules/cjs/loader:1416:10) at Module.load (node:internal/modules/cjs/loader:1208:32) at Module._load (node:internal/modules/cjs/loader:1024:12) at Module.require (node:internal/modules/cjs/loader:1233:19) at require (node:internal/modules/helpers:179:18) at Object.<anonymous> (C:\nodeSns\sns\app.js:12:20) npm start 하면 자꾸 이 오류가 뜨는데 원인을 못 찾겠습니다.
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
내 게시물 모두 불러오기나 해시태그로 검색하기 등 api 서버에 요청 보낼 때 authorization 헤더에 jwt를 넣어서 보내도록 코딩 했는데 이를 확인할 수 있는 방법이 궁금합니다. 그리고 아래 화면에서 connect.sid로 전달된 세션 키와 연결된 세션에 해당 사용자의 jwt 값이 req.session.jwt 로 들어있는 건가요?
