npm start를 하면 여기서 멈추고 원하는 화면이 안나오는데 어떻게 해야하나요?

강의 하나 들을 때마다 에러가 너무 많이 떠서 진도가 안나가서 미칠 지경이네요 ㅠㅠdocker-compose.yaml 파일을 아래와 같이 설정하고 docker-compose build를 하니 services.mydb.environment.0 must be a string 라는 에러가 떠서 구글링을 하니 environment: - MYSQL_DATABASE: 'dockerProject' - MYSQL_ROOT_PASSWORD: 'root'여기서 띄어쓰기를 없애보라고 하길래 아래와 같이 띄어쓰기를 없앤채로 .yaml파일을 변경하였습니다. version: '3.7' services: mybackend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 3000:3000 env_file: - ./.env.docker mydb: # platform: linux/86_64 image: mysql:8.0.34 environment: - MYSQL_DATABASE:'dockerProject' - MYSQL_ROOT_PASSWORD:'root' ports: - 3306:3306그리고는 docker-compose build 이후 up을 실행했으나 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...에러가 계속 발생합니다.(docker 말고 내 로컬컴퓨터에서는 mysql 연결 잘 되었음) 다른 질문자 분들 내용을 참조하여 package.json 파일의 mysql2와 typeorm의 버전을 아래와 같이 바꾸었고, .yaml 파일에서도 mysql 버전을 latest에서 8.0.34로 지정해주었습니다.  { "name": "graghql", "version": "0.0.1", "description": "", "author": "", "private": true, "license": "UNLICENSED", "scripts": { "build": "nest build", "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "start": "nest start", "start:dev": "nest start --watch", "start:debug": "nest start --debug --watch", "start:prod": "node dist/main", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json" }, "dependencies": { "@apollo/server": "^4.9.0", "@nestjs/apollo": "^12.0.7", "@nestjs/common": "^10.0.0", "@nestjs/config": "^3.0.0", "@nestjs/core": "^10.0.0", "@nestjs/graphql": "^12.0.8", "@nestjs/platform-express": "^10.0.0", "@nestjs/typeorm": "^10.0.0", "graphql": "^16.7.1", "mysql2": "3.2.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.1", "typeorm": "^0.3.12" }, "devDependencies": { "@nestjs/cli": "^10.0.0", "@nestjs/schematics": "^10.0.0", "@nestjs/testing": "^10.0.0", "@types/express": "^4.17.17", "@types/jest": "^29.5.2", "@types/node": "^20.3.1", "@types/supertest": "^2.0.12", "@typescript-eslint/eslint-plugin": "^5.59.11", "@typescript-eslint/parser": "^5.59.11", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "jest": "^29.5.0", "prettier": "^2.8.8", "source-map-support": "^0.5.21", "supertest": "^6.3.3", "ts-jest": "^29.1.0", "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "^5.1.3" }, "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "testRegex": ".*\\.spec\\.ts$", "transform": { "^.+\\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" } }그런데도 똑같이 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...에러가 발생하여 node_modules 파일 및 dist 파일을 삭제 후 다시 yarn install을 했는데,이제는 import도 되지 않습니다....에러 때문에 진도가 나가질 않아, 중간중간에 강의를 멈춰가며 강의와 똑같이 따라가고 있는데 왜 이런 에러가 계속 발생할까요 ㅠㅠ

 객체로 나타낼 떄 따옴표 쓰는 거 하고 쌍따옴표 쓰는 거 하고 뭔 차이인가요? 그리고 따옴표 쓰면 계속 따옴표 쓰고, 쌍따옴표 쓰면 계속 쌍따옴표로 써야하나요?

 선생님께서는type Mutation { createBoard(createBoardInput: CreateBoardInput!):String }밸류 CretaBoardInput !을 그룹으로 묶어서input CreateBoardInput{ writer:String title:String contents: String }이렇게 나타내셨는데 ,그런데 키 createBoardInput은 뭘 나타내는 건가요?혹시, 객체를 그룹으로 묶으면 키,밸류를 똑같은 이름으로 지어야 하나요>?

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); },1000);

인프런 아이디 : @rnrn48159인프런 이메일 : rnrn48159@gmail.com깃헙 아이디 : rnrn48159@gmail.com깃헙 Username : thomasisong

