묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
52분 47초 문제점 2가지 설명 중 2번째 문제점 관련 질문
안녕하세요 차근차근 강의 들으며 공부하고 있는 수강생입니다 현재 강의에서 알려주신 방법에 따라 페이지를 구현할 경우 2가지 문제점에 대해 말씀해 주셨는데요2번째 문제점은 내가 수정하고 싶은 요소만 수정했을 때, 기존에 입력했던 다른 요소가 삭제된다는 것이었습니다 그런데 container 파일 작성 요소 중 const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState();useState() 소괄호가 비어 있을 땐 기존에 입력했던 다른 요소가 삭제되지 않은 채 수정한 요소가 반영되었습니다 여기서 궁금한 점은useState() 소괄호가 비어 있을 때와 소괄호 안에 빈 문자열("")을 넣어주었을 때 결과가 달라지는 이유useState() 소괄호가 비어 있는 상태로 코드 작성을 끝내지 않는 이유입니다 감사합니다
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
개발환경과 배포환경시 다른 의존성을 주입하는 예제
질문보다는 코드 리뷰에 가까운데 강의 내용중에 나온 테스트 코드와 실제 배포시 다르게 적용할 경우 예제를 작성해 보았습니다.이해한 내용이 맞는지 또는 보안이나 수정할 만한 내용이 있는지 알려주시면 감사합니다.//app.service.ts import { Injectable } from '@nestjs/common'; export interface IAppService { getSecret(): string; } @Injectable() export class AppService implements IAppService { getSecret(): string { return '실제 배포 환경'; } } @Injectable() export class Test_AppService implements IAppService { getSecret(): string { return '개발 테스트 환경'; } } //app.module.ts import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService, Test_AppService } from './app.service'; import { ConfigModule } from '@nestjs/config'; @Module({ imports: [ConfigModule.forRoot({ isGlobal: true })], controllers: [AppController], providers: [ { provide: 'AppService', useClass: process.env.NODE_ENV === 'production' ? AppService : Test_AppService, }, ], }) export class AppModule {} //app.controller.ts import { Controller, Get, Inject } from '@nestjs/common'; import { IAppService } from './app.service'; @Controller() export class AppController { constructor(@Inject('AppService') private readonly appService: IAppService) {} @Get() getHello(): string { return this.appService.getSecret(); } }
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
의존성 주입시 객체가 반복적으로 생성될 수 있다고 했는데 해결방법이 어떻게 되는건가요?
강의 내용중 어떤것들은 DI 때마다 객체가 생성될수가 있고그럴 경우 웹소캣 객체같은 경우 문제가 생길수 있다고 하셧는데Nest 에서 그것을 해결하기 위해 자동으로 Module 단에서 Provider에 추가시 자동으로 객체를 하나만 만든후 재사용하여 (싱글톤과 유사하게 작동) 등을 통해 해결을 해주는것인지아니면 직접 해당 Class에서 싱글톤으로 생성을 해줘야 하는건지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
핸드폰에 전송이 안 되네요 ㅜㅜ
강의랑 똑같이 따라한 것 같은데.. postman에서는 오류가 발생하지 않고 인증완료라고 뜨긴 하는데요,vscode의 터미널을 보면 발신번호 미등록이라고 뜨고 .. 핸드폰에 전송이 안 되네요.뭐가 문제일까요? coolsms, mysms, API key랑 API secret도 cSpell 오류가 뜨길래 상위 폴더에서 .cspell.json 파일 만들어서 오류 안뜨게 했는데.. 여기서부터 문제였던 걸까요? 참고로 yarn add coolsms-node-sdk도 했고.. 분명 다 한 것 같은데ㅜ 어디서부터 잘못된건지 정말 모르겠어요..혹시 제가 코드 이상하게 작성하거나 잘못된 부분이 있나 해서.. 코드도 붙여봅니다 ㅜㅜ꼭 성공하고 싶은데 제가 아직 코린이라 ㅜㅜ 다 어렵기만 하네요 ㅜㅜ { "name": "04-01-rest-api-with-express", "version": "1.0.0", "main": "index.js", "license": "MIT", "type": "module", "scripts": { "dev": "nodemon index.js" }, "dependencies": { "coolsms-node-sdk": "^2.0.1", "cors": "^2.8.5", "express": "^4.18.2", "nodemon": "^3.0.1", "swagger-jsdoc": "^6.2.8", "swagger-ui-express": "^5.0.0" } } import coolsms from "coolsms-node-sdk"; export function checkValidationPhone(myPhone) { if (myPhone.length !== 10 && myPhone.length !== 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return false; } else { return true; } } export function getToken() { const myCount = 6; if (myCount === undefined) { console.log("에러 발생!!! 갯수를 제대로 입력해 주세요!!!"); return; } else if (myCount <= 0) { console.log("에러 발생!!! 갯수가 너무 적습니다!!!"); return; } else if (myCount > 10) { console.log("에러 발생!!! 갯수가 너무 많습니다!!!"); return; } const result = String(Math.floor(Math.random() * 10 ** myCount)).padStart( myCount, "0" ); return result; // console.log(result) } export async function sendTokenToSMS(fff, ggg) { // console.log(fff + "번호로 인증번호" + ggg + "를 전송합니다!!"); const mysms = coolsms.default; const messageService = new mysms( "NCSESSQG0X1RZAGF", "2OFMQEDM5YCL59ICURBSPJGD08R1FQOG" ); const result = await messageService.sendOne({ to: fff, from: ggg, text: `[코드캠프] 안녕하세요?! 요청하신 인증번호는 [${ggg}] 입니다.`, }); console.log(result); } import { checkValidationPhone, getToken, sendTokenToSMS } from "./phone.js"; import express from "express"; import swaggerUi from "swagger-ui-express"; import swaggerJsdoc from "swagger-jsdoc"; import { options } from "./swagger/config.js"; import cors from "cors"; const app = express(); app.use(cors()); app.use(express.json()); app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerJsdoc(options))); app.get("/boards", (req, res) => { //1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기 const result = [ { number: 1, writer: "철수", title: "제목1", contents: "내용1" }, { number: 2, writer: "맹구", title: "제목2", contents: "내용2" }, { number: 3, writer: "훈이", title: "제목3", contents: "내용3" }, ]; //2. 꺼내온 결과 응답 주기 res.send(result); }); app.post("/boards", (req, res) => { // 1. 데이터를 등록하는 로직 => DB에 접속해서 데이터 저장하기 // 프론트엔드로부터 데이터 받아오기 // 콘솔로 찍어서 확인 해보기 console.log(req.body); // 2. 저장 결과 알려주기 res.send("게시물 등록에 성공하였습니다."); }); app.post("/tokens/phone", (req, res) => { const myPhone = req.body.aaa; // 1. 휴대폰번호 자릿수 맞는지 확인하기 const isValid = checkValidationPhone(myPhone); if (isValid) { // 2. 핸드폰 토큰 6자리 만들기 const myToken = getToken(); // 3. 핸드폰번호에 토큰 전송하기 sendTokenToSMS(myPhone, myToken); res.send("인증완료"); } }); app.listen(3000, () => { console.log(`Example app listening on port ${3000}`); });
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
비디오 업로드, 로그인, 회원가입 504 error
안녕하세요 http://localhost:3000/video/upload 실행해 비디오를 선택하면 POST http://localhost:3000/api/video/uploadfiles 504 (Gateway Timeout),http://localhost:3000/register실행해 가입을 하려하면POST http://localhost:3000/api/users/register 504 (Gateway Timeout)Uncaught (in promise) Error: Request failed with status code 504이런 에러가 나옵니다 vscode 에서는 Server Listening on 5000[0] MongoError: bad auth : authentication failed[0] at MessageStream.messageHandler (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\node_modules\mongodb\lib\cmap\connection.js:299:20) [0] at MessageStream.emit (node:events:520:28)[0] at processIncomingData (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\node_modules\mongodb\lib\cmap\message_stream.js:144:12) [0] at MessageStream._write (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\node_modules\mongodb\lib\cmap\message_stream.js:42:5) [0] at writeOrBuffer (node:internal/streams/writable:389:12)[0] at _write (node:internal/streams/writable:330:10)[0] at MessageStream.Writable.write (node:internal/streams/writable:334:10)[0] at TLSSocket.ondata (node:internal/streams/readable:754:22)[0] at TLSSocket.emit (node:events:520:28)[0] at addChunk (node:internal/streams/readable:315:12)[0] at readableAddChunk (node:internal/streams/readable:289:9)[0] at TLSSocket.Readable.push (node:internal/streams/readable:228:10)[0] at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23) {[0] ok: 0,[0] code: 8000,[0] codeName: 'AtlasError'[0] } ,Error: ffmpeg exited with code 4294967291: frame= 1 fps=0.0 q=-0.0 Lq=-0.0 q=-0.0 size=N/A time=00:00:00.00 bitrate=N/A dup=2 drop=0 speed= 0x [0] video:199kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown[0] Conversion failed![0][0] at ChildProcess.<anonymous> (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\processor.js:182:22)[0] at ChildProcess.emit (node:events:520:28)[0] at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)[0] Waiting for the debugger to disconnect...[0] node:events:498[0] throw er; // Unhandled 'error' event[0] ^[0][0] MongooseError: Operation `users.findOne()` buffering timed out after 10000ms[0] at Timeout.<anonymous> (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\drivers\node-mongodb-native\collection.js:198:23)[0] at listOnTimeout (node:internal/timers:559:17)[0] at processTimers (node:internal/timers:502:7)[0] Emitted 'error' event on Function instance at:[0] at C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\model.js:5084:15[0] at processTicksAndRejections (node:internal/process/task_queues:78:11)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)[0] [nodemon] app crashed - waiting for file changes before starting...[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/video/getVideos from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/video/uploadfiles from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 이렇게 나옵니다어떻게 해결해야 할까요 깃허브 https://github.com/Hanboreum/boilerplate-mern-stack-master
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import 경로 오류질문입니다
BoardWriter 컴포넌트를 자동완성으로 쓸 경우 import 경로 자동완성이 @으로 시작되면 경로 오류가 뜨고 위처럼 ../ 로 바꿀경우 오류가 안뜨는데 자동완성으로 하면 안되나요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nestjs와 프론트 연동 질문드립니다.
nestjs랑 nextjs를 사용하여 로그인 기능을 만들고 있습니다.nestjs의 validation을 사용해서 @IsEmail이 아닌 경우 예외처리를 하게 만들어주었습니다. postman에서는 message가 잘 뜨는데 프론트엔드에서 console.log(error)로 찍어보면 postman에서 response으로 받은 값이 없습니다. 프론트에서도 postman처럼 response값을 받으려면 어떻게 해야하나요? <프론트> <서버> <dto> <postman> <브라우저>
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그래프큐엘 질문입니다
여기서 만들때 writer 이랑 password에 string 느낌표 안붙여있는건 오류인가요? 원래는 느낌표가 있어서 필수 입력인거죠?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
시작부터 오류생기시는 분들 해결법입니다.
boiler plate폴더의 루트 디렉토리의 package.json 에서 bcrypt 를 없애고 npm install 을 해줍니다.이후 npm install bcryptjs --save 를 루트 디렉토리에 설치해줍니다.sever > models > User.js 에서 상단의 const bcrypt = require('bcryptjs') 로 변경해줍니다.sever > models > User.js 파일의 85번째 줄의 "_id" : decoded 부분을 decode 로 변경해줍니다.client폴더로 넘어가서 package.json 은 건들지 않고 npm install 을 해줍니다.위치를 boiler plate 폴더의 루트 디렉토리로 넘어가서 npm run dev 를 실행시켜줍니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section 26 포트폴리오 리뷰 강의
그래프큐엘로 작성자 비밀번호 제목 내용 이렇게 넘기고 조회해보려는데 패스워드는 안되더라고요 패스워드 넘긴거는 그냥 넘긴건가요 아님 따로 조회할수있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
css질문
display:flex가 없어도 위치가 똑같은부분에 왜display:flex;flex-direction:column; or flex-direction:row를 왜 쓰는지모르겠어요 안써도 위치가같아보이는데필요성도 안느껴지고 언제언제쓰는지도 잘 모르겠습니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
front 서버에서 npm run build error.
프로트 서버에서 config.js안에 있는 주소 바꿔주고 npm run build 했는데 계속 빌드가 안됩니다.용량이 너무 커서 서버가 멈춘것일까요? 다른 분 질문 한것을 보니까 이럴경우 로컬에서 빌드를 하고 git push 할때 .next 파일도 같이 보내주는 경우를 봤는데, 이렇게 해도 상관 없나요?아니면 다른 부분에서 이슈가 있어서 빌드가 안되는 것일까요?음...터미널을 닫고 ec2서버 다시 연결하려는데, 연결이 안되고 계속 저기 상태에서 연결이 안되네요...서버에 이상이 생긴걸까요?감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
pm2 status 에러
s3 설정을 하고 나서, 서버 도메인을 새로고침하고, pm2 리스트를 봤는데, status에 errored라고 뜹니다.pm2를 kill하고 다시 시작했는데, 처음에는 아무 이상없고, 도메인에 접속하고 list를 찍어보면 Status 가 Errored 라고 바뀌어 있네요ㅜㅜ어디쪽에서 errored가 발생한것일까요? 감사합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
오류 해결 공유
서버에서 npm install 오류 bcrypt 버전을 최신으로 올려주세요.저는 5.1.1 버전입니다.npm run dev 오류시 [오류내용]client -> package.json -> react-scripts 버전을 수정하세요. *package.json을 수정하면 npm install을 다시 진행해서 node_modules을 다시 설치해야 됩니다.npm run dev 실행 후 오류해당 파일을 찾아이 부분을 수정해주면 됩니다. setupMiddlewares: (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined') } if(fs.existsSync(paths.proxySetup)) { require(paths.proxySetup)(devServer.app) } middlewares.push( evalSourceMapMiddleware(devServer), redirectServedPath(paths.publicUrlOrPath), noopServiceWorkerMiddleware(paths.publicUrlOrPath) ) return middlewares; },
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
피그마 code가 강의내용과 다릅니다.
저는 피그마 코드가 강의랑 다릅니다.강의랑 똑같이는 안되나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
DROP DATABASE 후에 테이블 다시 생성하는 과정에 대한 질문.
안녕하세요! DROP DATABASE 후에 테이블을 다시 생성하는 과정을 반복했는데, use my-memories-back(제 데이터베이스 이름.)을 입력하니까 ERROR 1049 (42000): Unknown database 'my-memories-back'가 뜹니다.한가지 걸리는 것은 DROP DATABASE할때, root 권한으로 mysql 접속해서 했는데, 이것이 문제가 있을까요?음.. 그리고 이건 Back end server pm2 list 인데,Access denied for user 'root'@'localhost'라는 에러가 뜨는데, 이것이 테이블을 다시생성 하는것에 문제가 될 수 있을것이라고 생각이 드는데, 어떤가요? 항상 감사합니다 :)
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
서비스 배포 관련 궁금한 부분이 있어 질문드립니다.
서비스 배포 관련 궁금한 부분이 있어 질문드립니다. 1. 현재 ubuntu 에 nginx 와 pm2 설치 해서 nestjs를 테스트 진행하고 있는데 특별한 이상은 없어 보이는데실제 서비스에도 pm2를 사용하게 안전성에 문제가 없는지 궁금 합니다. 2. 검색을 하다보니 Bun 1.0 이 있던데 이거 실제 서비스에 사용할수 있는지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
5:54 분에 에러 고치라는 숙제에 대해서
DeepPartial 이란 타입이 있던데 그걸 사용하는건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
verticalAlign이 제대로 안먹어서 "N개의 사진 더보기" 의 위치가 이상하게 나올경우.
<> <div> // img 태그의 스타일에도 버티컬얼라인 미들 추가해주면 정상적으로 나옵니다. <img role="presentation" style={{ verticalAlign: 'middle' }} width="50%" src = {images[0].src} alt={images[0].src} onClick={onZoom} /> <div role="presentation" style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }} onClick={onZoom} > <PlusOutlined /> <br /> {images.length - 1 }개의 사진 더보기 </div> </div> </>사용 환경 Antd 5
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Please use the 'setupMiddlewares' option. 경고
Concurrently 적용 후 npm run dev를 실행하면[1] (node:6792) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.[1] (Use node --trace-deprecation ... to show where the warning was created)[1] (node:6792) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.경고가 발생했습니다.서버는 작동되지만 경고가 거슬려서 찾아보고 방법 공유드립니다.클라이언트 node_modules/react-scripts/webpackDevServer.config.js 에서 수정해주시면 됩니다. 수정 전 onBeforeSetupMiddleware(devServer) { // Keep evalSourceMapMiddleware // middlewares before redirectServedPath otherwise will not have any effect // This lets us fetch source contents from webpack for the error overlay devServer.app.use(evalSourceMapMiddleware(devServer)); if (fs.existsSync(paths.proxySetup)) { // This registers user provided middleware for proxy reasons require(paths.proxySetup)(devServer.app); } }, onAfterSetupMiddleware(devServer) { // Redirect to PUBLIC_URL or homepage from package.json if url not match devServer.app.use(redirectServedPath(paths.publicUrlOrPath)); // This service worker file is effectively a 'no-op' that will reset any // previous service worker registered for the same host:port combination. // We do this in development to avoid hitting the production cache if // it used the same host and port. // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432 devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath)); },수정 후 setupMiddlewares: (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined') } if(fs.existsSync(paths.proxySetup)) { require(paths.proxySetup)(devServer.app) } middlewares.push( evalSourceMapMiddleware(devServer), redirectServedPath(paths.publicUrlOrPath), noopServiceWorkerMiddleware(paths.publicUrlOrPath) ) return middlewares; },