nestjs + mongoose 조합이지만, https://velog.io/@modolee/mongodb-document-to-javascript-object와 같이 find()가 리턴하는 인스턴스 내부가 `_doc` 처럼 되어 있었습니다.저는 user.age 이렇게 사용하고 싶은데, user 밑에 age 라는 변수도 없고, 꼭 .toObject()를 해야 하나요?아직 이 부분에 수수께끼가 풀리지 않았습니다.설명해 주실 수 있나요?

 안녕하세요.섹션 27의 8-5 CURD API 강의를 듣다가 문득 궁금한 점이 생겨 질문드립니다.해당 강의에서는 boards.resolver.ts 파일에 fetchBoards함수와 createBoards 함수를 정의하기 위해board.entity.ts 파일, create-board.input.ts 파일, boards-service.interface.ts 파일을 아래와 같이 만드셨습니다. 아래 세 파일은 구조가 거의 동일한데, 왜 이렇게 같은 구조의 파일을 세개나 만들어서 타입스크립트 타입 정의에 사용하는 것인지 이해가 가질 않습니다.그리고 어떤 것은 class로 정의하여 타입스크릡트에 사용하고, 어떤 것은 interface로 정의하여 타입스크립트로 사용하는데 어떤 차이인지 질문 드립니다.// board.entity.ts 파일 import { Field, Int, ObjectType } from '@nestjs/graphql'; import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm'; @Entity() @ObjectType() export class Board { @PrimaryGeneratedColumn('increment') @Field(() => Int) num: number; @Column() @Field(() => String) title: string; @Column() @Field(() => String) contents: string; @Column() @Field(() => String) writer: string; }// create-board.input.ts 파일 import { Field, InputType } from '@nestjs/graphql'; @InputType() export class CreateBoardInput { @Field(() => String) writer: string; @Field(() => String) title: string; @Field(() => String) contents: string; } // boards-service.interface.ts 파일 import { CreateBoardInput } from '../dto/create-board.input'; export interface IBoardsServiceCreate { createBoardInput: CreateBoardInput; } 

async로 선언된 함수의 반환형은 promise아닌가요? console.log(res)가 문자열 hello async를 출력하는 이유를 모르겠습니다.

안녕하세요. 우선 강의 자체에 대한 질문은 아닌데요.강의 중간에 VS Code에서 "로 감싸진 문자열을 `로 치환하는 장면이 종종 나오던데, 어떤 방법인지 궁금합니다.왼쪽 하단에 보여지는 키보드 표시로는 cmd + `를 입력하면 작동하는거 같은데, VS Code의 확장 프로그램일까요?그리고 하나 제보하자면, 정적 블로그 만들기 강의에서 6번에 7번 내용이 포함되어, 7번 Adding style 강의가 중복으로 재생됩니다.

상품 업로드에 관한 이슈과정을 다 마치고, fly.io와 vercel.com을 통하여 배포한 페이지 중에서 상품 업로드가 제대로 이뤄지지 않습니다.github 주소 : https://github.com/arominddo/Inflearn_full_stack_boot_campvercel을 통해 배포된 web 어플리케이션 url :https://grab-market-client-ashen.vercel.app/ grab_market_web > src > upload > index.js에 코드 내용이 작성되어 있습니다.  배포된 페이지의 DB 초기화 문제프로젝트를 전부 마치면서, 다시 한번 fly.io에 최신 코드로 재배포를 해보고 실험을 해보았는데도, web에서 특정 상품을 업로드하거나(오류가 나지 않았을 당시), 상품 구매하기 기능을 통하여 soldout 값을 1로 바꿔줬음에도,약 5분이 지나면 DB가 배포 됐을 당시의 내용으로 계속 초기화가 됩니다.해결 방안이 궁금합니다.ex) A라는 물건 업로드 -> 5분 지남 -> 새로고침 해보면 A라는 물건이 리스트에서 삭제ex) B라는 물건 구매 하기 버튼 클릭 -> soldout 값 1로 변경 -> 약 5분 지남 -> 다시 soldout 값 0으로 복귀

Button(props) 에서 props로 받은 title이 버튼 목록에 표시하고props로 받은 onClick은 <StyleButton>에 onClick에 넣어 주므로써 <질문> onClick이벤트를 상위 컴포넌트에서 받을수 있도록 해 주었다고 설명하셨는데~질문입니다? onClick={onClick} 이벤트를 상위 컴포넌트에서 받을수 있도록 해 주었다라고위에서 설명 하셨는데, 이해가 잘 안되어서 질문합니다onClickItem(post)도 같은 맥락인것 같은데 이해가 안됩니다

<html> <head> <meta charset="utf-8"> <title>인스타그램</title> <link rel = "stylesheet" href = "styles/card.css"> </head> <body> <section class = "container"> <article class = "card"> <header> <div class = "circle-image"> <img src = "images/profile.png"/> </div> <div class = "card-username"> <span>taeyun_kwon1118</span> </div> <div class = "option-more"> <button class = "transparent-button"><img src = "images/icons/mark.png"/></button> </div> </header> <main> <div class = "carousel" data = "0"> <div> <ul> <li><img src = "images/mountain1.jpg"/> </li><li><img src = "images/mountain2.jpg"/> </li><li><img src = "images/mountain3.jpg"/> </li><li><img src = "images/mountain4.jpg"/></li> </ul> <div class = "slide slide-left"> <button class = "transparent-button"><img src = "images/icons/arrow-left.png"/></button> </div> <div class = "slide slide-right"> <button class = "transparent-button"><img src = "images/icons/arrow-right.png"/></button> </div> </div> <footer> <div class = "active"></div> <div></div> <div></div> <div></div> </footer> </div> <div class = "card-container"> <div class = "card-buttons"> <div> <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> <div> <button class = "transparent-button"> <img src = "images/icons/chat.png"/> </button> </div> <div> <button class = "transparent-button"> <img src = "images/icons/paper-plane.png"/> </button> </div> <div class = "last-card-button"> <button class = "transparent-button"> <img src = "images/icons/bookmark.png"/> </button> </div> </div> <div class = "card-likes"> taeyun_kwon1118님 외 여러 명이 좋아합니다 </div> <div class = "card-contents"> <ul> <li> <div> <span>taeyun_kwon1118</span> 여행 사진 올립니다. 좋아요 부탁 드려요 !!! </div> </li> <li class = "comment"> <div> <span>taeyun_kwon1118</span> 댓글 1 <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> </li> <li class = "comment"> <div> <span>taeyun_kwon1118</span> 댓글 2 <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> </li> </ul> </div> <div class = "card-time"> 7일 전 </div> </div> </main> <footer class = "card-comment"> <input type = "text" placeholder = "댓글 달기..." name = "comment"> <div> <button class = "transparent-button"> 게시</button> </div> </footer> </article> </section> <script type = "text/javascript" src = "scripts/carousel.js"></script> <script type = "text/javascript" src = "scripts/smoothscroll.min.js"></script> </body> </html>!function(){"use strict";function o(){var o=window,t=document;if(!("scrollBehavior"in t.documentElement.style&&!0!==o.__forceSmoothScrollPolyfill__)){var l,e=o.HTMLElement||o.Element,r=468,i={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,elementScroll:e.prototype.scroll||n,scrollIntoView:e.prototype.scrollIntoView},s=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now,c=(l=o.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(l)?1:0);o.scroll=o.scrollTo=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?h.call(o,t.body,void 0!==arguments[0].left?~~arguments[0].left:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:o.scrollY||o.pageYOffset):i.scroll.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:o.scrollY||o.pageYOffset))},o.scrollBy=function(){void 0!==arguments[0]&&(f(arguments[0])?i.scrollBy.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):h.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset)))},e.prototype.scroll=e.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==f(arguments[0])){var o=arguments[0].left,t=arguments[0].top;h.call(this,this,void 0===o?this.scrollLeft:~~o,void 0===t?this.scrollTop:~~t)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},e.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},e.prototype.scrollIntoView=function(){if(!0!==f(arguments[0])){var l=function(o){for(;o!==t.body&&!1===(e=p(l=o,"Y")&&a(l,"Y"),r=p(l,"X")&&a(l,"X"),e||r);)o=o.parentNode||o.host;var l,e,r;return o}(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(h.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),"fixed"!==o.getComputedStyle(l).position&&o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}else i.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function n(o,t){this.scrollLeft=o,this.scrollTop=t}function f(o){if(null===o||"object"!=typeof o||void 0===o.behavior||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+o.behavior+" is not a valid value for enumeration ScrollBehavior.")}function p(o,t){return"Y"===t?o.clientHeight+c<o.scrollHeight:"X"===t?o.clientWidth+c<o.scrollWidth:void 0}function a(t,l){var e=o.getComputedStyle(t,null)["overflow"+l];return"auto"===e||"scroll"===e}function d(t){var l,e,i,c,n=(s()-t.startTime)/r;c=n=n>1?1:n,l=.5*(1-Math.cos(Math.PI*c)),e=t.startX+(t.x-t.startX)*l,i=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,i),e===t.x&&i===t.y||o.requestAnimationFrame(d.bind(o,t))}function h(l,e,r){var c,f,p,a,h=s();l===t.body?(c=o,f=o.scrollX||o.pageXOffset,p=o.scrollY||o.pageYOffset,a=i.scroll):(c=l,f=l.scrollLeft,p=l.scrollTop,a=n),d({scrollable:c,method:a,startTime:h,startX:f,startY:p,x:e,y:r})}}"object"==typeof exports&&"undefined"!=typeof module?module.exports={polyfill:o}:o()}();window.addEventlistener('load', function(){ var carousels = document.getElementsByClassName('carousel'); for(var i = 0; i < carousels.length; i++) { addEventToCarousel(carousels[i]); } }); function addEventToCarousel(carouselElem){ var ulElem = carouselElem.querySelector('ul'); var liElems = ulElem.querySelectorAll('li'); //너비 값 조정 var liWidth = liElems[0].clientWidth;//600px var adjustedWidth = liElems.length * liWidth; ulElem.style.width = adjustedWidth + 'px'; //슬라이드 버튼 이벤트 등록 var slideButtons = carouselElem.querySelectorAll('.slide'); for(var i = 0; i < slideButtons.length; i++) { slideButtons[i].addEventlistener('click', createListenerSlide(carouselElem)); } } function createListenerSlide(carouselElem){ return function(event){ var clickedButton = event.currentTarget; var liElems = carouselElem.querySelectorAll('li'); var liCount = liElems.length; var currentIndex = carouselElem.attributes.data.value; if(clickedButton.className.includes('right') && currentIndex < licount - 1){ currentIndex ++; scrollDiv(carouselElem, currentIndex); } else if(clickedButton.className.includes('left') && currentIndex > 0){ currentIndex --; scrollDiv(carouselElem, currentIndex); } // indicator update // slide button 보여줌 여부 update // 새롭게 보여지는 이미지 인덱스 값을 현재 data값으로 업데이트 carouselElem.attributes.data.value = currentIndex; } } function scrollDiv(carouselElem, nextIndex){ var scrollable = carouselElem.querySelector('div'); var liWidth = scrollable.clientWidth; var newLeft = liWidth * nextIndex; scrollable.scrollTo({left: newleft, behavior: 'smooth'}); }    

안녕하세요 선생님,, Nest.js 를 목표로 Js -> Ts 순서로 강의를 들을 계획인데요.현재 Js의 Prototype Chain 부분을 듣고 있습니다. 이 부분이 많이 난해하고 다른 언어의 Class 선언 방식과 너무 달라서 애를 먹고있는데요.혹시 시간을 더 투자해서 Prototype Chain 부분을 정확하게 이해하고 넘어가는게 나을까요? 아니면 지금처럼 어렴풋이 아는 상태로 넘어가도 괜찮은지 궁금합니다. 제가 Js 개발자가 되는게 목표가 아니라 Flutter 앱의 백엔드를 Nest.js 로 구성하는게 목표인데,웬지 Ts 에서는 이런 방식은 쓰이지 않을꺼 같아서요. 감사합니다.

:hover 처럼 콜론 하나를 쓰는 것도 있고 ::after 로 콜론 두개를 쓰는 것도 있던데 어떤 차이가 있는건가요 ?? 의미가 있는지 궁금합니다.

수업자료 링크가 상단 디렉토리로 되있는데,강의에 해당하는 페이지로 연결 되게,해주시면 감사하겠습니다.

안녕하세요. certbot 실행 이후 git clone이 되지 않아 질문을 남겼었던 질문자입니다!당시 얼추 인도해주신 솔루션이 인스턴스 설정 초기화 후 새로 설치 였던터라 시간이 걸릴것으로 예상이 되어서 우선순위를 좀 뒤로 미루고, 다른 일들을 하다가 오느라 이제야 다시 질문의 일로 돌아왔습니다.그런데 이제와 생각해보니 certbot 과 git의 충돌이 유력한 원인이라면... certbot을 재설치? 재실행? 하면 되지 않을까 싶어서 인터넷에 검색을 해봤는데 자동갱신에 관한 글뿐이 없더군요.. 해서 혹시 certbot을 날렸다가 다시 설치하거나 certbot의 설정파일들이 임시로 작동하지 않도록 하는 방법이 있을까요?만약 임시 비활성화가 가능하다면 그 사이에 git clone을 진행하고, 다시 활성화 하면 될것 같아서.. 혹시 아시는 방법이 있으실지 여쭤봅니다

vue-til-server 때문에 node 버전 10 버전대로 하면 vue cli 가 설치가안됩니다. 그래서 노드 버전을 올려서 vue cli 설치하고 나면 맨위 서버가 스타트가 안됩니다. 이 문제를 도대체 어떻게 해야하나요. 진도를 못나가서 답답하네요.

const runCode = new Promise((resolve, reject) => { setTimeout(() => { let num = 1; if (num > 9) { resolve(num); } else { reject("error"); } }, 1000); }); runCode .then( (item) => { console.log("success", item); }, (err) => { console.log(err); } ) .then( () => { console.log("by Dave Lee"); }, () => { console.log("error2"); //error2 는 어떨때 출력되는거지? } ); 여기서 "error2" 는 강의중에 출력되진 않던데 언제 error2가 출력되나요 ?

setProducts(products);가 products라는 state를 변경하는 거잖아요.그런데 products는 바로 위 line에서 const로 정의되었는데 setProducts(products); 의 의미가 const 정의된 products라는 변수로 state를 변경한다는 의미인가요? 만약 state가 products가 아닌 다른 것이었다면 어떻게 되는 건가요? 정확히 어떤 과정인지 이해되지 않습니다.